/* The area code pages' map (src/area_maps.php, area-map.js). Its own file, linked only on /area-code/ pages. */
.ac-map-section { padding-top: 8px; }
.ac-map-title { margin: 0 0 14px; }
.ac-map { margin: 0; max-width: 800px; }
.ac-map-frame, .ac-map-live { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.ac-map-frame img { display: block; width: 100%; height: auto; }
.ac-map-empty:not([hidden]) { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.ac-map-live:not([hidden]) { display: block; }
.ac-map-live:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ac-map-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px;
    font-size: 0.82rem; color: var(--muted); }
.ac-map-cap a { color: inherit; text-underline-offset: 2px; }
.ac-map-sub { margin: 22px 0 10px; font-size: 1rem; font-weight: 800; }
.ac-map-cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-map-cities a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink-2, var(--ink)); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.ac-map-cities a:hover { border-color: var(--line-strong, var(--line)); background: var(--surface-2); }
/* Leaflet's own text on our map */
.ac-map-live .leaflet-tooltip { font: 600 12px/1.3 Manrope, system-ui, sans-serif; }
.ac-map-live .leaflet-control-attribution { font-size: 11px; }