/* ──────────────────────────────────────────────────────────────────────
   Shared site navigation — a rotating "900" stacked over a three-item menu
   (Gallery · Archive · Our Work). One consistent header on every page.

   Reuses the existing class names (.header-nav / .home-link / .header-nav-inner)
   so the homepage's 900 "funnel" animation keeps landing on .home-link. The
   logo colour comes from each page's own --home-link-color so pages keep their
   individual accent; the menu text is a neutral off-white everywhere.

   The homepage controls its own reveal (hidden on the hero, faded in by the
   funnel JS), so this file intentionally sets no opacity/visibility on
   .header-nav — interior pages stay visible by default.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Reserved space under the stacked nav — just the header itself, so content
     sits right below the menu (clean, minimal). The Gallery dropdown no longer
     needs a big permanent gap: it opens on its own solid panel (below) that
     covers content on hover. Pages use this value for their top padding. */
  --nav-clearance: 140px;
}

.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 1.2vw, 14px);
  padding: clamp(20px, 3vw, 30px) 16px clamp(12px, 1.7vw, 18px);
  pointer-events: none;
  perspective: 1200px;
  transition: padding 0.4s ease, gap 0.4s ease;
}

/* The nav floats: the 900 and the three menu buttons sit over the page with no
   backing band, so page content stays visible the whole way down as it scrolls
   past beneath them. A soft shadow keeps the floating nav legible over imagery. */
.header-nav .home-link,
.header-nav-inner > a,
.header-nav-inner > .nav-gallery > a,
.gallery-markets .gallery-market,
.header-nav-ctas a,
.gallery-nav-ctas a {
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.95);
}

/* The Gallery dropdown stays as plain floating text (Los Angeles / New York
   City) that drops down beneath the menu — no box. A soft dark halo behind each
   word keeps it legible over images without drawing a panel. */
.header-nav .nav-gallery-menu .nav-gallery-opt {
  color: #f0ebe5;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* Gallery market switcher — shown top-left on the gallery pages in place of the
   hover dropdown. Both cities are always visible and clickable; the one you are
   on is underlined. */
.gallery-markets {
  position: absolute;
  top: clamp(18px, 2.8vw, 28px);
  left: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  pointer-events: auto;
}
.gallery-markets .gallery-market {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-link-color, #c4beb5);
  text-decoration: none;
  opacity: 0.78;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}
.gallery-markets .gallery-market:hover {
  opacity: 1;
  color: var(--nav-link-hover, #f0ebe5);
}
.gallery-markets .gallery-market.is-current {
  opacity: 1;
  color: var(--nav-link-hover, #f0ebe5);
  border-bottom-color: currentColor;
}

/* On a compressed (phone) view the floating nav would sit over scrolling
   content and read as overlap, so it gets a subtle solid backing — content
   passes cleanly behind it and the top stays professional. (Desktop keeps the
   fully floating nav.) */
@media (max-width: 760px) {
  .header-nav {
    background: rgba(39, 39, 39, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .header-nav .home-link,
  .header-nav-inner > a,
  .header-nav-inner > .nav-gallery > a,
  .gallery-markets .gallery-market,
  .header-nav-ctas a,
  .gallery-nav-ctas a {
    text-shadow: none;
  }
}

/* On narrow screens the corner-anchored switcher and CTAs would overlap the
   centred nav, so everything stacks cleanly in one column: 900 → menu → cities
   → CTAs. */
@media (max-width: 960px) {
  .header-nav > .home-link,
  .header-nav > .home-link-wrap { order: 1; }
  .header-nav > .header-nav-inner { order: 2; }
  .header-nav > .gallery-markets {
    position: static;
    top: auto;
    left: auto;
    order: 3;
    flex-direction: row;
    justify-content: center;
    gap: clamp(20px, 6vw, 34px);
    margin-top: 6px;
  }
  .header-nav > .gallery-nav-ctas { order: 4; }
}

/* The rotating 900 — links home. */
.header-nav .home-link {
  pointer-events: auto;
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: normal;
  line-height: 1;
  color: var(--home-link-color, #c9a227);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: font-size 0.4s ease, color 0.25s ease, opacity 0.25s ease, letter-spacing 0.25s ease;
  animation: homeLinkSpinY 5s linear infinite;
  /* No backface-visibility:hidden here — it would blank (and disable the click
     target on) the 900 for the half of each Y-rotation when the back faces the
     viewer. The 900 stays visible and clickable through the full spin. */
}
.header-nav .home-link:hover {
  color: var(--home-link-hover, var(--home-link-color, #d4af37));
  opacity: 0.92;
  letter-spacing: 0.05em;
}

@keyframes homeLinkSpinY {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* The three-item menu, sitting beneath the 900. */
.header-nav-inner {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  transition: gap 0.4s ease;
}

/* Only the top-level items (Gallery trigger / Archive / Our Work) — never the
   LA/NYC options inside the Gallery dropdown, which nav-dropdown.css owns. */
.header-nav-inner > a,
.header-nav-inner > .nav-gallery > a {
  position: relative;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nav-link-color, #c4beb5);
  text-decoration: none;
  padding-bottom: 5px;
  opacity: 0.82;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* Clickable affordance: an underline that grows to full width on hover. */
.header-nav-inner > a::after,
.header-nav-inner > .nav-gallery > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
  transform: scaleX(0.55);
  transform-origin: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-nav-inner > a:hover,
.header-nav-inner > .nav-gallery > a:hover,
.header-nav-inner > a.nav-link--current,
.header-nav-inner > .nav-gallery > a.nav-link--current {
  opacity: 1;
  color: var(--nav-link-hover, #f0ebe5);
}
.header-nav-inner > a:hover::after,
.header-nav-inner > .nav-gallery > a:hover::after,
.header-nav-inner > a.nav-link--current::after,
.header-nav-inner > .nav-gallery > a.nav-link--current::after {
  opacity: 0.85;
  transform: scaleX(1);
}

/* Optional secondary row (e.g. the gallery/submit CTAs) sits under the menu. */
.header-nav-ctas {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: 2px;
}
.header-nav-ctas a {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(9px, 1vw, 10.5px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-link-color, #c4beb5);
  text-decoration: none;
  opacity: 0.6;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}
.header-nav-ctas a:hover {
  opacity: 1;
  color: var(--nav-link-hover, #f0ebe5);
  border-bottom-color: currentColor;
}

/* Shrink the whole header once the page is scrolled (interior pages). The
   menu stays visible beneath the 900 — it no longer hides. */
body.is-scrolled .header-nav {
  padding-top: clamp(11px, 1.7vw, 17px);
  padding-bottom: clamp(9px, 1.3vw, 13px);
  gap: clamp(6px, 0.9vw, 10px);
}
body.is-scrolled .header-nav .home-link {
  font-size: clamp(22px, 3.3vw, 30px);
}
body.is-scrolled .header-nav-inner {
  gap: clamp(16px, 2.6vw, 28px);
}

@media (prefers-reduced-motion: reduce) {
  .header-nav .home-link { animation: none; }
}

@media (max-width: 480px) {
  .header-nav-inner { gap: 16px; }
}