/**
 * TwoTune public marketing nav — spatial layout only.
 * True viewport-centered navigation independent of left/right content width.
 * Does not set colors, typography, links, or auth chrome.
 */

/*
 * Center against the full-bleed nav bar (fixed/sticky), not the 1360 rail.
 * Outer .nav / .top-nav are already position:fixed|sticky on each page.
 */
.nav > .nav-inner > .nav-center,
.top-nav > .top-nav-inner > .nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Side zones stay in normal flex flow (space-between) and above the center for hit-testing */
.nav > .nav-inner > .logo,
.nav > .nav-inner > .nav-right,
.top-nav > .top-nav-inner > .brand,
.top-nav > .top-nav-inner > .user-controls {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/*
 * Mid-width density: keep center on-axis without colliding with side zones.
 * Padding/gap only — mirrors homepage’s existing ≤1320 densify pattern.
 */
@media (max-width: 1360px) {
  .nav > .nav-inner > .nav-center,
  .top-nav > .top-nav-inner > .nav-links {
    gap: 4px;
    padding: 5px;
  }

  .nav > .nav-inner > .nav-center > a,
  .top-nav > .top-nav-inner > .nav-links > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/*
 * Narrow desktop / tablet: collapse center into existing mobile patterns
 * (homepage hamburger; browse pages already hide .nav-links at phone widths).
 * Ensures no logo/center/CTA overlap at 1024 while leaving phone rules intact.
 */
@media (max-width: 1100px) {
  .nav > .nav-inner > .nav-center {
    display: none;
  }

  .nav .hamburger {
    display: flex;
  }

  .top-nav > .top-nav-inner > .nav-links {
    display: none;
  }
}