/* ============================================================================================
 * sections-local.css — styles for the general-purpose page sections.
 *
 * OURS, not a copy of the approved build (hence `-local`, which ApprovedStylesheetFingerprintTest
 * excludes). The approved build has no general "rich text" or "table" section, so there is nothing
 * to port; where it does have a look for the same thing, that look is reproduced here rather than
 * invented — tables follow `.faq-table` (styles.css, ported from reference css/public/faq.css).
 * The declarations are repeated rather than shared by editing the ported selector list, so the
 * ported rules stay exactly as they were ported.
 *
 * Loaded by layouts/app.blade.php after styles.css. Unlayered, so it outranks Tailwind's preflight
 * (which sits in `@layer base`) regardless of load order.
 *
 * Plan: docs/plans/page-sections-implementation-plan.md
 * ========================================================================================== */

/* ── Prose: editor-written HTML in Rich Text and Two Column ─────────────────────────────── */

.cms-prose {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
}

.cms-prose > * + * {
    margin-top: 1em;
}

.cms-prose h2,
.cms-prose h3,
.cms-prose h4 {
    color: var(--color-text-primary);
    line-height: 1.25;
}

.cms-prose h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

.cms-prose h3 {
    font-size: clamp(18px, 1.7vw, 22px);
}

.cms-prose h4 {
    font-size: 17px;
}

.cms-prose > h2:not(:first-child),
.cms-prose > h3:not(:first-child),
.cms-prose > h4:not(:first-child) {
    margin-top: 1.6em;
}

.cms-prose ul {
    list-style: disc;
    padding-left: 1.4em;
}

.cms-prose ol {
    list-style: decimal;
    padding-left: 1.4em;
}

.cms-prose li + li {
    margin-top: 0.35em;
}

.cms-prose li > ul,
.cms-prose li > ol {
    margin-top: 0.35em;
}

.cms-prose strong,
.cms-prose b {
    color: var(--color-text-primary);
    font-weight: 700;
}

.cms-prose a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cms-prose a:hover {
    color: var(--color-brand-mid);
}

.cms-prose blockquote {
    border-left: 3px solid var(--color-brand-primary);
    color: var(--color-text-primary);
    font-style: italic;
    padding-left: 1em;
}

.cms-prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 2em 0;
}

.cms-prose img {
    border-radius: 8px;
    height: auto;
    max-width: 100%;
}

/* ── Tables: in prose, and (Phase 1) the Table section ─────────────────────────────────────
 * Same look as the approved `.faq-table`: navy header, zebra rows, horizontal scroll on a phone. */

.cms-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 8px 0 4px;
    overflow-x: auto;
}

.cms-prose table,
.cms-table {
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: clamp(12px, 1vw, 14px);
    min-width: 520px;
    width: 100%;
}

.cms-prose caption,
.cms-table caption {
    caption-side: top;
    color: var(--color-text-primary);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
}

.cms-prose thead,
.cms-table thead {
    background: var(--color-brand-primary);
    color: #fff;
}

.cms-prose th,
.cms-prose td,
.cms-table th,
.cms-table td {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    line-height: 1.5;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.cms-prose thead th,
.cms-table thead th,
/* The rich-text editor writes no <thead>: its header row is <th> cells in the first body row. */
.cms-prose table > tbody:first-child > tr:first-child > th {
    background: var(--color-brand-primary);
    color: #fff;
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cms-prose tbody th,
.cms-table tbody th {
    color: var(--color-text-primary);
    font-weight: 600;
}

.cms-prose tbody tr:nth-child(even),
.cms-table tbody tr:nth-child(even) {
    background: #fafafb;
}

.cms-prose tbody tr:last-child > *,
.cms-table tbody tr:last-child > * {
    border-bottom: 0;
}

/* A cell holding a paragraph (the rich-text editor writes one per cell) should not gain the
   paragraph spacing above. */
.cms-prose td > p,
.cms-prose th > p {
    margin: 0;
}