/* Service-area map (assets/js/map.js). Mounts on any [data-area-map].
 * A static Mapbox poster shows first; Mapbox GL takes over near view.
 * Uses the site tokens when present, with fallbacks so it stands alone. */

[data-area-map] { position: relative; display: block; width: 100%; min-height: 280px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius, 10px); background: #e9eef0; isolation: isolate;
  box-shadow: 0 1px 0 var(--hair, rgba(20, 40, 80, .14)), 0 18px 40px -30px rgba(15, 30, 60, .45); }
[data-area-map] > .amap-gl, [data-area-map] > .amap-gl.mapboxgl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.amap-gl .mapboxgl-canvas:focus-visible { outline: 2px solid var(--royal, #2a5bd7); outline-offset: -2px; }

/* Poster: the same style, centre and zoom from the Static Images API, with
 * the dots placed by Web Mercator maths. Tapping it wakes the live map. */
.amap-poster { position: absolute; inset: 0; z-index: 2; cursor: pointer; transition: opacity .45s cubic-bezier(0, 0, .2, 1); }
.amap-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.amap-poster img.is-loaded { opacity: 1; }
[data-area-map][data-live="true"] .amap-poster { opacity: 0; pointer-events: none; }
.amap-attr { position: absolute; right: 6px; bottom: 4px; z-index: 1; padding: 0 4px; border-radius: 2px; font: 10px/1.6 system-ui, sans-serif; color: #333; background: rgba(255, 255, 255, .72); }
.amap-dot { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--navy-deep, #13234a); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .18s ease, background-color .18s ease; }
.amap-dot.is-base { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: var(--gold, #f2c230); border: 2.5px solid var(--navy-deep, #13234a); }
.amap-dot.is-hot, .amap-dot.is-focus { transform: scale(1.35); background: var(--gold, #f2c230); }

/* Markers: navy dots ringed in white; the one in focus or under the
 * pointer turns gold. The base is a gold disc with a navy water drop. */
.amap-pin { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.amap-pin > span { width: 15px; height: 15px; border-radius: 50%; background: var(--navy-deep, #13234a); border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .18s ease, background-color .18s ease; }
.amap-pin.is-hot > span, .amap-pin.is-focus > span, .amap-pin:focus-visible > span { transform: scale(1.35); background: var(--gold, #f2c230); }
.amap-pin:focus-visible { outline: none; }
.amap-pin.is-base { width: 34px; height: 34px; }
.amap-pin.is-base > span { display: grid; place-items: center; width: 28px; height: 28px; background: var(--gold, #f2c230); border: 2.5px solid var(--navy-deep, #13234a); }
.amap-pin.is-base svg { width: 12px; height: 15px; fill: var(--navy-deep, #13234a); }
.amap-pin.is-base.is-hot > span, .amap-pin.is-base:focus-visible > span { transform: scale(1.12); }
@media (pointer: coarse) { .amap-pin { width: 40px; height: 40px; } }

/* The marker card. */
.amap-pop .mapboxgl-popup-content { padding: 14px 16px 14px; border-radius: var(--radius, 10px); font-family: var(--font, system-ui, sans-serif);
  color: var(--ink, #172a4a); box-shadow: 0 14px 36px -12px rgba(10, 25, 55, .45); }
.amap-pop .mapboxgl-popup-tip { display: none; }
.amap-card strong { display: block; font-family: var(--display, "Arial Narrow", sans-serif); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.amap-card .amc-meta { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted, #5b6478); }
.amap-card .amc-mi { color: var(--teal-ink, #1d6f78); font-weight: 500; }
.amap-card .amc-svc { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hair, rgba(20, 40, 80, .14)); font-size: 12.5px; line-height: 1.45; color: var(--muted, #5b6478); }
.amap-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--royal, #2a5bd7); }
.amap-card a:hover, .amap-card a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.amap-pop { max-width: 250px !important; }
.mapboxgl-ctrl-group { border-radius: var(--radius, 10px) !important; }
@media (prefers-reduced-motion: reduce) { .amap-poster, .amap-poster img, .amap-dot, .amap-pin > span { transition: none; } }

/* Markers in Google red with a white ring, as on the Anchor map (Logan,
 * 2026-10-26: no yellow). Hover/focus: larger and a deeper red. The base
 * is a larger red disc with a white water drop. */
.amap-dot, .amap-pin > span { background: #ea4335; }
.amap-dot.is-hot, .amap-dot.is-focus, .amap-pin.is-hot > span, .amap-pin.is-focus > span, .amap-pin:focus-visible > span { background: #c5221f; }
.amap-dot.is-base, .amap-pin.is-base > span { background: #ea4335; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.amap-pin.is-base svg { fill: #fff; }