/* Bottom bar, slides up once cookie-banner.js decides it's safe to
   show (after the front page's own multi-second entrance overlay has
   actually cleared, or a short flat delay on every other page, which
   has no such overlay to wait for). [hidden] stays until JS removes it
   — no flash of an unstyled/positioned bar before that decision runs. */
.cookie-banner {
  position: fixed;
  left: var(--theme-section-padding);
  bottom: var(--theme-section-padding);
  z-index: 60;
  /* min() so this stays a compact corner card on desktop but can never
     overflow past the right edge on a narrow phone. */
  max-width: min(20rem, calc(100vw - 2 * var(--theme-section-padding)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: var(--theme-line-width) solid var(--theme-line-color);
  background: var(--brand-color-dark);
  color: var(--brand-color-light);
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 25%);

  translate: -120% 0;
  transition: translate 0.6s var(--theme-ease-signature);
}

.cookie-banner[hidden] {
  /* Beats the UA [hidden] rule (display: none) the same way
     nav-overlay.css's own [hidden] override does — author CSS always
     wins over UA CSS, so without this the base rule above (an ordinary
     class selector, no [hidden] involved) would otherwise still apply
     display: flex and show the bar before JS ever decides to. */
  display: none;
}

.cookie-banner.is-visible {
  translate: 0 0;
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* No color/text-decoration override here — reset.css's sitewide
   "p a:not(.button)" rule already underlines this (an accent-colored
   box-shadow, not text-decoration) since it's a plain <a> inside a
   <p>. Adding text-decoration: underline on top of that stacked a
   second, native underline right next to the box-shadow one. */

.cookie-banner__actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

/* Plain inline text links, not boxed buttons — same underline
   mechanic as reset.css's "p a:not(.button)" prose links (an accent
   box-shadow that fills up on hover), just written directly since
   that rule only targets <a>, not these <button>s. Equal styling
   between accept/decline on purpose — Dutch cookie-consent guidance
   requires neither option to visually stand out over the other. */
.cookie-banner__action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: inherit;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 0 var(--theme-color-accent);
  transition: box-shadow 0.25s 0s var(--theme-ease-signature);
}

.cookie-banner__action:hover {
  box-shadow: inset 0 -1.4em 0 0 var(--theme-color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

@media (width <= 640px) {
  .cookie-banner {
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
  }
}