/* lucent-nav-redesign.css
   Floating white-plane nav. Loaded last so it wins the cascade. */

body.lucent-theme .top-nav {
  top: 20px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 18px 44px -14px rgba(0, 0, 0, 0.48),
    0 2px 6px -2px rgba(0, 0, 0, 0.24) !important;
  color: #FFFFFF;
  transition: top 180ms cubic-bezier(0.2, 0, 0, 1),
              transform 180ms cubic-bezier(0.2, 0, 0, 1),
              background 180ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 180ms cubic-bezier(0.2, 0, 0, 1) !important;
}

body.lucent-theme .top-nav.is-scrolled {
  top: 12px !important;
  transform: translate(-50%, -2px) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 26px 56px -16px rgba(0, 0, 0, 0.56),
    0 4px 10px -3px rgba(0, 0, 0, 0.30) !important;
}

/* When the mobile menu opens, the nav expands to fullscreen with a
   translucent, water-like glass surface (matches Image #19 reference).
   These rules must beat the floating-glass defaults above. */
body.lucent-theme.nav-is-open .top-nav,
body.lucent-theme.nav-is-open .top-nav.is-scrolled {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  transform: none !important;
  border-radius: 0 !important;
  background: rgba(8, 12, 18, 0.62) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(44px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(180%) !important;
}

/* Brand lockup — use the official PNG, inverted so the dark wings + wordmark
   read as white on the translucent nav, with hue-rotate/saturate to keep
   the green accent green after the invert. */
body.lucent-theme .top-nav__logo {
  display: block !important;
  width: auto !important;
  height: 28px !important;
  filter: invert(1) hue-rotate(180deg) saturate(6) !important;
}

/* Links — Poppins 500, 14px, +0.02em, not uppercase */
body.lucent-theme .top-nav__links {
  gap: 28px !important;
}

body.lucent-theme .top-nav__links a {
  position: relative;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1) !important;
}

body.lucent-theme .top-nav__links a.is-active,
body.lucent-theme .top-nav__links a:hover {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body.lucent-theme .top-nav__links a:not(.top-nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #00BD7D;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

body.lucent-theme .top-nav__links a:not(.top-nav__cta):hover::after,
body.lucent-theme .top-nav__links a:not(.top-nav__cta):focus-visible::after,
body.lucent-theme .top-nav__links a:not(.top-nav__cta).is-active::after {
  transform: scaleX(1);
}


/* CTA — key-cap shadow */
body.lucent-theme .top-nav__cta {
  margin-left: 20px !important;
  background: #00BD7D !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  min-height: 0 !important;
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    0 2px 0 #00955F,
    0 6px 14px -4px rgba(0, 189, 125, 0.35) !important;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 140ms cubic-bezier(0.2, 0, 0, 1),
              background 140ms cubic-bezier(0.2, 0, 0, 1) !important;
}

body.lucent-theme .top-nav__cta::after { display: none; }

body.lucent-theme .top-nav__cta:hover {
  background: #00BD7D !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 3px 0 #00955F,
    0 10px 20px -4px rgba(0, 189, 125, 0.45) !important;
}

body.lucent-theme .top-nav__cta:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 #00955F !important;
}

/* Focus-visible — override global cyan outline */
body.lucent-theme .top-nav a:focus-visible,
body.lucent-theme .top-nav button:focus-visible {
  outline: 2px solid #00BD7D !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

body.lucent-theme .top-nav__cta:focus-visible {
  outline-offset: 3px !important;
}

/* Hamburger lines — white on glass */
body.lucent-theme .top-nav__hamburger span {
  background: #FFFFFF !important;
}

/* When drawer is open, give the X a soft glass tile so it reads
   clearly on the translucent backdrop (matches Image #19). */
body.lucent-theme.nav-is-open .top-nav__hamburger {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}