/* ═══════════════════════════════════════════════════════════════════════════
   apex-faq.css — THE site's one FAQ component.

   Critique item 1a, 2026-09-04. Eleven FAQ implementations existed (abt, aic,
   ava, csd, hm, hub, pst3, saa, set, waa, wfa), each with its own markup,
   chevron, spacing and open/close motion, which is a large part of why the
   pages read as separate sites. This replaces all eleven.

   Debuted on the AI Consulting page. Rolls out page by page after approval.

   HOW IT WORKS
   - <details>/<summary>, so every answer is readable and openable with no JS.
   - The open/close height is animated with grid-template-rows 0fr -> 1fr,
     which is the only technique that animates to intrinsic height without
     measuring in script.
   - Colour comes from four custom properties. A page tints the component by
     setting them on any ancestor; it never forks the rules. Defaults below
     are the light system's.

   DELIBERATELY NOT HERE
   - No heading element inside the component. main.css forces Source Serif 4
     on every h1/h2/h3, so a heading here would silently leave the sans and a
     page sheet would have to fight it back. Questions live in <summary>.
   - No uppercase, no letter-spacing. Banned site-wide 2026-08-25.
   ═══════════════════════════════════════════════════════════════════════════ */

.apex-faq {
    /* a page overrides these four and nothing else */
    --faq-line:   rgba(19, 30, 52, .14);
    --faq-ink:    var(--ink, #101A2C);
    --faq-body:   var(--body, #46536B);
    --faq-accent: var(--brand, #22458A);
    --faq-ease:   cubic-bezier(.22, .61, .36, 1);

    display: grid;

    /* ★ The measure is the component's, not the page's. Dropped into the
       full-width shells on the homepage, About, Custom Software and Workflow
       Automation, an uncapped row ran 1200px and left the chevron stranded
       505-744px from the end of the question, against 162px on the pilot the
       owner signed off. A cap is also the only way eleven FAQs in eleven
       different containers read as one component. Pages in a narrower column
       (AI Consulting, SEO Authoring) simply never reach it. */
    max-width: 54rem;
}

/* ── the row ─────────────────────────────────────────────────────────────── */

.apex-faq__item {
    border-top: 1px solid var(--faq-line);
}
.apex-faq__item:last-child {
    border-bottom: 1px solid var(--faq-line);
}

.apex-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 0;
    cursor: pointer;
    list-style: none;
    font-family: inherit;
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--faq-ink);
    text-wrap: pretty;
    transition: color .2s;
}
/* Safari and older Chrome each need their own marker kill */
.apex-faq__item > summary::-webkit-details-marker { display: none }
.apex-faq__item > summary::marker { content: "" }

.apex-faq__item > summary:hover { color: var(--faq-accent) }

.apex-faq__item > summary:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── the chevron ─────────────────────────────────────────────────────────── */

.apex-faq__chev {
    flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--faq-line);
    color: var(--faq-accent);
    transition: transform .35s var(--faq-ease), border-color .2s, background-color .2s;
}
.apex-faq__chev svg { width: 13px; height: 13px }

.apex-faq__item > summary:hover .apex-faq__chev {
    border-color: color-mix(in srgb, var(--faq-accent) 45%, transparent);
}
.apex-faq__item[open] > summary .apex-faq__chev {
    transform: rotate(180deg);
    border-color: color-mix(in srgb, var(--faq-accent) 45%, transparent);
}

/* ── the answer ──────────────────────────────────────────────────────────── */

.apex-faq__wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--faq-ease);
}
.apex-faq__item[open] .apex-faq__wrap { grid-template-rows: 1fr }

/* the clip is what 0fr collapses; it must own the overflow, not the wrap */
.apex-faq__clip { overflow: hidden }

/* two classes deep on purpose: a page's own `.x-main p` reset is (0,1,1) and
   would otherwise beat a single-class margin here. See the CSS reset
   specificity trap in DESIGN.md. */
.apex-faq .apex-faq__a {
    margin: 0;
    padding: 0 clamp(1.5rem, 4vw, 3rem) 1.4rem 0;
    max-width: 40rem;
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--faq-body);
    text-wrap: pretty;
}
.apex-faq .apex-faq__a + .apex-faq__a { padding-top: .9rem }
.apex-faq .apex-faq__a a {
    color: var(--faq-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

/* ── motion off ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .apex-faq__wrap { transition: none }
    .apex-faq__chev { transition: none }
}