/* ==========================================================================
   rich-content.css — reusable rich-content components for author-written HTML
   --------------------------------------------------------------------------
   Used across all three rich-content surfaces:
     - FAQ answers      (.faq-detail-answer.rich-content)
     - Blog post bodies (.bd-content.rich-content)
     - CMS sections     (.cms-content.rich-content)

   Two layers:
     1. Component classes (.rc-*) are GLOBAL and self-hooking — they style
        wherever an author writes the class, no wrapper required.
     2. Native-tag prose defaults (h2/h3/strong/hr/mark) are scoped under
        .rich-content so they never restyle unrelated page chrome.

   Apple-minimalist: whitespace, hairline borders, restrained colour, mono
   eyebrow labels, lime (--accent) for emphasis. Dark mode via body.dark.

   ⚠️  KEEP THE CLASS LIST IN SYNC with RICH_CONTENT_COMPONENTS in mcp_server.py
   ========================================================================== */

/* --------------------------------------------------------------------------
   Native-tag prose defaults (scoped to .rich-content)
   -------------------------------------------------------------------------- */
.rich-content h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem; font-weight: 700; line-height: 1.3;
    color: var(--page-text, #0F1219);
    margin: 40px 0 14px;
}
.rich-content h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem; font-weight: 700; line-height: 1.35;
    color: var(--page-text, #0F1219);
    margin: 28px 0 10px;
}
.rich-content h2:first-child,
.rich-content h3:first-child { margin-top: 0; }

.rich-content strong { font-weight: 700; color: var(--page-text, #0F1219); }

.rich-content hr {
    border: none; height: 1px;
    background: var(--stroke, #ECEEF2);
    margin: 36px 0;
}
body.dark .rich-content hr { background: rgba(255, 255, 255, 0.10); }

/* Highlight — native <mark> and the .rc-mark alias share styling */
.rich-content mark,
.rc-mark {
    background: rgba(184, 230, 0, 0.35);
    color: inherit;
    padding: 0.05em 0.28em; border-radius: 4px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.dark .rich-content mark,
body.dark .rc-mark { background: rgba(184, 230, 0, 0.22); }

/* --------------------------------------------------------------------------
   Shared eyebrow label (KORT / STAPPENPLAN / TIP / …)
   -------------------------------------------------------------------------- */
.rc-kort-label,
.rc-steps-label,
.rc-tip-label,
.rc-example-label {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600; color: var(--text-muted, #6E7892);
}

/* --------------------------------------------------------------------------
   .rc-kort — short summary, set off by top + bottom hairlines (no card / fill)
   -------------------------------------------------------------------------- */
.rc-kort {
    margin: 28px 0; padding: 22px 0;
    border-top: 1px solid var(--stroke, #ECEEF2);
    border-bottom: 1px solid var(--stroke, #ECEEF2);
}
.rc-kort-label { margin-bottom: 14px; }
.rc-kort ul { margin: 0; padding: 0; list-style: none; }
.rc-kort li {
    position: relative; padding-left: 22px; margin: 0 0 12px;
    font-size: 1rem; line-height: 1.55;
    color: var(--text-secondary, #434D65);
}
.rc-kort li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-300, #A8AEC0);
}
.rc-kort li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   .rc-steps — numbered step plan (CSS counter, optional trailing .rc-cta)
   -------------------------------------------------------------------------- */
.rc-steps { margin: 0 0 32px; }
.rc-steps-label { margin-bottom: 16px; }
.rc-steps ol { counter-reset: rcstep; list-style: none; margin: 0; padding: 0; }
.rc-steps li {
    counter-increment: rcstep;
    padding-left: 40px;
    margin: 0 0 16px;
    line-height: 1.55;
    color: var(--text-secondary, #434D65);
}
/* Hanging inline-block number: it joins the first line, so it sits exactly on the
   step text's baseline (no absolute positioning / vertical drift). */
.rc-steps li::before {
    content: counter(rcstep, decimal-leading-zero);
    display: inline-block;
    width: 40px; margin-left: -40px;
    font-family: var(--font-mono, monospace);
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted, #6E7892);
}
.rc-steps li:last-of-type { margin-bottom: 0; }
.rc-steps .rc-cta { margin-top: 22px; }

/* --------------------------------------------------------------------------
   .rc-cta — lime pill call-to-action link
   The trailing selectors raise specificity above the generic answer/body
   link-colour rules (.faq-detail-answer a, .bd-content a) so the pill text
   stays ink, not accent.
   -------------------------------------------------------------------------- */
.rc-cta,
.rich-content a.rc-cta,
.faq-detail-answer a.rc-cta,
.bd-content a.rc-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    background: var(--accent, #b8e600);
    color: var(--ink-900, #0F1219) !important;
    font-weight: 600; font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s;
}
.rc-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(184, 230, 0, 0.35);
}

/* --------------------------------------------------------------------------
   .rc-checklist — items with lime rounded-square check marks
   -------------------------------------------------------------------------- */
.rc-checklist { list-style: none; margin: 0 0 24px; padding: 0; }
.rc-checklist li {
    position: relative; padding-left: 30px; margin: 0 0 10px;
    font-size: 1rem; line-height: 1.5;
    color: var(--text-secondary, #434D65);
}
.rc-checklist li::before {
    content: ""; position: absolute; left: 0; top: 0.15em;
    width: 18px; height: 18px; border-radius: 5px;
    background: var(--accent, #b8e600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.rc-checklist li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   .rc-example — two-column bad/good comparison
   Open editorial layout: a hairline rule on top, a hairline divider between
   the columns, and an auto ✕ / ✓ before each label. No card, no fill.
   -------------------------------------------------------------------------- */
.rc-example {
    display: grid; grid-template-columns: 1fr 1fr;
    margin: 0 0 28px;
    padding-top: 20px;
    border-top: 1px solid var(--stroke, #ECEEF2);
}
.rc-example-bad { padding-right: 32px; }
.rc-example-good { padding-left: 32px; border-left: 1px solid var(--stroke, #ECEEF2); }
.rc-example-label {
    display: inline-flex; align-items: baseline; gap: 8px;
    margin-bottom: 12px;
    color: var(--text-muted, #6E7892);
}
.rc-example-bad .rc-example-label::before { content: "\00D7"; font-size: 0.95em; }   /* ✕ */
.rc-example-good .rc-example-label::before { content: "\2713"; font-size: 0.95em; }   /* ✓ */
.rc-example p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: var(--text-muted, #6E7892); }
.rc-example-good p:first-of-type { color: var(--page-text, #0F1219); font-weight: 500; }
.rc-example p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
    .rc-example { grid-template-columns: 1fr; }
    .rc-example-bad { padding-right: 0; }
    .rc-example-good {
        padding-left: 0; padding-top: 20px; margin-top: 20px;
        border-left: none; border-top: 1px solid var(--stroke, #ECEEF2);
    }
}

/* --------------------------------------------------------------------------
   .rc-tip — left-accent callout box
   -------------------------------------------------------------------------- */
.rc-tip {
    margin: 0 0 28px; padding: 16px 20px;
    border: 1px solid var(--stroke, #ECEEF2);
    border-left: 3px solid var(--accent, #b8e600);
    border-radius: 12px;
    background: var(--ink-100, #F4F4F4);
}
.rc-tip-label { margin-bottom: 6px; }
.rc-tip p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text-secondary, #434D65); }
.rc-tip p + p { margin-top: 10px; }
body.dark .rc-tip { background: rgba(184, 230, 0, 0.06); }

/* --------------------------------------------------------------------------
   .rc-quote — blockquote with optional author + role footer
   -------------------------------------------------------------------------- */
.rc-quote {
    margin: 0 0 28px; padding: 4px 0 4px 22px;
    border-left: 2px solid var(--accent, #b8e600);
}
.rc-quote p {
    margin: 0 0 12px;
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem; line-height: 1.45; font-weight: 600;
    color: var(--page-text, #0F1219);
}
.rc-quote p:last-child { margin-bottom: 0; }
.rc-quote footer { display: flex; flex-direction: column; gap: 2px; }
.rc-quote-author { font-weight: 600; font-size: 0.92rem; color: var(--page-text, #2A3140); }
.rc-quote-role {
    font-family: var(--font-mono, monospace);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted, #6E7892);
}