/* Shared nav upgrade — loaded after each page's inline styles, so these
   rules restyle the menu site-wide without touching every page. */
nav{
  background:rgba(173,235,173,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(17,26,0,.07);
  padding-top:.65rem;padding-bottom:.65rem;
  transition:box-shadow .3s ease;
}
nav.nav-scrolled{box-shadow:0 10px 30px rgba(17,26,0,.1)}
.logo img{height:62px}
.nav-links{gap:.3rem}
.nav-links>li>a{
  display:inline-block;padding:.5rem 1rem;border-radius:999px;
  color:rgba(17,26,0,.72);font-weight:600;
  transition:color .2s ease,background .2s ease;
}
.nav-links>li>a:hover{color:var(--forest,#111a00);background:rgba(255,255,255,.6)}
.nav-links>li>a.nav-current{color:var(--forest,#111a00);background:rgba(255,255,255,.85)}
.drop>a::after{transition:transform .25s ease}
.drop:hover>a::after,.drop:focus-within>a::after{transform:rotate(180deg)}
.dropmenu{
  border:1px solid rgba(17,26,0,.08);border-radius:18px;
  box-shadow:0 24px 54px rgba(17,26,0,.16);
  padding:.5rem;margin-top:.45rem;
  animation:dropmenu-in .22s cubic-bezier(.2,.8,.3,1) both;
}
.dropmenu::before{ /* hover bridge over the gap below the trigger */
  content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem;
}
@keyframes dropmenu-in{
  from{opacity:0;transform:translateX(-50%) translateY(-6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.dropmenu a{border-radius:12px;transition:background .2s ease,color .2s ease}
@media (prefers-reduced-motion:reduce){
  .dropmenu{animation:none}
  .drop>a::after{transition:none}
}

/* Shared mobile hamburger nav — loaded after each page's inline styles.
   nav.js adds .nav-collapsed to <nav> whenever the links no longer fit
   comfortably next to the logo (no fixed breakpoint). */
.nav-burger{display:none;background:none;border:none;cursor:pointer;
  padding:.45rem;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:2px;
  background:var(--forest,#111a00);transition:transform .3s,opacity .3s}
.nav-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

nav.nav-collapsed .nav-burger{display:flex}
nav.nav-collapsed .nav-links{
  display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:0;
  background:rgba(173,235,173,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(17,26,0,.1);border-radius:0 0 22px 22px;
  box-shadow:0 18px 34px rgba(17,26,0,.18);
  padding:.6rem 1rem 1.2rem;
  max-height:calc(100svh - 110px);overflow:auto;
}
nav.nav-collapsed.nav-open .nav-links{display:flex}
nav.nav-collapsed .nav-links li{width:100%}
nav.nav-collapsed .nav-links a{display:block;padding:.6rem .8rem;font-size:1rem;border-radius:12px;background:transparent}
nav.nav-collapsed .nav-links a:hover{color:var(--forest,#111a00);background:rgba(255,255,255,.6)}
nav.nav-collapsed .nav-links>li>a.nav-current{background:rgba(255,255,255,.85);color:var(--forest,#111a00)}
/* dropdown sections show expanded and indented in the panel */
nav.nav-collapsed .drop>a::after{content:""}
nav.nav-collapsed .dropmenu{display:flex;position:static;transform:none;min-width:0;animation:none;margin-top:0;
  background:transparent;border:none;box-shadow:none;border-radius:0;
  padding:0 0 .4rem 1.1rem}
nav.nav-collapsed .dropmenu a{white-space:normal;padding:.45rem .5rem;font-size:.95rem}