/**
 * site-nav.css — the one shared header/nav, used on every page type (home,
 * police forces index, individual force pages, and the static info pages).
 * See docs/js/site-nav.js for the markup this styles and the mobile-menu
 * behaviour. Scoped under .site-nav so it can't clash with a page's own
 * styles regardless of load order (cleanup brief, 13 Sep 2026, item 1 --
 * previously three different bespoke nav markups/label sets existed, and
 * force.html had none at all).
 */
.site-nav{
  position:sticky; top:0; z-index:10;
  background:#12203A;
  color:#EEF0F2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  border-bottom:2px solid #F2B807;
  font-family:'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.site-nav a{ color:inherit; }
.site-nav .site-nav-brand{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
}
.site-nav .site-nav-brand .dot{ color:#F2B807; }
.site-nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0; padding:0;
  font-size:13px;
  font-weight:500;
}
.site-nav ul a{ text-decoration:none; opacity:.85; }
.site-nav ul a:hover{ opacity:1; }
.site-nav ul a[aria-current="page"]{ opacity:1; border-bottom:2px solid #F2B807; padding-bottom:2px; }
.site-nav .site-nav-toggle{
  display:none; background:none; border:none; color:#EEF0F2;
  font-size:20px; cursor:pointer; padding:4px 6px;
}
.site-nav .site-nav-toggle:focus-visible{ outline:2px solid #F2B807; outline-offset:2px; }

/* Mobile dropdown -- hidden by default, and always hidden above the 760px
   breakpoint in case JS toggled it open right before a resize. site-nav's
   own position:sticky establishes the containing block this positions
   against. */
.site-nav .site-nav-mobile{ display:none; }
.site-nav .site-nav-mobile.open{
  display:block;
  position:absolute;
  top:100%; left:0; right:0;
  background:#12203A;
  border-bottom:2px solid #F2B807;
  padding:4px 24px 10px;
  z-index:20;
}
.site-nav .site-nav-mobile a{
  display:block;
  padding:12px 0;
  color:#EEF0F2;
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.site-nav .site-nav-mobile a:last-child{ border-bottom:none; }
.site-nav .site-nav-mobile a:hover{ opacity:.85; }
.site-nav .site-nav-mobile a[aria-current="page"]{ font-weight:700; }

@media (max-width:760px){
  .site-nav ul{ display:none; }
  .site-nav .site-nav-toggle{ display:block; }
}
@media (min-width:761px){
  .site-nav .site-nav-mobile.open{ display:none; }
}