/*
   WUME — FAQ page Stage-2 DESKTOP layout overrides.

   SCOPE: every rule is prefixed `body.is-faq-page` AND lives inside the single
   `@media (min-width: 992px)` block below, so the synced MOBILE view (<992px —
   the current single-column stacked accordion) is left completely unchanged.
   This file is loaded only by templates/pages/faq.html.twig (block head).

   Figma ref: figma-final/screens/desktop/faq.png (1440 wide). Two-column
   layout — left sticky category nav-rail (square markers + active filled),
   right 560px borderless accordion with +/- toggles + dividers, serif
   category headings, left-aligned serif "FAQ" hero.

   V01 — initial Stage-2 desktop layout.
   V02 — Stage-2b MOBILE block appended (@max-width 991.98px): the figma mobile
         FAQ uses the desktop treatment single-column — left serif "FAQ" hero,
         vertical square-marker category list, serif headings, borderless +/-
         accordion. Desktop (@min-width 992px) untouched.
*/

@media (min-width: 992px) {

    /* ── Hero: left-aligned plain serif "FAQ" (override the boxed-pill base
       .wume-hero-title from wume.css). Mirrors the body.is-home-page /
       body.is-care-page left-hero pattern. ── */
    body.is-faq-page .wume-hero {
        text-align: left;
        padding: 96px 0 24px;
    }
    body.is-faq-page .wume-hero-title {
        display: block;
        width: auto;
        height: auto;
        background: transparent;
        border: 0;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 50px;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
        margin-bottom: 0;
    }

    /* ── 2-column grid: left ~190px sticky nav-rail + right 560px accordion.
       The gap absorbs the figma x=227..727 whitespace between rail and
       accordion column. ── */
    body.is-faq-page .wume-faq-layout {
        display: grid;
        grid-template-columns: 190px 1fr;
        gap: 0;
        align-items: start;
    }

    /* Left rail sticks while the long right column scrolls. */
    body.is-faq-page .wume-faq-rail {
        position: sticky;
        top: 120px;
    }

    /* ── Left jump-links → vertical category rail with square markers.
       Override the shared horizontal underline cluster (wume.css). ── */
    body.is-faq-page .wume-faq-rail .wume-jump-links {
        margin-top: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link {
        display: flex;
        align-items: center;
        gap: 14px;
        border-bottom: 0;
        padding-bottom: 0;
        color: var(--wume-black);
    }
    /* Hollow square marker. */
    body.is-faq-page .wume-faq-rail .wume-jump-link::before {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border: 1px solid var(--wume-black);
        background: transparent;
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link:hover {
        border-bottom: 0;
    }
    /* Active item: filled square + medium weight (figma "ABOUT US"). */
    body.is-faq-page .wume-faq-rail .wume-jump-link.is-active::before {
        background: var(--wume-black);
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link.is-active {
        font-weight: var(--wume-w-sub);
    }

    /* ── Right accordion column ── */
    body.is-faq-page .wume-faq-content {
        min-width: 0;
        max-width: 560px;
        margin-left: auto;
        margin-right: 74px;
    }

    /* ── Category heading → large mixed-case serif (figma "About Us"). Override
       the uppercase-caps + bottom-rule base (.wume-faq-category-heading). ── */
    body.is-faq-page .wume-faq-category {
        margin-bottom: 64px;
    }
    body.is-faq-page .wume-faq-category-heading {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.8rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 8px;
    }

    /* ── Accordion items → borderless rows with a divider under each.
       Override the boxed-item + cream-button base (.wume-pathway-accordion). ── */
    body.is-faq-page .wume-pathway-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid var(--wume-sand);
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }

    /* Borderless transparent button; uppercase Q left, room for the +/- glyph
       on the far right. Row pitch ~65px via vertical padding. */
    body.is-faq-page .wume-pathway-accordion .accordion-button {
        position: relative;
        background: transparent;
        color: var(--wume-black);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        padding: 21px 40px 21px 0;
        box-shadow: none;
    }
    /* Open state keeps the borderless transparent look (no sage fill). */
    body.is-faq-page .wume-pathway-accordion .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--wume-black);
        box-shadow: none;
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button:focus {
        box-shadow: none;
        outline: none;
    }

    /* Swap Bootstrap's chevron background-image for a thin +/- glyph far right. */
    body.is-faq-page .wume-pathway-accordion .accordion-button::after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
        background-image: none;
        content: "+";
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--wume-black);
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button:not(.collapsed)::after {
        background-image: none;
        transform: translateY(-50%);
        content: "\2212"; /* minus sign */
    }

    /* Open body: transparent, indented to align with the figma answer column. */
    body.is-faq-page .wume-pathway-accordion .accordion-body {
        background: transparent;
        color: var(--wume-text-on-cream);
        line-height: var(--wume-lead-body);
        padding: 4px 56px 24px 56px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   STAGE-2b — MOBILE (≤991.98px, target 393px). figma-final/screens/mobile/
   faq.png (single-screen crop). The figma mobile FAQ is the SAME treatment as
   desktop but single-column: left-aligned serif "FAQ" hero, a VERTICAL category
   list with square markers at the top, serif mixed-case category headings, and
   borderless +/- accordion rows. (The shared wume.css <992 fallback otherwise
   renders a centered hero + horizontal jump-link cluster + boxed accordion.)
   Scoped body.is-faq-page; the desktop @min-width:992px block above is untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* Hero: left-aligned plain serif "FAQ" (override the centered boxed-pill
       base .wume-hero-title). ~38px, smaller than the 50px desktop. */
    body.is-faq-page .wume-hero {
        text-align: left;
        padding: 48px 0 28px;
    }
    body.is-faq-page .wume-hero-title {
        display: block;
        width: auto;
        height: auto;
        background: transparent;
        border: 0;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 2.4rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
        margin-bottom: 0;
    }

    /* Single column: the rail stacks above the accordion (default block). */
    body.is-faq-page .wume-faq-layout {
        display: block;
    }

    /* Jump-links → vertical category list with square markers (figma top list).
       Override the shared horizontal underline cluster from wume.css. */
    body.is-faq-page .wume-faq-rail .wume-jump-links {
        margin: 0 0 40px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link {
        display: flex;
        align-items: center;
        gap: 14px;
        border-bottom: 0;
        padding-bottom: 0;
        color: var(--wume-black);
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link::before {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border: 1px solid var(--wume-black);
        background: transparent;
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link:hover {
        border-bottom: 0;
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link.is-active::before {
        background: var(--wume-black);
    }
    body.is-faq-page .wume-faq-rail .wume-jump-link.is-active {
        font-weight: var(--wume-w-sub);
    }

    /* Category heading → large mixed-case serif (figma "About Us"); kill the
       caps + bottom-rule base. */
    body.is-faq-page .wume-faq-category {
        margin-bottom: 44px;
    }
    body.is-faq-page .wume-faq-category-heading {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.5rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    /* Accordion → borderless rows with a divider + far-right +/- glyph. Override
       the boxed-item + cream-button base (.wume-pathway-accordion). */
    body.is-faq-page .wume-pathway-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid var(--wume-sand);
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button {
        position: relative;
        background: transparent;
        color: var(--wume-black);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        padding: 18px 34px 18px 0;
        box-shadow: none;
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--wume-black);
        box-shadow: none;
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button:focus {
        box-shadow: none;
        outline: none;
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button::after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
        background-image: none;
        content: "+";
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--wume-black);
    }
    body.is-faq-page .wume-pathway-accordion .accordion-button:not(.collapsed)::after {
        background-image: none;
        transform: translateY(-50%);
        content: "\2212";
    }
    body.is-faq-page .wume-pathway-accordion .accordion-body {
        background: transparent;
        color: var(--wume-text-on-cream);
        line-height: var(--wume-lead-body);
        padding: 2px 0 18px 0;
    }
}