/* ==========================================================================
   Cookie Consent Banner
   --------------------------------------------------------------------------
   Two-layer structure:
     .cookie-consent              — fullscreen wrapper, no visuals of its own
       .cookie-consent__backdrop  — fades page out with blur + dim
       .cookie-consent__panel     — the bottom-anchored frosted card

   States toggled by cookie-consent.js:
     [hidden]                     — initial pre-render state
     .is-visible                  — banner faded in, overlay active
     .is-backdrop-dismissed       — user scrolled (or clicked) — overlay
                                    fades AND panel shrinks to compact bar
                                    (icon + description hidden, title +
                                    buttons remain visible at the bottom)
   ========================================================================== */

.cookie-consent {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none; /* children opt in individually */
}

.cookie-consent[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Backdrop — fullscreen frosted overlay
   -------------------------------------------------------------------------- */

.cookie-consent__backdrop {
  position: absolute;
  inset: 0;
  /* Lighter dim so the page content shows through enough for the panel's
     own backdrop-filter blur to be visible against it — without the
     page peeking through, the panel reads as a flat solid card. */
  background: rgba(13, 21, 32, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cookie-consent.is-visible .cookie-consent__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.cookie-consent.is-backdrop-dismissed .cookie-consent__backdrop {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Panel — bottom-anchored card
   -------------------------------------------------------------------------- */

.cookie-consent__panel {
  position: absolute;
  inset: auto var(--sp-4, 1rem) var(--sp-4, 1rem) var(--sp-4, 1rem);
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4, 1rem);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);

  /* Glass effect: lower opacity (0.72 vs 0.9) lets the page-content blur
     show through the panel, giving the same frosted vocabulary as the
     speed-dial and main-nav. Still readable because backdrop blur(14px)
     softens whatever's behind enough to keep text legible. */
  background: rgba(29, 38, 53, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--clr-border-bright, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 8px 32px rgba(0, 0, 0, 0.4));

  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease,
              transform 0.35s ease,
              padding 0.3s ease,
              gap 0.3s ease;
}

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

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */

.cookie-consent__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 187, 245, 0.08);
  color: var(--clr-accent, #0fbbf5);
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.25s ease;
}

.cookie-consent__icon svg {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.cookie-consent__copy {
  min-width: 0;
}

.cookie-consent__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--clr-text-bright, #fff);
  letter-spacing: 0.01em;
  transition: font-size 0.3s ease, margin 0.3s ease;
}

.cookie-consent__text {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
  color: var(--clr-text, #cbd5e1);
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

.cookie-consent__link {
  color: var(--clr-accent, #0fbbf5);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.18s ease;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Actions — Accept is the primary CTA, Reject is a low-emphasis ghost.
   Both share the same hit-target size so PECR's "as easy to refuse"
   requirement is met; only the visual prominence differs.
   -------------------------------------------------------------------------- */

.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 0.75rem);
  flex-shrink: 0;
}

.cookie-consent__btn {
  font-family: inherit;
  cursor: pointer;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm, 6px);
  white-space: nowrap;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              transform 0.18s ease,
              box-shadow 0.18s ease,
              padding 0.25s ease,
              font-size 0.25s ease;
}

/* Accept — bright accent, draws the eye */
.cookie-consent__btn--accept {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--clr-accent, #0fbbf5);
  border: 1px solid var(--clr-accent, #0fbbf5);
  color: #0a1420;
}

.cookie-consent__btn--accept:hover,
.cookie-consent__btn--accept:focus-visible {
  background: #2bc7fb;
  border-color: #2bc7fb;
  color: #0a1420;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--clr-accent-glow, rgba(15, 187, 245, 0.4));
}

.cookie-consent__btn--accept:focus-visible {
  outline: 2px solid var(--clr-accent, #0fbbf5);
  outline-offset: 2px;
}

/* Reject — ghost / text-link styling. Same padding (same hit target),
   but no fill, no border, lower-contrast colour, sentence case, normal
   weight. The accept button visually dominates by design. */
.cookie-consent__btn--reject {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(203, 213, 225, 0.55);
  text-decoration: underline;
  text-decoration-color: rgba(203, 213, 225, 0.25);
  text-underline-offset: 3px;
}

.cookie-consent__btn--reject:hover,
.cookie-consent__btn--reject:focus-visible {
  color: var(--clr-text-bright, #fff);
  text-decoration-color: currentColor;
  background: rgba(255, 255, 255, 0.04);
}

.cookie-consent__btn--reject:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* ==========================================================================
   SHRUNK STATE — applied when backdrop is dismissed (first scroll or click).
   Reduces visual footprint to a slim bar with title + actions only.
   The Accept button stays prominent; the chrome (icon, description) folds
   away so the banner gets out of the way of the content the visitor is
   actively scrolling to read.
   ========================================================================== */

.cookie-consent.is-backdrop-dismissed .cookie-consent__panel {
  grid-template-columns: 1fr auto;
  grid-template-areas: "copy actions";
  padding: 0.55rem 1rem;
  gap: var(--sp-3, 0.75rem);
}

/* Icon and description vanish in the shrunk state. display:none doesn't
   transition, but the panel's padding/gap transitions still provide motion
   as the layout reflows — combined with the backdrop fade-out the effect
   reads as one smooth shrink. */
.cookie-consent.is-backdrop-dismissed .cookie-consent__icon,
.cookie-consent.is-backdrop-dismissed .cookie-consent__text {
  display: none;
}

.cookie-consent.is-backdrop-dismissed .cookie-consent__title {
  font-size: 0.82rem;
  margin-bottom: 0;
}

.cookie-consent.is-backdrop-dismissed .cookie-consent__btn {
  padding: 0.42rem 0.95rem;
  font-size: 0.78rem;
}

/* ==========================================================================
   MOBILE — tighter inset, smaller icon, generous top padding, larger
   touch targets on the buttons. Spaced grid so the title and description
   don't crowd the icon.
   ========================================================================== */

@media (max-width: 640px) {
  .cookie-consent__panel {
    inset: auto var(--sp-3, 0.75rem) var(--sp-3, 0.75rem) var(--sp-3, 0.75rem);
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon  copy"
      "actions actions";
    row-gap: var(--sp-3, 0.75rem);
    column-gap: var(--sp-3, 0.75rem);
    padding: 1.1rem 1rem 1rem;
    align-items: start; /* top-align icon with first line of title */
  }

  .cookie-consent__icon {
    grid-area: icon;
    width: 36px;
    height: 36px;
    margin-top: 0.15rem; /* nudge to optical center with title baseline */
  }

  .cookie-consent__icon svg {
    width: 18px;
    height: 18px;
  }

  .cookie-consent__copy {
    grid-area: copy;
  }

  .cookie-consent__title {
    font-size: 0.92rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
  }

  .cookie-consent__text {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .cookie-consent__actions {
    grid-area: actions;
    justify-content: flex-end;
    gap: var(--sp-3, 0.75rem);
    padding-top: 0.25rem;
  }

  /* Touch-friendly minimum hit targets — ~44px tall regardless of font */
  .cookie-consent__btn {
    padding: 0.7rem 1.1rem;
  }
}

/* MOBILE — shrunk state: single row, title + actions, no icon, no description.
   Title size tightens further so a 320px-wide phone still has room for both
   buttons on the same line. */
@media (max-width: 640px) {
  .cookie-consent.is-backdrop-dismissed .cookie-consent__panel {
    grid-template-columns: 1fr auto;
    grid-template-areas: "copy actions";
    padding: 0.5rem 0.75rem;
    row-gap: 0;
    align-items: center;
  }

  .cookie-consent.is-backdrop-dismissed .cookie-consent__icon {
    margin: 0;
  }

  .cookie-consent.is-backdrop-dismissed .cookie-consent__title {
    font-size: 0.78rem;
  }

  .cookie-consent.is-backdrop-dismissed .cookie-consent__btn {
    padding: 0.45rem 0.85rem;
  }

  .cookie-consent.is-backdrop-dismissed .cookie-consent__actions {
    padding-top: 0;
  }
}

/* ==========================================================================
   Floating bottom-UI coordination
   --------------------------------------------------------------------------
   cookie-consent.js measures each floating pill's natural `bottom` value
   and the banner's current top edge, then publishes per-pill lift values
   on <html>:
     --lift-speed-dial  — px the speed-dial must translate UP
     --lift-scroll-pill — px the scroll-pill must translate UP
   Each lift is calculated independently because the two pills have
   different natural `bottom` positions (sp-6 vs sp-8) that vary by media
   query — a single shared offset can't put them BOTH at the right height
   above the banner. Both pills already have `transition: translate ...`
   in their own stylesheets, so the override animates smoothly.
   ========================================================================== */

body.cookie-banner-active .speed-dial {
  translate: 0 calc(-1 * var(--lift-speed-dial, 0px));
}

body.cookie-banner-active .scroll-pill {
  translate: 0 calc(-1 * var(--lift-scroll-pill, 0px));
}

/* ==========================================================================
   Honour reduced-motion preferences — fade only, no slides or hover lift.
   Shrink transitions stay (they're functional, not decorative).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__backdrop {
    transition: opacity 0.2s ease;
  }
  .cookie-consent__panel {
    transition: opacity 0.2s ease, padding 0.2s ease;
    transform: none;
  }
  .cookie-consent__btn {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cookie-consent__btn:hover {
    transform: none;
  }
}