/* =====================================================================
   GoJonny — shared navbar (the sunlit, frosted bar)
   ONE copy of the navbar styles for the whole site. Link it from every page:
     /index.html                 →  <link rel="stylesheet" href="css/nav.css">
     /MinervaRising/index.html   →  <link rel="stylesheet" href="../css/nav.css">
   Load it BEFORE the page's own stylesheet so a page can override the tokens.

   Markup every page repeats (static site, so the HTML lives in each page):
     <header class="nav" id="top">
       <nav class="nav__center" aria-label="Site">
         <div class="nav__left">
           <a class="nav__home" href="/" title="GoJonny Games home">   ← on the home page itself use
             <svg class="icon"><use href="#i-house"/></svg>              <span class="nav__home is-current" aria-current="page">
             <span class="nav__slash" aria-hidden="true">/</span>
             <span class="sr-only">Home</span>
           </a>
           <span class="nav__company">GoJonny Games</span>
         </div>
         <div class="nav__right">
           <a class="nav__btn" href="…">Label</a>            (one or more buttons)
         </div>
       </nav>
     </header>
   ===================================================================== */

/* ---------- Tokens (override per page in :root, after this file) ---------- */
:root {
  --nav-h: 56px;
  --nav-fg: #0b1a24;                               /* text + border colour on the bar */
  --nav-hover-bg: var(--warm-light, #ffd4a3);      /* Minerva's warm palette is the default */
  --nav-hover-fg: var(--warm-dark,  #b8671a);
}

/* icon from the page's inline sprite; harmless if a page re-declares it */
.nav .icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }

/* visually hidden but read by screen readers / search engines */
.nav .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- The bar ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 50;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  padding: 0 16px;
  /* same stops as rgb(255 255 255 / 52%) 70%, rgb(226 230 234 / 81%) 100%, in the syntax older browsers parse */
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.52) 70%, rgba(226,230,234,0.81) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  color: var(--nav-fg);
  font-family: var(--font-display, "Oxanium", "Segoe UI", Arial, sans-serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Browsers without backdrop-filter get a nearly opaque bar so text stays legible */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background-image: linear-gradient(to bottom, rgba(255,255,255,0.96) 0%, rgba(226,230,234,0.96) 100%); }
}

/* centered strip, same width as the page body: home + company left, buttons right */
.nav__center {
  width: var(--body-w, 1000px);
  max-width: 100%;
  height: 100%;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.nav__left, .nav__right {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.nav__right .nav__btn + .nav__btn { margin-left: 10px; }

/* Home and every button share one style: hover = the warm palette, click = its inversion */
.nav__home, .nav__btn {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  font-size: 0.85rem;
  color: var(--nav-fg);
  text-decoration: none;
  padding: 6px 14px;
  border: 2px solid rgba(11,26,36,0.55);
  border-radius: 6px;
  background: rgba(255,255,255,0.35);
  -webkit-transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
          transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav__home { padding: 6px 12px; }
.nav__home .icon { font-size: 1.15em; margin-right: 6px; }
.nav__slash { opacity: 0.6; }
.nav__home:not(.is-current):hover, .nav__home:not(.is-current):focus-visible,
.nav__btn:hover, .nav__btn:focus-visible {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-fg);
  border-color: var(--nav-hover-fg);
  box-shadow: 0 0 18px 4px rgba(255,212,163,0.75), 0 4px 16px rgba(255,212,163,0.45);
  outline: none;
}
.nav__home:not(.is-current):hover .nav__slash { opacity: 1; }
.nav__home:not(.is-current):active, .nav__btn:active {
  background: var(--nav-hover-fg);
  color: var(--nav-hover-bg);
  border-color: var(--nav-hover-bg);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
  -webkit-transition-duration: .06s; transition-duration: .06s;
}
/* "You are here": on the home page the house is a bare icon beside the name, not a button */
.nav__home.is-current {
  cursor: default;
  padding: 0;
  border: 0;
  background: none;
}
.nav__home.is-current .icon { margin-right: 0; font-size: 1.3em; }
.nav__home.is-current + .nav__company { margin-left: 10px; }
.nav__company { font-size: 0.95rem; margin-left: 14px; }

/* ---------- Phones ---------- */
@media (max-width: 520px) {
  :root { --nav-h: 50px; }
  .nav { padding: 0 12px; }
  .nav__company { font-size: 0.8rem; margin-left: 10px; }
  .nav__btn { font-size: 0.75rem; padding: 5px 12px; }
  .nav__right .nav__btn + .nav__btn { margin-left: 6px; }
}