/* ===== Site-wide header navigation (shared across every page) =====
   Self-contained colours (no :root tokens) so it works identically on pages
   that link styles.css AND on the inline-<style> statics. Links use
   `color: inherit` so they contrast on both the dark-green gradient headers
   (white text) and the white headers (dark text). Progressive enhancement:
   without JS the links stay visible (accessible); nav.js adds `.js-nav` to
   enable the mobile burger/dropdown. */

/* positioning anchor for the nav: the <header> when present, else the page body
   (some statics have a bare <h1> with no <header> wrapper) */
body { position: relative; }
header { position: relative; }

.site-nav { position: absolute; top: 12px; right: 18px; display: flex; align-items: center; }

.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav-menu a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: inherit; text-decoration: none; font-weight: 600; font-size: 0.92rem; opacity: 0.92;
}
.nav-menu a:hover, .nav-menu a:focus-visible { opacity: 1; text-decoration: underline; }
.nav-menu a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nav-menu a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 currentColor; }

/* burger (hidden until JS + mobile) */
.nav-burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.nav-burger-bars { display: block; position: relative; width: 22px; height: 2px; background: currentColor; }
.nav-burger-bars::before, .nav-burger-bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.nav-burger-bars::before { top: -7px; }
.nav-burger-bars::after  { top: 7px; }

@media (max-width: 720px) {
  .site-nav { top: 8px; right: 8px; }
  /* JS on: burger toggles a white dropdown panel below the header */
  .js-nav .nav-burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 8px;
  }
  .js-nav .nav-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .js-nav .nav-menu {
    display: none; position: absolute; right: 4px; top: 100%; z-index: 60;
    flex-direction: column; gap: 0; min-width: 190px;
    background: #fff; border: 1px solid #dde5dd; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 6px; margin-top: 2px;
  }
  .js-nav .nav-menu.open { display: flex; }
  .js-nav .nav-menu a {
    color: #1e3f2a; opacity: 1; font-size: 1rem; padding: 12px 14px;
    min-height: 44px; box-sizing: border-box; border-radius: 6px;
  }
  .js-nav .nav-menu a:hover { background: #e8f1ea; text-decoration: none; }
  .js-nav .nav-menu a[aria-current="page"] { background: #e8f1ea; box-shadow: none; }
  /* JS OFF on mobile: keep the links visible and reachable (wrap under the title) */
  .nav-menu { flex-wrap: wrap; justify-content: flex-end; }
}