/* Cookiebanner (src/components/CookieBanner.astro, logica in js/analytics.js) */

/* body >: wint van .subpage > * (position: relative) */
body > .cookie-banner {
  position: fixed;
  z-index: 50; /* boven de vaste nav (30/40), onder de skip-link (100) */
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  max-width: 26rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--dj-surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-pill);
  color: var(--dj-text);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  animation: dj-cookie-banner-in var(--dur-med) var(--ease-out);
}
body > .cookie-banner[hidden] { display: none; }
.cookie-banner:focus { outline: none; }
.cookie-banner:focus-visible { outline: 3px solid var(--dj-blue); outline-offset: 4px; }

.cookie-banner__title {
  margin: 0 0 var(--space-2);
  color: var(--dj-ink);
  font-size: var(--fs-body);
  font-weight: 600;
}
.cookie-banner__text { margin: 0; }
.cookie-banner__text a { color: var(--dj-ink); text-underline-offset: 3px; }
.cookie-banner__text a:hover { color: var(--dj-blue); }

/* Twee gelijke knoppen: weigeren is even zichtbaar als aanvaarden */
.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.cookie-banner__btn {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dj-ink);
  color: var(--dj-white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}
.cookie-banner__btn:hover { background: var(--dj-text); }

@keyframes dj-cookie-banner-in {
  from { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  body > .cookie-banner { animation: none; }
}

/* "Cookie-instellingen" in de onderste footerbalk: een knop die eruitziet als de links ernaast */
.site-footer__cookie-settings {
  align-self: flex-start; /* niet uitrekken tot de hoogte van de taalkeuze: tekst op één lijn met de links */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.site-footer__cookie-settings[hidden] { display: none; }
.site-footer__cookie-settings:hover { color: var(--dj-blue); }