/* ==========================================================================
   ACCORDION — brand layer for Contao's accordion element
   ==========================================================================
   REQUIRES contao-components/handorgel:

       composer require contao-components/handorgel

   Contao's accordion element emits handorgel__* markup and pulls that
   component's JS and base CSS from assets/handorgel. The component is NOT a
   core dependency, so without it both files 404 and the element renders as
   dead buttons with every panel expanded — it fails loudly and permanently,
   not gracefully.

   The base stylesheet is functional, not decorative: it owns the
   display/height/opacity transitions that make a panel open at all. So this
   file BRANDS it rather than replacing it — the same approach cookiebar.css
   takes, and for the same reason. Rewriting its layout means re-solving the
   open/close animation and re-breaking it on every component update.

   Every selector is scoped under .content-accordion. handorgel's own rules
   are single-class (0,1,0), so scoping puts these at 0,2,0 and they win
   regardless of which stylesheet the page happens to load last — worth doing
   because Contao injects the component CSS itself and the order is not ours
   to control.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FRAME
   -------------------------------------------------------------------------- */

.content-accordion {
    border-bottom: 1px solid var(--stroke);
    margin-bottom: var(--space-24);
}


/* --------------------------------------------------------------------------
   HEADER BUTTON
   --------------------------------------------------------------------------
   The header tag (h2–h6) is the editor's choice, so font-size is left to
   inherit from the heading rather than pinned here.

   Padding-right leaves room for the marker below. It is expressed against
   the same token as the horizontal padding so the two stay in step.
   -------------------------------------------------------------------------- */

.content-accordion .handorgel__header {
    margin: 0;
}

.content-accordion .handorgel__header__button {
    position: relative;
    border-top: 1px solid var(--stroke);
    background-color: transparent;
    padding: var(--space-16) calc(var(--space-24) * 2.2) var(--space-16) var(--space-24);
    font-family: inherit;
    font-weight: 600;
    color: var(--text);
    transition: background-color .2s ease;
}

.content-accordion .handorgel__header__button:hover {
    background-color: var(--grey-light);
}

/* A button that cannot be seen when focused is a WCAG 2.4.7 failure, and
   handorgel's base CSS strips the UA outline without replacing it. Inset so
   the ring stays visible on a full-bleed button rather than being clipped. */
.content-accordion .handorgel__header__button:focus-visible {
    outline: 2px solid var(--prime);
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   OPEN / CLOSED MARKER
   --------------------------------------------------------------------------
   handorgel keeps aria-expanded in step on the button, so the marker is
   driven off that rather than off a state class: the visual and the
   accessible state then cannot disagree, because they read the same source.

   It also means open/closed is not signalled by colour alone (WCAG 1.4.1) —
   the chevron changes direction, which does not depend on seeing colour.
   -------------------------------------------------------------------------- */

.content-accordion .handorgel__header__button::after {
    content: "";
    position: absolute;
    right: var(--space-24);
    top: 50%;
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}

.content-accordion .handorgel__header__button[aria-expanded="true"]::after {
    transform: translateY(-20%) rotate(-135deg);
}


/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */

.content-accordion .handorgel__content {
    background-color: transparent;
    border-top: 0;
}

.content-accordion .handorgel__content__inner {
    padding: 0 var(--space-24) var(--space-24);
}

/* The panel's last child would otherwise add its margin to the padding. */
.content-accordion .handorgel__content__inner > :last-child,
.content-accordion .handorgel__content__inner > :last-child > :last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------------
   Deliberately NOT `transition: none` on .handorgel__content. handorgel
   binds a transitionend listener on that element and applies its
   --opened class from the callback, so removing the transition means the
   event never fires and the panel never finishes opening. Collapsing the
   duration instead keeps the event and drops the animation.

   The button and its marker have no JS depending on them, so those can be
   turned off outright.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .content-accordion .handorgel__content,
    .content-accordion .handorgel__content__inner {
        transition-duration: 1ms;
    }

    .content-accordion .handorgel__header__button,
    .content-accordion .handorgel__header__button::after {
        transition: none;
    }
}


/* TUNING
     Panels are separated by a single rule in --stroke, with the frame closed
     by a matching line at the bottom. For a card-style accordion instead,
     give .content-accordion a border and radius and drop the border-top on
     the button for the first panel. */


/* ==========================================================================
   FAQ VARIANT  `accordion--faq`  (on the accordion element's cssID)
   ==========================================================================
   The editorial FAQ treatment: the question is a display-face statement flush with
   the container edge (no box, no indent), rules run the full width above every
   row and below the last, and the marker is a + / − rather than a caret. The
   answer is body copy capped to a comfortable measure rather than the full
   width of the question.

   Contao's accordion element takes each nested element's **sectionHeadline**
   as the toggle text (not `headline` — that renders an empty button), and
   leaves the FIRST panel open unless `closeSections` is set.

   Build: a `accordion` element with cssID `accordion--faq`, whose children are
   the panels — each a `text` with `sectionHeadline` = the question.
   ========================================================================== */
/* The closing rule is an INSET pseudo-element. In a `.band`, `.band > *` gives
   the accordion `padding-inline: var(--page-gutter)`, so a border-bottom would
   run a full gutter past the questions on both sides; `--rule-inset` is the dial.
   (The buttons' own border-top is fine: a button's box is the accordion's
   content box, and its right padding is where the +/- marker sits.) */
.content-accordion.accordion--faq {
    position: relative;
    border-bottom: 0;          /* the base frame's rule; redrawn inset below */
    margin-bottom: 0;
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: var(--rule-inset, var(--page-gutter));
        right: var(--rule-inset, var(--page-gutter));
        height: 0;
        border-top: 1px solid var(--prime);
        pointer-events: none;
    }

    .handorgel__header__button {
        /* flush with the container: the question sits on the same left edge as the
           group heading above it, so only the marker gets reserved space */
        padding: var(--space-24) calc(var(--space-24) * 1.75) var(--space-24) 0;
        border-top: 1px solid var(--prime);
        font-family: var(--type-display);
        font-weight: 500;
        font-size: clamp(1.15rem, 1.9vw, 1.6875rem);      /* ~27px */
        line-height: 1.25;
        color: var(--heading);
    }
    .handorgel__header__button:hover {
        background-color: transparent;
        color: var(--prime);
    }

    /* + / − marker, drawn as two rules so it needs no glyph or icon font. */
    .handorgel__header__button::after {
        content: "";
        right: 0;
        width: 0.62em;
        height: 0.62em;
        border: 0;
        transform: none;
        background:
            linear-gradient(var(--prime), var(--prime)) center / 100% 2px no-repeat,
            linear-gradient(var(--prime), var(--prime)) center / 2px 100% no-repeat;
        transition: background-size 0.2s ease, transform 0.2s ease;
    }
    /* open: the vertical stroke collapses, leaving a minus */
    .handorgel__header__button[aria-expanded="true"]::after {
        transform: none;
        background:
            linear-gradient(var(--prime), var(--prime)) center / 100% 2px no-repeat,
            linear-gradient(var(--prime), var(--prime)) center / 2px 0 no-repeat;
    }

    .handorgel__content__inner { padding: 0 0 var(--space-24); }
    .handorgel__content__inner p {
        max-width: 50ch;            /* the design caps the answer at half the row */
        color: var(--text-body);
        font-size: clamp(1rem, 1.25vw, 1.1875rem);        /* ~19px */
        line-height: 1.6;
    }
}