/* ==========================================================================
   vp/vragen.css  —  de vraagblokken op de hele site.

   Sinds 30 augustus 2026 draagt dit bestand de vraagblokken op elke pagina
   die er een heeft: index.html, werkwijze, beveiliging, compliance, over-ons,
   traject en veelgestelde-vragen. Daarvoor stond de uitklapvorm alleen op de
   vragenpagina en stonden de andere zes pagina's op de open vorm, met de
   vraag als kop en het antwoord er meteen onder. Eén vorm, dus één plek waar
   hij gebouwd wordt. Wie een pagina toevoegt met vragen, koppelt dit bestand
   en gebruikt dezelfde klassen. Bouw geen tweede variant.

   De template levert de vlakken, de radii, de gloed, de roosters en de
   typografie. Gebruikt wordt daarvan: .hero-section met .hero-bg-circle,
   .common-heading-div, .feature-count-wrapper met .feature-count-card, en
   .faq-grid met .faq-div. Dit bestand doet vier dingen die de template niet
   heeft.

     1. scroll-margin-top op de vijf groepsankers, zodat een bezoeker die via
        /veelgestelde-vragen/#veiligheid binnenkomt de kop van die groep ziet
        en niet de onderrand ervan. Zelfde gedeelde ankerwaarde.
     2. De sprongkaarten bovenaan de vragenpagina: een .feature-count-card die
        een link is. De template heeft die kaart alleen als tekstblok, dus de
        linkreset, de hover en de focusring staan hier.
     3. De vraag als <details>. Zeven pagina's dragen samen 69 vragen, en die
        allemaal open zetten leest niet. <details> en <summary> klappen uit
        zonder JavaScript en dragen hun eigen staat naar een schermlezer, dus
        er komt geen script aan te pas en er is geen aria-expanded nodig.
     4. Het rooster op start uitlijnen. .faq-grid erft grid-template-rows uit
        de template en items rekken standaard uit; een openstaande vraag zou
        dan haar buurman op dezelfde hoogte trekken.

   GEEN backdrop-filter. In WebKit is dat tijdens scrollen duur en het is in
   dit project al eerder stukgelopen; de opdrachtgever kijkt in Safari.
   Er wordt alleen transform en filter geanimeerd, en de hoogte van een
   uitklappende vraag blijft ongeanimeerd.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ankers
   -------------------------------------------------------------------------- */

#over-pilo,
#veiligheid,
#de-start,
#prijs,
#regels,
#kennismaken {
  scroll-margin-top: clamp(88px, 6vw + 40px, 132px);
}

/* --------------------------------------------------------------------------
   2. De sprongkaarten
   -------------------------------------------------------------------------- */

.vp-sprongen {
  margin-top: 8px;
}

/* De kaart is hier een klikvlak, dus hij mag een eigen vorm hebben. De naam
   eronder blijft tekst: kleur en gewicht dragen het onderscheid en het woord
   noemt de betekenis zelf. */
.vp-sprong {
  border-radius: var(--_spacing---radius--24px);
  color: inherit;
  text-decoration: none;
  padding: 14px 18px;
  /* .3s * 0,7 = .21s, dezelfde regel als ANIMATIE-PATROON.md. Dit bestand
     viel op 30 augustus 2026 nog buiten dat werk. */
  transition: transform .21s cubic-bezier(.16, 1, .3, 1),
              filter .21s cubic-bezier(.16, 1, .3, 1);
}

.vp-sprong:hover {
  transform: translate3d(0, -3px, 0);
  filter: drop-shadow(0 12px 22px rgba(34, 48, 59, .10));
}

.vp-sprong:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* De teller onder de naam. --color--gray-900 (#6a665e) haalt op het krijtvlak
   van de pagina (#FBF9F4) 5,10 en dat is genoeg voor 18px. */
.vp-sprong-aantal {
  color: var(--color--gray-900);
}

/* --------------------------------------------------------------------------
   3. De vraag als uitklapper
   -------------------------------------------------------------------------- */

/* Het kaartvlak is hetzelfde papier als .feature-card, op het krijtvlak van de
   pagina. #a5441a haalt daarop 5,36 en #6a665e 4,95. */
.vp-vraag {
  background-color: var(--color--gray-50);
  border-radius: var(--_spacing---radius--24px);
  transition: filter .21s cubic-bezier(.16, 1, .3, 1);
}

.vp-vraag:hover {
  filter: drop-shadow(0 12px 22px rgba(34, 48, 59, .10));
}

/* list-style op none haalt het driehoekje weg in Firefox en in Chromium; de
   ::-webkit-details-marker eronder doet hetzelfde in oudere WebKit. Zonder
   allebei staat er een tweede teken naast het onze. */
.vp-vraag > summary {
  grid-column-gap: 16px;
  border-radius: var(--_spacing---radius--24px);
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 24px;
  list-style: none;
  display: flex;
  cursor: pointer;
}

.vp-vraag > summary::-webkit-details-marker {
  display: none;
}

.vp-vraag > summary:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* De kop staat in de accentkleur en wordt donkerder bij hover, zodat de rij
   zich als aanwijsbaar leest zonder dat er een tweede vlak bij komt. */
.vp-vraag > summary:hover .h4-heading {
  color: var(--vp-accent-hover);
}

/* Het teken rechts. Alleen transform, want hoogte animeren mag niet en de
   hoogte van de uitklap blijft daarom ongeanimeerd. */
.vp-vraag-teken {
  color: var(--vp-accent-op-licht);
  flex: none;
  margin-top: 2px;
  line-height: 0;
  /* .25s * 0,7 = .175s, dezelfde regel als ANIMATIE-PATROON.md. */
  transition: transform .175s cubic-bezier(.16, 1, .3, 1);
}

.vp-vraag[open] .vp-vraag-teken {
  transform: rotate(180deg);
}

/* Het antwoord. De maatregel van 461px komt uit de template en blijft staan;
   de padding sluit aan op die van de summary erboven. */
.vp-vraag > .faq-ans {
  padding: 0 24px 24px;
}

/* --------------------------------------------------------------------------
   4. Het rooster
   -------------------------------------------------------------------------- */

/* .faq-grid staat in de template op drie vaste rijen, want daar staan zes
   vragen in. Hier staan er zeven tot tien per groep, dus de rijen groeien mee.
   align-items op start houdt een dichte vraag klein als haar buurman openstaat. */
.vp-vragen-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Breedtes
   -------------------------------------------------------------------------- */

.vp-vragen-inleiding {
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   Smaller dan 992px
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .vp-vragen-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}

@media (max-width: 767px) {
  .vp-vragen-grid {
    grid-template-columns: 1fr;
  }
}

/* Onder 480px is de ruimte op: de kaart houdt zijn vorm maar krijgt minder
   lucht, zodat de vraag op twee regels past in plaats van op vier. */
@media (max-width: 479px) {
  .vp-vraag > summary {
    grid-column-gap: 12px;
    padding: 18px 18px;
  }

  .vp-vraag > .faq-ans {
    padding: 0 18px 20px;
  }

  .vp-sprong {
    padding: 12px 14px;
  }
}

/* --------------------------------------------------------------------------
   Bewegingsvoorkeur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vp-sprong,
  .vp-vraag,
  .vp-vraag-teken {
    transition: none;
  }

  .vp-sprong:hover {
    transform: none;
  }
}