/*
 * Veelgestelde vragen: zoekveld, categoriefilter en accordeons.
 *
 * Alleen geladen op /veelgestelde-vragen/ (zie functions.php). Alle kleuren zijn
 * bestaande tokens; er is geen nieuwe kleur bijgekomen.
 *
 * DE NAAM IS .vragen EN NIET .faq
 * style.css heeft al een .faq-component (de homepage-sectie, twee kolommen met
 * <details>). Mijn eerste versie gebruikte dezelfde naam en werd daardoor
 * STILZWIJGEND twee kolommen: .faq { display:grid; grid-template-columns: .82fr
 * 1.18fr } kwam later in de cascade. De zoekbalk en het slotblok stonden naast
 * de lijst in plaats van erboven en eronder -- en dat leek op een ontwerpkeuze
 * in plaats van op een naambotsing.
 *
 * Les: een component prefixen met de paginanaam is niet genoeg als die naam al
 * bestaat. Deze heet nu naar de pagina, niet naar het onderwerp.
 *
 * De accordeons zijn <details>/<summary>, dus ze werken zonder JavaScript. Deze
 * CSS mag daarom niets doen watJS nodig heeft om te herstellen -- behalve het
 * plus/min-teken, dat puur decoratief is.
 */

.vragen {
  /* De FAQ is een leesoppervlak: hij volgt de tekstkolom van de pagina, niet de
   * volle breedte. Een zoekveld over 1240px leest als een formulier; over 760px
   * als een hulpmiddel bij de tekst. */
  max-width: var(--wrap-narrow);
}

/* ---------- inleiding ---------- */

.vragen__inleiding {
  max-width: var(--measure);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.vragen__inleiding > :first-child { margin-top: 0; }
.vragen__inleiding > :last-child { margin-bottom: 0; }

/* ---------- bediening: zoeken + filteren ---------- */

.vragen__bediening[hidden] { display: none; }

.vragen__bediening {
  /* De header is sticky en 72px hoog; de balk blijft daar net onder hangen.
   * 81px is gemeten (72 + 9) en niet gegokt: met minder verdwijnt de bovenrand
   * van de balk achter de header zodra je scrollt. */
  position: sticky;
  top: 81px;
  z-index: 3;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-warm);
  /* Zonder deze schaduw lijkt de balk bij het scrollen aan de tekst vast te
   * zitten in plaats van erboven te zweven. Subtiel houden: dit is geen modal. */
  box-shadow: 0 8px 24px -18px rgba(32, 40, 37, .45);
}

.vragen__label {
  display: block;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.vragen__invoer {
  position: relative;
  display: flex;
  align-items: center;
}

.vragen__invoer > .icon {
  position: absolute;
  left: 13px;
  color: var(--muted);
  pointer-events: none;
}

.vragen__input {
  width: 100%;
  /* 44px: een zoekveld is een aanwijsdoel, ook op een telefoon. */
  min-height: 44px;
  padding: 10px 44px 10px 40px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.vragen__input::placeholder { color: var(--muted-2); }
.vragen__input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
/* Het native wis-knopje van type="search" weg: we hebben ons eigen, dat ook
 * met het toetsenbord bereikbaar is en dezelfde maat heeft. */
.vragen__input::-webkit-search-cancel-button { display: none; }

.vragen__wis {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.vragen__wis:hover { color: var(--ink); background: var(--line-soft); }
.vragen__wis[hidden] { display: none; }

/* ---------- categoriefilter ---------- */

.vragen__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.vragen__chip {
  /* 44px, net als .btn: het sitebrede minimum voor een aanwijsdoel. Stond op 34
   * en dan is een chip op een telefoon net te klein om betrouwbaar te raken. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-size: .82rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vragen__chip:hover { border-color: var(--green-line); background: var(--bg-warm); }
.vragen__chip.is-actief {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.vragen__telling {
  margin: 10px 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* ---------- de vragen ---------- */

.vragen__lijst { display: grid; gap: clamp(22px, 2.6vw, 32px); }

.vragen__groep[hidden],
.vragen__item[hidden] { display: none; }

.vragen .vragen__kop {
  /* Expliciet, want .entry-content h2 zet 2,1rem en marge 2,2em -- en die
   * selector is specifieker dan een klasse alleen. Een categorielabel hoort
   * klein te zijn; zonder deze regel werd "OVER GEGEVENS EN VERTROUWEN" de
   * grootste tekst op de pagina. */
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

.vragen__item {
  border-bottom: 1px solid var(--line-soft);
}
.vragen__item:first-of-type { border-top: 1px solid var(--line-soft); }

.vragen__vraag {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* 44px is de ondergrens voor een aanwijsdoel; een vraag van twee regels is
   * automatisch hoger. */
  min-height: 44px;
  /* De rechterpadding is 6px en niet 0: het teken staat in de flexhoek en kwam
   * daardoor precies op de rand van de lijst -- gemeten 0px. Het was niet
   * afgesneden, maar het leek zo, en een plusje dat de rand raakt leest als een
   * UI-fout. Let op: deze shorthand moet NA padding-right staan, anders
   * overschrijft hij die weer met 0. */
  padding: 15px 10px 15px 0;
  cursor: pointer;
  list-style: none;
}
/* Het driehoekje van <summary> weg: we tekenen ons eigen teken, zodat het aan
 * de rechterkant staat en meedraait met de staat. */
.vragen__vraag::-webkit-details-marker { display: none; }
.vragen__vraag::marker { content: ""; }

.vragen .vragen__vraagtekst {
  flex: 1;
  margin: 0;
  /* Ook expliciet: .entry-content h3 zet marge 1,8em en dat duwt elke vraag
   * 29px naar beneden. De maat komt van de vraag, niet van de plek. */
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.vragen__vraag:hover .vragen__vraagtekst { color: var(--green); }

.vragen__teken {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .15s ease, background-color .15s ease;
}
.vragen__teken::before,
.vragen__teken::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  background: var(--green);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}
/* Het verticale streepje verdwijnt als de vraag open is: plus wordt min. */
.vragen__teken::after { transform: translate(-50%, -50%) rotate(90deg); }
.vragen__item[open] .vragen__teken { border-color: var(--green); background: rgba(83, 109, 98, .08); }
.vragen__item[open] .vragen__teken::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

.vragen__vraag:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

.vragen__antwoord {
  padding: 0 0 18px;
  /* Iets ingesprongen t.o.v. de vraag, zodat het antwoord bij de vraag hoort en
   * niet bij de volgende. */
  padding-left: 0;
  max-width: var(--measure);
  color: var(--ink-2);
}
.vragen__antwoord > :first-child { margin-top: 0; }
.vragen__antwoord > :last-child { margin-bottom: 0; }
.vragen__antwoord p { margin: 0 0 .7em; }
.vragen__antwoord a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- markering van de treffer ---------- */

/* De markering wordt door JS gezet (<mark>), maar de opmaak staat hier: zo
 * verandert de highlight mee met het thema en niet met het script. */
.vragen mark {
  padding: 0 1px;
  color: inherit;
  background: var(--beige);
  border-radius: 2px;
}

/* ---------- niets gevonden ---------- */

.vragen__leeg {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
}
.vragen__leeg[hidden] { display: none; }
.vragen__leeg a { color: var(--green); }

/* ---------- slotblok ---------- */

.vragen__slot {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(24px, 2.8vw, 32px);
  border-top: 1px solid var(--line);
}
.vragen .vragen__slot-kop {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.25;
}
.vragen__slot p { max-width: var(--measure); }
.vragen__slot .btn { margin-top: 6px; }

/* ---------- smalle schermen ---------- */

@media (max-width: 760px) {
  .vragen__bediening {
    /* Op mobiel geen sticky balk: die neemt met zoekveld en vier chips bijna
     * een derde van het scherm in, en dan lees je de vraag door een sleuf. */
    position: static;
    padding: 12px 13px;
  }
  .vragen__filters {
    /* Eén regel, horizontaal scrollend, zodat de chips niet drie regels hoog
     * worden. */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* Rechts een fade: gemeten was de vierde chip op 390px VOLLEDIG buiten beeld
     * (0 van 101px zichtbaar), en dan is er niets dat zegt dat er meer is. Een
     * afgesneden chip is een hint; geen chip is een dood spoor. De fade is een
     * masker, dus hij kost geen extra element en verschuift de tekst niet. */
    /* 14px en niet 26px: de fade vreet zelf zichtbare chipbreedte op. Met 26px
     * bleef er op 390px 14px van de vierde chip over -- meetbaar, maar op het
     * scherm leest dat als een lege zone. Smaller masker, meer chip. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
  }
  .vragen__chip {
    flex: 0 0 auto;
    /* Compacter op mobiel, zodat de vierde chip echt zichtbaar wordt en niet op
     * 14px blijft steken. Dat is de hint dat de rij doorloopt; een fade alleen
     * is te weinig als er niets achter de fade te zien is. */
    padding: 8px 9px;
    font-size: .76rem;
    letter-spacing: -.005em;
  }
  .vragen__filters { gap: 5px; }
  .vragen .vragen__vraagtekst { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vragen__chip,
  .vragen__teken,
  .vragen__teken::before,
  .vragen__teken::after { transition: none; }
}

@media print {
  .vragen__bediening { display: none; }
  .vragen__item { break-inside: avoid; }
  /* Bij printen staat alles open: een dichtgeklapte vraag op papier is een
   * vraag zonder antwoord. */
}