/* ============================================================
   FAQ accordion
   ============================================================ */
.faq { margin-top: var(--space-section); }
.faq__title {
    color: var(--color-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--space-h2-text);
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-faq);
}
.faq__item {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-card-padding);
    text-align: left;
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    transition: color var(--transition-fast);
}
.faq__question:hover { color: var(--color-gold); }
.faq__question[aria-expanded="true"] { color: var(--color-gold); }

.faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-fast);
}
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }

.faq__answer {
    overflow: hidden;
}
.faq__answer[hidden] { display: none; }
.faq__answer-inner {
    padding: 0 var(--space-card-padding) var(--space-card-padding);
    color: var(--color-text-muted);
    font-size: 0.97rem;
}
.faq__answer-inner p { margin-bottom: var(--space-paragraph); }
.faq__answer-inner p:last-child { margin-bottom: 0; }

/* animation when opening */
body.js .faq__answer:not([hidden]) {
    animation: faqOpen var(--transition-base);
}
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.js .faq__answer:not([hidden]) { animation: none; }
}