/**
 * Cookie consent banner — rendered by generatePublicFooter() (src/utils/public-header.ts)
 * and driven by /scripts/cookie-consent.js.
 *
 * These rules replace six single-use `u-*` utilities that used to live in generated-utilities.css.
 * The banner root carried `display:none` there, which is why it had to be revealed with an inline
 * `style.display='block'` — a hard conflict with the `hidden` attribute that cookie-consent.js
 * toggles (a class-level `display:none` beats the `hidden` attribute's UA default). Visibility is
 * now owned by `[hidden]` alone, so the script's `banner.hidden = false` actually shows it.
 */

#cookie-consent-banner {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  bottom: 0;
  display: block;
  left: 0;
  padding: 16px;
  position: fixed;
  right: 0;
  z-index: 9999;

  /* Entrance animation. The script adds .cookie-consent-visible ~100ms after unhiding, and removes
     it 300ms before re-hiding — durations below must stay under that 300ms or the banner is yanked
     away mid-transition. */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease;
}

/* Higher specificity than the rule above (id + attribute), so it wins and keeps the banner out of
   the layout until the script decides to show it. Without this, `display:block` above would defeat
   the UA's `[hidden] { display: none }` and the banner would flash on every page load. */
#cookie-consent-banner[hidden] {
  display: none;
}

#cookie-consent-banner.cookie-consent-visible {
  opacity: 1;
  transform: translateY(0);
}

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

.cookie-consent__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 900px;
}

.cookie-consent__text {
  color: var(--fg-muted);
  font-size: .9rem;
  margin: 0;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-consent__btn {
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  padding: 8px 16px;
}

.cookie-consent__btn--accept {
  background: var(--accent);
  border: none;
  color: #000;
  font-weight: 700;
}

.cookie-consent__btn--decline {
  background: var(--home-chip-bg);
  border: 1px solid var(--home-chip-border);
  color: var(--fg);
}

/* Both buttons must stay reachable on a narrow screen — "Reject Non-Essential" is a long string in
   several locales (de/fr/pt especially) and used to overflow the row at 320px. */
@media (max-width: 480px) {
  .cookie-consent__inner {
    gap: 12px;
  }

  .cookie-consent__actions {
    width: 100%;
  }

  .cookie-consent__btn {
    flex: 1 1 auto;
  }
}