/*
 * Note: app-owned, migrated from gem's quarantine/landing/.
 * Belongs in this app (not the brand gem) long-term. Header below is
 * the original gem-side note kept for traceability.
 *
 * Migrate when: the gem ships the next release with quarantine/landing/
 * deleted (this file replaces the bundled copy).
 */

/*
 * Note — landing-page chrome: site nav.
 *
 * Not part of the design system. Specific to Mikael's 1920w landing
 * frames (node 23:1699). Belongs in the home vertical's CSS; lives
 * here so consumers keep working until that migration happens.
 */

/* Nav-link — Headline/xs (DM Sans SemiBold 14px) per Figma node 23:1699.
   Renamed from .nav-link to .site-nav-link to avoid conflict with the
   gem's .nav-link component (canonical/components/nav-link.css). */
.site-nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;  /* one-off icon hitbox */
  height: 28px; /* one-off icon hitbox */
  padding: var(--spacing-4);
}


/* Sticky / fixed nav.
   Note: in Figma's frame, Nav (23:1699) and Hero (23:1656) both sit at
   y=0 (overlap), with Hero pt:144 absorbing the 80px nav + 64px gap.
   We don't replicate that overlap because (a) 144px isn't in the
   spacing scale and (b) the nav-in-flow + hero pt:--spacing-80 model
   gives a symmetric 80/80 hero with only token-derived values. */
.site-nav {
  /* `fixed` (not `sticky`) so the nav is OVERLAID on the hero from
     scroll-top onwards. With sticky, the nav occupied 80px of normal
     flow, the hero began below it, and the helix video behind the
     nav was just the body background — no blur effect was visible
     until scrolling pulled the hero up under the nav.
     Pages without a hero must add their own top padding to clear
     the nav. */
  position: fixed;
  top: var(--spacing-0);
  left: var(--spacing-0);
  right: var(--spacing-0);
  z-index: 10;
  isolation: isolate;
}
/* Figma node 23:1699 uses a PROGRESSIVE background blur effect (read via
   the Figma REST API on the node's `effects` array — the MCP server's
   Tailwind output drops this and shows `backdrop-blur-[0px]`):
     type: BACKGROUND_BLUR
     blurType: PROGRESSIVE
     startRadius: 12, startOffset: {x:0.5, y:0.0}   (top, full strength)
     radius:      0,  endOffset:   {x:0.5, y:1.0}   (bottom, none)

   CSS has no native progressive blur. Closest faithful rendering:
   apply backdrop-filter: blur(12px) on the pseudo-element, then mask
   the result with a vertical gradient (opaque top → transparent
   bottom). Where the mask is opaque the blur is fully visible; where
   transparent, the blur clips away — visually approximates the
   progressive 12→0 falloff. The vendored gradient PNG provides the
   matching dark tint, also masked the same way. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: var(--spacing-0);
  bottom: calc(-1 * var(--spacing-32));
  background-image: url("/assets/geneops/brand/nav-blur-overlay-3da69627.png");
  background-size: 100% 80px;
  background-position: top;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 15%, rgb(0 0 0 / 0) 50%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0) 15%, rgb(0 0 0 / 0) 50%);
  pointer-events: none;
  z-index: -1;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--spacing-80);
}

/* Staff-only nav link (e.g. Sales) — held apart from the consumer links with a
   thin separator and a muted tone so it reads as an internal utility. */
.main-nav-staff-link {
  margin-left: var(--spacing-8);
  padding-left: var(--spacing-12);
  border-left: var(--stroke-weight-1) solid var(--border-subtle);
  color: var(--text-tertiary);
}