/* ==========================================================================
   Cookiemelding
   --------------------------------------------------------------------------
   De enige component in dit project die niet uit het ontwerp komt — er zat
   geen cookiemelding in het designpakket. De vormtaal is daarom afgeleid van
   wat er wel ligt: de witte kaart met kleine hoekradius uit de caselijst, de
   knopmaat van .cta__button (14px 20px, medium, 18px) en de kleuren uit
   variables.css.

   Eén regel hieronder is geen opmaak maar een eis, en staat daarom vooraan:
   .cookiemelding__knop kent geen varianten. "Alles afwijzen" en "Accepteer
   alles" delen exact dezelfde achtergrond, letterkleur, maat en padding.
   Zodra een van de twee een eigen klasse krijgt, is de keuze niet meer vrij
   en is de toestemming juridisch waardeloos — dat is waar de Autoriteit
   Persoonsgegevens op handhaaft, en het is het makkelijkste dat iemand hier
   per ongeluk stukmaakt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. De laag waarin de melding hangt

   z-index 960: boven de blauwe paginarand (.page::after, 50) en boven de
   vaste header (900) en de titelkaart van de hero (901), want de melding
   hoort nergens achter te verdwijnen. Maar onder het mobiele menu (2000) —
   dat vult het hele scherm, en een melding die daar doorheen prikt zou over
   de navigatie heen liggen.

   De houder vangt geen muis: alleen het paneel zelf doet dat. De pagina
   ernaast blijft dus gewoon aan te klikken, en dat is precies het verschil
   tussen een melding en een cookiemuur.

   De padding is de breedte van het kader (10px, zie .page::after): zo staat
   de melding er netjes binnen in plaats van eroverheen.
   -------------------------------------------------------------------------- */
.cookiemelding {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  padding: 10px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   `hidden` moet winnen

   Het script schakelt drie dingen met het `hidden`-attribuut: de melding zelf,
   het aanpaspaneel en de knop "Keuze bewaren". Dat attribuut verbergt via de
   browserstijl, en die verliest van élke klasse-selector met een display —
   `.cookiemelding__knop { display: inline-flex }` een paar honderd regels
   hieronder is er zo een.

   Dat is hier ook echt misgegaan: "Keuze bewaren" stond permanent in beeld,
   naast "Alles afwijzen" en "Accepteer alles", terwijl er geen enkel vinkje
   te zien was. Drie knoppen onder elkaar op een telefoon, waarvan één een
   keuze bewaarde die de bezoeker niet had kunnen maken. Aan de HTML was niets
   te zien — het attribuut stond gewoon goed.

   Deze twee selectors (0,1,1 en 0,1,0 op een attribuut) winnen van de
   klassen hieronder en houden dat zo, ook voor wat er later bijkomt.
   -------------------------------------------------------------------------- */
.cookiemelding[hidden],
.cookiemelding [hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Het paneel

   Rechtsonder en niet over de volle breedte: de melding legt zich zo niet
   over de inhoud waar de bezoeker net naar keek. Boven 920px is er ruimte
   genoeg om hem naast de pagina te laten staan; daaronder vult hij de
   breedte (zie punt 7).
   -------------------------------------------------------------------------- */
.cookiemelding__paneel {
  pointer-events: auto;
  box-sizing: border-box;
  margin-left: auto;
  max-width: 480px;
  /* Opengeklapt is dit paneel op een telefoon bijna zo hoog als het scherm.
     Eén stap grotere letter bij de bezoeker, of een langere vertaling, en de
     knoppen zakken eronder weg — met een vast element valt daar niet naartoe
     te scrollen en is er geen enkele manier meer om te antwoorden.

     dvh en niet vh: op iOS rekent vh met het scherm inclusief de adresbalk,
     dus `100vh` is daar hoger dan wat je ziet en zou het paneel precies zo
     ver laten doorlopen als het probleem dat deze regel oplost. De vh-regel
     blijft als terugval staan voor browsers die dvh niet kennen. */
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  /* Vloeiend scrollen met de vinger op iOS, en de scroll blijft binnen het
     paneel in plaats van door te slaan naar de pagina eronder. */
  overscroll-behavior: contain;
  padding: 24px;
  background: var(--base-100);
  border-radius: var(--radius-card);
  /* Het paneel ligt op lichtblauw én op witte secties. Zonder rand valt hij
     op een witte pagina uit elkaar; de schaduw alleen is daar te zacht. */
  border: 1px solid var(--blue-200);
  box-shadow: 0 8px 32px rgba(0, 39, 65, 0.18);
  font-family: var(--font-primary);
  color: var(--base-1200);
}

/* Verschijnt in plaats van er te staan. Dezelfde duur als het mobiele menu
   (0.3s), zodat de site één tempo houdt. */
@media (prefers-reduced-motion: no-preference) {
  .cookiemelding__paneel {
    animation: cookiemelding-op 0.3s ease;
  }
}

@keyframes cookiemelding-op {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* --------------------------------------------------------------------------
   3. Kop en tekst
   -------------------------------------------------------------------------- */
.cookiemelding__kop {
  margin: 0 0 10px;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.3;
  letter-spacing: -0.18px;
  color: var(--blue-1200);
}

.cookiemelding__tekst p {
  margin: 0 0 10px;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: var(--base-1000);
}

.cookiemelding__tekst p:last-child {
  margin-bottom: 0;
}

/* De link naar de verklaring. Onderstreept en niet alleen gekleurd: kleur
   alleen is geen onderscheid voor wie kleuren niet uit elkaar houdt
   (WCAG 1.4.1) — zelfde afweging als sectie 26 van site-overrides.css. */
.cookiemelding__beleidslink {
  color: var(--blue-1000);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookiemelding__beleidslink:hover,
.cookiemelding__beleidslink:focus-visible {
  color: var(--blue-1200);
}

/* --------------------------------------------------------------------------
   4. Het aanpaspaneel

   Een fieldset zonder de standaardrand van de browser: de groepering is voor
   de schermlezer (de legend benoemt waar de vinkjes bij horen), niet voor
   het oog.
   -------------------------------------------------------------------------- */
.cookiemelding__keuzes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--base-400);
}

.cookiemelding__groep {
  margin: 0;
  padding: 0;
  border: 0;
}

.cookiemelding__groep-kop {
  padding: 0;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--blue-1200);
}

.cookiemelding__categorie + .cookiemelding__categorie {
  margin-top: 12px;
}

.cookiemelding__categorie-kop {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 18px in plaats van de ~13px die een browser er standaard van maakt: dit is
   het enige aanraakdoel in het paneel en op een telefoon moet het te raken
   zijn. accent-color kleurt het aangevinkte vakje in de huisstijl zonder dat
   het vinkje nagebouwd hoeft te worden — en een nagebouwd vinkje is precies
   waar de toetsenbedienbaarheid stukgaat. */
.cookiemelding__vinkje {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-1000);
  cursor: pointer;
}

.cookiemelding__categorie-naam {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--blue-1200);
  cursor: pointer;
}

/* "Functioneel" heeft geen vinkje, dus ook geen wijzende cursor. */
.cookiemelding__categorie-kop > .cookiemelding__categorie-naam:first-child {
  cursor: default;
}

.cookiemelding__categorie-vast {
  font-size: 0.75rem; /* 12px */
  font-weight: var(--fw-medium);
  color: var(--green-1000);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* De inspringing zet de uitleg onder de naam in plaats van onder het vinkje,
   zodat vinkje en tekst een kolom vormen. 26px = 18px vakje + 8px gap. */
.cookiemelding__categorie-tekst {
  margin: 4px 0 0;
  padding-left: 26px;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: var(--base-1000);
}

/* --------------------------------------------------------------------------
   5. De knoppen

   "Aanpassen" is een tekstknop en staat apart van het paar: het is de omweg
   naar de keuze, niet een van de antwoorden.
   -------------------------------------------------------------------------- */
.cookiemelding__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.cookiemelding__aanpassen {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  color: var(--blue-1000);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookiemelding__aanpassen:hover,
.cookiemelding__aanpassen:focus-visible {
  color: var(--blue-1200);
}

.cookiemelding__antwoorden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   6. Eén knopklasse, geen varianten

   Zie de kop van dit bestand. green-1200 op wit is ~12:1 en haalt daarmee
   ruim AA (WCAG 1.4.3); green-1000 zou met 4,9:1 net passen en bij de kleine
   maat te krap worden.

   Wie hier ooit "Accepteer alles" wil laten opvallen: dat is het moment om
   deze regel te lezen in plaats van een klasse toe te voegen.
   -------------------------------------------------------------------------- */
.cookiemelding__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  background: var(--green-1200);
  border: 0;
  border-radius: var(--radius-small);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.15px;
  color: var(--base-100);
  white-space: nowrap;
  cursor: pointer;
}

.cookiemelding__knop:hover,
.cookiemelding__knop:focus-visible {
  background: var(--green-1000);
}

/* De melding krijgt zelf de aandacht als hij verschijnt (zie
   cookiemelding.js). Zonder deze regel tekent de browser daar een omlijning
   omheen die er als een fout uitziet; de kop vertelt al waar je bent. */
.cookiemelding:focus {
  outline: none;
}

.cookiemelding :focus-visible {
  outline: 2px solid var(--blue-1000);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Op een telefoon vult de melding de breedte

   920px is het omslagpunt van het hele mobiele ontwerp (zie responsive.css).
   Daaronder is er naast het paneel geen ruimte meer die het de moeite waard
   maakt om hem rechts te houden: hij zou een smalle kolom worden met
   afbrekende knoppen.

   De knoppen gaan onder elkaar en vullen de rij. Dat is niet alleen een
   kwestie van passen — twee knoppen naast elkaar op een smal scherm worden
   allebei zo krap dat "Alles afwijzen" eerder afbreekt dan "Accepteer alles",
   en dan is het paar niet meer gelijkwaardig.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .cookiemelding__paneel {
    max-width: none;
    margin-left: 0;
    padding: 20px;
  }

  .cookiemelding__antwoorden {
    width: 100%;
    margin-left: 0;
  }

  .cookiemelding__knop {
    flex: 1 1 0;
    /* Krimpen mag, maar niet tot onder een leesbare knop; onder ~150px
       breekt "Accepteer alles" in twee regels en verspringt het paar. */
    min-width: 140px;
    /* 44px, en dat is gemeten: met 11px padding op een regel van 19,5px kwam
       de knop op 41,5px uit. Dat haalt WCAG 2.5.8 (24px) ruim, maar blijft
       onder de 44px van 2.5.5 en van de richtlijn van Apple — en dit is de
       enige knop op de site die iemand met een duim moet raken terwijl hij
       eigenlijk iets anders kwam doen. */
    min-height: 44px;
    white-space: normal;
  }
}

/* Onder 420px passen twee knoppen van 140px niet meer naast elkaar (2 × 140
   + 8px gap + 2 × 20px padding = 328px past nog, maar bij de grootste
   lettermaat van de bezoeker niet meer). Ze gaan dan onder elkaar, en
   allebei over de volle breedte — nog steeds precies even zwaar. */
@media (max-width: 420px) {
  .cookiemelding__antwoorden {
    flex-direction: column;
  }

  .cookiemelding__knop {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. De knop in de voettekst

   Staat tussen de voorwaardenlinks (.footer__bottom-links) en moet daar niet
   als knop uit springen maar als link meelopen. Vandaar: geen achtergrond,
   geen rand, en de letter van zijn buren geërfd.
   -------------------------------------------------------------------------- */
.footer__cookieknop[hidden] {
  display: none;
}

.footer__cookieknop {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   9. Niet meedrukken

   Een afgedrukte pagina kan niets bedienen; de melding zou een blok over de
   inhoud heen zijn. Geldt ook voor het opslaan als pdf, wat op deze site
   vooral bij de voorwaarden en de privacyverklaring gebeurt — precies de
   pagina's waar de melding het meest in de weg zit.
   -------------------------------------------------------------------------- */
@media print {
  .cookiemelding,
  .footer__cookieknop {
    display: none !important;
  }
}