/* ===========================================================================
   Cookiebanner — Sennasearch (Timo, 19 augustus 2026)
   ===========================================================================
   Hoort bij js/cookiebanner.js en bij het injectieblok in _qa/build.py
   (COOKIE_HEAD / cookiebanner_blok). Staat als los bestand en niet in base.css,
   want dit is een juridisch onderdeel dat als geheel aan of uit kan.

   WAAROM GEEN EXTERN GRIJS BALKJE. Trello-kaart 14: de banner wordt gebouwd in
   de eigen stijl van de site. Alle waarden hieronder komen uit css/tokens.css;
   er staat geen losse hex in dit bestand.

   WAAROM WEIGEREN EN ACCEPTEREN DEZELFDE MAAT HEBBEN. De Autoriteit
   Persoonsgegevens eist dat weigeren net zo makkelijk is als accepteren: even
   zichtbaar, even bereikbaar, evenveel kliks. Daarom staan de twee knoppen
   naast elkaar in dezelfde rij, met dezelfde padding, dezelfde lettergrootte en
   dezelfde breedte (flex: 1 1 0). Het kleurverschil (oranje vlak tegenover
   omlijnd) is het enige verschil en volgt de bestaande knoppenhierarchie van de
   site; de maat en de plaats zijn gelijk. Verander dit niet naar een grote
   accepteer-knop met een klein "weigeren"-linkje: dat is precies waar de AP op
   handhaaft.

   Z-INDEX 55. Boven de vaste site-header (40) en boven de exit-intent-kaart,
   onder het plan-modaal (60). Een modaal dat de bezoeker zelf opent hoort boven
   een banner die vanzelf verschijnt.
   =========================================================================== */

.cookiebanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 24px);
  pointer-events: none;   /* alleen de kaart zelf vangt kliks, niet de hele strook */
}

.cookiebanner[hidden] { display: none; }

.ck-kaart {
  pointer-events: auto;
  width: 100%;
  max-width: 760px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  padding: clamp(20px, 3.2vw, 30px);
  /* Lange instellingenlijst op een laag scherm: de kaart scrollt, de pagina niet. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}

.cookiebanner.is-open .ck-kaart {
  opacity: 1;
  transform: none;
}

.ck-titel {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}

.ck-tekst {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}

/* Onderstreping expliciet: base.css zet sitebreed a { text-decoration: none }. */
.ck-tekst a {
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ck-tekst a:hover { color: var(--orange-600); }

/* --- Knoppenrij ---------------------------------------------------------- */

.ck-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* flex: 1 1 0 op allebei: gelijke breedte, ongeacht de lengte van het label.
   Dit is de regel die "weigeren even makkelijk als accepteren" afdwingt. */
.ck-acties .btn { flex: 1 1 0; min-width: 150px; }

.ck-instel-knop {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-body);
  border-bottom: 2px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.ck-instel-knop:hover {
  color: var(--text-strong);
  border-color: var(--orange-500);
}

/* Op smalle schermen onder elkaar, maar nog steeds even breed en in dezelfde
   volgorde: weigeren staat bovenaan, niet weggedrukt onder accepteren. */
@media (max-width: 560px) {
  .ck-acties .btn { flex: 1 1 100%; }
  .ck-instel-knop { align-self: flex-start; }
}

/* --- Instellingenpaneel -------------------------------------------------- */

.ck-instellingen {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ck-instellingen[hidden] { display: none; }

.ck-groep {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-paper);
}
.ck-groep:last-of-type { border-bottom: 0; }

.ck-groep-naam {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.ck-groep-uitleg {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
}

.ck-vast {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Schakelaar. Een echte checkbox eronder, zodat toetsenbord, schermlezer en
   formuliergedrag klopt zonder eigen ARIA-machinerie. */
.ck-schakel {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 46px;
  height: 26px;
  cursor: pointer;
}
.ck-schakel input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ck-schakel .ck-spoor {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--sand-200);
  transition: background-color .18s ease;
  pointer-events: none;
}
.ck-schakel .ck-spoor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2, 14, 44, .28);
  transition: transform .18s ease;
}
.ck-schakel input:checked + .ck-spoor { background: var(--orange-500); }
.ck-schakel input:checked + .ck-spoor::after { transform: translateX(20px); }
.ck-schakel input:focus-visible + .ck-spoor {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
}

.ck-opslaan { margin-top: 18px; width: 100%; justify-content: center; }

/* Geen hover-lift op deze ene knop. .btn--primary:hover schaalt met 1.03, en op
   een knop die de volle breedte van de kaart heeft steekt dat er links en rechts
   tien pixels buiten. De kaart is een scrollcontainer (max-height + overflow-y),
   dus dat levert bij het aanwijzen een horizontale schuifbalk in de kaart op. De
   kleurwissel bij hover blijft gewoon staan. */
.ck-opslaan:hover { transform: none; box-shadow: none; }

/* De kop krijgt bij het verschijnen van de kaart focus, zodat een schermlezer en
   een toetsenbordgebruiker meteen bij de vraag uitkomen in plaats van hem als
   laatste in de tabvolgorde tegen te komen. De kop is geen bedienbaar element,
   dus de focusring eromheen zegt niets en leest als een fout. De knoppen in de
   kaart houden hun eigen focusring, en dat is waar hij hoort. */
.ck-titel:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .ck-kaart { transition: none; transform: none; }
  .ck-schakel .ck-spoor,
  .ck-schakel .ck-spoor::after { transition: none; }
}