/* ============================================================
   FAQ PAGE — faq.css
   Page-specific styles. Uses global CSS variables from
   global.css and public.css (--clr-green, --sp-*, fonts, etc.)
   All classes prefixed .fq- to avoid conflicts.
   ============================================================ */

/* ── Outer wrapper ─────────────────────────────────────────── */
.fq-outer {
    position:  relative;
    isolation: isolate;   /* creates stacking context so z-index:-1 works */
    overflow-x: hidden;
}

/* Both squares sit behind all page content */
.fq-deco-diamond,
.fq-deco-sidebar {
    position:       absolute;
    z-index:        -1;
    pointer-events: none;
    border-radius:  2px;
}

/* Centered rotated diamond — large and very subtle */
.fq-deco-diamond {
    top:       60px;
    left:      50%;
    transform: translateX(-50%) rotate(45deg);
    width:     720px;
    height:    720px;
    border:    1px solid rgba(255,255,255,0.035);
}

/* Lime square — top edge sits in the gap between subtitle and grid */
.fq-deco-sidebar {
    top:    540px;
    left:   -80px;
    width:  900px;
    height: 520px;
    border: 1px solid rgba(202,255,111,0.1);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.fq-page {
    max-width:     1200px;
    margin:        0 auto;
    padding:       calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
}

/* ── Hero ─────────────────────────────────────────────────── */
.fq-hero {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--sp-8);
    margin-bottom:   var(--sp-20);
}

.fq-hero-content { max-width: 680px; }

.fq-label {
    display:        block;
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-5);
}

.fq-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 7vw, 6rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    0.92;
    color:          #fff;
    margin-bottom:  var(--sp-8);
}

.fq-accent { color: var(--clr-green); }

.fq-hero-sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.65;
    font-weight: 300;
    max-width:   520px;
}

.fq-hero-sub a {
    color:           var(--clr-green);
    text-decoration: none;
    font-weight:     600;
}
.fq-hero-sub a:hover { text-decoration: underline; }

/* Decorative corner — hidden on mobile */
.fq-corner {
    display:      none;
    width:        120px;
    height:       120px;
    border-left:  1px solid rgba(255,255,255,0.1);
    border-top:   1px solid rgba(255,255,255,0.1);
    position:     relative;
    flex-shrink:  0;
}
.fq-corner-dot {
    position:   absolute;
    top:        -4px;
    left:       -4px;
    width:      8px;
    height:     8px;
    background: var(--clr-green);
}
@media (min-width: 900px) { .fq-corner { display: block; } }

/* ── Main grid ────────────────────────────────────────────── */
.fq-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-12);
}
@media (min-width: 1024px) {
    .fq-grid {
        grid-template-columns: 180px 1fr;
        gap:                   var(--sp-16);
        align-items:           start;
    }
}

/* ── Sidebar ──────────────────────────────────────────────── */
.fq-sidebar {
    position:   sticky;
    top:        calc(64px + var(--sp-8));
    align-self: start;
}

.fq-sidebar-label {
    font-family:    var(--font-display);
    font-size:      0.625rem;
    font-weight:    600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.25);
    margin-bottom:  var(--sp-5);
}

.fq-sidebar-nav {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.fq-cat-btn {
    text-align:     left;
    font-family:    var(--font-display);
    font-size:      0.875rem;
    font-weight:    500;
    color:          rgba(255,255,255,0.38);
    background:     none;
    border:         none;
    border-bottom:  2px solid transparent;
    cursor:         pointer;
    padding:        var(--sp-2) 0;
    align-self:     flex-start;
    transition:     color 0.2s, border-color 0.2s;
    line-height:    1.5;
}
.fq-cat-btn:hover    { color: rgba(255,255,255,0.75); }
.fq-cat-btn--active  {
    color:              var(--clr-green);
    font-weight:        700;
    border-bottom-color: var(--clr-green);
}

/* Mobile: horizontal pill row */
@media (max-width: 1023px) {
    .fq-sidebar {
        position: static;
    }
    .fq-sidebar-nav {
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            var(--sp-2);
    }
    .fq-cat-btn {
        padding:       var(--sp-2) var(--sp-4);
        border:        1px solid rgba(255,255,255,0.12);
        border-radius: var(--r-pill);
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .fq-cat-btn--active {
        background:    rgba(202,255,111,0.08);
        border-color:  rgba(202,255,111,0.35);
        border-bottom-color: rgba(202,255,111,0.35);
    }
}

/* ── FAQ group & items ────────────────────────────────────── */
.fq-group {
    display:        flex;
    flex-direction: column;
    gap:            1px; /* tight stack like reference */
}
.fq-group--hidden { display: none; }

.fq-item {
    position:   relative;
    background: #151515;
    overflow:   hidden;
    transition: background 0.3s var(--ease-out);
}
.fq-item:hover { background: #1e1e1e; }

/* Lime bottom-border sweep on hover */
.fq-item::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    height:     2px;
    width:      0;
    background: var(--clr-green);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fq-item:hover::after { width: 100%; }

.fq-btn {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--sp-8);
    padding:         var(--sp-8);
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
}

.fq-question-text {
    font-family:    var(--font-display);
    font-size:      clamp(1rem, 1.8vw, 1.25rem);
    font-weight:    500;
    color:          #fff;
    line-height:    1.3;
    transition:     color 0.2s;
}
.fq-item:hover .fq-question-text { color: #fff; }

/* Chevron icon */
.fq-chevron {
    width:      22px;
    height:     22px;
    flex-shrink: 0;
    color:      var(--clr-green);
    transition: transform 0.3s var(--ease-out);
}
.fq-item.open .fq-chevron { transform: rotate(180deg); }

/* Answer panel */
.fq-answer {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fq-item.open .fq-answer { max-height: 600px; }

.fq-answer-inner {
    padding:     0 var(--sp-8) var(--sp-8);
    font-family: var(--font-body);
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.5);
    line-height: 1.75;
    font-weight: 300;
    max-width:   720px;
}
.fq-answer-inner a            { color: var(--clr-green); text-decoration: none; }
.fq-answer-inner a:hover      { text-decoration: underline; }
.fq-answer-inner strong       { color: rgba(255,255,255,0.75); font-weight: 600; }

/* ── Bottom CTA ───────────────────────────────────────────── */
.fq-cta {
    margin-top:      var(--sp-20);
    padding:         var(--sp-12);
    background:      #131313;
    border-radius:   var(--r-lg);
    border:          1px solid rgba(255,255,255,0.06);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--sp-8);
    text-align:      center;
}
@media (min-width: 768px) {
    .fq-cta          { flex-direction: row; text-align: left; }
}

.fq-cta-h3 {
    font-family:    var(--font-display);
    font-size:      clamp(1.375rem, 3vw, 1.875rem);
    font-weight:    700;
    color:          #fff;
    margin-bottom:  var(--sp-2);
    letter-spacing: -0.02em;
}
.fq-cta-sub {
    font-family: var(--font-body);
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.38);
}

/* CTA button re-uses global .btn-hero */

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
    .fq-page        { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .fq-btn         { padding: var(--sp-6) var(--sp-5); }
    .fq-answer-inner { padding: 0 var(--sp-5) var(--sp-6); }
    .fq-hero        { margin-bottom: var(--sp-12); }
    .fq-cta         { padding: var(--sp-8) var(--sp-5); }
}