/* ── CT town boundary overlay (P3.T6) ────────────────────────────────
 * Sits inside #st-map on top of the zoomed CT state SVG. Each <path>
 * is a town polygon, inheriting the same s-pct-* fill scale as the
 * state map so the visual language is consistent.
 *
 * The overlay is absolutely positioned over the existing state SVG —
 * both SVGs share the same viewBox + preserveAspectRatio so the
 * polygons land pixel-perfect inside the CT outline.
 */

.tt-town-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* the overlay is decorative; only its paths catch clicks */
  z-index: 2;
}

.tt-town-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Each town polygon. Re-uses the s-pct-* fill from outreach.css so the
 * color scale matches the state-level map. */
.tt-town-overlay svg path.tt-town {
  pointer-events: auto;
  fill: #2a2330;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.4;
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease, filter 120ms ease;
}

.tt-town-overlay svg path.tt-town:hover {
  stroke: var(--amber, #e8a33d);
  stroke-width: 1.2;
  filter: brightness(1.18);
}

.tt-town-overlay svg path.tt-town:focus-visible {
  outline: none;
  stroke: var(--amber, #e8a33d);
  stroke-width: 1.6;
  filter: brightness(1.25);
}

/* Active selection (set programmatically when a town is opened). */
.tt-town-overlay svg path.tt-town.tt-town-active {
  stroke: var(--amber, #e8a33d);
  stroke-width: 1.8;
}

/* Ensure the parent .st-map-zoomed wrapper can host an absolutely
 * positioned overlay. outreach-states.css already sets position:relative
 * on .st-map-zoomed for the back-button overlay; we just confirm here. */
.st-map-zoomed {
  position: relative;
}

/* The s-pct-* fill classes are already declared in css/outreach.css for
 * `.st-map svg path.s-pct-N`. The overlay's <svg> lives inside .st-map
 * too, so those rules apply to .tt-town paths automatically — we do NOT
 * redeclare them here to keep the color palette in one place. */