/* ============================================================
   PCG — the answers page (veelgestelde-vragen.html)

   114 question/answer pairs on one page. The whole design problem is
   that number: a wall of 114 headings is unreadable, and the reflex
   fix — collapsing every answer behind a disclosure triangle — is the
   wrong trade here.

   ANSWERS ARE NEVER COLLAPSED, DELIBERATELY. This page exists so that
   crawlers and AI engines can read the corpus that was previously
   locked inside JavaScript. Content a reader has to click to reveal is
   content some parsers weight lower and some summarisers skip, and it
   would reintroduce a softer version of the exact problem this page was
   built to solve. Navigation is handled by the topic index instead.

   The layout follows the site's existing grid-split rhythm: the section
   heading holds the left column and the answers run down the right, so
   the eye always knows which topic it is inside without a sticky bar.
   ============================================================ */

/* ---------- Ask, before browse ------------------------------------
   The console sits above the topic index because that is the order the
   two controls should be offered in: someone with a specific question
   should not have to scan eight topics and 114 headings to find it.
   On diensten.html the same console is wrapped in a two-column pitch;
   here it stands alone and centres on the text measure. */
.faq-ask__head{max-width:52ch;margin:0 auto var(--sp-5);text-align:center}
.faq-ask__head h2{margin:0}
.faq-ask__lead{
  margin:var(--sp-2) 0 0;
  color:var(--muted);
  font-size:var(--fs-fine);
  text-wrap:pretty;
}
/* The console carries its own width on diensten from .aia-split; standing
   alone it needs one, or it runs the full wrap. */
.faq-ask .aia-console{max-width:760px;margin-inline:auto}

/* ---------- Topic index -------------------------------------------
   A horizontal set of chips rather than a bulleted list: it reads as a
   control strip, takes one band instead of eight lines, and gives the
   page eight real in-page anchors for search engines to surface. */
.faq-toc{padding-block:clamp(28px,3.4vw,44px)}
.faq-toc__list{
  display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;margin:0;padding:0;
}
.faq-toc__link{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;
  border:1px solid var(--rule);
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-size:var(--fs-fine);
  font-weight:500;
  line-height:1.2;
  transition:border-color .32s var(--ease),background-color .32s var(--ease),transform .32s var(--ease);
}
.faq-toc__link:hover{
  border-color:var(--gold-text);
  background:var(--surface);
  transform:translateY(-1px);
}
/* The count is information, not decoration: it tells the reader how
   much is behind the link before they commit to the jump. */
.faq-toc__n{
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-micro);
  font-weight:600;
  color:var(--gold-text);
  padding-inline-start:10px;
  border-inline-start:1px solid var(--rule-soft);
}

/* ---------- Section ------------------------------------------------ */
.faq-section .wrap{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,13fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:start;
}
/* The longest section runs to twenty questions, which left the heading column
   as several screens of empty space and the reader with no idea which topic
   they were still inside. Sticking the heading answers both: it uses the
   column and it is a permanent "you are here" without adding a sticky bar
   over the content. Only from 900px up — below that the grid is one column
   and a stuck heading would sit on top of the answers. */
@media (min-width:901px){
  .faq-section__head{position:sticky;top:clamp(96px,11vh,132px)}
}
.faq-section__head h2{margin:0}
.faq-section__lead{
  margin:var(--sp-2) 0 0;
  color:var(--muted);
  font-size:var(--fs-fine);
  max-width:34ch;
  text-wrap:pretty;
}

/* ---------- One question ------------------------------------------- */
.faq-list{min-width:0}
.faq-item{
  padding-block:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--rule-soft);
}
.faq-item:first-child{border-top:0;padding-top:0}

/* Sized well below --fs-h3. These are h3 for document structure and for
   heading navigation, but 114 of them at heading scale would shout. */
.faq-item__q{
  margin:0 0 var(--sp-2);
  font-size:clamp(17px,1.35vw,20px);
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.faq-item__a p{
  margin:0;
  max-width:68ch;
  font-size:var(--fs-body);
  line-height:1.68;
  color:var(--ink);
  text-wrap:pretty;
}
/* The source link is a way out to the page that owns the fact, so it is
   quiet by default and only earns colour on hover. */
.faq-item__src{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--sp-2);
  font-size:var(--fs-caption);
  color:var(--muted);
}
.faq-item__src:hover{color:var(--gold-text)}

/* TOUCH TARGETS. WCAG 2.2 SC 2.5.8 asks for 24x24 minimum, and both links in
   an FAQ item missed it: the question is 17px type on a 1.32 line box, which
   measures 21px tall, and the source link is caption-size at 22px. Neither is
   visible as a bug on a desktop with a mouse; on a phone they are a thumb
   landing next to the thing it aimed at.

   tools/verify.mjs found it on SEVEN pages at both 820 and 390 - every page
   that carries an injected @faq block, plus the hub - which is what makes it
   one fix rather than sixteen.

   THE PADDING GROWS THE HIT BOX AND THE NEGATIVE MARGIN GIVES THE SPACE BACK,
   so the rhythm of the list is byte-for-byte what it was and this stays a
   touch fix rather than a redesign. Do not "tidy" the negative margins away.
   inline-block is required on the question link: vertical padding on a plain
   inline box does not lift its measured height. */
.faq-item__q a{
  display:inline-block;
  padding-block:5px;
  margin-block:-5px;
}
.faq-item__src{
  padding-block:5px;
  margin-top:calc(var(--sp-2) - 5px);
  margin-bottom:-5px;
}

/* Deep links land here from search results and from the assistant, so
   the target must be clear of the fixed header and must announce
   itself rather than leaving the reader hunting. */
.faq-item{scroll-margin-top:120px}
.faq-section{scroll-margin-top:96px}
.faq-item:target .faq-item__q{color:var(--gold-text)}

@media (max-width:900px){
  .faq-section .wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .faq-section__lead{max-width:60ch}
}

/* Windows high-contrast drops background and colour tokens entirely, so
   the chips would lose every edge that separates one from the next. */
@media (forced-colors:active){
  .faq-toc__link{border:1px solid ButtonBorder}
  .faq-toc__n{border-inline-start:1px solid ButtonBorder;color:inherit}
  .faq-item{border-top:1px solid CanvasText}
}