/**
 * TypePOT Content & Typography Engine (Single Source of Truth)
 * Shared between Admin Editor Canvas and Public Website Pages.
 * Scoped strictly to .typepot-content, .prose-typepot, and .typepot-editor
 * to eliminate collisions with Tailwind Base Reset and Dashboard CSS.
 */

.typepot-content,
.prose-typepot,
.typepot-editor .ce-block__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1D1D1F;
    font-size: 16px;
    line-height: 1.75;
}

/* Headings (Archivo Bold Swiss Typography) */
.typepot-content h1,
.prose-typepot h1,
.typepot-editor .ce-header[contenteditable="true"][data-placeholder]:empty::before,
.typepot-editor h1.ce-header {
    font-family: 'Archivo', sans-serif !important;
    font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #1D1D1F !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 2.25rem 0 1rem 0 !important;
}

.typepot-content h2,
.prose-typepot h2,
.typepot-editor h2.ce-header {
    font-family: 'Archivo', sans-serif !important;
    font-size: clamp(1.6rem, 2.75vw, 1.85rem) !important;
    font-weight: 700 !important;
    color: #1D1D1F !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    margin: 2rem 0 0.85rem 0 !important;
}

.typepot-content h3,
.prose-typepot h3,
.typepot-editor h3.ce-header {
    font-family: 'Archivo', sans-serif !important;
    font-size: clamp(1.3rem, 2.2vw, 1.45rem) !important;
    font-weight: 700 !important;
    color: #1D1D1F !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 0.65rem 0 !important;
}

.typepot-content h4,
.prose-typepot h4,
.typepot-editor h4.ce-header {
    font-family: 'Archivo', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1D1D1F !important;
    line-height: 1.35 !important;
    margin: 1.25rem 0 0.5rem 0 !important;
}

.typepot-content h5,
.prose-typepot h5,
.typepot-editor h5.ce-header {
    font-family: 'Archivo', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #6E6E73 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 1rem 0 0.35rem 0 !important;
}

/* Paragraphs */
.typepot-content p,
.prose-typepot p,
.typepot-editor .ce-paragraph {
    margin-bottom: 1.25rem !important;
    color: #27272A !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

/* Lists */
.typepot-content ul,
.prose-typepot ul,
.typepot-editor .cdx-list--unordered {
    list-style-type: disc !important;
    padding-left: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    color: #27272A !important;
    line-height: 1.75 !important;
}

.typepot-content ol,
.prose-typepot ol,
.typepot-editor .cdx-list--ordered {
    list-style-type: decimal !important;
    padding-left: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    color: #27272A !important;
    line-height: 1.75 !important;
}

.typepot-content li,
.prose-typepot li,
.typepot-editor .cdx-list__item {
    padding: 0.25rem 0 !important;
}

/* Quotes / Callouts */
.typepot-content blockquote,
.prose-typepot blockquote,
.typepot-editor .cdx-quote {
    border-left: 3px solid #F15A24 !important;
    padding: 1.25rem 1.5rem !important;
    margin: 1.75rem 0 !important;
    font-style: italic !important;
    color: #52525B !important;
    background: #FAFAFA !important;
    border-radius: 0 6px 6px 0 !important;
}

/* Tables (Swiss Style Hairline) */
.typepot-content table,
.prose-typepot table,
.typepot-editor .tc-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 2rem 0 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.typepot-content th,
.prose-typepot th,
.typepot-editor .tc-row--heading .tc-cell {
    background-color: #F4F4F5 !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border: 1px solid #E5E5E5 !important;
    color: #1D1D1F !important;
    text-align: left !important;
}

.typepot-content td,
.prose-typepot td,
.typepot-editor .tc-cell {
    padding: 12px 16px !important;
    border: 1px solid #E5E5E5 !important;
    font-size: 14px !important;
    color: #374151 !important;
}

/* Images & Figures */
.typepot-content figure,
.prose-typepot figure,
.typepot-editor .image-tool {
    margin: 2rem 0 !important;
}

.typepot-content img,
.prose-typepot img,
.typepot-editor .image-tool__image-picture {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.typepot-content figcaption,
.prose-typepot figcaption,
.typepot-editor .image-tool__caption {
    font-size: 12px !important;
    color: #6E6E73 !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
    font-style: italic !important;
}

/* Multi-Column Grid Layout (2-Col & 3-Col) */
.typepot-content .tp-cols,
.prose-typepot .tp-cols {
    display: grid !important;
    gap: 2rem !important;
    margin: 2rem 0 !important;
    align-items: start !important;
}

.typepot-content .tp-cols-2,
.prose-typepot .tp-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.typepot-content .tp-cols-3,
.prose-typepot .tp-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 768px) {
    .typepot-content .tp-cols-2,
    .typepot-content .tp-cols-3,
    .prose-typepot .tp-cols-2,
    .prose-typepot .tp-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Dividers */
.typepot-content hr,
.prose-typepot hr,
.typepot-editor .ce-delimiter {
    border: 0 !important;
    border-top: 1px solid #E5E5E5 !important;
    margin: 2.5rem 0 !important;
}

/* Links & Permalinks */
.typepot-content a,
.prose-typepot a {
    color: #F15A24 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

.typepot-content a:hover,
.prose-typepot a:hover {
    color: #C84313 !important;
}

/* Quill Text Alignments */
.typepot-content .ql-align-center,
.prose-typepot .ql-align-center,
.ql-align-center {
    text-align: center !important;
}

.typepot-content .ql-align-right,
.prose-typepot .ql-align-right,
.ql-align-right {
    text-align: right !important;
}

.typepot-content .ql-align-justify,
.prose-typepot .ql-align-justify,
.ql-align-justify {
    text-align: justify !important;
}