/* ============================================================
   VRAAG EN ANTWOORD, EN DE MEELOPENDE ZIJKOLOM OP ULTRABREED
   Gebruikt door veelgestelde-vragen.html (alles) en over-ons.html (alleen
   het deel ZIJKOLOM onderaan).

   Bewust een eigen bestand en niet gedeeld/stijl.css: daar werkt op dit
   moment iemand anders aan de rondingen, de knoppen en het menu. Alle
   maten hieronder komen uit de variabelen van de gedeelde stijl; er is
   niets nieuws bedacht.
   Dit bestand wordt NA gedeeld/stijl.css geladen, dus waar de selector
   even zwaar weegt wint de regel hier. Dat is bij .vragenlijst a bewust zo.
   ============================================================ */

/* ============================================================
   1. DE ACCORDEON
   Deze regels stonden tot 26 aug 2026 in de <style> van de pagina zelf,
   met alle acht vragen open bij het laden. Gemeten was de pagina daardoor
   5.714 px lang op 3440 px: je kon de vragen niet overzien zonder acht
   antwoorden door te scrollen. Nu staat alleen de eerste open (zie de
   toelichting in de HTML) en houdt het attribuut name="vragen" er
   hoogstens een tegelijk open. Dat is native HTML, dus het werkt zonder
   een regel javascript en met het toetsenbord.
   ============================================================ */

/* Zelfde breedte als de kleurlijn en de intro erboven (--pg-kolom, 46rem):
   gemeten was het blok 720px terwijl de kleurlijn op 552px eindigde, en dan
   steken de scheidingslijnen van de vragen zichtbaar buiten de kop uit. */
.vragen{
  max-width:var(--pg-kolom);
  margin:0;
}
.vraag{
  border-top:1px solid var(--gl-line);
  scroll-margin-top:6rem;
  /* Nodig om straks van hoogte 0 naar auto te kunnen animeren; erft door
     naar ::details-content, het kastje dat de browser om het antwoord zet. */
  interpolate-size:allow-keywords;
}
.vraag:last-of-type{ border-bottom:1px solid var(--gl-line); }

/* De klikbare regel met de vraag. list-style en de webkit-marker weg, want
   het driehoekje van de browser past niet bij de typografie van de site;
   het pijltje hieronder komt ervoor in de plaats. */
.vraag summary{
  list-style:none;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.75rem 0 0.75rem;
  cursor:pointer;
}
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary h2{
  font-size:clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight:500;
  line-height:1.3;
  margin:0;
}

/* Het teken rechts. Was een plus die bij openen in een minteken veranderde:
   twee losse letters, dus je zag het wisselen maar niet bewegen. Nu een
   pijlpunt van twee randjes die een halve slag draait, zodat de beweging
   zelf vertelt wat er gebeurt. Dicht wijst hij naar beneden, open naar
   boven. Zelfde idee als de chevron van shadcn/ui (rotate-180 in 200 ms).
   align-self:center houdt hem netjes naast een vraag van twee regels; de
   rest van de regel lijnt op de basislijn uit. */
.vraag summary::after{
  content:'';
  flex:0 0 auto;
  align-self:center;
  width:0.55rem;
  height:0.55rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  opacity:0.4;
  transition:transform var(--gl-duration-fast) var(--gl-ease),
             opacity var(--gl-duration-fast) var(--gl-ease);
}
.vraag[open] summary::after{ transform:rotate(225deg); }
.vraag summary:hover::after{ opacity:1; }
/* De omlijning bij toetsenbordbediening hoort om de hele regel, niet om de
   losse tekst: anders zie je op een brede kolom nauwelijks waar je staat. */
.vraag summary:focus-visible{ outline:3px solid var(--gl-accent); outline-offset:2px; }

/* Het antwoord schuift open in plaats van te springen. ::details-content is
   het kastje dat de browser zelf om de inhoud van een <details> zet; met
   interpolate-size (zie .vraag hierboven) mag de hoogte daarvan van 0 naar
   auto lopen, en dat kan zonder javascript. Kent een browser deze
   pseudo-element-selector niet, dan valt de hele regel weg en klapt het
   antwoord gewoon direct open: precies het gedrag van voor deze wijziging.

   Waarom een ANIMATIE en geen transition, want dat laatste is korter:
   met een transition op block-size scrolt de browser niet meer naar een
   antwoord waar je vanaf de vragenlijst naartoe springt. Gemeten in
   Chromium 151 op 3440 px, 26 aug 2026: klikken op vraag 8 in de lijst
   rechts liet scrollY op 0 staan, terwijl de vraag zelf op y=1564 stond,
   dus buiten beeld. Zonder die transition, en met deze animatie, scrolt
   hij wel (scrollY 1310). Vermoedelijk berekent de browser de sprong
   terwijl het kastje nog nul hoog en afgeknipt is.
   De prijs: dichtklappen gaat ineens in plaats van geleidelijk. Dat is
   het waard, want de vragenlijst moet het zonder javascript doen.

   De 3px binnenruimte met een even grote negatieve marge verandert niets aan
   de uitlijning, maar geeft de focusrand van een link in het antwoord net
   genoeg lucht om niet door overflow:hidden afgesneden te worden. */
.vraag[open]::details-content{
  overflow:hidden;
  padding-inline:3px;
  margin-inline:-3px;
  animation:vraag-uitklappen var(--gl-duration-fast) var(--gl-ease);
}
@keyframes vraag-uitklappen{
  from{ block-size:0; opacity:0; }
  to{ block-size:auto; opacity:1; }
}

/* Het antwoord erft de tekststijl van .tekst (zie stijl.css); hier alleen de
   ruimte eronder en de laatste alinea zonder loze marge.
   scroll-margin-top staat hoger dan bij .vraag omdat de links in de zijkolom
   naar het ANTWOORD wijzen en niet naar de vraag: dat is wat een dichte
   <details> door de browser zelf laat openklappen. Deze marge zorgt dat de
   vraag zelf dan boven het antwoord in beeld blijft staan. */
.antwoord{
  padding:0 0 2rem;
  scroll-margin-top:9rem;
}
.antwoord p:last-child{ margin-bottom:0; }

/* Bronregel onder een cijfer, zelfde rol als "Cijfers CBS, meting 2025" op
   de home: klein en terughoudend, maar wel aanklikbaar.
   Let op de .antwoord ervoor: het antwoord draagt ook de klasse .tekst, en
   `.tekst p` uit stijl.css weegt zwaarder dan een losse `.bron`. Zonder die
   extra klasse kreeg de bronregel gemeten gewoon 12,75px en opacity 0,78,
   dus precies de maat van de lopende tekst die hij juist niet moet hebben. */
.antwoord .bron{
  margin:-0.5rem 0 0;
  font-size:var(--gl-text-sm);
  opacity:0.5;
}
.antwoord .bron a{ color:var(--gl-ink); text-decoration:underline; text-underline-offset:0.2em; }
.antwoord .bron a:hover{ color:var(--gl-accent); }

/* Doorverwijzing naar de pagina waar het volledige antwoord staat. Bewust een
   eigen regel en geen link middenin een zin: de vertaling van deze pagina
   vervangt de inhoud van een element in zijn geheel, en een losse link is dan
   een eigen, klein element in plaats van een stuk HTML in een attribuut. */
.antwoord .verder{ margin:0.25rem 0 0; font-size:1.0625rem; opacity:1; }
.antwoord .verder a{
  color:var(--gl-ink);
  text-decoration:underline;
  text-underline-offset:0.2em;
}
.antwoord .verder a:hover{ color:var(--gl-accent); }

@media (max-width:768px){
  .vraag summary{ padding:1.25rem 0 0.6rem; gap:1rem; }
  .vraag summary h2{ font-size:1.125rem; }
  .antwoord{ padding-bottom:1.5rem; }
}

/* ============================================================
   2. ZIJKOLOM OP ULTRABREED
   Op 3440 px stond de inhoud van deze twee pagina's in een kolom van 1104 px
   met de rechterhelft leeg, terwijl de voettekst wel over de volle breedte
   loopt. Op de juridische pagina's is dat op 25 aug opgelost door de
   inhoudsopgave ernaast te zetten en te laten meelopen. Deze twee pagina's
   krijgen dezelfde oplossing, met dezelfde klasse .inhoudsopgave, zodat de
   float- en sticky-berekening uit gedeeld/stijl.css hergebruikt wordt en
   niet op twee plekken staat.

   De leeskolom zelf blijft 46rem. Lopende tekst breder dan ongeveer 75
   tekens leest meetbaar trager, en dat verandert niet omdat het scherm
   groter is.

   Waarom .zijkolom er los bij staat: onder 2600 px zetten de juridische
   pagina's hun opgave BOVEN de tekst, en daar is hij daar op zijn plaats
   (dertig artikelen). Hier niet. Op de vragenpagina zou hij dan een tweede,
   dichtbij staande kopie zijn van de acht vragen die al onder elkaar in
   beeld staan, en op over-ons vijf links boven een pagina van vijf alinea's.
   Deze lijst bestaat om de lege rechterhelft werk te geven; waar die leegte
   er niet is, staat hij er ook niet.
   ============================================================ */
.pagina > .zijkolom{ display:none; }

@media (min-width:2600px){
  .pagina > .zijkolom{ display:block; }
}

/* De vragenlijst is geen kopie van de acht regels links, want hij doet iets
   wat die regels niet doen: hij laat zien welke vraag openstaat, en zodra je
   in een lang antwoord zit zijn de andere vragen uit beeld gescrold en is dit
   het enige overzicht. Klikken opent de vraag en sluit de vorige, ook zonder
   javascript: de link wijst naar het antwoord binnen de dichte <details> en
   de browser klapt die dan zelf open. */
.vragenlijst ol{ columns:1; padding-left:1.5rem; }
.vragenlijst li{ margin-bottom:0.75rem; }
.vragenlijst a{
  display:block;
  font-size:1rem;
  line-height:1.35;
}
/* De vraag die openstaat. Alleen kleur en volle dekking, geen vlak eromheen:
   het is een aanwijzing, geen tweede knop. */
.vragenlijst a[aria-current="true"]{
  opacity:1;
  color:var(--gl-accent);
}

/* ============================================================
   3. MINDER BEWEGING
   De gedeelde regel voor prefers-reduced-motion vangt `*`, `*::before` en
   `*::after`, maar niet ::details-content: dat is een eigen pseudo-element
   en valt buiten die drie. Daarom hier nog een keer, expliciet.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vraag summary::after{ transition:none; }
  .vraag[open]::details-content{ animation:none; }
}