/* ── Apex Header — dark mode only ── */

/* Bar */
html.dark header {
  background: rgba(10, 14, 39, 0.55) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Taller bar */
html.dark header .flex.items-center.justify-between {
  height: 5rem !important;
}

/* Logo wordmark */
html.dark header .gradient-text {
  background: linear-gradient(90deg, #00ffff, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}
html.dark header p.text-xs.text-slate-400,
html.dark header p.text-xs.text-slate-500 {
  display: none !important;
}

/* Desktop nav links */
html.dark header nav a,
html.dark header nav button {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(148,163,184,0.85) !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0.875rem !important;
  transition: color 0.2s !important;
  border-bottom: none !important;
}
html.dark header nav a:hover { color: #00ffff !important; }
html.dark header nav a[href="/blog"]:hover,
html.dark header nav a[href="/pricing"]:hover { color: #f472b6 !important; }

/* CTA — Get Started / Register */
html.dark header nav a[href="/register"] {
  background: #00ffff !important;
  color: #000 !important;
  font-weight: 900 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(0,255,255,0.25), inset 0 0 0 1px rgba(0,255,255,0.4) !important;
  padding: 0.5rem 1.25rem !important;
}
html.dark header nav a[href="/register"]:hover {
  background: #ffffff !important;
  box-shadow: 0 0 30px rgba(0,255,255,0.4) !important;
}

/* Login link */
html.dark header nav a[href="/login"] {
  color: rgba(100,116,139,0.9) !important;
}
html.dark header nav a[href="/login"]:hover { color: #fff !important; }

/* Logout */
html.dark header nav a[href="/logout"] {
  background: transparent !important;
  color: rgba(100,116,139,0.9) !important;
  border: 1px solid rgba(255,0,110,0.3) !important;
  box-shadow: none !important;
}
html.dark header nav a[href="/logout"]:hover {
  color: #ff006e !important;
  border-color: rgba(255,0,110,0.7) !important;
}

/* Theme toggle button */
html.dark header nav button svg { color: rgba(148,163,184,0.7) !important; }
html.dark header nav button:hover svg { color: #00ffff !important; }

/* Mobile hamburger */
html.dark header #mobile-menu-button { color: rgba(148,163,184,0.8) !important; }
html.dark header #mobile-menu-button:hover { color: #00ffff !important; }

/* Mobile theme toggle (outside nav) */
html.dark header .lg\\:hidden button svg { color: rgba(148,163,184,0.7) !important; }
html.dark header .lg\\:hidden button:hover svg { color: #00ffff !important; }

/* Mobile dropdown */
html.dark header #mobile-menu {
  background: rgba(10,14,39,0.97) !important;
  border-top: 1px solid rgba(0,255,255,0.1) !important;
}
html.dark header #mobile-menu a,
html.dark header #mobile-menu button {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(148,163,184,0.85) !important;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
}
html.dark header #mobile-menu a:hover { color: #00ffff !important; }
html.dark header #mobile-menu a[href="/register"] {
  background: #00ffff !important;
  color: #000 !important;
  border-radius: 0 !important;
}
html.dark header #mobile-menu a[href="/logout"] {
  background: transparent !important;
  color: #ff006e !important;
  border: 1px solid rgba(255,0,110,0.4) !important;
  border-radius: 0 !important;
}