/* SiteNav — site header chrome (S80 dark single-accent). Reusable site-wide.
 * Dark ground, warm text, lime as the only accent (brand dot + ASSESS underline).
 * Real hrefs only — the funnel never depends on JS.
 * Canonical: components/primitives/SiteNav/SiteNav.css */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-gutter);
  background: color-mix(in srgb, var(--ground) 90%, transparent); /* F — stronger anchor; content no longer bleeds through nav text on scroll */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-mono-label);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-block: 6px;
}
.site-nav__brand:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.site-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: var(--glow-lime-soft);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.site-nav__link {
  color: var(--text-2);
  text-decoration: none;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-block: 8px;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--text); }
.site-nav__link[aria-current="page"] { color: var(--text); }

/* ASSESS — the funnel link, always visible (mobile backstop to the hero CTA) */
.site-nav__cta {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-bottom: 2px solid var(--lime);
  padding-block: 8px;
  transition: color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out);
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible { color: var(--lime); }

@media (max-width: 640px) {
  .site-nav__links { display: none; }
}

/* F — reduced-transparency: drop the blur + go fully opaque (content must never bleed). */
@media (prefers-reduced-transparency: reduce) {
  .site-nav {
    background: var(--ground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}