/* DataGrip · cookiemelding
   Een rustige balk onderaan, in de huisstijl. De twee knoppen zijn even groot en even
   zwaar: nee zeggen is net zo makkelijk als ja zeggen. De kleuren komen uit de
   huisstijl (style.css of basis.css), met een vaste terugval voor als die ontbreekt. */

.cookie {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  background: var(--bg-raised, #06202c);
  border-top: 1px solid var(--line-teal, #42b0aa);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .6);
  color: var(--text, #d4d0c8);
}
.cookie[hidden] { display: none; }
/* R8:B12 de regel hieronder vervalt: tijdens het typen schuift de melding nu naar onderen weg (zie onderaan).
   Was: .cookie-typen .cookie { display: none; } */
.cookie-in {
  width: min(100% - 2 * var(--marge, 24px), var(--wrap, 1280px)); margin-inline: auto;
  padding: 18px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
}
.cookie-kop { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright, #f0ede6); }
.cookie-tekst p:not(.cookie-kop) { margin-top: 4px; font-size: .9375rem; line-height: 1.5; max-width: 62em; }
.cookie-tekst a { color: var(--bright, #f0ede6); text-decoration: underline; text-decoration-color: var(--teal, #4ECDC4); text-underline-offset: 3px; white-space: nowrap; }
/* R8:B02 hover alleen bij een muis */
@media (hover: hover) and (pointer: fine) { .cookie-tekst a:hover { color: var(--teal, #4ECDC4); } }
.cookie-eerder { color: var(--muted, #9a9690); font-size: .875rem !important; }
.cookie-acties { display: flex; gap: 10px; }
.cookie-knop {
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius, 6px);
  background: transparent; color: var(--bright, #f0ede6);
  border: 1px solid var(--line-strong, #527281);
  transition: border-color .15s, background .15s;
}
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .cookie-knop:hover { border-color: var(--bright, #f0ede6); background: rgba(240, 237, 230, .06); } }
.cookie-knop:focus-visible { outline: 2px solid var(--bright, #f0ede6); outline-offset: 2px; border-color: var(--teal, #4ECDC4); }
/* R8:B04 de knop zakt niet meer 1 px, hij krijgt de drukbeweging van de andere knoppen (zie onderaan).
   Was: .cookie-knop:active { transform: translateY(1px); } */
.cookie-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
  .cookie-in { grid-template-columns: 1fr; padding-block: 14px; gap: 12px; }
  .cookie-kop { font-size: 1rem; }
  .cookie-tekst p:not(.cookie-kop) { font-size: .875rem; }
  .cookie-acties { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-knop { padding-inline: 10px; }
}
.cookie-smal { display: none; }
/* Op een telefoon: de korte tekst, zodat de melding de knop op de pagina niet afdekt. */
@media (max-width: 520px) {
  .cookie-lang, .cookie-breed { display: none; }
  .cookie-smal { display: inline; }
  .cookie-in { padding-block: 10px; gap: 8px; }
  .cookie-kop { font-size: .9375rem; }
  .cookie-tekst p:not(.cookie-kop) { margin-top: 2px; font-size: .8125rem; }
}

/* De knop in de voet om de keuze te wijzigen: ziet eruit als de regels eromheen. */
.voet-cookie { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 24px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .voet-cookie:hover { text-decoration-color: currentColor; } }
.voet-cookie:focus-visible { outline: 2px solid var(--bright, #f0ede6); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .cookie-knop { transition: none; } }
@media (forced-colors: active) { .cookie { border-top: 2px solid CanvasText; } .cookie-knop { border: 1px solid ButtonText; } }
@media print { .cookie { display: none !important; } }

/* ══════════ Ronde 8 (team 4) ══════════ */

/* R8:B12 · De melding komt van onderen en gaat weer naar onderen, langs dezelfde weg (samen met E03: ze komt pas
   na het eerste beeld, zie cookie.js). Alleen transform en opacity bewegen, dus niets in de pagina verspringt.
   Tijdens het typen in een formulier op een telefoon schuift ze weg in plaats van in een frame te verdwijnen.
   Bij minder beweging blijft alleen een korte fade over. */
.cookie { transition: transform 320ms var(--ease-lade, cubic-bezier(.32, .72, 0, 1)), opacity 200ms ease-out, visibility 0s; }
@starting-style { .cookie { transform: translateY(100%); } }
.cookie.is-weg, .cookie-typen .cookie {
  transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 200ms var(--ease-uit, cubic-bezier(.23, 1, .32, 1)), opacity 200ms ease-out, visibility 0s linear 200ms;
}
@media (prefers-reduced-motion: reduce) {
  /* geen schuifbeweging, wel een fade: binnenkomen vanaf onzichtbaar, en bij het sluiten zichtbaar blijven
     tot de fade klaar is (cookie.js zet daarna hidden) */
  @starting-style { .cookie { opacity: 0; } }
  .cookie.is-weg { visibility: visible; }
}

/* R8:B04 · Drukfeedback, gelijk aan de andere knoppen (.btn in basis.css en style.css): indrukken direct,
   loslaten in 160 ms, bij minder beweging geen schaal. R8:B14: rand en vlak met var(--t-druk) en ease. */
.cookie-knop {
  transition: border-color var(--t-druk, 160ms) ease, background-color var(--t-druk, 160ms) ease,
              transform var(--t-druk, 160ms) var(--ease-uit, cubic-bezier(.23, 1, .32, 1));
}
.cookie-knop:active { transform: scale(.97); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) { .cookie-knop:active { transform: none; } }

/* R8:D09 · Op de smalste telefoon (tot 399): de korte kop op één regel, zodat de hoofdknop op de pagina vrij
   blijft. De link "Meer over cookies" krijgt een raakvlak van 44 hoog zonder dat de melding hoger wordt. */
.cookie-kop-kort { display: none; }
@media (max-width: 399px) {
  .cookie-kop-lang { display: none; }
  .cookie-kop-kort { display: inline; }
}
.cookie-tekst a { display: inline-block; padding-block: 12px; margin-block: -12px; }