/* ═══════════════════════════════════════════════════════════════
   RADIANT OPTIMIZER — UNIFIED NAVIGATION
   Single source of truth for the top nav on EVERY public page.

   Fixes:
   1. Auth buttons hiding behind the nav tabs  → .centered was
      position:absolute (out of flow) and overlapped .right-side.
      Now the nav is a 3-column CSS grid, so overlap is impossible.
   2. Nav looking different on every page      → this file loads
      LAST on every page and uses !important on the properties that
      pages hard-code via inline style="" attributes.
   3. No mobile nav at all                     → real breakpoints +
      a hamburger drawer built by js/nav-unified.js.

   Markup it targets (already present on every page):
   .nav-container > nav.nav > .left-side | .centered > .nav-tab-container > a.nav-tab | .right-side
   ═══════════════════════════════════════════════════════════════ */

:root {
  --nav-height: 92px;
  --nav-pill-bg: rgba(10, 12, 18, 0.55);
  --nav-pill-border: rgba(255, 255, 255, 0.14);
  --nav-blue: #2563eb;
  --nav-blue-light: #3b82f6;
  --nav-blue-glow: rgba(37, 99, 235, 0.35);
  --nav-text: rgba(255, 255, 255, 0.78);
  --nav-text-strong: #ffffff;
  --nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font-primary: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
}


/* ───────────────────────────────────────────────
   1. SHELL
   ─────────────────────────────────────────────── */
.nav-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  font-family: var(--font-primary, "Plus Jakarta Sans", "Inter", system-ui, sans-serif) !important;
  -webkit-user-select: none;

  user-select: none;
  pointer-events: none; /* re-enabled on the bar itself so page stays clickable */
}

/* Subtle scrim so content scrolling underneath stays readable */
.nav-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 8, 14, 0.85) 0%, rgba(6, 8, 14, 0.45) 55%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--nav-ease);
}
.nav-container.rnav-scrolled::before { opacity: 1; }

/* ───────────────────────────────────────────────
   2. THE BAR — 3 column grid (THE OVERLAP FIX)
   left | tabs | auth  — each gets its own track,
   so the tab strip can never sit on top of the buttons.
   ─────────────────────────────────────────────── */
.nav-container .nav,
nav.nav {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 18px 28px !important;
  box-sizing: border-box !important;
  pointer-events: auto;
}

.nav-container .left-side {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
  grid-column: 1;
}

/* The tab strip: static (NOT absolute), centered inside its own track */
.nav-container .centered {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  grid-column: 2;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important; /* allows shrinking instead of pushing */
}

.nav-container .right-side {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  grid-column: 3;
  flex-shrink: 0 !important;
  justify-self: end;
}

/* ───────────────────────────────────────────────
   3. TAB PILL CONTAINER
   ─────────────────────────────────────────────── */
.nav-container .nav-tab-container,
.nav-container .tab-container.nav-tab-container {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px !important;
  border-radius: 100px !important;
  background: var(--nav-pill-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--nav-pill-border) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  /* Last-resort safety: if tabs still don't fit, scroll them.
     They will NEVER push into the auth buttons. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.nav-container .nav-tab-container::-webkit-scrollbar { display: none; }

/* Kill the old decorative pseudo elements that assumed a 22px box */
.nav-container .nav-tab-container::before,
.nav-container .nav-tab-container::after { content: none !important; }

/* ───────────────────────────────────────────────
   4. TABS — big & bold, easy to read (preserved)
   ─────────────────────────────────────────────── */
.nav-container .nav-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 9px 15px !important;
  border: none !important;
  border-radius: 100px !important;
  background: none !important;
  color: var(--nav-text) !important;
  font-family: var(--font-primary, "Plus Jakarta Sans", "Inter", system-ui, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.22s var(--nav-ease), background 0.22s var(--nav-ease), transform 0.22s var(--nav-ease);
}

.nav-container .nav-tab:hover {
  color: var(--nav-text-strong) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-1px);
}

.nav-container .nav-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nav-blue), #1d4ed8) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px var(--nav-blue-glow), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* Remove the old underline/hairline pseudo elements — they broke the pill radius */
.nav-container .nav-tab.active::before,
.nav-container .nav-tab.active::after { content: none !important; }

.nav-container .nav-tab .icon-wrapper {
  display: inline-flex !important;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.22s var(--nav-ease);
  flex-shrink: 0;
}
.nav-container .nav-tab:hover .icon-wrapper,
.nav-container .nav-tab.active .icon-wrapper { opacity: 1; }
.nav-container .nav-tab svg { width: 17px; height: 17px; display: block; }

/* ───────────────────────────────────────────────
   5. AUTH BUTTONS — one consistent set everywhere
   ─────────────────────────────────────────────── */
.nav-container #signinBtn {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Auth-state switch — js/nav-auth.js sets data-auth on <html>.
   These rules win over any legacy inline display toggles, so the
   nav behaves identically on every page:
     signed out → Sign Up + Log In     signed in → Dashboard / account menu */
html[data-auth="out"] .nav-container #signinBtn { display: flex !important; }
html[data-auth="out"] .nav-container #profileBtn,
html[data-auth="out"] .nav-container #acctMenu { display: none !important; }

html[data-auth="in"] .nav-container #signinBtn { display: none !important; }
html[data-auth="in"] .nav-container #profileBtn,
html[data-auth="in"] .nav-container #acctMenu { display: flex !important; }


.nav-container .nav-auth-btn,
.nav-container .nav-signup-btn,
.nav-container .nav-login-btn,
.nav-container .nav-dashboard-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 20px !important;
  border-radius: 100px !important;
  font-family: var(--font-primary, "Plus Jakarta Sans", "Inter", system-ui, sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.22s var(--nav-ease), box-shadow 0.22s var(--nav-ease), background 0.22s var(--nav-ease);
}

.nav-container .nav-login-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.nav-container .nav-login-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nav-container .nav-signup-btn,
.nav-container .nav-dashboard-btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nav-blue-light), var(--nav-blue)) !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  box-shadow: 0 0 16px var(--nav-blue-glow) !important;
}
.nav-container .nav-signup-btn:hover,
.nav-container .nav-dashboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(37, 99, 235, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  background: linear-gradient(135deg, #60a5fa, var(--nav-blue-light)) !important;
}

/* ───────────────────────────────────────────────
   6. HAMBURGER (built by js/nav-unified.js)
   ─────────────────────────────────────────────── */
.rnav-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.rnav-burger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.28s var(--nav-ease), opacity 0.2s var(--nav-ease);
}
.rnav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rnav-burger.is-open span:nth-child(2) { opacity: 0; }
.rnav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ───────────────────────────────────────────────
   7. MOBILE DRAWER (built by js/nav-unified.js)
   ─────────────────────────────────────────────── */
.rnav-drawer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + 12px) 22px 40px;
  overflow-y: auto;
  background: rgba(8, 10, 16, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--nav-ease), transform 0.3s var(--nav-ease), visibility 0.3s;
}
.rnav-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
body.rnav-locked { overflow: hidden; }

.rnav-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.rnav-drawer-links a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 14px !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-primary, "Plus Jakarta Sans", "Inter", system-ui, sans-serif);
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-decoration: none;
  background: none !important;
  transition: background 0.2s var(--nav-ease), color 0.2s var(--nav-ease);
}
.rnav-drawer-links a:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; }
.rnav-drawer-links a.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nav-blue), #1d4ed8) !important;
  box-shadow: 0 0 20px var(--nav-blue-glow);
}
.rnav-drawer-links a .icon-wrapper { opacity: 1; }
.rnav-drawer-links a svg { width: 20px; height: 20px; }

.rnav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.rnav-drawer-actions a {
  width: 100% !important;
  justify-content: center !important;
  padding: 16px 22px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
}

/* ───────────────────────────────────────────────
   8. BREAKPOINTS — progressive, never overlapping
   ─────────────────────────────────────────────── */

/* Large laptops: tighten the strip */
@media (max-width: 1450px) {
  .nav-container .nav { padding: 16px 22px !important; }
  .nav-container .nav-tab { padding: 8px 12px !important; font-size: 0.78rem !important; gap: 6px !important; }
  .nav-container .nav-tab svg { width: 16px; height: 16px; }
}

/* Small laptops: drop tab icons, keep labels readable */
@media (max-width: 1240px) {
  .nav-container .nav-tab .icon-wrapper { display: none !important; }
  .nav-container .nav-tab { padding: 9px 13px !important; font-size: 0.78rem !important; }
  .nav-container .nav-auth-btn,
  .nav-container .nav-signup-btn,
  .nav-container .nav-login-btn,
  .nav-container .nav-dashboard-btn { padding: 9px 16px !important; font-size: 0.75rem !important; }
}

/* Tablet & mobile: collapse tabs into the hamburger drawer */
@media (max-width: 1024px) {
  :root { --nav-height: 78px; }
  .nav-container .nav {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 14px 18px !important;
    gap: 10px !important;
  }
  .nav-container .centered { display: none !important; }
  .rnav-burger { display: flex !important; }
  .nav-container .right-side { gap: 10px !important; }
}

/* Phones: keep only the primary CTA + burger in the bar */
@media (max-width: 620px) {
  :root { --nav-height: 70px; }
  .nav-container .nav { padding: 11px 14px !important; }
  .nav-container .nav-login-btn { display: none !important; }
  .nav-container .nav-signup-btn,
  .nav-container .nav-dashboard-btn { padding: 9px 15px !important; font-size: 0.72rem !important; }
  .rnav-burger { width: 42px; height: 42px; }
}

/* Very small phones: bar is just brand + burger, auth lives in the drawer */
@media (max-width: 400px) {
  .nav-container #signinBtn,
  html[data-auth="out"] .nav-container #signinBtn { display: none !important; }

  .nav-container .nav-dashboard-btn { padding: 8px 12px !important; font-size: 0.68rem !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) and (width: 0px) {
  .nav-container *,
  .rnav-drawer,
  .rnav-burger span { transition: none !important; }
  .nav-container .nav-tab:hover,
  .nav-container .nav-signup-btn:hover,
  .nav-container .nav-login-btn:hover,
  .nav-container .nav-dashboard-btn:hover { transform: none !important; }
}