/* ========================================
   FAQ ACCORDION (shared)
   ========================================

   Moved out of premium/premium.css on 2026-09-15. The pattern was already the
   site's established FAQ shape, but it lived in a page-specific stylesheet with
   its behaviour inlined in premium.php, so nothing else could use it without
   copying both. It is now one component: this file, /js/shared/faq.js, and
   templates/partials/faq-accordion.php.

   Answers are hidden with the `hidden` attribute, NOT removed: the text stays in
   the HTML for crawlers and answer engines, which is what makes a collapsed FAQ
   safe for SEO. Do not swap this for JS-injected content. */

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid var(--colour-border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-header);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-md);
    color: var(--colour-text);
    text-align: left;
    gap: 16px;
    transition: color 0.2s ease;
}

.faq-trigger:hover {
    color: var(--colour-premium);
}

.faq-trigger:focus-visible {
    outline: 3px solid var(--colour-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--colour-text);
    opacity: 0.5;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.faq-trigger[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}

.faq-content {
    overflow: hidden;
}

.faq-content p {
    font-family: var(--font-paragraph);
    font-size: var(--text-sm);
    color: var(--colour-text);
    opacity: 0.7;
    line-height: 1.7;
    margin: 0;
    padding: 0 0 20px;
}


/* Optional heading wrapper. The WAI-ARIA accordion pattern puts the button
   INSIDE a heading so the questions still appear in the document outline; this
   neutralises the heading's own typography so it looks identical to a bare
   button. premium.php's markup has no wrapper and is unaffected. */
.faq-q {
    margin: 0;
    font: inherit;
    color: inherit;
}