/*
 * Cookie consent banner — shared minimal CSS.
 *
 * 2026-04-26 redesign v3: shrunk the bar from full-width sticky-bottom into
 * a compact bottom-RIGHT card that sits above Emma's chat FAB (56px circle
 * at bottom:24px right:24px, z-88). The banner offsets itself by 96px
 * (FAB height 56px + 16px breathing gap + 24px FAB bottom inset) so the
 * FAB stays tappable. On mobile (≤640px) the banner reverts to a
 * full-width sticky-bottom card so it doesn't compete with the FAB on a
 * narrow viewport. Includes a 10s auto-dismiss timer (cancelled on
 * hover/focus, restarted ~3s after mouseleave/blur) — driven from
 * cookie-banner.js. Banner copy + structure are unchanged from v2;
 * only the chrome shrunk further.
 *
 * v2 (prior): trimmed the sticky bar from "copy + Privacy + Manage +
 * Reject + Accept" down to just "Manage cookie preferences" link + a
 * single "Accept" button. The detailed 4-category preferences modal
 * (now also containing the Reject all button) is opt-in only.
 *
 * Vanilla CSS (no Tailwind/PostCSS pipeline) so the file is a single
 * artifact dropped into all 6 sites without per-site rebuilds. Sister
 * sites that DO build Tailwind get the same look from the inline utility
 * classes in cookie-banner.njk; this file is the load-bearing copy for
 * site-hub (no Tailwind build) and the source of truth for the JS-driven
 * data-state="hidden|banner-visible|modal-open" transitions.
 *
 * Brand palette: navy #0f172a + gold #f59e0b. Card uses translucent navy
 * background with white text + a single gold-accented Accept button.
 *
 * Accessibility:
 *  - Focus rings ≥ 3px gold, ≥ 4.5:1 contrast.
 *  - Hit areas on buttons + toggles ≥ 44px on mobile.
 *  - Hidden via [hidden] + [aria-hidden] for assistive-tech consistency.
 *  - prefers-reduced-motion zeroes out animations and the FAB-pulse
 *    keyframes (matched in chat-widget.css).
 */

.cookie-consent {
  /* Custom properties — per-site can override in main.css if needed. */
  --cookie-bar-bg: rgba(15, 23, 42, 0.95);   /* navy-900 @ 95% */
  --cookie-bar-text: #ffffff;
  --cookie-bar-text-muted: rgba(255, 255, 255, 0.85);
  --cookie-bar-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);

  --cookie-accent: #f59e0b;            /* amber-500 (gold) */
  --cookie-accent-text: #0f172a;
  --cookie-accent-hover: #fbbf24;      /* amber-400 */

  --cookie-ghost-border: rgba(255, 255, 255, 0.4);
  --cookie-ghost-hover-bg: rgba(255, 255, 255, 0.1);

  --cookie-modal-bg: #ffffff;
  --cookie-modal-text: #0f172a;
  --cookie-modal-text-muted: #475569;
  --cookie-modal-border: #e2e8f0;
  --cookie-modal-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
  --cookie-modal-footer-bg: #f8fafc;

  --cookie-modal-primary: #0f172a;
  --cookie-modal-primary-text: #ffffff;
  --cookie-modal-primary-hover: #1e293b;
  --cookie-modal-ghost-bg: #ffffff;
  --cookie-modal-ghost-border: #cbd5e1;
  --cookie-modal-ghost-hover-bg: #f1f5f9;

  --cookie-toggle-off: #cbd5e1;
  --cookie-toggle-on: #16a34a;          /* green-600 */
  --cookie-toggle-locked: #94a3b8;
  --cookie-toggle-thumb: #ffffff;

  --cookie-focus-ring: #f59e0b;         /* gold */

  /* 2026-04-26: lowered z-banner from 100 → 40 so Emma chat widget (z-88
     in chat-widget.css) stacks ABOVE the cookie banner. Modal stays at 110
     because when the user explicitly opens "Manage cookie preferences" we
     want the modal to take focus over everything including the chat FAB. */
  --cookie-z-banner: 40;
  --cookie-z-modal: 110;

  --cookie-radius: 12px;
  --cookie-radius-input: 6px;
  --cookie-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Position of the floating card. Default = above Emma's FAB on desktop.
     FAB sits at bottom:24px height:56px → 24+56+16(gap) = 96px.
     Intermediate breakpoint: chat-widget.css shifts the FAB up to
     bottom:80px on viewports <1280px (it's clearing a fixed CTA bar on
     some sites). At that range we need the card at 80+56+16 = 152px.
     The intermediate value is set via the @media block below. */
  --cookie-bar-right: 24px;
  --cookie-bar-bottom: 96px;
  --cookie-bar-width: 320px;

  font-family: var(--cookie-font);
}

/* ──────────────────────────────────────────────────────────────────────
   State machine (data-state) — JS in cookie-banner.js drives this.
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent[data-state="hidden"] .cookie-consent__banner {
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
}
.cookie-consent[data-state="banner-visible"] .cookie-consent__banner,
.cookie-consent[data-state="modal-open"] .cookie-consent__banner {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* When ONLY the modal is open (e.g. user clicked footer Cookie preferences
   after a prior decision), tuck the bar away so we don't double up. */
.cookie-consent[data-state="modal-open"] .cookie-consent__banner {
  /* Bar still shows behind the backdrop so closing the modal returns to
     a sensible state for users mid-decision. The backdrop covers it. */
}

/* ──────────────────────────────────────────────────────────────────────
   Compact bottom-right banner — sits above Emma's chat FAB
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent__banner {
  position: fixed;
  right: var(--cookie-bar-right);
  bottom: var(--cookie-bar-bottom);
  /* Width capped so we stay inside the design — clamp lets it shrink on
     ~360px viewports without overflowing. left:auto guards against the
     Tailwind utility classes (left-0 right-0) the inline markup also
     emits — vanilla wins because of source order. */
  left: auto;
  width: var(--cookie-bar-width);
  max-width: calc(100vw - 32px);
  z-index: var(--cookie-z-banner);
  background: var(--cookie-bar-bg);
  color: var(--cookie-bar-text);
  border-radius: var(--cookie-radius);
  box-shadow: var(--cookie-bar-shadow);
  /* iOS safe-area so the card clears the home indicator on mobile (where
     it goes full-width and bottom:0 — see media query below). */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 220ms ease, opacity 220ms ease;
  /* Slight blur behind the card for a softer, premium look on Safari/iOS. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cookie-consent__banner-inner {
  /* No max-width / margin-auto — card is already constrained by
     --cookie-bar-width on the parent. Inner just lays out the content. */
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* "Manage cookie preferences" — the only descriptive element on the bar.
   Styled like a quiet text link: no underline at rest, underline on hover.
   The compact variant slims the tap target to 36px since the link sits
   above the Accept button rather than next to it; Accept stays at 44px,
   which is the WCAG AA hit target. */
.cookie-consent__manage-link {
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cookie-bar-text-muted);
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-align: left;
}
.cookie-consent__manage-link:hover {
  color: var(--cookie-accent);
  text-decoration: underline;
}
.cookie-consent__manage-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cookie-focus-ring);
  border-radius: 2px;
}

/* Compact card layout: a tiny copy line on top, then a row of
   "Manage" link + "Accept" button. Matches the Tailwind utility row
   class on the inline markup so site-hub (no Tailwind) still lays
   out correctly. */
.cookie-consent__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cookie-bar-text-muted);
}

.cookie-consent__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Accept fills its share of the row (compact card needs a dense tap target).
   Manage stays auto-width as a link-style control on the left. */
.cookie-consent__banner .cookie-consent__row .cookie-consent__btn--primary {
  flex: 1 1 auto;
  min-width: 96px;
}

/* Intermediate viewport (641px–1279px): chat-widget.css shifts Emma's
   FAB up to bottom:80px to clear a fixed CTA bar on some sites. The
   cookie card has to follow it up — 80+56+16 = 152px — otherwise the
   card overlaps the FAB. Width also tightens slightly so the card
   doesn't crowd whatever's at bottom-right of the page on a narrow
   tablet (e.g. some sites' fixed quote-form sidebar). */
@media (min-width: 641px) and (max-width: 1279px) {
  .cookie-consent {
    --cookie-bar-bottom: 152px;
  }
}

/* On mobile (≤640px) the compact card becomes a full-width sticky-bottom
   card. Emma's FAB on mobile (≤1279px) shifts up to bottom:80px AND on
   ≤640px hides when the chat panel opens — so the cookie card sits at
   bottom:0 with internal safe-area padding without colliding. */
@media (max-width: 640px) {
  .cookie-consent {
    --cookie-bar-right: 0;
    --cookie-bar-bottom: 0;
    --cookie-bar-width: 100vw;
  }
  .cookie-consent__banner {
    border-radius: 0;
    /* Add right padding so the Accept button doesn't sit underneath the
       FAB at bottom:80px — the card is at bottom:0, but a tall card could
       reach up into the FAB zone. Inner padding-right keeps the buttons
       clear of the 56px FAB column on the right edge. */
    padding-right: env(safe-area-inset-right, 0px);
  }
  .cookie-consent__banner-inner {
    padding: 14px 16px;
  }
  /* Hidden state slides down on mobile (no card to slide up to). */
  .cookie-consent[data-state="hidden"] .cookie-consent__banner {
    transform: translateY(120%);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Buttons — bar variants (white-on-navy) and modal variants (navy-on-white)
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--cookie-radius-input);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 80ms ease;
  white-space: nowrap;
}

.cookie-consent__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cookie-focus-ring);
}

.cookie-consent__btn:active { transform: translateY(1px); }

/* Bar primary: gold Accept on navy. */
.cookie-consent__banner .cookie-consent__btn--primary {
  background: var(--cookie-accent);
  color: var(--cookie-accent-text);
  border-color: var(--cookie-accent);
}
.cookie-consent__banner .cookie-consent__btn--primary:hover {
  background: var(--cookie-accent-hover);
  border-color: var(--cookie-accent-hover);
}

/* Bar ghost: outlined Reject on navy. */
.cookie-consent__banner .cookie-consent__btn--ghost {
  background: transparent;
  color: var(--cookie-bar-text);
  border-color: var(--cookie-ghost-border);
}
.cookie-consent__banner .cookie-consent__btn--ghost:hover {
  background: var(--cookie-ghost-hover-bg);
}

/* Modal primary: navy Save on white. */
.cookie-consent__modal .cookie-consent__btn--primary {
  background: var(--cookie-modal-primary);
  color: var(--cookie-modal-primary-text);
  border-color: var(--cookie-modal-primary);
}
.cookie-consent__modal .cookie-consent__btn--primary:hover {
  background: var(--cookie-modal-primary-hover);
}

/* Modal ghost: outlined Reject on white. */
.cookie-consent__modal .cookie-consent__btn--ghost {
  background: var(--cookie-modal-ghost-bg);
  color: var(--cookie-modal-text);
  border-color: var(--cookie-modal-ghost-border);
}
.cookie-consent__modal .cookie-consent__btn--ghost:hover {
  background: var(--cookie-modal-ghost-hover-bg);
}

/* ──────────────────────────────────────────────────────────────────────
   Modal — opt-in only (opens on Manage / footer Cookie preferences)
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--cookie-z-modal);
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cc-fade-in 200ms ease forwards;
}

/* The HTML5 `hidden` attribute is `display: none` per UA stylesheet, but
   `display: flex` above (and the inline Tailwind `flex` class on the same
   element on the 5 Tailwind sites) override the UA rule. Without this,
   the preferences modal renders open on first load — flashing the
   detailed category settings even when the user only wants to dismiss
   the bottom banner. Higher specificity (class + attribute) beats both
   `display: flex` rules without needing `!important`. */
.cookie-consent__modal-backdrop[hidden] {
  display: none;
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cookie-consent__modal {
  background: var(--cookie-modal-bg);
  color: var(--cookie-modal-text);
  border-radius: var(--cookie-radius);
  box-shadow: var(--cookie-modal-shadow);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  animation: cc-modal-in 220ms ease forwards;
}

@keyframes cc-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cookie-consent__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--cookie-modal-border);
}

.cookie-consent__modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cookie-modal-text);
}

.cookie-consent__modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cookie-modal-text-muted);
  border-radius: 6px;
  transition: background 160ms ease, color 160ms ease;
}
.cookie-consent__modal-close:hover {
  background: var(--cookie-modal-ghost-hover-bg);
  color: var(--cookie-modal-text);
}
.cookie-consent__modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cookie-focus-ring);
}

.cookie-consent__modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.cookie-consent__modal-desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cookie-modal-text-muted);
}

.cookie-consent__modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--cookie-modal-border);
  background: var(--cookie-modal-footer-bg);
}

@media (max-width: 480px) {
  .cookie-consent__modal-footer {
    flex-direction: column-reverse;
  }
  .cookie-consent__modal-footer .cookie-consent__btn { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────
   Categories
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent__category {
  border: 0;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--cookie-modal-border);
}
.cookie-consent__category:last-of-type { border-bottom: 0; padding-bottom: 4px; }

.cookie-consent__category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-consent__category-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--cookie-modal-text);
  margin: 0;
  padding: 0;
}
.cookie-consent__category-label label { cursor: pointer; }

.cookie-consent__category-desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cookie-modal-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────
   Toggles
   ────────────────────────────────────────────────────────────────────── */

.cookie-consent__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-height: 32px;
}

.cookie-consent__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cookie-consent__toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--cookie-toggle-off);
  border-radius: 999px;
  transition: background 200ms ease;
  flex-shrink: 0;
}

.cookie-consent__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cookie-toggle-thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}

.cookie-consent__toggle-input:checked ~ .cookie-consent__toggle-track {
  background: var(--cookie-toggle-on);
}
.cookie-consent__toggle-input:checked ~ .cookie-consent__toggle-track .cookie-consent__toggle-thumb {
  transform: translateX(18px);
}

.cookie-consent__toggle-input:focus-visible ~ .cookie-consent__toggle-track {
  box-shadow: 0 0 0 3px var(--cookie-focus-ring);
}

.cookie-consent__toggle--locked .cookie-consent__toggle-track {
  background: var(--cookie-toggle-locked);
  opacity: 0.7;
}
.cookie-consent__toggle--locked .cookie-consent__toggle-thumb {
  transform: translateX(18px);
}

.cookie-consent__toggle-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--cookie-modal-text-muted);
  min-width: 26px;
  text-align: left;
}

.cookie-consent__toggle-on,
.cookie-consent__toggle-off { display: inline; }
.cookie-consent__toggle-on { display: none; }
.cookie-consent__toggle-input:checked ~ .cookie-consent__toggle-text .cookie-consent__toggle-on { display: inline; }
.cookie-consent__toggle-input:checked ~ .cookie-consent__toggle-text .cookie-consent__toggle-off { display: none; }

/* ──────────────────────────────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__banner,
  .cookie-consent__btn,
  .cookie-consent__toggle-track,
  .cookie-consent__toggle-thumb,
  .cookie-consent__modal-backdrop,
  .cookie-consent__modal {
    transition: none !important;
    animation: none !important;
  }
}