/* ── Phatt Music Co. — Navigation ───────────────────────────────────────────
   Floating pill nav injected into #nav-root by js/nav.js.

   Behaviour:
     > 1199.98px  All five page links visible in the pill (desktop)
     ≤ 1199.98px  Compact pill: logo + current page label + hamburger (mobile)
                  Clicking hamburger reveals a drawer above the pill.

   To change the breakpoint update --nav-bp here AND the matching value
   in the @media rules at the bottom of this file.                             */

/* ── Anchor ──────────────────────────────────────────────────────────────────
   #nav-root is injected into by nav.js. It acts as the fixed positioning
   anchor so the nav always sits 15px above the viewport bottom, centred.     */
#nav-root {
  position:  fixed;
  bottom:    15px;
  left:      50%;
  transform: translateX(-50%);
  /* Desktop: up to 700px wide; mobile: fills viewport minus 24px each side */
  width:     min(700px, calc(100vw - 48px));
  z-index:   9999;
  /* Allow clicks to pass through the empty space around the pill             */
  pointer-events: none;
}
.site-nav {
  pointer-events: auto;
  position:       relative;
}

/* ── Outer pill ──────────────────────────────────────────────────────────── */
.nav-pill {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px;
  background:      rgba(10, 10, 11, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:          1px solid rgb(34, 35, 37);
  border-radius:   12px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.nav-logo-wrap {
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  background:       #fff;
  border-radius:    8px;
  text-decoration:  none;
  transition:       opacity 0.15s;
}
.nav-logo-wrap:hover { opacity: 0.85; }
.nav-logo { width: 21px; height: 21px; }

/* ── Desktop link strip ──────────────────────────────────────────────────── */
.nav-desktop-links {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  flex:            1;
}

.nav-link {
  font-family:     var(--font, 'Neue Haas Grotesk', sans-serif);
  font-weight:     600;
  font-size:       clamp(13px, 1.2vw, 15px);
  color:           rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding:         8px 14px;
  border-radius:   8px;
  white-space:     nowrap;
  transition:      background 0.15s, color 0.15s;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.10);
  color:      #fff;
}
.nav-link--active,
.nav-link[aria-current="page"] {
  background: #fff;
  color:      #000;
}
.nav-link--active:hover,
.nav-link[aria-current="page"]:hover {
  background: #fff;
  color:      #000;
}

/* ── Right spacer (desktop only) — mirrors logo width to keep links centred ── */
.nav-right-spacer {
  width:       40px;
  flex-shrink: 0;
}
@media (max-width: 1199.98px) {
  .nav-right-spacer { display: none; }
}

/* ── Mobile right group (hidden on desktop) ──────────────────────────────── */
.nav-mobile-right {
  display:     none;          /* shown via @media below */
  align-items: center;
  gap:         8px;
  margin-left: auto;
}

/* Current-page CTA pill (mobile only) */
.nav-cta {
  font-family:     var(--font, 'Neue Haas Grotesk', sans-serif);
  font-weight:     600;
  font-size:       14px;
  color:           #000;
  background:      #fff;
  text-decoration: none;
  padding:         10px 12px;
  border-radius:   8px;
  white-space:     nowrap;
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
.nav-burger {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  width:           50px;
  height:          50px;
  flex-shrink:     0;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
}
.nav-burger-line {
  display:       block;
  width:         26px;
  height:        2px;
  background:    #fff;
  border-radius: 1px;
  transition:    transform 0.2s ease, opacity 0.2s ease;
}
/* Animate to × when open */
.nav-burger--open .nav-burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg);  }
.nav-burger--open .nav-burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger--open .nav-burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Drawer (mobile menu) ────────────────────────────────────────────────── */
.nav-drawer {
  display:         none;        /* hidden until .nav-drawer--open is added */
  flex-direction:  column;
  gap:             4px;
  padding:         8px;
  margin-top:      8px;
  background:      rgba(10, 10, 11, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:          1px solid rgb(34, 35, 37);
  border-radius:   12px;
}
.nav-drawer--open { display: flex; }

.nav-drawer-link {
  font-family:     var(--font, 'Neue Haas Grotesk', sans-serif);
  font-weight:     600;
  font-size:       clamp(15px, 1.4vw, 18px);
  color:           rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding:         12px 16px;
  border-radius:   8px;
  transition:      background 0.15s, color 0.15s;
}
.nav-drawer-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color:      #fff;
}
.nav-drawer-link--active,
.nav-drawer-link[aria-current="page"] {
  color:      #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ── Responsive — mobile nav (≤ 1199.98px) ──────────────────────────────────
   Matches the existing site breakpoint in site.css and the original
   Framer export breakpoint for page-level layout changes.                     */
@media (max-width: 1199.98px) {
  #nav-root {
    width: min(420px, calc(100vw - 48px));
  }
  .nav-desktop-links { display: none;  }
  .nav-mobile-right  { display: flex;  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-cta,
  .nav-drawer-link,
  .nav-burger-line { transition: none; }
}