/* ══════════════════════════════════════
   SHARED NAVBAR / MOBILE MENU / FOOTER
   Single source of truth — injected by navbar.js on every public page.
   Edit here, not per-page, to change the site header/footer.

   NOTE: the hamburger button + mobile-menu panel's must-have layout rules
   (display, size, position — the ones that keep the mobile menu functional
   even if THIS file is slow/blocked) are NOT here. They're duplicated as an
   inline <style id="sp-critical-nav"> block in every page's <head> so the
   menu still works if this stylesheet fails to load. Only hover/decorative
   styling for those elements lives below — if you touch hamburger/mobile-menu
   layout, update the inline block in all 14 pages too.
══════════════════════════════════════ */

/* #navbarRoot is an otherwise-unstyled placeholder div that navbar.js fills via
   innerHTML — its box would be exactly as tall as .navbar itself, giving the
   sticky child zero room to stick (a sticky element can't stay pinned past its
   own containing block's height). display:contents removes the wrapper from
   the box tree so .navbar's effective containing block is <body> (as tall as
   the whole page) instead. */
#navbarRoot { display: contents; }
.navbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.navbar-inner { max-width: 1200px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--sp-ink); }
.logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--sp-ink); }
.nav-links a.active-link { color: var(--sp-ink); font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-switcher { display: flex; gap: 6px; }
.lang-btn { border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-pill); padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-pill); padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: opacity 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn-primary:hover { opacity: 0.88; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.nav-user-greeting { font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.nav-logout-link { font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: color 0.2s; }
.nav-logout-link:hover { color: var(--sp-ink); }
.mobile-menu #mobileUserGreeting { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.mobile-menu #mobileLogoutLink { font-size: 15px; font-weight: 500; color: var(--text-muted); }

/* Hamburger/mobile-menu: hover polish only — layout is in the inline critical block. */
.hamburger:hover { opacity: 0.7; }
.mobile-menu a { font-size: 22px; font-weight: 600; color: var(--sp-ink); touch-action: manipulation; }

@media (max-width: 900px) {
  .navbar-inner { padding: 14px 16px; }
  .logo { font-size: 18px; gap: 6px; }
  .nav-right { gap: 8px; }
  .lang-switcher { gap: 4px; }
  .lang-btn { padding: 5px 9px; font-size: 12px; }
  /* Desktop-only greeting/logout — the mobile-menu panel has its own copies. */
  .nav-right .nav-user-greeting, .nav-right .nav-logout-link { display: none; }
}