/* Shared site header.

   The markup is identical on every page, so its styling lives here rather
   than as inline style attributes repeated per page. Every page links this
   file, and theme.css before it.

   Four links need no hamburger: below 768px the bar becomes two centred rows,
   which is fewer taps than a menu and keeps every destination visible.

   BREAKPOINTS (fixed across every site on this base — see theme.css):
     1024px / 768px / 480px. */

#nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  /* nav.js adds the slide-away transform while you scroll down */
}

#site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  background: var(--brand);
  padding: 15px var(--sp-10);
  box-shadow: 0 4px 16px rgba(91, 47, 224, .18);
  font-family: var(--font-body);
}

/* --- brand ---------------------------------------------------------- */
.nav-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}
.nav-mark {
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
}
.nav-mark i { width: 6px; height: 18px; border-radius: 3px; background: var(--brand); }
.nav-mark i:last-child { transform: translateY(4px); }
.nav-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--on-brand);
  white-space: nowrap;
}
/* Two-tone via weight + opacity, not hue — teal-on-brand only hits 2.8:1
   contrast (WCAG AA needs 4.5:1 at this size/weight); on-brand at reduced
   opacity keeps the accent legible while still reading as a second tone. */
.nav-name em { font-style: normal; font-weight: 500; margin-left: var(--sp-1); color: var(--on-brand); opacity: .78; }

/* --- links ---------------------------------------------------------- */
.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.nav-link:hover { color: #FFD6E6; }
.nav-link:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 4px; border-radius: 3px; }

/* the page you are on */
.nav-link[aria-current="page"] { color: var(--on-brand); border-bottom-color: var(--teal); }

@media (max-width: 1024px) {
  #site-nav { grid-template-columns: auto 1fr; gap: var(--sp-4); padding: 10px var(--sp-5); }
  .nav-links { justify-self: end; gap: var(--sp-6); }
  .nav-name { font-size: 18px; }
  /* touch sizing: a 29px-tall link is not a tap target */
  .nav-link { min-height: var(--tap-min); padding: 6px var(--sp-2); }
  .nav-brand { min-height: var(--tap-min); }
}

@media (max-width: 768px) {
  #site-nav { grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: var(--sp-2) var(--sp-4); }
  .nav-brand { justify-self: center; }
  .nav-links { justify-self: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .nav-name { font-size: 17px; }
  .nav-mark { width: 30px; height: 30px; }
  .nav-mark i { width: 5px; height: 15px; }
  .nav-link { font-size: 13.5px; padding: 6px 6px; }
  .nav-links { gap: var(--sp-1); }
}