/* ============================================================
   Axis of Action — shared site header for standalone pages.

   Astro pages get the header from src/components/Header.astro.
   Static pages under public/ (games, activities, tools, tests)
   cannot use that component, so they link this file and paste
   the markup block below. Keep the two in sync.

       <link rel="stylesheet" href="/site-header.css">

       <header class="site-header">
         <div class="shead-inner">
           <a class="shead-brand" href="/" aria-label="Axis of Action — home">
             <img class="mk" src="/favicon.svg" width="26" height="26" alt="">
             <span class="wm">Axis of Action</span>
           </a>
           <nav class="shead-nav" aria-label="Primary">
             <a href="/playback/">Playback</a>
             <a href="/codes/">Codes &amp; Conventions</a>
             <a href="/curriculum/">Curriculum</a>
             <a href="/toolkit/">Toolkit</a>
             <a href="/about/" class="hide-sm">About</a>
             <a href="https://axisofaction.substack.com" class="ext" target="_blank" rel="noopener">Substack</a>
           </nav>
         </div>
       </header>

   Class names are prefixed `shead-` so they cannot collide with a
   page's own .brand / .nav / .inner rules. Everything is scoped
   under .site-header and uses its own variables, so linking this
   file cannot restyle the page around it.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=VT323&display=swap");

.site-header {
  --sh-bg:    #0A0A0C;
  --sh-ink:   #F4F4F2;
  --sh-soft:  rgba(244, 244, 242, 0.62);
  --sh-faint: rgba(244, 244, 242, 0.40);
  --sh-line:  rgba(244, 244, 242, 0.14);
  --sh-mag:   #FF2BC2;
  --sh-bars: linear-gradient(90deg,
    #F4F4F2 0 14.28%, #FFD43B 14.28% 28.57%, #1FF0E6 28.57% 42.85%,
    #45E89B 42.85% 57.14%, #FF2BC2 57.14% 71.42%, #FF5658 71.42% 85.71%,
    #5B7CFF 85.71% 100%);

  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--sh-line);
}
.site-header::after {              /* SMPTE colour-bar hairline */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--sh-bars); opacity: 0.9;
}
.site-header .shead-inner {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1.1rem, 4.5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 64px;
}
.site-header .shead-brand {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--sh-ink);
}
.site-header .shead-brand .mk { width: 26px; height: 26px; border-radius: 24%; overflow: hidden; flex: none; }
.site-header .shead-brand .wm {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-size: 1.4rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1; color: var(--sh-ink);
}
.site-header .shead-nav {
  display: flex; gap: 1.4rem; align-items: center;
  max-width: 64%; overflow-x: auto; scrollbar-width: none;
}
.site-header .shead-nav::-webkit-scrollbar { display: none; }
.site-header .shead-nav a {
  font-family: "VT323", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.12rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.07em; white-space: nowrap; text-decoration: none;
  color: var(--sh-soft); padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-header .shead-nav a:hover,
.site-header .shead-nav a[aria-current="page"] { color: var(--sh-ink); border-color: var(--sh-mag); }
.site-header .shead-nav a.ext::after { content: " \2197"; color: var(--sh-faint); }

@media (max-width: 640px) {
  .site-header .shead-nav { gap: 1rem; }
  .site-header .shead-nav a.hide-sm { display: none; }
}