/* ==========================================================================
   ride2.biz — homepage sticky navigation (templates/home.html only)

   Every rule is scoped to .page-home (on <html>) or .home-nav (the header),
   so the landing page and contact page are unaffected.

   States
     default      transparent over the hero — identical to the original design
     .hn-ready    set by js/home-nav.js: header becomes position:fixed
                  (without JS the header keeps its original absolute position)
     .is-scrolled deep-navy, blurred, compact bar once the page is scrolled
   ========================================================================== */

.page-home {
  /* Header heights: original (hero) bar and compact (scrolled) bar */
  --hn-full: max(68px, calc(113 * var(--u)));
  --hn-compact: max(64px, calc(84 * var(--u)));
  /* Items are lifted by half the difference to centre them in the compact bar */
  --hn-lift: calc((var(--hn-compact) - var(--hn-full)) / 2);
  /* Native anchor / focus scrolling lands below the fixed bar */
  scroll-padding-top: var(--hn-compact);
}

/* Compaction uses transforms and opacity only, so the header's layout box
   never changes size — no reflow and no layout shift, for the header or the
   page. Its transparent lower strip lets clicks through to the page. */
.home-nav.hn-ready { position: fixed; pointer-events: none; }
.home-nav.hn-ready .brand,
.home-nav.hn-ready .nav-toggle,
.home-nav.hn-ready .nav { pointer-events: auto; }

/* Background layer on a pseudo-element: fading it never touches layout, and
   keeping backdrop-filter off the header itself keeps the full-screen mobile
   menu (position:fixed inside the header) anchored to the viewport. */
.home-nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hn-compact);
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 27, 54, .92) 0%, rgba(4, 27, 54, .86) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 14px 32px -22px rgba(0, 8, 22, .85);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.home-nav.is-scrolled::before { opacity: 1; }

.home-nav .header-wrap { position: relative; z-index: 1; }

/* Wordmark lifts into the compact bar and scales down slightly */
.home-nav .brand { transform-origin: 0 55%; transition: transform .32s var(--ease); }
.home-nav.is-scrolled .brand { transform: translateY(var(--hn-lift)) scale(.8); }

/* Desktop links + CTA lift as one row (never applied to the mobile drawer,
   which is position:fixed and must keep the viewport as its containing block) */
@media (min-width: 961px) {
  .home-nav .nav { transition: transform .32s var(--ease); }
  .home-nav.is-scrolled .nav { transform: translateY(var(--hn-lift)); }
}

/* ---------- Active section: yellow text + fine yellow underline ---------- */
.home-nav .nav > a:not(.btn-waitlist) { position: relative; }
.home-nav .nav > a:not(.btn-waitlist)::after {
  content: ""; position: absolute; left: 0; right: .045em; bottom: -9px;
  height: 2px; border-radius: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .28s var(--ease);
}
.home-nav .nav > a[aria-current="location"] { color: var(--yellow); }
.home-nav .nav > a[aria-current="location"]::after { transform: scaleX(1); }

/* First paint (e.g. page opened at #events): apply state without animating */
.home-nav.hn-instant,
.home-nav.hn-instant::before,
.home-nav.hn-instant *,
.home-nav.hn-instant *::after { transition: none !important; }

/* Invisible marker used to detect "scrolled past the top" */
.hn-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; visibility: hidden; }

/* ---------- Compact navigation (≤ 960px): drawer menu ---------- */
@media (max-width: 960px) {
  .page-home { --hn-full: 76px; --hn-compact: 64px; }
  .home-nav.is-scrolled .brand { transform: translateY(var(--hn-lift)) scale(.9); }
  .home-nav .nav-toggle { transition: transform .32s var(--ease); }
  .home-nav.is-scrolled .nav-toggle { transform: translateY(var(--hn-lift)); }

  .home-nav .nav {
    padding-top: 104px;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(23, 105, 176, .28), transparent 60%),
      rgba(4, 25, 50, .985);
  }
  .home-nav .nav > a:not(.btn-waitlist) { min-height: 60px; display: flex; align-items: center; }
  /* Active item in the drawer: a short vertical bar instead of an underline */
  .home-nav .nav > a:not(.btn-waitlist)::after {
    left: -14px; right: auto; top: 50%; bottom: auto;
    width: 3px; height: 22px;
    transform: translateY(-50%) scaleY(0);
  }
  .home-nav .nav > a[aria-current="location"]::after { transform: translateY(-50%) scaleY(1); }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .home-nav .nav { padding-top: 72px; }
  .home-nav .nav > a:not(.btn-waitlist) { min-height: 48px; }
}