/* Toestemmingsbanner (DEV-5492). Spec: .claude/VISUAL-STYLE-GUIDE.md §22,
   "Documented exception: Google Tag Manager behind the consent banner".

   De server linkt dit bestand alleen als GTM_CONTAINER_ID gezet is
   (server/consent.go); js/consent.js maakt de banner. Alleen plugin-tokens
   uit ddop.css en de knopklassen uit site.css (.btn-lg .btn-outline).

   - Vast onderaan het scherm, over de hele breedte: de pagina verschuift
     niet. Het script zet padding onder de body zodat het einde van de
     footer bereikbaar blijft. De sticky header (bovenaan, met de Menu-knop
     van nav-collapse v1) blijft vrij.
   - Wit vlak met een 1px --border-strong rand bovenaan; geen schaduw
     (BRAND.md §7).
   - "Accepteren" en "Weigeren" zijn even zwaar: allebei .btn-lg .btn-outline
     (48px hoog, ook op een touchscreen ruim 44px), even breed. Twee
     gevulde knoppen naast elkaar mogen niet (stijlgids §7), en een gevulde
     naast een lege zou de ene keuze voortrekken.
   - Kop "Privacy en cookies", daaronder de zin en op een eigen regel de
     link naar de privacy- en cookieverklaring (Anne, DEV-5492).
   - Geen focusval: de banner is een gelabelde regio, Tab loopt gewoon door.
     De focusring is die van site.css. */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface-default);
  border-top: 1px solid var(--border-strong);
}
.consent-banner[hidden] { display: none; }

.consent-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--space-16);
}

/* Kop "Privacy en cookies": de kleine kop van de site (h4-maat, 18px, 700),
   als h2 omdat hij niet onder een andere kop van de pagina valt. Hij is ook
   het label van de regio (aria-labelledby). */
.consent-banner__title {
  margin: 0 0 var(--space-4);
  font-size: 1.125rem;                      /* = --heading-h4-size (18px) */
}
.consent-banner__text,
.consent-banner__more {
  margin: 0;
  max-width: 65ch;
  color: var(--text-primary);
  font-size: var(--body-small-size);
}
/* De link staat op een eigen regel, onder de zin (Anne). */
.consent-banner__more a { text-decoration: underline; }

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
/* Telefoon: de twee knoppen delen de breedte, even breed. */
.consent-banner__actions .btn-lg { flex: 1 1 8rem; }

@media (min-width: 768px) /* tablet */ {
  .consent-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
  }
  .consent-banner__actions { flex-wrap: nowrap; flex-shrink: 0; }
  /* Vanaf tablet breekt de link nooit af: hij staat als geheel op zijn regel. */
  .consent-banner__more { white-space: nowrap; }
  .consent-banner__actions .btn-lg { flex: 0 0 9rem; }
}

/* Inschuiven van onderen; met prefers-reduced-motion verschijnt hij gewoon. */
@media (prefers-reduced-motion: no-preference) {
  .consent-banner--in { animation: consent-banner-in 0.2s ease-out; }
}
@keyframes consent-banner-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}