/* =====================================================================
   GHOST TOWN RANCH — SHARED NAVIGATION STYLES  (single source of truth)
   ---------------------------------------------------------------------
   This file styles the MAIN site navigation on every page.

   To change the nav anywhere on the site, edit THIS file only, then
   upload it. You never have to touch the individual pages again.

   How it targets the nav without disturbing the in-page sub-navs
   (the "routine-nav", "chips", "archetype-nav" bars):
     - #gtr-shared-nav            -> the nav injected by /nav.js
     - nav:has(.nav-hamburger)        -> the hand-coded navs on other pages
   Only the MAIN nav contains .nav-links, so sub-navs are never affected.
   Selectors are written to win over the older per-page styles.
   ===================================================================== */

/* ---- BAR ---- */
#gtr-shared-nav,
nav:has(.nav-hamburger) {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px;
  background: rgba(28, 24, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- LOGO ---- */
#gtr-shared-nav .nav-logo,
nav:has(.nav-hamburger) .nav-logo {
  font-family: Georgia, serif; font-size: 13px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: #F4EFE6;
  display: flex; align-items: center;
}
#gtr-shared-nav .nav-logo img,
nav:has(.nav-hamburger) .nav-logo img { height: 28px; width: auto; display: block; }

/* ---- LINK ROW ---- */
#gtr-shared-nav .nav-right,
nav:has(.nav-hamburger) .nav-right { display: flex; align-items: center; gap: 32px; }

#gtr-shared-nav .nav-links,
nav:has(.nav-hamburger) .nav-links {
  display: flex; gap: 40px; list-style: none; align-items: center; margin: 0; padding: 0;
}
#gtr-shared-nav .nav-links li,
nav:has(.nav-hamburger) .nav-links li { display: flex; align-items: center; }

#gtr-shared-nav .nav-links a,
nav:has(.nav-hamburger) .nav-links a {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: #F4EFE6; opacity: 0.7;
  transition: opacity 0.2s;
}
#gtr-shared-nav .nav-links a:hover,
#gtr-shared-nav .nav-links a.active,
nav:has(.nav-hamburger) .nav-links a:hover,
nav:has(.nav-hamburger) .nav-links a.active { opacity: 1; }
#gtr-shared-nav .nav-links a.active,
nav:has(.nav-hamburger) .nav-links a.active {
  border-bottom: 1px solid rgba(244,239,230,0.5); padding-bottom: 2px;
}

/* ---- HAMBURGER (hidden on desktop) ---- */
#gtr-shared-nav .nav-hamburger,
nav:has(.nav-hamburger) .nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 6px; min-width: 44px; min-height: 44px; align-items: center;
}
#gtr-shared-nav .nav-hamburger span,
nav:has(.nav-hamburger) .nav-hamburger span {
  display: block; width: 20px; height: 1.5px;
  background: #F4EFE6; transition: all 0.25s ease; transform-origin: center;
}
#gtr-shared-nav .nav-hamburger.open span:nth-child(1),
nav:has(.nav-hamburger) .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#gtr-shared-nav .nav-hamburger.open span:nth-child(2),
nav:has(.nav-hamburger) .nav-hamburger.open span:nth-child(2) { opacity: 0; }
#gtr-shared-nav .nav-hamburger.open span:nth-child(3),
nav:has(.nav-hamburger) .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =====================================================================
   MOBILE  (<= 900px)
   This is where the old bug lived: the open menu collapsed to the
   height of the bar and the page bled through. The fix is an explicit
   full-viewport height + a fully opaque background.
   ===================================================================== */
@media (max-width: 900px) {

  #gtr-shared-nav,
  nav:has(.nav-hamburger) { padding: 0 20px; height: 60px; }

  #gtr-shared-nav .nav-right,
  nav:has(.nav-hamburger) .nav-right { gap: 8px; }

  /* show the hamburger */
  #gtr-shared-nav .nav-hamburger,
  nav:has(.nav-hamburger) .nav-hamburger { display: flex; }

  /* the full-screen menu (closed) */
  #gtr-shared-nav .nav-links,
  nav:has(.nav-hamburger) .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: auto;
    height: 100vh;        /* fallback */
    height: 100dvh;       /* fills the viewport even with the bar's backdrop-filter */
    overflow-y: auto;
    background: #1a1512;   /* fully opaque — no bleed-through */
    flex-direction: column; justify-content: center; align-items: center;
    gap: 0; z-index: 99; padding: 80px 32px 40px; list-style: none;
  }

  /* the full-screen menu (open) */
  #gtr-shared-nav .nav-links.open,
  nav:has(.nav-hamburger) .nav-links.open { display: flex; }

  #gtr-shared-nav .nav-links li,
  nav:has(.nav-hamburger) .nav-links li {
    width: 100%; border-bottom: 1px solid rgba(244,239,230,0.1);
  }
  #gtr-shared-nav .nav-links li:first-child,
  nav:has(.nav-hamburger) .nav-links li:first-child {
    border-top: 1px solid rgba(244,239,230,0.1);
  }
  #gtr-shared-nav .nav-links a,
  nav:has(.nav-hamburger) .nav-links a {
    font-size: 13px; letter-spacing: 0.25em;
    padding: 22px 0; display: flex; align-items: center;
    min-height: 44px; width: 100%;
  }
}