/* ==========================================================================
   Formium Alliance -- Liquid Glass Header (v3 -- correct technique)
   Uses the verified working "glass-filter / glass-overlay / glass-specular"
   layering: an empty absolutely-positioned layer with
   backdrop-filter: blur(0px) + isolation: isolate + filter: url(#lg-dist)
   captures and distorts what's behind it. A second layer paints the tint
   + highlight border on top of that. Real content stays untouched above.

   v2's mistake was chaining backdrop-filter: blur() url() directly --
   that's a different (much weaker/unreliable) technique. v3 replaces it
   with the actual mechanism used in the reference implementation.

   Also: .header-six / .btn-v2-white ship their OWN opaque inline
   background + blur baked into the HTML (and re-applied by a JS scroll
   animation via the .header-six-scroll class). That has to be nulled
   out with !important, or the glass layers just sample an already-
   opaque, already-blurred surface with nothing left to distort.

   Relies on SVG filters #lg-dist (header) and #lg-dist-btn (buttons)
   being present once in the page. #lg-dist ships with the page template
   itself; #lg-dist-btn is injected by fix_liquid_glass_buttons.py --
   add_liquid_glass_header.py's own injection logic silently skipped it
   site-wide because its guard only checked for #lg-dist already
   existing, not #lg-dist-btn specifically.
   ========================================================================== */

:root {
  --lg-header-bg: rgba(10, 10, 10, 0.35);
  --lg-header-highlight: rgba(255, 255, 255, 0.45);
  /* Buttons now match the header's neutral transparent glass instead of
     a red brand tint, per design direction: CTAs read as part of the
     same glass surface as the nav, not a separate solid button. */
  --lg-btn-bg: var(--lg-header-bg);
  --lg-btn-highlight: var(--lg-header-highlight);
  --lg-elastic: cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

/* ---------- Header nav bar ---------- */
/* Null out the element's own inline background/blur (including the
   scroll-triggered .header-six-scroll variant) so the glass layers
   below have real page content to distort instead of an already-
   opaque, already-blurred surface. */
.header-six,
.header-six.header-six-scroll {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  isolation: isolate;
}

/* Layer 1: captures + distorts whatever is behind the header */
.header-six::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  isolation: isolate;
  pointer-events: none;
}

/* Layer 2: tint + specular highlight, painted on top of the distorted
   layer, still behind the real nav content */
.header-six::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--lg-header-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 1px 1px 0 var(--lg-header-highlight),
    inset 0 0 8px rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ---------- CTA buttons (Login / Get Started) ---------- */
.btn-v2-white,
.btn-white,
.btn-outline-white {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* longhand only -- avoids wiping the button's existing
     transition-all (icon slide, group-hover color swap) the way
     overriding the `transition` shorthand would have */
  transition-duration: 0.4s !important;
  transition-timing-function: var(--lg-elastic) !important;
}

.btn-v2-white:hover,
.btn-white:hover,
.btn-outline-white:hover {
  transform: scale(1.06);
}

.btn-v2-white::before,
.btn-white::before,
.btn-outline-white::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  filter: url(#lg-dist-btn);
  isolation: isolate;
  pointer-events: none;
}

.btn-v2-white::after,
.btn-white::after,
.btn-outline-white::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--lg-btn-bg);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 1px 1px 0 var(--lg-btn-highlight),
    inset 0 0 4px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

.btn-v2-white:hover::after,
.btn-white:hover::after,
.btn-outline-white:hover::after {
  box-shadow:
    inset 1px 1px 0 var(--lg-btn-highlight),
    inset 0 0 10px rgba(255, 255, 255, 0.35);
}

/* Fallback for browsers with no backdrop-filter support at all --
   keep a plain tinted glass look rather than fully transparent chrome */
@supports not (backdrop-filter: blur(1px)) {
  .header-six::after {
    background: rgba(10, 10, 10, 0.55);
  }
  .btn-v2-white::after,
  .btn-white::after,
  .btn-outline-white::after {
    background: rgba(255, 255, 255, 0.3);
  }
}