/* ==========================================================================
   Service-area map (homepage). Markup: partials/service-area-map.php
   Motion: assets/js/service-area-map.js. With no JS or reduced motion,
   everything below renders in its finished state.
   ========================================================================== */

.sam {
  position: relative;
  --sam-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sam-water: #9db4cb;
  --sam-ring: var(--gold);
  margin: 0;
  container-type: inline-size;
}

/* Map beside the county list on wide screens, stacked above it on narrow */
.sa-explorer {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto 40px;
  align-items: start;
}
.sa-explorer .sa-accordion { max-width: none; margin: 0; }
@media (min-width: 960px) {
  .sa-explorer { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; }
  .sa-explorer .sam { position: sticky; top: 104px; }
}

.sam-canvas {
  position: relative;
  aspect-ratio: var(--sam-ratio);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sam-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#sam-grid circle { fill: #e9e7e0; } /* faint survey-grid texture */

.sam-ring-fill { fill: var(--gold-wash); opacity: 0.45; }
.sam-ring {
  fill: none;
  stroke: var(--sam-ring);
  stroke-width: 2.5;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sam-ring,
.sam-ring-fill { transform-box: fill-box; transform-origin: center; }
.sam-ring-label {
  font: 700 20px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--gold-dark);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
}

.sam-river {
  fill: none;
  stroke: var(--sam-water);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.sam-river--major { stroke-width: 9; }
.sam-river--mid   { stroke-width: 5.5; }
.sam-river--minor { stroke-width: 3; opacity: 0.8; }

.sam-area,
.sam-state {
  font: 700 17px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--gray-500);
  transition: fill 250ms ease, opacity 250ms ease;
}
.sam-state { font-size: 15px; font-weight: 600; fill: var(--sam-water); letter-spacing: 0.2em; }

/* Pins ---------------------------------------------------------------- */
.sam-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sam-pin {
  position: absolute;
  width: 0;
  height: 0;
  transition: opacity 250ms ease;
}
.sam-dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(26, 43, 69, 0.35);
  transition: transform 250ms var(--sam-ease-out), background-color 250ms ease;
}
.sam-pin[data-tier="3"] .sam-dot {
  left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  background: var(--gray-500);
  box-shadow: 0 0 0 1.5px #fff;
}
.sam-pin--home .sam-dot {
  left: -8px; top: -8px; width: 16px; height: 16px;
  background: var(--gold);
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--gold-line), 0 2px 8px rgba(26, 43, 69, 0.3);
}

.sam-label {
  position: absolute;
  white-space: nowrap;
  font: 600 12px/1 var(--font-sans);
  color: var(--navy);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 200ms ease;
}
.sam-pin[data-side="r"] .sam-label { left: 10px; }
.sam-pin[data-side="l"] .sam-label { right: 10px; }
.sam-pin[data-side="t"] .sam-label { bottom: 6px; left: 0; transform: translateX(-50%); }
.sam-pin[data-side="b"] .sam-label { top: 8px; left: 0; transform: translateX(-50%); }
.sam-pin--home .sam-label { font-size: 13px; font-weight: 700; left: 16px; }

/* Label density follows the map's own width, not the viewport */
.sam-pin[data-tier="2"] .sam-label,
.sam-pin[data-tier="3"] .sam-label { opacity: 0; }
@container (min-width: 520px) {
  .sam-pin[data-tier="2"] .sam-label { opacity: 1; }
}
/* Phone-width map: smaller dots, larger SVG type (it scales down with the map) */
@container (max-width: 519px) {
  .sam-label { font-size: 11px; }
  .sam-dot { left: -4px; top: -4px; width: 8px; height: 8px; }
  .sam-pin[data-tier="3"] .sam-dot { left: -2.5px; top: -2.5px; width: 5px; height: 5px; }
  .sam-pin--home .sam-dot { left: -6px; top: -6px; width: 12px; height: 12px; }
  .sam-pin[data-side="r"] .sam-label { left: 8px; }
  .sam-pin[data-side="l"] .sam-label { right: 8px; }
  .sam-pin--home .sam-label { font-size: 12px; left: 12px; }
  .sam-pin[data-side-sm="b"] .sam-label { top: 7px; bottom: auto; left: 0; right: auto; transform: translateX(-50%); }
  .sam-ring-label { font-size: 30px; }
  .sam-area { display: none; } /* no room; the accordion names the counties */
  .sam-state { font-size: 22px; }
}

/* Stat chip ------------------------------------------------------------ */
.sam-stat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px 11px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(26, 43, 69, 0.06), var(--shadow-sm);
}
.sam-stat-num {
  font: 700 28px/1 var(--font-serif);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  min-width: 3.3em; /* "3,000+" never reflows while counting */
}
.sam-stat-label { font: 600 13px/1 var(--font-sans); color: var(--gray-600); }
/* On phones the chip would cover towns, so it sits under the map instead */
@container (max-width: 519px) {
  .sam-stat { position: static; display: inline-flex; margin-top: 12px; }
  .sam-stat-num { font-size: 24px; }
}
@media (prefers-reduced-transparency: reduce) {
  .sam-stat { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Linked to the accordion ---------------------------------------------- */
/* A county panel is open: its places come forward, the rest step back */
.sam[data-active] .sam-pin:not(.sam-pin--home) { opacity: 0.22; }
.sam[data-active] .sam-area { opacity: 0.35; }
.sam[data-active="multnomah"]  :is(.sam-pin, .sam-area)[data-county="multnomah"],
.sam[data-active="clackamas"]  :is(.sam-pin, .sam-area)[data-county="clackamas"],
.sam[data-active="washington"] :is(.sam-pin, .sam-area)[data-county="washington"],
.sam[data-active="clark"]      :is(.sam-pin, .sam-area)[data-county="clark"] { opacity: 1; }
.sam[data-active="multnomah"]  .sam-area[data-county="multnomah"],
.sam[data-active="clackamas"]  .sam-area[data-county="clackamas"],
.sam[data-active="washington"] .sam-area[data-county="washington"],
.sam[data-active="clark"]      .sam-area[data-county="clark"] { fill: var(--navy); }

/* A city link is hovered or focused: its pin answers */
.sam-pin.is-hot { opacity: 1 !important; z-index: 2; }
.sam-pin.is-hot .sam-dot { transform: scale(1.5); background: var(--gold-dark); }
.sam-pin.is-hot .sam-label { opacity: 1; font-weight: 700; }

/* Hovering a dot on the map names it (mouse only; touch fires false hovers) */
@media (hover: hover) and (pointer: fine) {
  .sam-pin:hover { z-index: 2; }
  .sam-pin:hover .sam-label { opacity: 1; }
  .sam-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
}

/* Intro choreography: JS adds .is-armed only when it's about to animate */
.sam.is-armed .sam-pin,
.sam.is-armed .sam-ring,
.sam.is-armed .sam-ring-fill,
.sam.is-armed .sam-ring-label,
.sam.is-armed .sam-area,
.sam.is-armed .sam-state { opacity: 0; }
.sam.is-armed .sam-river { stroke-dashoffset: 1; }

@media (prefers-reduced-motion: reduce) {
  .sam-pin, .sam-dot, .sam-label, .sam-area { transition-duration: 0ms; }
  .sam-pin.is-hot .sam-dot { transform: none; }
}