/*
 * FAQ accordion presentation. Pairs with js/faq.js, which owns the open/close
 * animation and the one-at-a-time behaviour.
 *
 * Only the bits the animation needs live here; the FAQ's colours, borders and
 * type stay with the page that renders it, so this file can be dropped onto any
 * page with a .seo-faq block without changing how it looks.
 */

/* The answer panel is what gets animated, so it must not carry its own margin
   collapse or overflow into the measurement. */
.seo-faq details > summary + * {
    overflow: hidden;
}

/* The marker turns as the panel opens, so the state change reads as motion
   rather than a glyph popping from + to -. */
.seo-faq details summary::after {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    display: inline-block;
}

.seo-faq details.is-open summary::after {
    transform: rotate(180deg);
}

/* Keyboard users need to see which question has focus. */
.seo-faq details summary:focus-visible {
    outline: 2px solid var(--gold, #c9a227);
    outline-offset: 4px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .seo-faq details summary::after {
        transition: none;
    }
}