/* ═══════════════════════════════════════════════════════════════
   Casa Quipu — Sticky nav
   Fixed positioning + hide-on-scroll-down / reveal-on-scroll-up.
   Theme-aware translucent background appears once user scrolls
   past the threshold; transparent over the hero at top of page.
   Loaded as a <link> AFTER each page's inline <style> block, so
   it wins the cascade against the page-specific .nav rules.
   ═══════════════════════════════════════════════════════════════ */

/* Nav height — JS measures the real nav and overrides at runtime,
   so the body reservation stays accurate at every breakpoint. The
   media-query defaults below avoid a noticeable layout shift while
   JS is still loading (deferred). */
:root {
  --nav-h: 74px;
  --nav-bg: rgba(20, 18, 16, 0.85);          /* ink default */
}
@media (max-width: 640px) {
  :root { --nav-h: 54px; }
}
:root[data-theme="parchment"] {
  --nav-bg: rgba(239, 227, 208, 0.85);
}

/* Reserve vertical space at the top of every page for the fixed nav.
   Pages where the hero should sit visually under the nav can opt out
   by adding the `nav-overlay` class to <body>. */
body {
  padding-top: var(--nav-h);
}
body.nav-overlay {
  padding-top: 0;
}

/* Anchor-jump targets land below the fixed nav, not beneath it. */
[id] {
  scroll-margin-top: var(--nav-h);
}

/* ── Core nav state ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms ease,
    -webkit-backdrop-filter 300ms ease,
    backdrop-filter 300ms ease,
    border-color 300ms ease;
  will-change: transform;
}

/* Scrolled-past-threshold: translucent background + hairline border. */
.nav.is-scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

/* Hidden state — slides up out of view. */
.nav.is-hidden {
  transform: translateY(-100%);
}

/* Mobile menu open — pin nav visible, regardless of scroll direction.
   Declared AFTER .is-hidden so equal-specificity wins via order. */
.nav.is-menu-open {
  transform: translateY(0);
}

/* Modal open (body.modal-open) — hide the nav so it doesn't compete.
   Declared LAST so it overrides .is-hidden, .is-menu-open, and default. */
body.modal-open .nav {
  transform: translateY(-100%);
}

/* ── Reduced motion: snap to state, no animation. ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }
}

/* ── No backdrop-filter support: fall back to solid bg. ────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --nav-bg: rgb(20, 18, 16); }
  :root[data-theme="parchment"] { --nav-bg: rgb(239, 227, 208); }
}
