/* Site navigation strip. Sits directly under the navy brand banner on every
   page. References the host page's own CSS variables, so it themes itself in
   light and dark without knowing which page it is on.

   Sticky so it stays reachable on the long calculator pages. Horizontal scroll
   on narrow screens rather than an awkward wrap, and the scrollbar is hidden. */
.sitenav{
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.sitenav-in{
  max-width: 860px; margin: 0 auto;
  display: flex; gap: 4px; align-items: stretch;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sitenav-in::-webkit-scrollbar{ display: none; }
.sitenav a{
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 13px 16px;
  font-size: .74rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.sitenav a:hover{ color: var(--ink); }
.sitenav a[aria-current="page"]{
  color: var(--gold);
  border-bottom-color: var(--gold);
}
/* the trailing contact link sits to the right when there's room */
.sitenav .nav-spacer{ flex: 1 1 auto; min-width: 8px; }
.sitenav a.nav-contact{ color: var(--gold); }

@media (max-width: 560px){
  .sitenav a{ padding: 12px 13px; font-size: .68rem; letter-spacing: .06em; }
}
@media print{ .sitenav{ display: none; } }