/* ============================================================
   FAQ page (page-faq.php)
   ------------------------------------------------------------
   Design tokens (aligned with the EARMOR system)
     surface      #0a0a0a   card #101010   card-hover #141414
     accent       #F1B300   accent-soft rgba(241,179,0,.12)
     text         #ffffff   muted rgba(255,255,255,.68)
     hairline     rgba(255,255,255,.09)
     display font "Barlow Condensed"  body font Roboto
     radius 6px card / 999px pill   spacing 8/12/16/22/32/44
   Component states covered: default / hover / focus-visible / open
   ============================================================ */

.fq-page { background:#0a0a0a; color:#fff; overflow-x:hidden; }
.fq-inner { width:min(1000px,100%); margin:0 auto; padding:0 32px; }

/* ---------- Hero ---------- */
.fq-hero { padding:150px 0 46px; background:#0a0a0a; text-align:center; }
.fq-hero__title {
    font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:800;
    line-height:1.05; letter-spacing:3px; text-transform:uppercase; margin:0 auto;
}
.fq-hero__sub {
    color:rgba(255,255,255,.62); font-size:16px; line-height:1.75;
    max-width:720px; margin:18px auto 0;
}

/* ---------- category jump-nav (pills) ---------- */
.fq-nav { margin:0 0 40px; }
.fq-nav__list {
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
    list-style:none; margin:0; padding:0;
}
.fq-nav__btn {
    display:inline-block; padding:9px 18px; border-radius:999px;
    border:1px solid rgba(255,255,255,.16); background:transparent;
    color:rgba(255,255,255,.78); font-size:13px; font-weight:600;
    letter-spacing:.6px; text-decoration:none; white-space:nowrap;
    transition:color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
.fq-nav__btn:hover {
    color:#F1B300; border-color:rgba(241,179,0,.55);
    background:rgba(241,179,0,.08); transform:translateY(-1px);
}
.fq-nav__btn:focus-visible { outline:2px solid #F1B300; outline-offset:2px; }
.fq-nav__btn.is-active {
    color:#0a0a0a; background:#F1B300; border-color:#F1B300;
}

/* ---------- one block per category ---------- */
.fq-body { padding:0 0 96px; }
.fq-group { margin:0 0 44px; scroll-margin-top:100px; }
.fq-group:last-child { margin-bottom:0; }

.fq-group__head {
    display:flex; align-items:center; gap:14px; margin:0 0 18px;
    padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.10);
}
.fq-group__bar { width:4px; height:22px; background:#F1B300; flex:0 0 auto; }
.fq-group__title {
    font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    color:#fff; font-size:24px; font-weight:800; letter-spacing:2px;
    text-transform:uppercase; margin:0; flex:1 1 auto; min-width:0;
}
.fq-group__count {
    flex:0 0 auto; font-size:12px; font-weight:700; color:#F1B300;
    background:rgba(241,179,0,.12); border:1px solid rgba(241,179,0,.35);
    border-radius:999px; padding:3px 10px; line-height:1.5;
}

.fq-list { display:flex; flex-direction:column; gap:12px; }

/* ---------- one Q&A card ---------- */
.fq-item {
    position:relative; overflow:hidden;
    background:#101010; border:1px solid rgba(255,255,255,.09);
    border-radius:6px;
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.fq-item:hover {
    border-color:rgba(241,179,0,.30); background:#141414;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.fq-item.is-open {
    border-color:rgba(241,179,0,.45); background:#141414;
}
/* accent rail that grows when the answer opens */
.fq-item::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#F1B300; transform:scaleY(0); transform-origin:top center;
    transition:transform .32s ease;
}
.fq-item.is-open::before { transform:scaleY(1); }

.fq-q { margin:0; }
.fq-q__btn {
    width:100%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    background:none; border:0; color:#fff; font:inherit; text-align:left;
    padding:20px 22px; cursor:pointer;
    font-size:16.5px; font-weight:600; line-height:1.5;
    transition:color .22s ease;
}
.fq-q__btn:hover { color:#F1B300; }
.fq-q__btn:focus-visible { outline:2px solid #F1B300; outline-offset:-2px; }
.fq-item.is-open .fq-q__btn { color:#F1B300; }
.fq-q__tx { flex:1 1 auto; min-width:0; }

/* circular + / − control */
.fq-q__ic {
    position:relative; flex:0 0 auto; width:28px; height:28px;
    border:1px solid rgba(241,179,0,.5); border-radius:50%;
    transition:border-color .28s ease, background .28s ease, transform .28s ease;
}
.fq-q__ic::before,
.fq-q__ic::after {
    content:""; position:absolute; left:50%; top:50%; background:#F1B300;
    transition:transform .3s ease, opacity .3s ease;
}
.fq-q__ic::before { width:12px; height:2px; transform:translate(-50%,-50%); }
.fq-q__ic::after  { width:2px;  height:12px; transform:translate(-50%,-50%); }
.fq-item.is-open .fq-q__ic::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.fq-item.is-open .fq-q__ic { border-color:#F1B300; background:rgba(241,179,0,.14); }
.fq-q__btn:hover .fq-q__ic { transform:scale(1.06); }

/* ---------- answer panel ---------- */
.fq-a { max-height:0; overflow:hidden; transition:max-height .34s ease; }
.fq-a__in {
    color:rgba(255,255,255,.68); font-size:14.5px; line-height:1.85;
    margin:0 22px 22px; padding:16px 0 0 18px;
    border-top:1px solid rgba(255,255,255,.07);
    border-left:2px solid rgba(241,179,0,.35);
    opacity:0; transform:translateY(-6px);
    transition:opacity .3s ease .06s, transform .3s ease .06s;
}
.fq-item.is-open .fq-a__in { opacity:1; transform:none; }
.fq-a__in p:first-child { margin-top:0; }
.fq-a__in p:last-child { margin-bottom:0; }
.fq-a__in a { color:#F1B300; text-decoration:underline; text-underline-offset:3px; }
.fq-a__in a:hover { color:#ffc400; }
.fq-a__in ul, .fq-a__in ol { margin:10px 0 0; padding-left:22px; }
.fq-a__in li { margin-bottom:6px; }

/* ---------- empty ---------- */
.fq-empty {
    text-align:center; color:#8a8a8a; font-size:14.5px; line-height:1.8;
    padding:70px 20px; margin:0;
    border:1px dashed rgba(255,255,255,.14); border-radius:8px;
}

/* ---------- responsive ---------- */
@media (max-width:680px) {
    .fq-inner { padding:0 18px; }
    .fq-hero { padding:108px 0 30px; }

    /* pills become a single swipeable row on small screens */
    .fq-nav { margin-bottom:28px; }
    .fq-nav__list {
        flex-wrap:nowrap; justify-content:flex-start;
        overflow-x:auto; padding-bottom:4px;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .fq-nav__list::-webkit-scrollbar { display:none; }

    .fq-body { padding-bottom:64px; }
    .fq-group { margin-bottom:32px; }
    .fq-group__title { font-size:20px; }
    .fq-list { gap:10px; }
    .fq-q__btn { padding:17px 18px; font-size:15.5px; gap:14px; }
    .fq-q__ic { width:26px; height:26px; }
    .fq-a__in { font-size:14px; margin:0 18px 18px; padding-left:14px; }
}

@media (prefers-reduced-motion: reduce) {
    .fq-item, .fq-item::before, .fq-q__btn, .fq-q__ic,
    .fq-q__ic::before, .fq-q__ic::after, .fq-a, .fq-a__in, .fq-nav__btn { transition:none; }
    html { scroll-behavior:auto; }
}