/* Full site navigation on every page (2026-11-09). Loaded AFTER each page's own <style>, so
   these rules win at equal specificity. Keeps 11 tabs on one row on wide screens, tightens on
   laptops, and wraps to centred rows on tablets and phones. Source of the tab list:
   release/site_nav.py. */
nav .links a, nav ul.nav-links a { white-space: nowrap; }
nav .links a[aria-current="page"], nav ul.nav-links a[aria-current="page"] { color: var(--red, #CC0000); }

@media (max-width: 1500px) {
  nav .links a { padding: 7px 8px; font-size: 0.72rem; letter-spacing: 0.07em; }
  nav ul.nav-links:not(#nav-menu) { gap: 14px; }
  nav ul.nav-links:not(#nav-menu) a { font-size: 14px; }
}
/* Homepage (#nav-menu): its own hamburger takes over at <=1100px; tighten above that. */
@media (min-width: 1101px) and (max-width: 1700px) {
  #nav-menu { gap: 2px; }
  #nav-menu a { padding: 7px 9px; letter-spacing: 0.06em; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
  #nav-menu a { padding: 6px 6px; font-size: 0.7rem; letter-spacing: 0.04em; }
}
@media (max-width: 1240px) {
  nav:not(:has(#nav-menu)) { position: static; height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  nav .links, nav ul.nav-links:not(#nav-menu) { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
  nav .links a { padding: 5px 7px; font-size: 0.7rem; }
  nav ul.nav-links:not(#nav-menu) a { font-size: 13px; padding: 4px 6px; }
  body:has(nav:not(:has(#nav-menu))) main { padding-top: 40px; }
}

/* Sub-pages under a tab (2026-11-10): Dynamic Scheduling sits under Living Facility.
   Wide screens with a mouse: a drop-down on hover or keyboard focus. Touch screens and the
   homepage's mobile menu: the sub-page is simply shown as its own link, so it is always reachable. */
nav .has-sub { position: relative; display: inline-flex; align-items: center; }
nav li.has-sub { display: flex; }
nav .has-sub > a::after { content: ""; display: inline-block; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; vertical-align: middle; opacity: 0.65; }
nav .has-sub.cur > a { color: var(--red, #CC0000); }
nav .has-sub .sub { display: none; position: absolute; top: 100%; left: 0; z-index: 120; padding: 6px; background: #F0F2F7; border: 1px solid rgba(27,42,91,0.12); border-radius: 0 0 6px 6px; box-shadow: 0 14px 28px rgba(27,42,91,0.14); }
nav .has-sub:hover .sub, nav .has-sub:focus-within .sub { display: block; }
nav .has-sub .sub a { display: block; }
@media (hover: none) {
  nav .has-sub > a::after { display: none; }
  nav .has-sub .sub { display: inline; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
  nav .has-sub .sub a { display: inline-block; }
}
/* Homepage mobile menu (hamburger, <=1100px): the sub-page is an indented row of its own. */
@media (max-width: 1100px) {
  #nav-menu li.has-sub { display: block; }
  #nav-menu .has-sub > a::after { display: none; }
  #nav-menu .has-sub .sub { display: block; position: static; padding: 0 0 0 18px; background: none; border: 0; box-shadow: none; }
  #nav-menu .has-sub .sub a { display: block; }
}