/* Neighborhoods map section. Loaded only when the section renders.
   A dark band built around the aerial image: deep-water background, white
   outlines and labels, white side card. No red anywhere in the map. */

.area-map {
  --map-sea: #0b1d25;         /* matches the deep water in the base image */
  --map-ink: var(--color-white);
  --map-ink-muted: rgba(255, 255, 255, 0.72);
  --map-line: rgba(255, 255, 255, 0.85);
  --map-halo: rgba(11, 29, 37, 0.85);
  background: var(--map-sea);
  color: var(--map-ink);
}
.area-map .section__head h2,
.area-map .section__lede { color: var(--map-ink); }
.area-map .section__lede { color: var(--map-ink-muted); }
.area-map .section__eyebrow { color: var(--map-ink-muted); }

.area-map__layout { display: grid; gap: var(--space-6); margin-block-start: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .area-map__layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-7); }
}

/* --- Stage ------------------------------------------------------------------ */
.area-map__stage { position: relative; max-width: 54rem; margin-inline: auto; width: 100%; }
.area-map__frame { position: relative; }
/* The SVG keeps the base image's proportions at every zoom (the script fits
   each zoom box inside it), so the page never jumps when the view changes. */
.area-map__svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1000 / 1031.8; background: var(--map-sea);
  --map-k: 1; --map-hub-fs: 15px; --map-label-fs: 13px;
}
@media (max-width: 600px) { .area-map__svg { --map-hub-fs: 11px; --map-label-fs: 11px; } }
.area-map__water { fill: var(--map-sea); }
.area-map__detail { opacity: 0; transition: opacity var(--dur-slow) var(--ease); pointer-events: none; }
.area-map__detail.is-on { opacity: 1; }
.area-map__water-labels text {
  font-family: var(--font-headline); font-style: italic; font-size: calc(13px * var(--map-k));
  fill: rgba(255, 255, 255, 0.55); text-anchor: middle; pointer-events: none; user-select: none;
}
/* 0.55 is 5.9:1 on the water; zoomed in, 0.55 x 0.85 is still 4.7:1. */
.area-map__svg.is-zoomed .area-map__water-labels { opacity: 0.85; }

/* County lines: a quiet dashed line with small spaced-out names. */
.area-map__counties { pointer-events: none; }
.area-map__county-line {
  fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.area-map__county-label {
  font-family: var(--font-text); font-size: calc(9.5px * var(--map-k)); letter-spacing: 0.24em; text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.55); text-anchor: middle; dominant-baseline: middle; user-select: none;
  paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(2.5px * var(--map-k));
}
@media (max-width: 600px) { .area-map__county-label { display: none; } }

/* Regions: thin white outlines over the imagery, a faint wash on hover or
   keyboard focus. Once one is chosen the others fade back. */
.area-map__region { cursor: pointer; outline: none; }
.area-map__region-shape {
  fill: rgba(255, 255, 255, 0); stroke: var(--map-line); stroke-width: 1.25; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; transition: fill var(--dur-base) var(--ease), stroke-opacity var(--dur-base) var(--ease);
}
.area-map__hub-label {
  font-family: var(--font-text); font-size: calc(var(--map-hub-fs) * var(--map-k)); letter-spacing: 0.2em; text-transform: uppercase;
  fill: var(--map-ink); paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(3px * var(--map-k)); stroke-linejoin: round;
  pointer-events: none; user-select: none;
}
.area-map__hub-dot { fill: var(--map-ink); stroke: var(--map-sea); stroke-width: 2; vector-effect: non-scaling-stroke; }
.area-map__region:hover .area-map__region-shape,
.area-map__region:focus-visible .area-map__region-shape { fill: rgba(255, 255, 255, 0.14); stroke-width: 2; }
.area-map__region:focus-visible .area-map__region-shape { stroke-dasharray: 4 3; }
.area-map__region.is-dim .area-map__region-shape { stroke-opacity: 0.35; }
.area-map__region.is-dim .area-map__hub-label { opacity: 0.55; }
.area-map__region.is-dim:hover .area-map__region-shape { stroke-opacity: 1; }
.area-map__region.is-active { cursor: default; }
.area-map__region.is-active .area-map__region-shape { fill: rgba(255, 255, 255, 0); stroke-width: 1.75; }
.area-map__region.is-active .area-map__hub-label { display: none; }

/* Markers: a white dot ringed in deep water, with a white haloed name. Hidden until a hub is open. */
.area-map__marker { cursor: pointer; outline: none; }
.area-map__marker[hidden] { display: none; }
.area-map__dot { fill: var(--map-ink); stroke: var(--map-sea); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.area-map__label {
  font-family: var(--font-text); font-size: calc(var(--map-label-fs) * var(--map-k)); fill: var(--map-ink);
  paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(3.5px * var(--map-k)); stroke-linejoin: round;
  user-select: none;
}
.area-map__marker:hover .area-map__dot,
.area-map__marker:focus-visible .area-map__dot,
.area-map__marker.is-selected .area-map__dot { fill: var(--map-sea); stroke: var(--map-ink); }
.area-map__marker:hover .area-map__label,
.area-map__marker:focus-visible .area-map__label,
.area-map__marker.is-selected .area-map__label { text-decoration: underline; text-underline-offset: 0.15em; }
.area-map__marker.is-selected .area-map__label { font-weight: var(--fw-semibold); }

/* Crumbs above the map: "Tampa Bay › South Tampa › Hyde Park". */
.area-map__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--map-ink-muted); }
.area-map__crumb--home {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--map-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.area-map__crumb--home[aria-current] { text-decoration: none; cursor: default; font-weight: var(--fw-semibold); }
.area-map__crumb--home:focus-visible { outline: 2px solid var(--map-ink); outline-offset: 3px; }
.area-map__crumb--current::before { content: "›"; margin-inline-end: var(--space-2); color: var(--map-ink-muted); }
.area-map__note { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--map-ink-muted); }
.area-map__credit { display: block; margin-block-start: var(--space-1); }

/* Without the script: regions still link to the hubs; the crumbs mean nothing yet. */
.area-map__layout:not(.is-enhanced) .area-map__crumbs { display: none; }

/* --- Side card (white, on the dark band) ------------------------------------------ */
.area-map__panel { position: sticky; top: calc(var(--header-h) + var(--space-4)); color: var(--text); }
@media (max-width: 1023px) { .area-map__panel { position: static; } }
.area-map__card { background: var(--color-white); }
.area-map__card--intro { padding: var(--space-5); }
.area-map__media { aspect-ratio: var(--ratio-card); overflow: hidden; background: var(--color-beige-2); }
.area-map__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.area-map__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.area-map__eyebrow {
  margin: 0; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.area-map__eyebrow--list { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-top: 1px solid var(--border-soft); }
.area-map__title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text); }
.area-map__excerpt { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }
.area-map__facts { margin: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.area-map__facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--border-soft); }
.area-map__facts dt { margin: 0; color: var(--text-muted); }
.area-map__facts dd { margin: 0; }
.area-map__updated { margin: 0; font-size: var(--fs-xs); color: var(--text-subtle); }
.area-map__body .btn { align-self: flex-start; margin-block-start: var(--space-2); }
.area-map__hub-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.area-map__hub-list li { border-top: 1px solid var(--border-soft); }
.area-map__hub-list li:last-child { border-bottom: 1px solid var(--border-soft); }
.area-map__hub-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; text-decoration: none; color: var(--text); }
.area-map__hub-list a:hover { text-decoration: underline; }
.area-map__hub-list a::after { content: "→"; color: var(--text-muted); }
.area-map__count { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Plain index below the map ---------------------------------------------------- */
.area-map__index {
  display: grid; gap: var(--space-6); margin-block-start: var(--space-8); padding-block-start: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.area-map__index h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); color: var(--map-ink); }
.area-map__index a { color: var(--map-ink); }
.area-map__index h3 a { text-decoration: none; }
.area-map__index h3 a:hover { text-decoration: underline; }
.area-map__index ul { list-style: none; margin: 0; padding: 0; }
.area-map__index ul ul { padding-inline-start: var(--space-4); }
.area-map__index li a { display: inline-block; padding-block: var(--space-1); font-size: var(--fs-sm); text-decoration: none; color: var(--map-ink-muted); }
.area-map__index li a:hover { text-decoration: underline; color: var(--map-ink); }
.area-map a:focus-visible { outline: 2px solid var(--map-ink); outline-offset: 2px; }
.area-map__panel a:focus-visible { outline-color: var(--color-black); }
.area-map__svg.is-zoomed .area-map__county-label { display: none; }

/* Community outlines (Westchase, Lutz, Riverview...): finer lines than the hubs.
   Faint on the bay view, clear once their hub is open; each links to its guide. */
.area-map__area { cursor: pointer; outline: none; }
.area-map__area--plain { cursor: default; pointer-events: none; }
.area-map__area-shape {
  fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 0.45); stroke-width: 0.9; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; transition: fill var(--dur-base) var(--ease), stroke var(--dur-base) var(--ease);
}
.area-map__area.is-current .area-map__area-shape { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.1; }
.area-map__area:hover .area-map__area-shape,
.area-map__area:focus-visible .area-map__area-shape,
.area-map__area.is-selected .area-map__area-shape { fill: rgba(255, 255, 255, 0.14); stroke: var(--map-ink); stroke-width: 1.5; }
.area-map__area:focus-visible .area-map__area-shape { stroke-dasharray: 4 3; }
.area-map__area-label,
.area-map__area-name {
  font-family: var(--font-text); font-size: calc(10.5px * var(--map-k)); letter-spacing: 0.12em; text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.82); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(3px * var(--map-k)); stroke-linejoin: round;
  pointer-events: none; user-select: none;
}
/* Bay view: every outlined community is named. Zoomed in: markers take over,
   and a community without a page keeps its name only inside its own hub. */
.area-map__svg.is-zoomed .area-map__area-name { display: none; }
.area-map__svg.is-zoomed .area-map__area--plain:not(.is-current) .area-map__area-label { display: none; }
.area-map__svg.is-zoomed .area-map__area-label { font-size: calc(var(--map-label-fs) * var(--map-k)); letter-spacing: 0; text-transform: none; }
@media (max-width: 600px) {
  .area-map__svg:not(.is-zoomed) .area-map__area-name,
  .area-map__svg:not(.is-zoomed) .area-map__area-label { display: none; }
}