/* =================================================================== FAQ section css ===================================================================

   Measured off `faq + footer .pdf`, one 1920 x 1145 artboard. Every number
   below came out of that file's content stream (ink extents, not screenshots):

     h2            x100, three lines, 60px pitch  -> the global h2 (--f60)
     right column  starts x925; rules run x925 -> 1778 (853px)
     question      30px Archivo 600            (cap ink 22.05 / 27.15 with descender)
     answer        20px Archivo 400 on a 30px leading, ink @ .8
     rule          1px, ink @ .212             -> --line
     item pitch    120px, rules between items only (6 rules, 7 items)

   The artboard paints NO background behind this section, so it sits on the
   page colour — the same --cream as .request directly above it. It is still
   painted here rather than left transparent, so the band carries .is-band and
   the footer can sit flush against it (see footer.css: the stair climbs 80px
   into this section's bottom padding).
   =================================================================== */
.faq {
    padding-block:0 var(--sectionGap);
    background: var(--cream);

    /* Measured split: the container runs 100 -> 1820 and the right column
       starts at x925, i.e. 825 in. 825 + 895 = 1720, so the columns are
       written as those two shares and the split lands on the pixel. */
    & .faq__grid {
        display: grid;
        grid-template-columns: minmax(0, 825fr) minmax(0, 895fr);
    }

    /* No title CSS, and none is needed: the artboard sets this h2 at 60px and
       vendor.css already renders h2 at --f60. Confirmed by width — "Questions"
       measures 277.08px in the PDF against 272.89px as rendered at 60px, and
       363.84px at 80px. (CLAUDE.md 3.1 / rule 14.) */

    /* measured: the rules stop at x1778, 42px short of the container edge */
    & .faq__list { max-width: 853px; }

    /* Rules sit BETWEEN items — the last question has none. 40/45 padding
       reproduces the measured 48.6px baseline-to-rule and 48.3px
       rule-to-next-cap; the first item drops its top padding so its question
       lines up with the h2's first line, exactly as the artboard has it. */
    & .faq__item {
        padding-block: var(--sp40) var(--sp40);

        &:first-child { padding-block-start: 0; }
        & + .faq__item { border-block-start: 1px solid var(--line); }
    }

    /* 30px on the body face at SemiBold — the same treatment as h5, written
       with the tokens rather than as a new size. --heading is the role alias
       every other heading on a light band already uses, and in the live
       vendor.css it resolves to the artboard's own ink.

       It is a <button> now, so the UA's own font, padding, border and
       background are all reset back to the artboard's row. The whole row is
       the hit area — the icon is inside it, not a separate control. */
    & .faq__question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp20);
        width: 100%;
        padding: 0;
        background: none;
        border: 0;
        font-family: var(--font-body);
        font-size: var(--f30);
        font-weight: var(--fw-heading);
        line-height: var(--lhTight);
        color: var(--heading);
        text-align: left;
        cursor: pointer;
        transition: var(--transition);

        /* the open question is --primary in the reference */
        &[aria-expanded="true"] { color: var(--primary); }

        &:hover { color: var(--primary); }

        &:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 4px;
        }
    }

    /* One icon, two states: the bar stays, the upright is dropped once the
       panel is open, so + becomes − without a second SVG. Always --primary,
       whatever the question's own colour is doing. */
    & .faq__icon {
        flex: none;
        color: var(--primary);
    }

    & .faq__icon-bar {
        transform-origin: center;
        transition: var(--ease-out);
    }

    & [aria-expanded="true"] .faq__icon-bar {
        opacity: 0;
        transform: rotate(90deg);
    }

    /* Measured 760px: the artboard breaks this copy after "…are doing", which
       needs a measure of at least 733px and under 808px. */
    & .faq__answer {
        max-width: 760px;

        /* The panel eases open and closed instead of snapping, and it does it
           without measuring anything in JS: the <dd> is a one-row grid whose
           row goes 0fr -> 1fr, which is the one way to transition to a content
           height the browser has to work out for itself. The child clips
           itself, so there is nothing to see at 0fr.

           `visibility` is what actually hides it — not `display`, which cannot
           be transitioned — so the collapsed copy stays out of the
           accessibility tree and out of the tab order. It is transitioned too,
           so it flips to hidden only once the row has finished closing.

           Visibility is driven off the trigger's own aria-expanded rather than
           off a class, so the CSS cannot disagree with what the button reports
           to a screen reader. That is also why the list carries
           data-accordion-css: without it vendor.js toggles the panel's
           `hidden`, whose UA rule is `display: none !important` — it beats
           anything written here and no transition survives it. With it, the
           panel stays in flow and the hiding is this block's job.

           All of it is gated behind html.js (set by the inline head script) so
           that with JS off — when nothing can open a panel — every answer
           simply prints, the way it did before the list became an accordion. */
        html.js & {
            display: grid;
            grid-template-rows: 0fr;
            visibility: hidden;
            transition: grid-template-rows var(--ease-out), visibility var(--ease-out);
        }

        /* Archivo 400, not the global --fw-body 500. Measured, and not a
           rounding call: the first line comes to 733.08px at 400 against
           732.97px in the PDF, and 747.92px at 500.

           The measured 15px gap under the question is padding on the copy, so
           it sits INSIDE the clipped box and collapses with it. As padding on
           the grid item it would survive a 0fr row — padding is outside the
           track — and leave a 15px stub under every closed question. */
        & p {
            padding-block-start: var(--sp15);
            font-weight: 400;
        }
    }

    /* The clip is its own element rather than the copy itself, because the grid
       item is what a 0fr row collapses and padding sits OUTSIDE the track. With
       the padded <p> playing that part, every closed question kept a 15px stub
       under it — measured. An unpadded wrapper collapses to nothing. */
    & .faq__answer-inner {
        min-height: 0;
        overflow: hidden;
    }

    & .faq__item:has([aria-expanded="true"]) .faq__answer {
        grid-template-rows: 1fr;
        visibility: visible;
    }
}

/* Motion is an ease on a height and a 90deg turn on 5px of icon — small, but
   it is still motion, and unlike MotionFlow this is hand-written, so it needs
   its own guard (CLAUDE.md 8). Everything still opens and closes; it just
   arrives instantly. */
@media (prefers-reduced-motion: reduce) {
    .faq {
        & .faq__answer {
            html.js & { transition: none; }
        }

        & .faq__icon-bar { transition: none; }
    }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 1199.98px) {
    .faq {
        & .faq__list { max-width: none; }
    }
}

@media (max-width: 991.98px) {
    .faq {
        & .faq__grid {
            grid-template-columns: 1fr;
            gap: var(--sp100);
        }

        /* the title block owns the gap once the columns stack */
        & .section-title-wrap { margin-bottom: 0; }
    }
}

@media (max-width: 575.98px) {
    .faq {
        & .faq__answer { max-width: none; }
    }
}