/* css/site-nav.css — shared top nav + "← Home" back link for non-terminal pages.
   Visually consistent with the blog/changelog bar. Auth-aware via blog-nav.js +
   user-avatar.js (both read the session from localStorage — no supabase dependency):
   logged out → "Log in / Join the waitlist"; logged in → profile avatar.
   Tokens come from css/variables.css with safe fallbacks so the bar renders even
   if a page doesn't load variables.css. Full-width and self-contained (no .frame
   dependency) so it drops onto any page. */
:root { --snav-font: 'Space Grotesk', 'Inter', sans-serif; }

.site-nav {
  position: relative; z-index: 1000;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border2, rgba(0,224,255,.07));
  background: var(--bg, #020408);
  font-family: var(--snav-font);
}
.site-nav .brand { font-family: var(--snav-font); font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--text, #d6eeff); text-decoration: none; }
.site-nav .brand i { color: var(--core, #00e5ff); font-style: normal; }
.site-nav .spacer { flex: 1; }
.site-nav .lk { color: var(--muted, #4a6a8a); font-size: 13px; font-weight: 600; letter-spacing: .3px; text-decoration: none; }
.site-nav .lk:hover, .site-nav .lk.is-active { color: var(--text, #d6eeff); }
.site-nav .snav-login { color: var(--muted, #4a6a8a); font-size: 13px; font-weight: 600; text-decoration: none; }
.site-nav .snav-login:hover { color: var(--text, #d6eeff); }
.site-nav .snav-cta { font-family: var(--snav-font); font-weight: 700; font-size: 13px; letter-spacing: .4px; border-radius: 10px; padding: 10px 18px; text-decoration: none; background: var(--core, #00e5ff); color: #021018; box-shadow: 0 0 24px rgba(0,229,255,.28); }
.site-nav [data-avatar-mount] { display: inline-flex; align-items: center; }

.site-back { position: relative; z-index: 1000; display: inline-block; font-family: var(--snav-font); font-weight: 700; font-size: 12px; letter-spacing: .5px; color: var(--muted, #4a6a8a); text-decoration: none; padding: 18px 40px 0; }
.site-back:hover { color: var(--core, #00e5ff); }

@media (max-width: 560px) {
  .site-nav { padding: 14px 20px; gap: 12px; }
  .site-nav .lk { display: none; }
  .site-back { padding: 14px 20px 0; }
}