/* ============================================================
   site.css — single source of truth for the shared chrome
   (top nav strip + footer strip). Linked by every page.
   Markup is injected by site.js; theme tokens (--nav-bg, --text…)
   are defined per-page in each page's :root.
   Edit here once → every page updates.
   ============================================================ */

/* Hide the empty placeholder until site.js fills it (avoids a flash
   of an empty nav pill / bare footer border on load). */
nav:empty, footer:empty { display: none; }

/* --- Top nav strip --- */
nav {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: calc(100% - 32px); max-width: 980px;
  padding: 0 6px 0 20px; height: 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid var(--nav-border);
  border-radius: 100px;
  box-shadow: var(--nav-shadow);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
nav.scrolled { background: var(--nav-bg-scrolled); }
.nav-left { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 600; line-height: 1; flex-shrink: 0; text-decoration: none; color: var(--text); }
.nav-icon { width: 24px; height: 24px; border-radius: 6px; }
.nav-sections { display: flex; align-items: center; gap: 4px; }
.nav-sections a {
  color: var(--text-tertiary); text-decoration: none; font-size: 0.78rem;
  font-weight: 400; padding: 6px 14px; border-radius: 100px;
  display: flex; align-items: center; position: relative;
  transition: color 0.3s, background 0.3s;
}
.nav-sections a:hover { color: var(--text-secondary); background: var(--hover-bg); }
.nav-sections a.active { color: var(--text); background: var(--active-bg); }
.nav-home {
  color: var(--text-tertiary); text-decoration: none; font-size: 0.78rem;
  font-weight: 400; padding: 6px 14px; border-radius: 100px;
  transition: color 0.3s, background 0.3s;
}
.nav-home:hover { color: var(--text-secondary); background: var(--hover-bg); }
.nav-cta {
  padding: 7px 18px; background: var(--text); color: var(--bg);
  border: none; border-radius: 100px; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.nav-cta:hover { opacity: 0.85; transform: scale(1.03); }

/* --- Footer strip --- */
footer { border-top: 1px solid var(--border); padding: 32px 48px; }
.footer-simple { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.footer-links { display: flex; gap: 24px; margin-right: auto; }
.footer-links a { font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; font-weight: 400; transition: color 0.3s; }
.footer-links a:hover { color: var(--text); }
.footer-social { display: flex; gap: 20px; }
.footer-social a { color: var(--text-tertiary); transition: color 0.3s; display: flex; align-items: center; }
.footer-social a svg { transition: color 0.3s; }
/* Brand-coloured icons on hover. X stays mono (its brand is black/white). */
.footer-social a.x:hover { color: var(--text); }
.footer-social a.yt:hover { color: #FF0000; }
.footer-social a.ig:hover { color: #E1306C; } /* fallback if gradient unsupported */
.footer-social a.ig:hover path { fill: url(#ig-grad); }
.footer-copy { font-size: 0.75rem; color: var(--text-tertiary); font-weight: 400; }

@media (max-width: 900px) {
  nav { padding: 0 4px 0 16px; width: calc(100% - 24px); max-width: 400px; height: 44px; }
  .nav-sections { display: none; }
  .nav-cta { font-size: 0.7rem; padding: 6px 14px; }
  footer { padding: 24px 20px; }
  .footer-simple { flex-direction: column; gap: 20px; text-align: center; }
}

/* --- Shared base rules ---
   Apply site-wide; every page links this file. Keep cross-page concerns
   (keyboard focus ring, reduced-motion) here so they live in one place
   instead of being duplicated per page. Each page's :root defines --blue. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}