/* Service-area map (service-areas page). Load after hybrid.css.
   Geometry: US Census 2010 cartographic boundary counties (1:500k), equirectangular projection,
   topology-safe simplification. Shapes link to the county sections (#sarasota #charlotte #lee #collier).
   Colors reuse hybrid tokens: forest band, cream/sage land, shield red (--accent) for hover, focus and :target. */

.samap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head map" "side map";column-gap:72px;align-items:start}
.samap-head{grid-area:head;align-self:end}
.samap-head h2{margin:0}
.samap-head>p:last-child{color:var(--muted);max-width:440px;margin:24px 0 0}
.samap-side{grid-area:side;margin-top:36px}
.samap-figure{grid-area:map;margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0c1f18}
.samap-svg{display:block;width:100%;height:auto}

/* Legend: mirrors the map, north to south */
.samap-legend{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.samap-legend a{display:grid;grid-template-columns:14px 1fr auto;column-gap:14px;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);color:#fff;text-decoration:none}
.samap-legend a:after{content:'→';grid-column:3;grid-row:1/3;color:var(--muted);transition:transform .2s,color .2s}
.samap-swatch{grid-row:1/3;width:14px;height:14px;border-radius:3px;background:var(--cream);transition:background .2s}
[data-county=charlotte] .samap-swatch,[data-county=collier] .samap-swatch{background:var(--sage)}
.samap-name{font-weight:600;line-height:1.3}
.samap-towns{grid-column:2;font-size:14px;line-height:1.4;color:var(--muted)}
.samap-legend a:is(:hover,:focus-visible) .samap-swatch{background:var(--accent)}
.samap-legend a:is(:hover,:focus-visible):after{color:#fff;transform:translateX(4px)}
.samap-key{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-size:14px;color:var(--muted)}
.samap-keydot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff}

/* Map layers (sizes in map units: 800 wide) */
.samap-grat path{fill:none;stroke:#ffffff17;stroke-width:1;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.samap-grat text{fill:#ffffff59;font-family:Plex,Arial,sans-serif;font-size:13px;letter-spacing:.08em}
.samap-land{fill:#1b392d;stroke:#2d4c40;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.samap-county path{fill:var(--cream);stroke:#0c1f18;stroke-width:2.5;stroke-linejoin:round;transition:fill .2s}
.c-charlotte path,.c-collier path{fill:var(--sage)}
.samap-county text{fill:var(--evergreen);font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:-.02em;text-anchor:middle;transition:fill .2s}
.samap-county:focus{outline:none}
.samap-county:is(:hover,:focus-visible) path{fill:var(--accent)}
.samap-county:focus-visible path{stroke:#fff;stroke-width:3}
.samap-county:is(:hover,:focus-visible) text{fill:#fff}
.samap-pin{pointer-events:none}
.samap-dot{fill:var(--accent);stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center}
.samap-pulse{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:samap-pulse 2.6s ease-out infinite}
.samap-pin text{fill:var(--evergreen);font-family:Plex,Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-anchor:middle;transition:fill .2s}
.samap-inset rect{fill:#0c1f18;stroke:#ffffff26;stroke-width:1;vector-effect:non-scaling-stroke}
.samap-fl{fill:#ffffff38}
.samap-fl-swfl{fill:var(--accent)}
@keyframes samap-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}

/* Linked highlighting: legend <-> map (progressive; :has() unsupported browsers keep plain hover) */
.samap:has([data-county=sarasota]:is(:hover,:focus-visible)) .c-sarasota path,
.samap:has([data-county=charlotte]:is(:hover,:focus-visible)) .c-charlotte path,
.samap:has([data-county=lee]:is(:hover,:focus-visible)) .c-lee path,
.samap:has([data-county=collier]:is(:hover,:focus-visible)) .c-collier path{fill:var(--accent)}
.samap:has([data-county=sarasota]:is(:hover,:focus-visible)) .c-sarasota text,
.samap:has([data-county=charlotte]:is(:hover,:focus-visible)) .c-charlotte text,
.samap:has([data-county=lee]:is(:hover,:focus-visible)) .c-lee text,
.samap:has([data-county=collier]:is(:hover,:focus-visible)) .c-collier text{fill:#fff}
.samap:has(.c-sarasota:hover) [data-county=sarasota] .samap-swatch,
.samap:has(.c-charlotte:hover) [data-county=charlotte] .samap-swatch,
.samap:has(.c-lee:hover) [data-county=lee] .samap-swatch,
.samap:has(.c-collier:hover) [data-county=collier] .samap-swatch{background:var(--accent)}

/* Selected county (after a map or legend click): mark the shape and the county card */
main:has(#sarasota:target) .c-sarasota path,main:has(#charlotte:target) .c-charlotte path,
main:has(#lee:target) .c-lee path,main:has(#collier:target) .c-collier path{fill:var(--accent)}
main:has(#sarasota:target) .c-sarasota text,main:has(#charlotte:target) .c-charlotte text,
main:has(#lee:target) .c-lee text,main:has(#collier:target) .c-collier text{fill:#fff}
.countygrid .county:target{border-color:var(--accent);box-shadow:inset 0 4px 0 var(--accent)}
/* Fort Myers label sits on Lee: flip it to white whenever Lee turns red */
.c-lee:is(:hover,:focus-visible)~.samap-pin text,.samap:has([data-county=lee]:is(:hover,:focus-visible)) .samap-pin text,main:has(#lee:target) .samap-pin text{fill:#fff}

@media(max-width:1000px){
.samap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "side";row-gap:32px}
.samap-side{margin-top:0}
.samap-figure,.samap-side{max-width:640px}
}
@media(max-width:650px){
.samap-grat text,.samap-pin text{display:none}
.samap-county text{font-size:35px}
.samap-dot{transform:scale(1.5)}
.samap-legend a{padding:13px 2px}
}
@media(prefers-reduced-motion:reduce){.samap-pulse{animation:none;opacity:0}}