/* ============================================================
   Cookie consent banner (ml-consent)
   ============================================================
   Glass refinement pass (v2). The panel now matches the floating header's
   RESTING glass, not the opened mega-menu: a transparent navy pane (~0.56
   navy alpha + blur(16px) saturate(160%)) so the page reads clearly through
   it. On top of that glass:

     - a cursor-following EDGE GLOW ported 1:1 from the homepage .pathway-card
       (a ::before radial fill + a mask-composite ::after that lights only the
       1.5px ring/corners). The JS sets --cx / --cy (pointer px within the
       banner) on #ml-consent, so the light tracks the cursor on hover and
       sits as a soft always-on edge sheen the rest of the time;
     - lit-glass buttons: a translucent brand-red glass Accept and a light
       glass-chip Decline, each with a realistic top specular sheen and a
       faint inner shadow at the foot.

   Markup contract (unchanged): #ml-consent.ml-consent > .ml-consent__inner >
   .ml-consent__body + .ml-consent__actions. [hidden] / .is-visible /
   .is-leaving states preserved. position:fixed bottom-left desktop, bottom
   card mobile, non-modal (role="region", no focus trap).

   Note on pseudo-elements: .ml-consent's ::before / ::after are now the glow
   layers (matching the pathway card). The brand-red top sweep line moved onto
   .ml-consent__inner::before so the markup contract still holds.

   Contrast: white text over ~0.56 navy glass can fall below AA when the page
   behind it is light. A subtle darker-navy density gradient sits behind ONLY
   the text block (.ml-consent__body::before) to lift body text + link back
   over 4.5:1 while the panel edges stay clearly transparent. Measured worst
   case (over the LIGHT /products/ page) is reported in the build notes.
   Tokens only; no new hex where a token exists.
   ------------------------------------------------------------ */

.ml-consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;                 /* above page content, below the header (z 50 + its menus): this sits over the body, the header still owns the top */
  width: min(460px, calc(100vw - 32px));

  /* RESTING-header glass: transparent navy so the page shows through (the
     opened header/mega-menu used 0.96-0.98; we deliberately move away from
     that). Same blur + saturate as the resting header. */
  background: rgba(25, 22, 64, 0.56);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 56px rgba(25, 22, 64, 0.42);
  color: #fff;

  overflow: hidden;            /* clips the glow + accent line to the rounded corners */
  isolation: isolate;          /* own stacking context so the glow z-indexing is local */

  /* resting (entrance target) transform; the hidden attribute keeps it out of
     the layout until JS removes it, then .is-visible animates from below */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease-out),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* The hidden attribute fully removes it (no flash, no a11y exposure) before JS
   takes over. Belt and braces alongside WordPress's own [hidden] rule. */
.ml-consent[hidden] { display: none; }

/* ---------- Cursor-following glow (ported from .pathway-card) ----------
   ::before is the soft radial FILL glow; ::after is the BORDER-ONLY edge glow
   (mask-composite leaves only the 1.5px ring lit, so the edges/corners catch
   the light). --cx / --cy are px from consent.js; under reduced motion the JS
   does not set them, so both fall back to a centred 50%/50% static glow. */
.ml-consent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* fill glow: brand-blue core with a faint warm centre so it separates from
     the navy glass (the pathway cards glow on a light surface; on dark navy a
     touch of brightness + warmth makes the same technique read) */
  background: radial-gradient(
    circle 320px at var(--cx, 50%) var(--cy, 50%),
    color-mix(in oklab, var(--color-brand-blue) 30%, transparent) 0%,
    color-mix(in oklab, var(--color-brand-blue) 16%, transparent) 36%,
    transparent 70%
  );
  /* soft always-on base sheen; the cursor tracking + hover lift do the rest */
  opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ml-consent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;              /* the ring thickness */
  /* edge ring: a bright blue-white core (more white than the pathway card so it
     pops against navy) fading to brand-blue then out, so the corners/edges
     catch the light like glass */
  background: radial-gradient(
    circle 240px at var(--cx, 50%) var(--cy, 50%),
    color-mix(in oklab, var(--color-brand-blue) 70%, white) 0%,
    color-mix(in oklab, var(--color-brand-blue) 80%, transparent) 24%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;   /* light only the border ring */
  /* always-on edge sheen for glass realism; intensifies on hover */
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-out);
}
/* Cursor over the banner: light both layers up so the glow clearly follows. */
.ml-consent:hover::before { opacity: 1; }
.ml-consent:hover::after  { opacity: 1; }

/* ---------- Inner wrapper (sits above the glow) ---------- */
.ml-consent__inner {
  position: relative;
  z-index: 1;                  /* keep all content above ::before / ::after */
  padding: var(--space-5);     /* 24px */
}

/* Brand-red sweep along the top edge, echoing .mega-menu::before. Moved onto
   the inner wrapper (the panel's own pseudo-elements are now the glow). A
   whisper, not a wall: it fades in only once the card is visible. */
.ml-consent__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-brand-red) 28%,
    color-mix(in oklab, var(--color-brand-blue) 80%, #fff) 62%,
    transparent
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 520ms var(--ease-out) 120ms,
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

/* ---------- Entrance / exit ---------- */
.ml-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ml-consent.is-visible .ml-consent__inner::before {
  opacity: 1;
  transform: scaleX(1);
}
.ml-consent.is-leaving {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease-out),
              transform 360ms var(--ease-out);
}

/* ---------- Copy ---------- */
.ml-consent__body {
  position: relative;          /* anchors the text-protection scrim */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Text-protection scrim: a subtle darker-navy density gradient behind ONLY the
   text block. It restores AA for white body text + the link when the page
   behind the glass is light, without darkening the panel edges (which stay
   transparent). Sits behind the copy, inside the rounded inner padding. */
.ml-consent__body::before {
  content: "";
  position: absolute;
  inset: -10px -12px -8px -12px;
  z-index: -1;
  border-radius: var(--radius-md);
  background: radial-gradient(
    120% 120% at 18% 30%,
    rgba(25, 22, 64, 0.50) 0%,
    rgba(25, 22, 64, 0.34) 45%,
    rgba(25, 22, 64, 0.0) 100%
  );
  pointer-events: none;
}
.ml-consent__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.ml-consent__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  /* full-strength white over the body scrim clears 4.5:1 even on a light page;
     a hair of text-shadow gives a touch more separation on busy backdrops */
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
}

/* ---------- Inline privacy link ---------- */
.ml-consent__link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 1px;
  border-radius: 1px;          /* gives the focus ring tidy corners */
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.ml-consent__link:hover {
  border-color: var(--color-brand-red);
}
.ml-consent__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-color: transparent;
}

/* ---------- Actions ---------- */
.ml-consent__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);         /* 12px */
  margin-top: var(--space-5);  /* 24px */
}

.ml-consent__btn {
  position: relative;
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  min-height: 40px;            /* comfortable touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* clips the glass sheen to the pill */
  isolation: isolate;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
}
/* No specular sheen / gradient on the buttons (Leonard): both are flat glass that
   read as part of the panel, distinguished only by a hairline border and (for
   Accept) a red wash. */
.ml-consent__btn > * { position: relative; z-index: 1; }
.ml-consent__btn:active {
  transform: scale(0.97);
}
.ml-consent__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Accept = the same flat glass treatment as Decline, in red: a single
   translucent brand-red wash (NO gradient) + a red hairline + a white label.
   Same blur as the panel so the page tints through, clearly the red choice. */
.ml-consent__btn--accept {
  flex: 1 1 auto;
  border: 1px solid color-mix(in oklab, var(--color-brand-red) 70%, transparent);
  background: color-mix(in oklab, var(--color-brand-red) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
}
.ml-consent__btn--accept:hover {
  background: color-mix(in oklab, var(--color-brand-red) 56%, transparent);
  border-color: color-mix(in oklab, var(--color-brand-red) 88%, transparent);
}
.ml-consent__btn--accept:focus-visible {
  /* red button on navy: offset the white ring so it reads clearly */
  outline-offset: 3px;
}

/* Decline = the same transparency as the panel glass: no fill of its own, just a
   hairline border + white label, so it reads as part of the same glass. No
   gradient, no chip tint. */
.ml-consent__btn--decline {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(25, 22, 64, 0.45);
}
.ml-consent__btn--decline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
}

/* ---------- Mobile (<= 600px): comfortable bottom bar, full-width buttons ---------- */
@media (max-width: 600px) {
  .ml-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .ml-consent__inner {
    padding: var(--space-5);   /* keep 24px breathing room */
  }
  .ml-consent__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);       /* 8px */
  }
  .ml-consent__btn {
    width: 100%;
  }
}

/* ---------- Reduced motion: no transforms, static centred glow ----------
   tokens.css already zeroes --duration-*; this also removes the raw-cubic-bezier
   transforms so nothing slides for users who asked for stillness. The JS skips
   setting --cx/--cy under reduced motion, so the glow falls back to a centred
   50%/50% static sheen (kept on, just not cursor-animated). */
@media (prefers-reduced-motion: reduce) {
  .ml-consent,
  .ml-consent.is-leaving {
    transition: opacity 1ms linear;
    transform: none;
  }
  .ml-consent.is-visible { transform: none; }
  .ml-consent__inner::before {
    transition: opacity 1ms linear;
    transform: scaleX(0);
  }
  .ml-consent.is-visible .ml-consent__inner::before { transform: scaleX(1); }
  /* glow stays static (no cursor tracking); keep a calm always-on sheen */
  .ml-consent::before,
  .ml-consent::after { transition: none; }
  .ml-consent:hover::before { opacity: 0.6; }
  .ml-consent:hover::after  { opacity: 0.7; }
  .ml-consent__btn:active { transform: none; }
}