/**
 * Prose — Shared rich-text content styling
 * Applied to any area rendering the_content() or WYSIWYG output.
 * Figma reference: Privacy Policy page (902:12775)
 *
 * Used by: page.php (.entry-content), single.php (.single-post__body),
 *          single-webinar.php (.single-webinar__body), single-case-study.php
 */

/* ============================================
   BASE TEXT
   ============================================ */
.prose {
    font-family: "Funnel Sans", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 160%;
    color: var(--Primary-colors-Text, #000);
}

/* ============================================
   HEADINGS
   ============================================ */
.prose h2 {
    font-family: "Funnel Sans", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.11px;
    color: var(--color-primary, #7336E3);
    margin: 32px 0 16px;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    font-family: "Funnel Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
    color: var(--Primary-colors-Text, #000);
    margin: 24px 0 12px;
}

.prose h3:first-child {
    margin-top: 0;
}

.prose h4 {
    font-family: "Funnel Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
    color: var(--Primary-colors-Text, #000);
    margin: 20px 0 8px;
}

/* ============================================
   PARAGRAPHS
   ============================================ */
.prose p {
    margin: 0 0 16px;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* ============================================
   LINKS — fixes invisible links everywhere
   ============================================ */
.prose a:not(.btn) {
    color: var(--color-primary, #7336E3);
    text-decoration: underline;
}

.prose a:not(.btn):hover {
    color: var(--color-primary-dark, #5C2BB6);
}

/* ============================================
   LISTS
   ============================================ */
.prose ul,
.prose ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.prose li {
    font-family: "Funnel Sans", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 160%;
    color: var(--Primary-colors-Text, #000);
    margin-bottom: 8px;
}

.prose li:last-child {
    margin-bottom: 0;
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */
.prose blockquote {
    border-left: 4px solid var(--color-primary, #7336E3);
    padding-left: 24px;
    margin: 24px 0;
    font-style: italic;
}

/* ============================================
   IMAGES
   ============================================ */
.prose figure {
    max-width: 100%;
    margin: 24px auto;
    text-align: center;
}

.prose figure figcaption {
    font-size: 14px;
    color: #4E4C56;
    margin-top: 8px;
}

.prose .wp-caption {
    max-width: 100%;
    margin: 24px auto;
    text-align: center;
}

.prose .wp-caption-text {
    font-size: 14px;
    color: #4E4C56;
    margin-top: 8px;
}

.prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px auto;
}

.prose figure img {
    margin: 0 auto;
}

/* ============================================
   EMBEDS / IFRAMES
   ============================================ */
.prose iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ============================================
   CODE
   ============================================ */
.prose pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 16px;
    background: #f5f5f6;
    border-radius: 8px;
    margin: 24px 0;
}

.prose code {
    font-family: monospace;
    font-size: 14px;
}

/* ============================================
   TABLES
   ============================================ */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.prose th,
.prose td {
    padding: 12px 16px;
    border: 1px solid #E6E3EB;
    text-align: left;
    font-size: 16px;
    line-height: 150%;
}

.prose th {
    font-weight: 600;
    background: #FAF8FD;
}

/* ============================================
   HORIZONTAL RULE
   ============================================ */
.prose hr {
    border: none;
    border-top: 1px solid #E6E3EB;
    margin: 32px 0;
}

/* ============================================
   PAGE CONTENT LAYOUT (page.php)
   Figma: 860px content column, 80px top padding
   ============================================ */
.page-content {
    padding: 80px 0 60px;
}

.page-content__title {
    font-family: "Funnel Sans", sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.19px;
    color: var(--color-purple-dark, #1D004B);
    margin: 0 0 48px;
}

.page-content__body {
    max-width: 860px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .prose {
        font-size: 16px;
    }

    .prose h2 {
        font-size: 20px;
    }

    .prose li {
        font-size: 16px;
    }

    .prose img {
        margin: 16px 0;
    }

    .page-content {
        padding: 40px 0;
    }

    .page-content__title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .page-content__body {
        max-width: 100%;
    }
}