/* Shared site navigation — used on app.html, unlock.html, /guides/*
   Designed to compose with existing per-page styles without overriding them. */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
}
:root[data-theme="dark"] .site-nav,
[data-theme="dark"] .site-nav {
  background: #0f172a;
  border-bottom-color: #1e293b;
}

.site-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
}

.site-nav-brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: #0b3d91;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.site-nav-brand .dot { color: #ff7a18; }
[data-theme="dark"] .site-nav-brand { color: #93c5fd; }

.site-nav-courseswitch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 0.84rem;
}
[data-theme="dark"] .site-nav-courseswitch { background: #1e293b; }

.site-nav-courseswitch a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.12s;
}
.site-nav-courseswitch a:hover { background: rgba(11, 61, 145, 0.08); color: #0b3d91; }
[data-theme="dark"] .site-nav-courseswitch a { color: #cbd5e1; }
[data-theme="dark"] .site-nav-courseswitch a:hover { background: rgba(147, 197, 253, 0.12); color: #93c5fd; }

.site-nav-courseswitch a.active {
  background: #0b3d91;
  color: #fff;
}
[data-theme="dark"] .site-nav-courseswitch a.active {
  background: #ff7a18;
  color: #0f172a;
}

.site-nav-courseswitch .lock { font-size: 0.75rem; opacity: 0.7; margin-left: 4px; }

.site-nav-links {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 0.9rem;
}

.site-nav-links a {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
}
.site-nav-links a:hover { color: #0b3d91; }
[data-theme="dark"] .site-nav-links a { color: #cbd5e1; }
[data-theme="dark"] .site-nav-links a:hover { color: #93c5fd; }

.site-nav-cta {
  background: #ff7a18;
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
}
.site-nav-cta:hover { background: #ff5733; color: #fff !important; }

@media (max-width: 720px) {
  .site-nav-inner { padding: 8px 12px; gap: 8px; }
  .site-nav-brand { font-size: 0.95rem; }
  .site-nav-links { font-size: 0.82rem; gap: 10px; }
  .site-nav-links .hide-mobile { display: none; }
  .site-nav-courseswitch { font-size: 0.78rem; }
  .site-nav-courseswitch a { padding: 4px 8px; }
}