/**
 * site-nav.css — sticky behaviour and the hide-on-scroll transition.
 *
 * Pairs with src/site-nav.js, which only toggles [data-nav-hidden] and
 * publishes --site-nav-height. All movement lives here so the global
 * prefers-reduced-motion guard in reset.css applies to it.
 *
 * Structural styles (layout, padding, colour) stay in the Webflow Designer.
 */

/*
 * transform, not `top`. The usual recipe moves the bar with a negative `top`
 * equal to its height — a hardcoded number that goes wrong the moment the nav's
 * content changes. translateY(-100%) is always exactly its own height, and it
 * composites rather than triggering layout on every scroll frame.
 */
.site-nav {
  transition: transform 0.3s ease;
}

/*
 * :not(:focus-within) is load-bearing, not decoration. Tabbing into a hidden
 * nav must bring it back, or the keyboard order runs through controls that are
 * off screen — WCAG 2.4.11 Focus Not Obscured.
 */
.site-nav[data-nav-hidden]:not(:focus-within) {
  transform: translateY(-100%);
}

/*
 * The sticky bar can land on top of whatever was just scrolled into view —
 * an anchor target, or an element the browser scrolled to because it took
 * focus. scroll-padding-top reserves the bar's height on every scroll-into-view
 * the browser performs, which is the general fix for 2.4.11 rather than
 * patching scroll-margin onto individual targets.
 */
html {
  scroll-padding-top: calc(var(--site-nav-height, 7rem) + 1rem);
}

/*
 * Under reduced motion the nav simply stays put. Collapsing the transition
 * would still let it jump in and out, which is the surprise the setting is
 * asking us to avoid — so suppress the hiding itself, not just its animation.
 */
@media (prefers-reduced-motion: reduce) {
  .site-nav[data-nav-hidden] {
    transform: none;
  }
}

/* ---------------------------------------------------------- material --- */

/*
 * A note on the name, since it will come up: this is Acrylic, not Mica.
 *
 * Per Microsoft's own docs, Mica "only samples the desktop wallpaper once", is
 * opaque, and appears "on the backdrop of your application — behind all other
 * content". It is a base layer. A sticky nav sits ON TOP of content, which in
 * Fluent's two-layer system is Acrylic's job — and the web has no wallpaper to
 * sample, so Mica has no source here. backdrop-filter samples what is behind,
 * which is the live, content-derived translucency that defines Acrylic.
 *
 * Only applied once the bar actually overlaps something. At the top of the page
 * it stays fully transparent, so the hero is not cut by a hairline that has
 * nothing to separate.
 */
.site-nav[data-nav-scrolled] {
  pointer-events: auto;
  background-color: color-mix(in srgb, var(--surface--primary) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid
    color-mix(in srgb, var(--border--subtle) 55%, transparent);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/*
 * Fluent drops Mica and Acrylic to a solid fill when the user turns off
 * transparency, in High Contrast, on battery saver, or on low-end hardware.
 * The web exposes the first two; honour them the same way rather than leaving
 * a blur that the user has asked not to see.
 */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .site-nav[data-nav-scrolled] {
    background-color: var(--surface--primary);
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .site-nav[data-nav-scrolled] {
    background-color: var(--surface--primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}