/* Plain, professional navigation bar (minimal styling, works with water.css) */
:root {
  --nav-bg: var(--background, #ffffff);
  --nav-text: var(--text, #222);
  --nav-border: rgba(0,0,0,.12);
  --nav-hover-bg: rgba(0,0,0,.04);
  --nav-accent: #0a66c2; /* accessible blue accent (same as focus ring) */
  --nav-accent-text: #ffffff;
  --nav-accent-glow: rgba(10,102,194,.28);
  --nav-accent-hover: #0b5cad;
  --nav-accent-gradient: linear-gradient(135deg,#0d72d9,#0a66c2);
  --nav-bar-height: 46px; /* unified compact header height */
}
@media (prefers-color-scheme: dark) {
  :root {
    --nav-bg: var(--background, #111);
    --nav-text: var(--text, #eee);
    --nav-border: rgba(255,255,255,.16);
    --nav-hover-bg: rgba(255,255,255,.08);
    --nav-accent: #3d9dff;
    --nav-accent-text: #061a2a;
    --nav-accent-glow: rgba(61,157,255,.38);
    --nav-accent-hover: #2d8eeF;
    --nav-accent-gradient: linear-gradient(135deg,#51a8ff,#2e8fff);
  }
}

.site-header { position:sticky; top:0; z-index:100; }
.site-nav-wrap { background:var(--nav-bg); border:1px solid var(--nav-border); border-radius:18px; margin:.55rem auto 1.1rem; max-width:var(--content-max-width); box-shadow:0 4px 14px -6px rgba(0,0,0,.18),0 2px 5px -3px rgba(0,0,0,.08); padding:.05rem .4rem; }
.site-nav { margin:0; display:flex; align-items:center; padding:0 .6rem; gap:.65rem; min-height:var(--nav-bar-height); }
.site-brand { font-size:1rem; font-weight:600; color:var(--nav-text); text-decoration:none; line-height:1.2; white-space:nowrap; }

/* Mobile toggle (checkbox hack retained for no-JS) */
.nav-toggle { display:none; }
.nav-toggle-label { margin-left:auto; display:none; cursor:pointer; padding:.25rem .55rem; border:0; border-radius:6px; color:var(--nav-text); font-size:1rem; background:transparent; line-height:1; }
.nav-toggle-label:hover, .nav-toggle-label:focus-visible { background:var(--nav-hover-bg); outline:none; }

.nav-links { list-style:none; margin:0 0 0 auto; padding:0; display:flex; align-items:center; gap:.25rem; }
.nav-links a { display:block; padding:.45rem .78rem; text-decoration:none; font-size:.85rem; color:var(--nav-text); border:1px solid transparent; border-radius:12px; line-height:1.2; position:relative; transition: background-color .25s ease, color .25s ease, box-shadow .3s ease; }
.nav-links a:hover, .nav-links a:focus-visible { background:var(--nav-hover-bg); outline:none; }
.nav-links a.active {
  background: var(--nav-accent-gradient);
  color: var(--nav-accent-text);
  font-weight:600;
  box-shadow: 0 2px 6px -2px var(--nav-accent-glow), 0 0 0 1px rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.nav-links a.active:hover, .nav-links a.active:focus-visible { background: var(--nav-accent-hover); color: var(--nav-accent-text); }

/* Compact on very wide sets: allow wrap without looking busy */
.nav-links { flex-wrap:wrap; }

@media (max-width: 850px) {
  .site-nav { position:relative; }
  .nav-toggle-label { display:inline-flex; align-items:center; justify-content:center; position:absolute; right:.4rem; top:calc((var(--nav-bar-height) - 28px)/2); height:28px; padding:0 .55rem; font-size:1.15rem; }
  /* Keep menu in normal flow so the header actually expands */
  .nav-links { width:100%; flex-direction:column; align-items:stretch; gap:0; margin:0; order:3; max-height:0; overflow:hidden; transition:max-height .22s cubic-bezier(.22,1,.36,1), opacity .18s ease; padding:0; opacity:0; }
  .nav-links li { width:100%; }
  .nav-links a { padding:.7rem .9rem; font-size:.95rem; border-radius:0; }
  .nav-links li:first-child a { border-top-left-radius:12px; border-top-right-radius:12px; }
  .nav-links li:last-child a { border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
  .nav-links a.active { box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 2px 6px -2px var(--nav-accent-glow); }
  .nav-toggle:checked ~ .nav-links { max-height:520px; opacity:1; }
  /* subtle separators between items */
  .nav-links li + li a { border-top:1px solid var(--nav-border); }
  /* add right padding so brand doesn't clash with absolute hamburger */
  .site-nav { padding-right:2.2rem; }
  .site-brand { flex:1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a { transition:none; }
}