/* ============================================
   TACKLE BOX WEB & PRINTING — FAQ ACCORDION
   Component add-on for tbwp-brand.css · v1.2-compatible
   Requires tbwp-brand.css to be linked BEFORE this file
   (uses its CSS variables — no new tokens defined here)

   Updated from the original version:
   - .faq-index: was --taupe on white (3.09:1, FAILS WCAG AA for text).
     Changed to --gray-600 (5.89:1, PASSES). This predates the neutral
     scale that didn't exist when this file was first built.
   - .faq-panel-inner: was a hardcoded #444 (actually fine at 9.74:1,
     not a contrast bug) — switched to var(--gray-700) purely so it
     traces to the design system's neutral scale instead of a one-off
     hex value living outside the token system.
   - .faq-list / .faq-item borders: hardcoded #E8E8E8 -> var(--gray-200),
     same reasoning — ties to the documented "borders, dividers" role
     for that token instead of an undocumented hex.
   - Coral border/icon usage checked against the correct WCAG threshold
     for non-text UI elements (3:1, not 4.5:1) — passes at 3.16:1, no
     change needed there.
   ============================================ */

.faq-section .section-intro {
    margin-bottom: var(--space-4);
}

.faq-list {
    border-top: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid var(--gray-200);
    background: var(--white);
    position: relative;
    border-left: 4px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item.is-open {
    border-left-color: var(--coral);
    background: var(--cultured);
}

.faq-trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

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

.faq-index {
    width: 42px !important;
    flex: 0 0 42px !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    opacity: .55;
}

.faq-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--navy);
    flex: 1;
    line-height: 1.3;
}

.faq-toggle {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--coral);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-toggle::before {
    width: 14px;
    height: 2px;
}

.faq-toggle::after {
    width: 2px;
    height: 14px;
}

.faq-item.is-open .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-panel-inner {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--gray-700);
    /* was hardcoded #444 — not a contrast bug, just untethered from the token system */
    line-height: 1.6;
    max-width: 640px;
    padding: 0 var(--space-3) var(--space-3) calc(24px + var(--space-2) + var(--space-3));
}

@media (max-width: 640px) {
    .faq-panel-inner {
        padding-left: var(--space-3);
    }
}

/* ===== FAQ Page Spacing ===== */

.faq-section {
    margin: 3rem 0 4rem;
}

.faq-section h3 {
    margin: 0 0 1rem;
    line-height: 1.25;
}

.faq-section .section-intro {
    margin: 0 0 2rem;
    line-height: 1.8;
    font-size: 1.05rem;
}

.faq-item {
    margin-bottom: 1rem;
}

.faq-trigger {
    padding: 1.4rem 1.75rem;
    min-height: 82px;
    align-items: center;
}

.faq-index {
    width: 42px;
    flex: 0 0 42px;
    margin-right: 1.25rem;
    font-size: .9rem;
    font-weight: 700;
    opacity: .55;
}

.faq-question {
    line-height: 1.45;
    font-size: 1.88rem;
}

.faq-panel-inner {
    padding: 1.5rem 1.75rem 2rem 78px;
    line-height: 1.8;
    font-size: 1.65 rem;
}

.faq-panel-inner p,
.faq-panel-inner ul,
.faq-panel-inner ol {
    margin-bottom: 1rem;
}

.faq-panel-inner li {
    margin-bottom: .5rem;
}