/* The privacy-choice banner and its footer controls. Colours and type are
   the literal values `site.css` and `legal.css` already define (--panel /
   --card #161920, --text / --ink #F2EFE8, --text-2 / --muted #B8B4AB,
   --border-strong / --line #262B35, --gold #E2A93B, --gold-hover #F0BC58,
   the #1A1305 gold-button text from chrome.css .btn-primary): written here
   as hex rather than var() because this file is shared by pages that load
   only one of those two stylesheets, under two different variable names, for
   the same colour. Nothing here is a new colour or a new font. */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.consent-banner[hidden] {
  display: none;
}
.consent-box {
  pointer-events: auto;
  width: 100%;
  max-width: 640px;
  /* Leaves room above the banner on any viewport, so it never covers the
     primary navigation or the page's first heading. */
  max-height: calc(100vh - 96px);
  overflow: auto;
  background: #161920;
  color: #f2efe8;
  border: 1px solid #262b35;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  padding: 20px 24px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  .consent-box {
    animation: consent-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@keyframes consent-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.consent-box h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
}
.consent-box p {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #b8b4ab;
}
.consent-box p a {
  color: #e2a93b;
}
.consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.consent-btn {
  appearance: none;
  border: 1px solid #262b35;
  background: transparent;
  color: #f2efe8;
  padding: 9px 16px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  min-height: 40px;
}
.consent-btn-primary {
  background: #e2a93b;
  border-color: #e2a93b;
  color: #1a1305;
  font-weight: 600;
}
.consent-btn-primary:hover,
.consent-btn-primary:focus-visible {
  background: #f0bc58;
}
.consent-btn:focus-visible,
.consent-link:focus-visible {
  outline: 2px solid #e2a93b;
  outline-offset: 2px;
}
/* Footer controls: buttons, styled to sit in the existing "Legal" list next
   to the anchors already there. */
.consent-link {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid transparent;
}
.consent-link:hover,
.consent-link:focus-visible {
  color: #f2efe8;
  border-bottom-color: currentColor;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .consent-banner {
    padding: 12px;
  }
  .consent-box {
    padding: 16px 18px;
    max-height: calc(100vh - 64px);
  }
}