/* ==========================================================================
   FAQ page (faq.php / templates/sections/faq_accordion.php)
   Tokens only (tokens.css); builds on .ab-accordion / .ab-icon-badge.
   ========================================================================== */

.faq-page { background: linear-gradient(180deg, var(--ab-white) 0%, var(--ab-gray-1) 100%); }

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
@media (min-width: 992px) {
    .faq-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* ---------- Category navigation ---------- */
.faq-nav__title { display: block; margin-bottom: 12px; }
.faq-nav__list { list-style: none; margin: 0; padding: 0; position: relative; }

.faq-nav__link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 8px 12px;
    border-radius: var(--ab-radius);
    color: var(--ab-text-soft); text-decoration: none;
    font: 500 0.9375rem/1.3 var(--ab-font);
    transition: background-color .2s var(--ab-ease), color .2s var(--ab-ease);
}
.faq-nav__icon {
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ab-primary-50); color: var(--ab-primary); font-size: 1rem;
    transition: background-color .2s var(--ab-ease), color .2s var(--ab-ease);
}
.faq-nav__label { flex: 1 1 auto; min-width: 0; }
.faq-nav__count {
    flex: none; min-width: 26px; padding: 2px 8px; border-radius: var(--ab-radius-pill);
    background: var(--ab-gray-1); border: 1px solid var(--ab-gray-2);
    color: var(--ab-text-muted); font: 600 0.75rem/1.4 var(--ab-font); text-align: center;
}
.faq-nav__link:hover { background: var(--ab-primary-50); color: var(--ab-primary-dark); }
.faq-nav__link[aria-current] { background: var(--ab-primary-50); color: var(--ab-primary-dark); font-weight: 600; }
.faq-nav__link[aria-current] .faq-nav__icon { background: var(--ab-primary); color: var(--ab-white); }
.faq-nav__link[aria-current] .faq-nav__count { background: var(--ab-white); border-color: var(--ab-primary-100); color: var(--ab-primary); }

.faq-nav__help {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ab-gray-2);
    font: var(--ab-small); color: var(--ab-text-muted);
}
.faq-nav__help p { margin: 0 0 6px; }

@media (min-width: 992px) {
    .faq-nav {
        position: sticky; top: calc(var(--ab-header-h) + 24px);
        max-height: calc(100vh - var(--ab-header-h) - 48px); overflow-y: auto;
        padding: 20px; background: var(--ab-white);
        border: 1px solid var(--ab-gray-2); border-radius: var(--ab-radius-lg);
        box-shadow: var(--ab-shadow-sm);
    }
    .faq-nav__list { display: grid; gap: 2px; }
}

/* Mobile / tablet: horizontal chips that stick under the header */
@media (max-width: 991.98px) {
    .faq-nav {
        position: sticky; top: var(--ab-header-h); z-index: 5;
        margin-inline: calc(var(--ab-gutter) * -1);
        padding: 10px var(--ab-gutter);
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--ab-gray-2);
    }
    .faq-nav__title, .faq-nav__help { display: none; }
    .faq-nav__list {
        display: flex; gap: 8px; overflow-x: auto;
        scroll-snap-type: x proximity; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .faq-nav__list::-webkit-scrollbar { display: none; }
    .faq-nav__list > li { flex: none; scroll-snap-align: start; }
    .faq-nav__link {
        gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; white-space: nowrap;
        border: 1px solid var(--ab-gray-2); border-radius: var(--ab-radius-pill);
        background: var(--ab-white); font-size: 0.875rem;
    }
    .faq-nav__icon { width: 34px; height: 34px; font-size: .9375rem; }
    .faq-nav__count { display: none; }
    .faq-nav__link[aria-current] { border-color: var(--ab-primary); }

    /* Anchor targets clear the header + chip bar */
    .faq-group, .faq-qa { scroll-margin-top: calc(var(--ab-header-h) + 80px); }
}

/* ---------- Category groups ---------- */
.faq-group + .faq-group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.faq-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.faq-group__badge { --_s: 48px; }
.faq-group__title { font: var(--ab-h3); margin: 0; color: var(--ab-dark); }
.faq-group__meta { margin: 2px 0 0; font: var(--ab-caption); color: var(--ab-text-muted); }

/* ---------- Questions (native details/summary, plus/minus icon) ---------- */
.faq-acc .faq-qa > summary { padding: 16px 20px; gap: 16px; }
.faq-acc .faq-qa > summary::after { content: none; display: none; }
.faq-qa__text { flex: 1 1 auto; min-width: 0; }
.faq-qa__icon {
    position: relative; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ab-primary-50);
    transition: background-color .2s var(--ab-ease);
}
.faq-qa__icon::before,
.faq-qa__icon::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
    background: var(--ab-primary);
    transition: transform .2s var(--ab-ease), background-color .2s var(--ab-ease);
}
.faq-qa__icon::after { transform: rotate(90deg); }
.faq-qa[open] .faq-qa__icon { background: var(--ab-primary); }
.faq-qa[open] .faq-qa__icon::before,
.faq-qa[open] .faq-qa__icon::after { background: var(--ab-white); }
.faq-qa[open] .faq-qa__icon::after { transform: rotate(0deg); }
.faq-acc .faq-qa > summary:hover { color: var(--ab-primary); }
.faq-acc .faq-qa > summary:hover .faq-qa__icon { background: var(--ab-primary-100); }
.faq-qa[open] > summary:hover .faq-qa__icon { background: var(--ab-primary-dark); }

.faq-qa__a { padding: 0 72px 20px 20px; font: var(--ab-body); color: var(--ab-text-soft); }
.faq-qa__a p { margin: 0; max-width: 68ch; }
.faq-qa__a a { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .faq-acc .faq-qa > summary { padding: 14px 16px; }
    .faq-qa__a { padding: 0 16px 18px; font-size: 0.9375rem; }
}

/* ---------- Still have questions? ---------- */
.faq-help {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px 24px;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: linear-gradient(135deg, var(--ab-primary-50) 0%, var(--ab-white) 70%);
    border: 1px solid var(--ab-primary-100); border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
}
.faq-help__title { font: var(--ab-h3); margin: 0 0 6px; color: var(--ab-dark); }
.faq-help__text { margin: 0; color: var(--ab-text-soft); }
.faq-help__contacts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font: 600 0.9375rem/1.4 var(--ab-font); }
.faq-help__contacts li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.faq-help__contacts i { color: var(--ab-primary); }
.faq-help__contacts a { color: var(--ab-dark); text-decoration: none; overflow-wrap: anywhere; }
.faq-help__contacts a:hover { color: var(--ab-primary); text-decoration: underline; }
.faq-help__btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 768px) {
    .faq-help { grid-template-columns: auto minmax(0, 1fr) auto; }
    .faq-help__btn { grid-column: auto; justify-self: end; }
}
@media (max-width: 575.98px) {
    .faq-help { grid-template-columns: minmax(0, 1fr); }
    .faq-help__badge { --_s: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-nav__link, .faq-nav__icon, .faq-qa__icon, .faq-qa__icon::before, .faq-qa__icon::after { transition: none; }
}