/* ──────────────────────────────────────────────
   DJ GQ WORLDWIDE — nav.css
   THE single source of truth for the navigation.
   Loaded by EVERY page so the menu sits in the exact same place
   and at the exact same size on every page — no shift between pages.
   Page-type visuals (rail background on interior pages, transparent
   over the hero on Home) are layered on TOP of this in base.css /
   styles.css and must never change the geometry below.
   ────────────────────────────────────────────── */

.nav{
  position: fixed; top: 0; left: 0; z-index: 30;
  padding: clamp(22px, 2.6vw, 40px);
}
.nav__menu{
  display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
}
.nav__link{
  position: relative;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); line-height: 1; white-space: nowrap;
  transition: color .25s ease;
}
.nav__link::after{
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 0; height: 1px; background: var(--ink);
  transition: width .28s ease;
}
.nav__link:hover,
.nav__link[aria-current="page"]{ color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ width: 100%; }
.nav__link--inq{ color: var(--ink); }
.nav__link--inq::after{ width: 100%; background: var(--dim); }
.nav__link--inq:hover::after{ background: var(--ink); }

.nav__toggle{ display: none; }

/* ── Mobile (≤680px): collapse to hamburger — identical on every page ── */
@media (max-width: 680px){
  .nav__toggle{
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; margin: -9px 0 0 -9px; padding: 9px;
    background: none; border: 0; cursor: pointer;
  }
  .nav__toggle span{ display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .nav__menu{ display: none; margin-top: 18px; gap: 18px; }
  .nav[data-open="1"] .nav__menu{ display: flex; }
  .nav[data-open="1"]{ right: 0; background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav[data-open="1"] .nav__toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav[data-open="1"] .nav__toggle span:nth-child(2){ opacity: 0; }
  .nav[data-open="1"] .nav__toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  .nav__link{ font-size: 15px; }
}