/* ==========================================================================
   JJB Calibrated - cookie consent banner

   One category exists on this site: analytics. So the choice is a plain
   binary, Accept or Reject, not a bank of granular toggles for categories
   that don't exist. No pre-ticked box, no "close this to accept" - the ICO
   is explicit that continuing to browse is not consent, so the only way out
   of this banner is an actual click on one of the two buttons.
   ========================================================================== */

/* The UA stylesheet's [hidden] { display: none } and this rule's own
   `display: flex` sit at equal specificity, so whichever is declared later in
   the cascade wins on a tie - which would be this one, silently cancelling
   `hidden`. That exact bug shipped once already on the chat panel and left an
   invisible element sitting over the contact form eating clicks. Scoping the
   layout rule to :not([hidden]) here avoids repeating it from the start. */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  z-index: 130;
  width: min(94vw, 640px);
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  font-family: var(--font-body);
}

.consent-banner[hidden] {
  visibility: hidden;
}

.consent-banner:not([hidden]) {
  display: block;
}

.consent-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.consent-banner__inner {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .consent-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }
}

.consent-banner__text {
  margin: 0;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

.consent-banner__text a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex: none;
}

.consent-banner__actions .btn {
  padding: 0.7rem 1.35rem;
  font-size: var(--t-body-sm);
}

/* The Reject button is a .btn--ghost, which reads its pill colour and text
   colour off whatever is behind it via backdrop-filter - fine when the
   banner sits over the site's dark background, invisible (white text on a
   white pill) if it happens to sit over a lighter section instead. The
   banner is fixed-position, so it can end up over either. Pinning an
   explicit white pill with dark text here removes that dependency, matching
   the same treatment `.on-light .btn--ghost` already uses elsewhere, so
   Reject reads correctly no matter what is behind it. */
.consent-banner__actions .btn--ghost {
  color: var(--ink-900);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(8, 52, 30, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 10px 26px -16px rgba(8, 52, 30, 0.4);
}

.consent-banner__actions .btn--ghost:hover {
  box-shadow:
    inset 0 0 0 1px rgba(30, 80, 40, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 14px 30px -16px rgba(8, 52, 30, 0.5);
}

/* The footer link that lets someone reopen the banner and change their mind
   later. Styled to sit quietly among the other legal links rather than draw
   attention to itself. */
.footer-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer-cookie-prefs:hover {
  text-decoration: underline;
}

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