/* The site band: whose page this is, and the way home to rezoned.city.
   One file for every site. site/ is the source; `make site-assets` copies it beside the apex and
   each city page, so the bar measures the same everywhere and is sized in one place.

   The page supplies the palette tokens (--surface, --border, --text, --text-2, --faint) and may set:
     --gutter     the body's side padding, so the band bleeds to the viewport edge (default 0)
     --band-max   the page's content width, so the band's contents align with it (default: full width)
   The apex adds class "home": its wordmark is the page's name, so it stays at phone width. */

.site-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  height: 40px; box-sizing: border-box; flex: none;
  margin: 0 calc(-1 * var(--gutter, 0px));
  padding: 0 max(16px, calc(50% + var(--gutter, 0px) - var(--band-max, 100%) / 2));
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1200;   /* above Leaflet (1000) and the explorer's detail panel (1100) */
}
.site-home { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-mark:hover, .site-band.home .site-mark { color: var(--text); }
.site-mark img { display: block; }
.site-sep { color: var(--faint); }
.site-city { color: var(--text); font-weight: 600; white-space: nowrap; }
.site-links { display: flex; align-items: center; gap: 22px; }
.site-links a { color: var(--text-2); text-decoration: none; padding: 13px 0 11px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-links a:hover { color: var(--text); }
.site-links a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
[id] { scroll-margin-top: 56px; }   /* an in-page link lands with its heading below the band */

@media (max-width: 600px) {
  .site-band { height: 44px; font-size: 14px; }
  .site-mark span, .site-links .site-far { display: none; }   /* the mark alone, and the near links */
  .site-band.home .site-mark span { display: inline; }
  .site-links { gap: 16px; }
  .site-links a { padding: 15px 0 13px; }
}