/* ==========================================================================
   The FAQ page (/faq/) — the site's general answers, under Resources.

   The question-and-answer block itself is shared (style.css §12): the same block
   the product category pages print. What this file states is only this page's
   composition — the rail that lists every question and stays in view beside the
   answers, and what happens to it as the window narrows.

   The rail is plain anchors driven by the runtime's `scrollspy`: the reader jumps
   with the browser's own history, and the question being read is marked with
   aria-current=location — the one thing this file paints differently. Nothing here
   animates, and nothing here writes a question: the rail is filled from the same
   rows the answers are read from.
   ========================================================================== */

/* 1 · The two columns. The rail is the narrower one and both start on the same
   line, so the page can be taken in before it is scrolled. */
.faq-split{align-items:start;grid-template-columns:minmax(0,266px) minmax(0,1fr)}
/* The shared block caps itself at a reading measure; in this column the column is
   the measure, so the cap comes off instead of leaving the answers short. */
.faq-split .faq{max-width:none}

/* 2 · The rail. It follows the legal pages' contents rail — one hairline per
   question, the number in the site's label colour, the question in the muted body
   colour until it is the one being read. */
.faq-rail ul{position:sticky;top:104px;list-style:none;margin:14px 0 0;padding:0}
.faq-rail a{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;
  transition:color var(--dur-fast) ease}
.faq-rail a:hover{color:var(--accent)}
.faq-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* aria-current is written by the runtime as the reader scrolls. The accent goes on
   the number so the mark is unmistakable without the row's width changing. */
.faq-rail a[aria-current="location"]{color:var(--charcoal)}
.faq-rail a[aria-current="location"] .faq-rail__n{color:var(--accent)}
.faq-rail__n{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--steel);padding-top:2px}

/* 3 · Landing on a question. The sticky header hangs over the page, so a question
   that is jumped to clears it instead of arriving under it. */
.faq-split .faq__item{scroll-margin-top:104px}

@media (max-width:900px){
  /* One column, and the rail is not printed here at all: on this width it would sit
     above the answers as the same six questions a second time, and the collapsed
     rows below it are already the list of what the page holds. */
  .faq-split{grid-template-columns:1fr}
  .faq-rail{display:none}
}