/* ════════════════════════════════════════════════════════════════════
   SHARED NAV STYLES — single source of truth for the top nav.
   Loaded via <link rel="stylesheet" href="partials/nav.css"> on every
   page. Companion files: partials/nav.html (markup), partials/nav-loader.js
   (injection + i18n/theme/lang/stars wiring).
   ════════════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 64px;
  /* No bottom border — the backdrop blur alone is enough to separate the
     nav from page content. */
  border-bottom: none;
  background: rgba(9, 10, 11, 0.65);
  backdrop-filter: blur(18px) saturate(1.2);
  z-index: 100;
}
html[data-theme="light"] .nav {
  background: rgba(247, 245, 240, 0.65) !important;
  border-bottom: none !important;
}

.nav-inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.nav-logo img { height: 24px; width: auto; display: block; }
html[data-theme="light"] .nav-logo img { filter: invert(1); }
.nav-logo span { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-current { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-github {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0 10px;
  transition: opacity .18s ease;
}
.nav-github svg { width: 16px; height: 16px; }
.nav-github:hover { opacity: 0.7; }
.nav-github .js-github-stars { font-family: var(--font-mono); font-weight: 600; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: background .18s ease;
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="light"] .lang-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.lang-toggle__opt { opacity: 0.45; transition: opacity .18s ease; }
.lang-toggle__opt.is-active { opacity: 1; }
.lang-toggle__sep { opacity: 0.3; }

.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  margin: 0 12px 0 4px;
  padding: 0;
  transition: background .18s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: block; }

/* Event button — outlined chip style, blends with the page palette but keeps
   the KV's signature pulsing radar icon and mono label so it still reads as
   a distinct event portal. !important on color/typography defeats the parent
   `.nav-links a` rule (specificity 0,1,1 > .nav-event's 0,1,0) which would
   otherwise repaint the label as muted gray at 12px. */
.nav-event {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  color: var(--text) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-event:hover {
  border-color: rgba(126, 184, 200, 0.55);
  background: rgba(126, 184, 200, 0.06);
}
.nav-event__radar {
  width: 14px;
  height: 14px;
  color: #7eb8c8;
  flex-shrink: 0;
  overflow: visible;        /* let the ping ring expand past the SVG box without clipping */
}
/* Rotating sweep beam — like a radar's clock-hand sweeping the full circle. */
.nav-event__sweep {
  transform-origin: 8px 8px;     /* SVG user units; default transform-box: view-box anchors this to the radar centre */
  animation: nav-radar-sweep 2.4s linear infinite;
}
@keyframes nav-radar-sweep {
  to { transform: rotate(360deg); }
}
/* Sonar ping — small ring expands outward from the centre and fades, repeating. */
.nav-event__ping {
  transform-origin: 8px 8px;
  transform: scale(0.5);
  opacity: 0;
  animation: nav-radar-ping 2.4s ease-out infinite;
}
@keyframes nav-radar-ping {
  0% { transform: scale(0.5); opacity: 0.85; }
  80% { opacity: 0; }
  100% { transform: scale(5.5); opacity: 0; }
}
html[data-theme="light"] .nav-event {
  border-color: rgba(126, 184, 200, 0.55) !important;   /* cyan accent border, only in light mode */
}
html[data-theme="light"] .nav-event:hover {
  border-color: rgba(126, 184, 200, 0.85) !important;   /* deeper cyan on hover */
  background: rgba(126, 184, 200, 0.1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Light theme: invert Try Now CTA → solid dark filled button */
html[data-theme="light"] .nav-cta {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-github { display: none; }
  .nav-event { display: none; }
}