/* Shared mobile navigation. Every page has the same .nav pill; below 1000px the link list is hidden by each
   page's own CSS and this file adds a menu button (injected by nav.js) that opens the list as a panel under
   the pill. Loaded after each page's styles so these rules win. */
.nav .navtoggle{display:none}
/* the brand is a logo and never wraps; when it cannot fit, the mobile menu takes over */
.nav .brand{white-space:nowrap}
@media (max-width:1000px){
  .nav{flex-wrap:wrap}
  .nav .brand{order:1}
  .nav .navtoggle{order:2;display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;border:0;border-radius:50%;background:var(--forest,#1F5A3A);cursor:pointer;padding:0;position:relative}
  .nav .navtoggle i{position:absolute;left:12px;width:16px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s,top .25s}
  .nav .navtoggle i:nth-child(1){top:14px}.nav .navtoggle i:nth-child(2){top:19px}.nav .navtoggle i:nth-child(3){top:24px}
  .nav.open .navtoggle i:nth-child(1){top:19px;transform:rotate(45deg)}.nav.open .navtoggle i:nth-child(2){opacity:0}.nav.open .navtoggle i:nth-child(3){top:19px;transform:rotate(-45deg)}
  .nav ul{display:none}
  .nav.open{border-radius:26px;background:rgba(251,250,245,.98)}
  .nav.open ul{order:3;display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;margin:10px -4px 0;padding:10px 0 4px;border-top:1px solid rgba(20,38,27,.08);font-size:16px}
  .nav.open ul li,.nav.open ul li:not(:last-child){display:block}
  .nav.open ul li a{display:block;padding:12px 14px;border-radius:14px;color:var(--ink,#14261B);font-weight:500}
  .nav.open ul li a:hover{background:rgba(20,38,27,.05);text-decoration:none}
  .nav.open ul li a[aria-current]{color:var(--forest,#1F5A3A);font-weight:600}
  .nav.open ul li:last-child a{text-align:center;margin-top:8px;background:var(--forest,#1F5A3A);color:#fff;font-weight:600}
  /* The lead item keeps its pill inside the open panel — it is the way in on a phone too — but
     loses the divider, which only makes sense against a horizontal row. */
  .nav.open ul li.lead{margin-right:0;padding-right:0}
  .nav.open ul li.lead:after{display:none}
  .nav.open ul li.lead a{background:var(--mint,#E4F0DE);color:var(--forest,#1F5A3A);font-weight:600;padding:12px 14px}
}
@media (max-width:480px){.nav .brand span{display:none}}