/* ==========================================================================
   Glowmigos — Header navigation
   Transparent over the hero, a glass bar once you scroll. The Lights menu
   carries a tiny lit preview per channel, because a list of five words is
   what every other lighting company has.
   ========================================================================== */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: 0.6rem;
  color: var(--t-bright);
  transition: background-color var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), padding var(--d-mid) var(--e-out);
}
.nav.is-stuck {
  background: rgba(4, 16, 46, 0.82);
  box-shadow: 0 10px 40px -24px #000, 0 1px 0 var(--hairline);
  padding-block: 0.4rem;
}
@supports (backdrop-filter: blur(6px)) {
  .nav.is-stuck { background: rgba(4, 16, 46, 0.62); backdrop-filter: blur(14px) saturate(1.2); }
}
.nav__row { display: flex; align-items: center; gap: 1rem; min-block-size: 4rem; }

.nav__brand { display: inline-flex; align-items: center; flex: none; }
.nav__brand img { block-size: clamp(3.4rem, 2.8rem + 1.4vw, 4.4rem); inline-size: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.nav.is-stuck .nav__brand img { block-size: clamp(3rem, 2.6rem + 1vw, 3.6rem); }

.nav__list { display: none; align-items: center; gap: 0.15rem; margin-inline-start: auto; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-block-size: 2.6rem; padding: 0.5rem 0.85rem;
  border-radius: var(--r-md);
  font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-body); text-decoration: none;
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--t-bright); background: rgba(16, 48, 122, 0.45); }
/* A lit filament under the current page. */
.nav__link::after {
  content: ""; position: absolute; inset-inline: 0.85rem; inset-block-end: 0.3rem; block-size: 2px; border-radius: 2px;
  background: var(--c-sun); opacity: 0; transform: scaleX(0.4);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-pop);
  box-shadow: 0 0 10px 1px rgba(255, 213, 42, 0.8);
}
.nav__link[aria-current="page"]::after, .nav__link:hover::after { opacity: 1; transform: none; }
.nav__link svg { inline-size: 0.8rem; block-size: 0.8rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-fast) var(--e-out); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__cta { margin-inline-start: 0.5rem; }

/* --- Lights menu -------------------------------------------------------- */
.nav__item { position: relative; }
.menu {
  position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; translate: -50% 0;
  inline-size: min(92vw, 44rem);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem;
  padding: 0.6rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0A2560, #04102E);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 30px 80px -30px #000;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), visibility 0s linear var(--d-fast);
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__item {
  --ch: var(--c-gold);
  display: grid; gap: 0.5rem; padding: 0.6rem;
  border-radius: var(--r-md); text-decoration: none; color: var(--t-body);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.menu__item:hover, .menu__item:focus-visible { background: rgba(16, 48, 122, 0.55); color: var(--t-bright); }
.menu__preview {
  position: relative; aspect-ratio: 5 / 3; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #061634, #030B1F);
  border: 1px solid var(--hairline);
}
.menu__preview svg { inline-size: 100%; block-size: 100%; display: block; }
.menu__preview .mp-house { fill: #0E2B5C; }
.menu__preview .mp-roof { fill: #163869; }
.menu__preview .mp-lit { fill: var(--ch); opacity: .18; transition: opacity var(--d-mid) var(--e-out); }
.menu__preview .mp-dot { fill: var(--ch); opacity: .55; transition: opacity var(--d-mid) var(--e-out); }
.menu__item:hover .mp-lit, .menu__item:focus-visible .mp-lit { opacity: .55; }
.menu__item:hover .mp-dot, .menu__item:focus-visible .mp-dot { opacity: 1; }
.menu__name { font-family: var(--f-display); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--t-bright); }
.menu__note { font-size: 0.68rem; color: var(--t-muted); line-height: 1.35; }

/* --- Mobile: a menu button + a sheet ----------------------------------- */
.nav__menu-btn {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-block-size: 2.6rem; padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(4, 16, 46, 0.7);
  font-family: var(--f-display); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-bright);
}
.nav__menu-btn svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) + 2);
  display: grid; align-content: end;
  background: rgba(1, 6, 15, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-mid) var(--e-out), visibility 0s linear var(--d-mid);
}
.sheet[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.sheet__panel {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, #0A2560, #04102E 60%);
  border-block-start: 1px solid var(--hairline-strong);
  padding: 0.6rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  transition: transform var(--d-mid) var(--e-out);
  max-block-size: 86vh; overflow: auto;
}
.sheet[data-open="true"] .sheet__panel { transform: none; }
.sheet__grip { inline-size: 2.6rem; block-size: 0.3rem; border-radius: 4px; background: var(--hairline-strong); margin: 0.2rem auto 0.9rem; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.6rem; }
.sheet__title { font-size: 0.68rem; font-weight: 800; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-gold); }
.sheet__close { min-inline-size: 44px; min-block-size: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--t-bright); }
.sheet__close svg { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sheet__lights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-block-end: 0.9rem; }
.sheet__lights .menu__item { background: rgba(16, 48, 122, 0.35); }
.sheet__links { display: grid; gap: 0.1rem; }
.sheet__links a {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 3rem; padding: 0.6rem 0.7rem;
  border-radius: var(--r-md);
  font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em;
  color: var(--t-bright); text-decoration: none;
}
.sheet__links a[aria-current="page"] { color: var(--c-sun); }
.sheet__links a svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .5; }
.sheet__cta { margin-block-start: 0.9rem; }

@media (min-width: 64rem) {
  .nav__list { display: flex; }
  .nav__menu-btn, .sheet { display: none; }
}
/* Pages need headroom for the fixed bar: the hero adds its own, others use this. */
.nav-space { block-size: 5rem; }
body { --ticker-h: 0px; }

/* Home: the hero already carries the full lockup, so the bar's mark waits
   until the sign has scrolled away. One logo on screen at a time. */
.page-home .nav__brand { opacity: 0; pointer-events: none; transition: opacity var(--d-mid) var(--e-out); }
.page-home .nav.is-stuck .nav__brand { opacity: 1; pointer-events: auto; }