/*
 * Cookie consent banner — shared minimal CSS.
 *
 * 2026-04-27 fix on top of v3: keep the compact bottom-right card at ALL
 * viewports. The previous mobile rule (≤640px) flattened the card into a
 * full-width sticky bar at bottom:0 to "keep Emma's FAB clear", but in
 * practice the full-width bar overlapped lead-form TCPA disclosures,
 * inline quote-form right edges, fixed-CTA bars, and trust badges across
 * the 5 product sites. Operator complaint: "cookie banner overlaps the
 * form on first paint". Resolution: compact card stays compact on
 * mobile too — `right:16px bottom:16px` with `width:calc(100vw-32px)`
 * capped at `max-width:360px`. Mobile users still see the full message
 * + Accept button + Manage link, but the card occludes only the
 * bottom-right corner instead of the entire bottom strip. Emma's FAB
 * still gets clearance via the existing 80px / 152px bottom offset on
 * the 641-1279px range; the new ≤640px rule keeps FAB clearance via the
 * narrow card width (FAB is at right:24px width:56px, the cookie card
 * is right:16px width:max(360px, 100vw-32px) — the card sits ABOVE the
 * FAB with the same auto-stack as desktop because the card is now also
 * pinned bottom:16px on mobile rather than bottom:0).
 *
 * 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. 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 {
  /* NEW-MOBILE-9: prevent rubber-band scroll-chaining from the banner /
     modal into the page behind on iOS Safari + Chrome Android. */
  overscroll-behavior: contain;

  /* 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;
  /* Mobile UX: ≥44px tap target so the Manage link doesn't fat-finger the Accept button. */
  padding: 8px 4px;
  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: 44px;
  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 card stays compact bottom-right (NOT full-width).
   2026-04-27 fix: the prior full-width mobile bar (bottom:0, width:100vw)
   overlapped form CTAs / TCPA disclosures / trust badges on the 5 product
   sites. Compact card with `right:16px bottom:16px` and a 360px max-width
   leaves the rest of the bottom strip free for inline form content. Emma's
   FAB sits at right:24px on mobile so the card (right:16px, width capped
   at calc(100vw-32px)) stacks above it via the bottom:16px offset rather
   than colliding edge-to-edge. The `--cookie-bar-bottom` stays at the
   default 96px from the .cookie-consent block on most mobile viewports;
   chat-widget.css sets the FAB to bottom:80px on ≤1279px so the card sits
   above the FAB at bottom:96px (with the ≤640px override here narrowing
   the card width but not the bottom inset). */
@media (max-width: 640px) {
  .cookie-consent {
    --cookie-bar-right: 16px;
    /* Keep --cookie-bar-bottom at the inherited 96px so the card clears
       the chat FAB the same way it does on desktop. The previous mobile
       rule that pinned bottom:0 caused the form-overlap regression. */
    --cookie-bar-width: min(360px, calc(100vw - 32px));
  }
  .cookie-consent__banner {
    /* Slightly smaller corner radius reads cleaner at the narrower
       mobile width but the card stays a card — no more border-radius:0
       full-bleed treatment. */
    border-radius: 12px;
    /* iOS safe-area still applied via the base .cookie-consent__banner
       padding-bottom: env(safe-area-inset-bottom). The right-edge inset
       is naturally 16px from the new --cookie-bar-right value, so we
       no longer need padding-right to clear the FAB. */
  }
  .cookie-consent__banner-inner {
    padding: 12px 14px;
  }
  /* Hidden state still translates down + fades out — same behavior as
     desktop, just a slightly larger Y offset so the card visibly slides
     past its own bottom edge before fully fading. */
  .cookie-consent[data-state="hidden"] .cookie-consent__banner {
    transform: translateY(24px);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   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;
  /* Mobile UX: ≥44px tap target on the modal close X. */
  width: 44px;
  height: 44px;
  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;
  }
}