/* ============================================================
   faq-tabs.css — adds a tabbed layout on top of faq-page.css
   Desktop: sticky vertical tab rail + active panel side by side.
   Mobile : sticky horizontal tab row on top, content below.
   Requires class .faq-page--tabbed on the <main>.
   ============================================================ */

/* PAGE GUARD: the FAQ page must never scroll sideways — only the mobile tab
   row may scroll horizontally (it has its own overflow-x:auto). overflow:clip
   is used instead of hidden because hidden would break the sticky tab bar.
   This stylesheet only loads on the FAQ page, so it is scoped to it. */
html{ overflow-x:clip; overscroll-behavior-x:none; }
body{ overflow-x:clip; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }

.faq-page--tabbed .faq-page__body{
  display:grid;
  grid-template-columns:clamp(200px, 22vw, 260px) 1fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}

.faq-page--tabbed{
  --faq-tab-size:clamp(15px, 1.4vw, 17px);   /* tab label size — tune to taste */
  box-sizing:border-box;       /* width:100% includes padding -> no page overflow */
  overflow-x:clip;             /* page never scrolls sideways; only the tab row does
                                  (overflow:clip is sticky-safe, unlike hidden) */
}
.faq-page__tabs{
  display:flex;
  flex-direction:column;
  gap:8px;
  position:sticky;
  top:calc(var(--nav-height) + 24px);
}
.faq-page__tab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left;
  padding:15px 18px;
  background:transparent;
  color:var(--color-text);
  font-family:var(--font-ui);
  font-size:var(--faq-tab-size);
  letter-spacing:0.03em;
  border:1px solid rgba(255,255,255,0.35);
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.faq-page__tab:hover{ border-color:var(--color-text); background:rgba(255,255,255,0.05); }
.faq-page__tab.is-active{ background:var(--color-text); color:#0a0a0a; border-color:var(--color-text); }
.faq-page__tab-count{ font-size:0.8em; opacity:.5; }

.faq-page--tabbed .faq-page__category{ display:none; margin-bottom:0; }
.faq-page--tabbed .faq-page__category.is-active{ display:block; }

/* search mode: tabs stay tappable (tapping one clears search), and the
   layout collapses to a single column so wide answers can't overflow */
/* THE REAL OVERFLOW FIX: a CSS grid item defaults to min-width:auto, so a
   long word/URL in a shown answer can force the content column wider than the
   viewport. Letting it shrink + wrap stops the page scrolling sideways. */
.faq-page--tabbed .faq-page__panels{ min-width:0; }
.faq-page--tabbed .faq-page__answer-content,
.faq-page--tabbed .faq-page__question-text{ overflow-wrap:anywhere; }

/* search mode: tabs STAY visible and tappable (tapping one clears the search
   and jumps to that category — see faq-page.js). Show every matching panel. */
.faq-page--tabbed.is-searching .faq-page__category{ display:none; }
.faq-page--tabbed.is-searching .faq-page__category.has-match{ display:block; margin-bottom:40px; }

/* In search mode the tab row stays a CONTAINED horizontal scroller so its
   fraction-sized tabs can never leak page width (prevents the search overflow). */
.faq-page--tabbed.is-searching .faq-page__tabs{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  max-width:100%;
  min-width:0;
}

@media (max-width:760px){
  .faq-page--tabbed .faq-page__body{ grid-template-columns:1fr; gap:20px; }
  .faq-page__tabs{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;   /* keep horizontal scroll inside the row */
    touch-action:pan-x pan-y;        /* row scrolls sideways; vertical still bubbles */
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    gap:8px;
    position:sticky;
    top:var(--nav-height);
    z-index:20;
    background:var(--faq-sticky-bg, #0a0a0a);   /* set to your page bg if different */
    padding:12px 0;
    width:100%;
    max-width:100%;
    min-width:0;               /* allow the row to shrink instead of pushing width */
    box-sizing:border-box;
    scrollbar-width:none;
  }
  /* the row's flex children must not be measured into page width */
  .faq-page--tabbed .faq-page__body{ min-width:0; }
  .faq-page--tabbed .faq-page__body > *{ min-width:0; }
  .faq-page__tabs::-webkit-scrollbar{ display:none; }
  .faq-page__tab{
    flex:0 0 auto;             /* size to the label */
    max-width:80%;             /* cap so the next tab still peeks in */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;    /* very long labels truncate rather than stretch */
    scroll-snap-align:start;
  }
}