/* ============================================================
   FAQ page — organized component styles
   Rename + reorganize + dedupe only. Values byte-identical.
   ============================================================ */

/* --- Hero --- */
.faq-hero{
  padding:clamp(9rem,15vh,11rem) 0 clamp(3rem,6vh,4rem);
}
.faq-container{
  max-width:1200px;
}
.faq-title{
  margin:0;font-size:clamp(2.6rem,6vw,5rem);line-height:1.05;letter-spacing:-.02em;font-weight:800;
}
.faq-title-accent{
  color:var(--accent);
}
.faq-lead{
  margin:1.6rem 0 0;max-width:46ch;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65;color:#9BA3B4;
}

/* --- Question rows ---
   The rows are assembled by faqBuild() in strix-theme.js from the data-q /
   data-a pairs the template emits. Their styling used to travel with them as
   inline cssText strings; it lives here now, matching the accordions on the
   home and landing views. */
.faq-item{
  border-top:1px solid rgba(255,255,255,.1);
}
.faq-page-q{
  width:100%;text-align:right;background:none;border:none;color:#ECEFF4;cursor:pointer;padding:1.2rem 0;display:flex;align-items:center;gap:1rem;font-family:inherit;font-size:1.12rem;font-weight:600;
}
.faq-page-icon{
  flex:none;width:22px;height:22px;transition:transform .3s;color:var(--accent);display:inline-flex;
}
.faq-page-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.faq-page-a p{
  margin:0 2.8rem 1.4rem;color:#9BA3B4;line-height:1.7;font-size:1.02rem;
}

/* --- Main / layout --- */
/* Smooth-scroll when clicking a category link; offset the target below the fixed
   header. Guarded: readers who ask for reduced motion get the instant jump, since
   a full-page glide is one of the movements that actually causes nausea. */
@media (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior:smooth;
  }
}
.faq-groups > [id^="g-"]{
  scroll-margin-top:120px;
}
.faq-main{
  padding:0 0 clamp(5rem,10vh,7rem);
}
.faq-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:start;
}
.faq-sidebar{
  display:flex;flex-direction:column;gap:0;
}
/* Title belongs to the desktop rail; on a phone the disclosure button already
   carries the word, so repeating it inside the panel would be noise. */
.faq-side-title{
  display:none;
}
/* Phone list — matched to .single-toc-m-list on the articles: roomier rows, hairline
   separators instead of gaps. Overridden below for the rail. */
.faq-cat-link{
  text-decoration:none;color:#B8BECC;font-weight:600;padding:.55rem 0;font-size:1rem;line-height:1.5;
  border-block-start:1px solid rgba(255,255,255,.06);transition:color .2s;
}
.faq-cat-link:hover,
.faq-cat-link:focus-visible{
  color:var(--accent);
}
/* Set by faqCategories() as each group passes the reading line. */
.faq-cat-link.is-current{
  color:var(--accent);font-weight:600;
}

/* --- Category nav on phones ---
   Five links is a comfortable sticky column at 64em and a screenful of chrome
   between the reader and the first answer below it. So it collapses behind a
   button, using the same disclosure timing as the .faq-a accordions further down
   the page — one behaviour to learn, not two. */
.faq-side-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:.75rem;
  /* 44px: below this, taps start missing. */
  min-height:44px;padding:.9rem 1.1rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:rgba(255,255,255,.03);color:#ECEFF4;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;
}
.faq-side-toggle::after{
  content:"";width:.55rem;height:.55rem;border-inline-end:2px solid #8A93A6;border-block-end:2px solid #8A93A6;
  transform:rotate(45deg) translateY(-25%);transition:transform .2s;
}
.faq-side-wrap.is-open .faq-side-toggle::after{
  transform:rotate(-135deg) translateY(-25%);
}
/* Only collapsed once faqCategories() is there to drive the heights. Without JS
   the list renders exactly as it does today rather than being stuck at zero. */
.faq-side-wrap.js-collapse .faq-side-toggle{
  display:flex;
}
.faq-side-wrap.js-collapse .faq-sidebar{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
  /* Padding rather than margin: box-sizing:border-box means max-height:0 clips it,
     so the gap under the button appears only once the list is open. */
  padding-block-start:.6rem;
}
.faq-groups{
  display:flex;flex-direction:column;gap:clamp(2.5rem,5vh,3.5rem);
}
.faq-group-title{
  margin:0 0 .8rem;font-size:1.5rem;font-weight:700;color:var(--accent);
}

/* --- CTA panel --- */
.faq-cta-panel{
  margin-top:clamp(3rem,6vh,4.5rem);border:1px solid rgba(47,212,190,.25);border-radius:20px;background:rgba(47,212,190,.05);padding:clamp(1.8rem,4vw,2.8rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.faq-cta-title{
  margin:0 0 .4rem;font-size:1.5rem;font-weight:700;
}
.faq-cta-text{
  margin:0;color:#9BA3B4;font-size:1.05rem;
}
.faq-cta-actions{
  display:flex;gap:.8rem;flex-wrap:wrap;
}
.faq-cta-primary{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#04140F;font-weight:700;padding:.8rem 1.4rem;border-radius:999px;text-decoration:none;
}
.faq-cta-secondary{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.18);color:#ECEFF4;font-weight:600;padding:.8rem 1.4rem;border-radius:999px;text-decoration:none;transition:border-color .25s,background .25s;
}

/* --- Breakpoints --- */
@media (min-width: 64em) {
  /* The answers take the reading-start (right) track and the rail sits on the
     left, the same way round as the article — see .single-layout in pages/single.css.
     Placed explicitly rather than by reordering the markup: the nav has to stay
     first in the source so that on a phone, where there is only one column, the
     collapsed button lands above the questions instead of below them. */
  .faq-grid{
    grid-template-columns:minmax(0,1fr) 240px;
  }
  .faq-groups{
    grid-column:1;grid-row:1;
  }
  /* Sticky on the wrapper — it is the grid item now, not the nav. */
  .faq-side-wrap{
    grid-column:2;grid-row:1;position:sticky;top:7.5rem;
  }
  /* The column has room for the list in full, so the disclosure is undone here.
     faqCategories() also clears its inline max-height on resize, which would
     otherwise outrank this after a session that started at phone width. */
  .faq-side-wrap.js-collapse .faq-side-toggle{
    display:none;
  }

  /* --- The rail, matched to .single-toc on the articles ---
     Hairline track on inline-start — the right edge in RTL, the side facing the
     answers — with an accent fill reporting how far through the questions the
     reader is, and the current group lit in the list.

     max-height is repeated on the .js-collapse rule because that selector is the
     more specific of the two and would otherwise leave the rail with the phone's
     max-height:none. */
  .faq-sidebar,
  .faq-side-wrap.js-collapse .faq-sidebar{
    position:relative;
    max-height:calc(100vh - 10rem);
    overflow-y:auto;
    padding-block-start:0;
    padding-inline-start:1.4rem;
  }
  /* Absolutely positioned, so they never become flex items of the column. */
  .faq-sidebar::before,
  .faq-sidebar::after{
    content:"";position:absolute;inset-inline-start:0;inset-block-start:0;width:2px;border-radius:2px;
  }
  .faq-sidebar::before{
    inset-block-end:0;background:rgba(255,255,255,.09);
  }
  .faq-sidebar::after{
    height:calc(var(--faq-progress,0) * 100%);
    background:var(--accent);
    box-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  }

  .faq-side-title{
    display:block;margin:0 0 .9rem;font-size:.9rem;font-weight:600;color:#8A93A6;
  }
  .faq-cat-link{
    padding:.42rem 0;font-size:.95rem;line-height:1.55;font-weight:400;color:#8A93A6;border-block-start:0;
  }
  .faq-cat-link:hover,
  .faq-cat-link:focus-visible{
    color:#ECEFF4;
  }
}