/* ============================================================
   SSR Listing Map — [ssr_listing_map]
   Design 9b: the map with a township rail beside it, everything
   outside the home county washed out so the mosaic is the subject.

   Two departures from the mockup, both deliberate:
     · the Map / Street View toggle sits in the heading row, not on
       the map — it switches the whole surface, unlike the two
       clusters that stay on the canvas and adjust the view.
     · the rail scrolls its borders list rather than growing, so the
       card always matches the map's height whatever the data.

   Tokens are read from the site's Additional CSS when present and
   fall back to literals, so the section survives edits to the
   global token block. Same pattern as hero.css and about.css.
   ============================================================ */
.ssr-map {
  --m-ink:       var(--text-on-light, #2f2e30);
  --m-muted:     var(--text-on-light-muted, #6f6d73);
  --m-dim:       var(--charcoal-400, #8f8d93);
  --m-mid:       var(--charcoal-600, #57555a);
  --m-dark:      var(--charcoal-700, #414042);
  --m-line:      var(--border-on-light, #d6d5d8);
  --m-hair:      var(--charcoal-100, #ececed);
  --m-fill:      var(--charcoal-50, #f7f7f6);
  --m-surface:   var(--surface-light, #fff);
  --m-brand:     var(--accent-brand-strong, #8fa317);
  --m-cta:       var(--accent-cta, #ff5a5f);
  --m-cta-tint:  var(--accent-cta-tint, #ffe4e5);
  --m-cta-ink:   var(--coral-700, #c92e34);
  --m-link:      var(--text-link, #0a3a5c);
  --m-link-hover: var(--text-link-hover, #0e4d5c);
  --m-ring:      var(--state-focus-ring, #ff5a5f);
  --m-display:   var(--font-display, Outfit, system-ui, sans-serif);
  --m-body:      var(--font-body, 'Public Sans', system-ui, sans-serif);
  --m-r-md:      var(--radius-md, 8px);
  --m-r-lg:      var(--radius-lg, 14px);
  --m-r-pill:    var(--radius-pill, 999px);
  --m-ease:      var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
  --m-dur:       var(--duration-base, 200ms);

  /* The overlay roles. Here rather than in map.js so the palette can be retuned against the
     basemap without touching behaviour — two roles, not a hue per township, because a distinct
     colour each would fight the map style and imply the colours mean something. --m-scrim is the
     wash over everything outside this county. */
  --m-home:      var(--accent-cta, #ff5a5f);
  --m-other:     #1b6480;
  --m-scrim:     #ffffff;

  --m-max:  var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */
  --m-rail: 400px;
  --m-gap:  18px;
  /* Resolved from the shortcode's height attribute, which arrives as --m-h-set on this element.
     Kept one indirection away so the mobile block below can still override it — an inline
     custom property beats a media query, a stylesheet one does not. */
  --m-h:    var(--m-h-set, 560px);

  display: block;
  background: var(--m-surface);
  padding: 64px 24px;
  font-family: var(--m-body);
  color: var(--m-ink);
}

.ssr-map *, .ssr-map *::before, .ssr-map *::after { box-sizing: border-box; }

/* wpautop wraps runs of inline elements in <p> and splits around block children. Injected
   paragraphs become transparent to layout so their children sit where they were written. An
   intentional paragraph would need its own class AND a type selector to outrank this. */
.ssr-map p { display: contents; margin: 0; padding: 0; }
.ssr-map p:empty { display: none; }

.ssr-map__inner {
  max-width: var(--m-max);
  margin-inline: auto;
}

/* ---------- heading row ---------- */

.ssr-map__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ssr-map .ssr-map__title {
  margin: 0;
  font-family: var(--m-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--m-ink);
}

.ssr-map__sub {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--m-muted);
}

/* The surface toggle. A segmented control rather than two buttons: the pair is one choice, and
   the filled half is the state readout. */
.ssr-map__modes {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--m-r-pill);
  background: var(--m-fill);
  border: 1px solid var(--m-line);
}

.ssr-map__mode {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--m-r-pill);
  padding: 7px 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--m-muted);
  cursor: pointer;
  transition: background var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease);
}

.ssr-map__mode:hover { color: var(--m-ink); }

.ssr-map__mode.is-active {
  background: var(--m-dark);
  color: #fff;
}

.ssr-map__mode:focus-visible {
  outline: 2px solid var(--m-ring);
  outline-offset: 2px;
}

/* ---------- body ---------- */

.ssr-map__body {
  display: flex;
  gap: var(--m-gap);
  align-items: stretch;
}

.ssr-map__stage {
  position: relative;   /* the hover hint is positioned against this */
  flex: 1 1 auto;
  min-width: 0;
  height: var(--m-h);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-lg);
  overflow: hidden;
  background: #e9e6da;   /* shown while tiles load, not a transparent gap */
}

.ssr-map__canvas,
.ssr-map__pano {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ssr-map__canvas[hidden],
.ssr-map__pano[hidden] { display: none !important; }

/* ---------- overlay controls, injected into the map by map.js ---------- */

.ssr-map__ctl {
  display: flex;
  gap: 2px;
  margin: 14px;
  padding: 3px;
  border-radius: var(--m-r-pill);
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 26, 27, .18);
}

.ssr-map__ctlbtn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--m-r-pill);
  padding: 6px 13px;
  font-family: var(--m-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--m-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease);
}

.ssr-map__ctlbtn:hover { color: var(--m-dark); }

.ssr-map__ctlbtn.is-active {
  background: var(--m-dark);
  color: #fff;
}

.ssr-map__ctlbtn:focus-visible {
  outline: 2px solid var(--m-ring);
  outline-offset: -2px;
}

/* ---------- township labels ---------- */

.ssr-map__lbl {
  font: 600 11px/1.2 var(--m-body);
  color: #2b2f2c;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  /* A halo, not a pill: it keeps the label legible over any basemap colour without adding
     another rectangle to a map already full of shapes. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}

.ssr-map__lbl.is-home {
  font-size: 12.5px;
  font-family: var(--m-display);
  font-weight: 700;
  color: var(--accent-cta-hover, #ea3f45);
}

/* ---------- hover hint ---------- */

/* A plain div, not an InfoWindow: those render above the map controls, so one opening near the
   zoom cluster swallows clicks meant for the buttons underneath. pointer-events:none means this
   can never intercept anything. */
.ssr-map__tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(14px, -50%);
  max-width: 15rem;
  padding: .45rem .6rem;
  border-radius: var(--m-r-md);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .12);
  font: 400 12.5px/1.45 var(--m-body);
  color: var(--m-ink);
  white-space: nowrap;
}

.ssr-map__tip.is-flipped { transform: translate(calc(-100% - 14px), -50%); }
.ssr-map__tip[hidden] { display: none; }
.ssr-map__tip strong { font-weight: 600; }

/* ---------- the township rail ---------- */

.ssr-map__rail {
  flex: 0 0 var(--m-rail);
  max-width: var(--m-rail);
  height: var(--m-h);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-lg);
  overflow: hidden;
  background: var(--m-surface);
}

.ssr-map__railhead {
  flex: none;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--m-line);
}

.ssr-map__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--m-muted);
}

.ssr-map__eyebrow--brand { color: var(--m-brand); }

/* The list header sits outside the scroll area so it does not slide away with the rows. */
.ssr-map__rail > .ssr-map__eyebrow {
  flex: none;
  padding: 14px 22px 8px;
}

.ssr-map__twpline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.ssr-map__twpname {
  font-family: var(--m-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--m-ink);
}

.ssr-map__twpmeta {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--m-muted);
}

.ssr-map__chip {
  flex: none;
  border-radius: var(--m-r-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  background: var(--m-hair);
  color: var(--m-mid);
}

.ssr-map__chip--cta {
  background: var(--m-cta-tint);
  color: var(--m-cta-ink);
}

/* ---------- market stats ---------- */

/* Two columns, because the warehouse carries five figures where the mockup drew two. A single
   row would either truncate or shrink them past reading size. */
.ssr-map__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 14px;
}

.ssr-map__statval {
  font-family: var(--m-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--m-ink);
}

.ssr-map__statlab {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--m-muted);
}

/* The date is what separates a market number from a decoration. */
.ssr-map__asof {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--m-dim);
}

.ssr-map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-pill);
  background: var(--m-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--m-ink);
  transition: background var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease);
}

.ssr-map__btn:hover,
.ssr-map__btn:focus-visible {
  background: var(--m-fill);
  border-color: var(--m-dim);
  color: var(--m-ink);
}

.ssr-map__btn:focus-visible {
  outline: 2px solid var(--m-ring);
  outline-offset: 2px;
}

/* ---------- bordering townships ---------- */

/*
 * Everything is scoped under .ssr-map and styles its own classes rather than bare li / a, so a
 * theme's list and link rules do not have to be fought with !important — and nothing here leaks
 * outward either. An earlier flex-row version of this list was reordered by the theme.
 */
.ssr-map .ssr-map__borders {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrolling the list must not chain to the page */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssr-map .ssr-map__border {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--m-hair);
}

.ssr-map .ssr-map__borderlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  text-decoration: none;
  border-bottom: 0;
  color: var(--m-ink);
  transition: background var(--m-dur) var(--m-ease);
}

.ssr-map .ssr-map__borderlink:hover,
.ssr-map .ssr-map__borderlink:focus-visible,
.ssr-map .ssr-map__borderlink.is-hover {
  background: var(--m-fill);
  color: var(--m-ink);
}

.ssr-map .ssr-map__borderlink:focus-visible {
  outline: 2px solid var(--m-ring);
  outline-offset: -2px;
}

.ssr-map__bordertext {
  flex: 1 1 auto;
  min-width: 0;
}

.ssr-map__bordername {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.ssr-map__bordermeta {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--m-muted);
}

.ssr-map__chev {
  flex: none;
  color: var(--m-dim);
}

.ssr-map__railfoot {
  position: relative;
  flex: none;
  padding: 14px 22px;
  border-top: 1px solid var(--m-line);
}

/*
 * The hint that the list continues. Anchored to the footer's top edge rather than to a measured
 * offset, and self-cancelling: when the rows do not fill their track the gradient sits over the
 * rail's own background and cannot be seen, so it appears exactly when there is a row under it.
 */
.ssr-map__railfoot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to top, var(--m-surface), rgba(255, 255, 255, 0));
}

.ssr-map__more {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 0;
  color: var(--m-link);
}

.ssr-map__more:hover,
.ssr-map__more:focus-visible {
  color: var(--m-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- intermediate: the rail narrows before it stacks ---------- */

@media (max-width: 1100px) {
  .ssr-map { --m-rail: 330px; }
  .ssr-map__stats { gap: 10px 14px; }
}

/* ---------- mobile ---------- */

/* 767px is the page-wide flip, shared with the hero, About and Features. The rail stops being a
   column beside the map and becomes the block under it: the map keeps a usable height, the rail
   drops its own scroll and grows with the page, because a scroll container inside a scrolling
   page is a trap on touch. */
@media (max-width: 767px) {
  .ssr-map {
    padding: 40px 16px;
    --m-h: 380px;
  }

  .ssr-map__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
  }

  .ssr-map .ssr-map__title { font-size: 21px; }

  .ssr-map__modes { align-self: stretch; }
  .ssr-map__mode { flex: 1 1 0; text-align: center; }

  .ssr-map__body { display: block; }

  .ssr-map__rail {
    flex: none;
    max-width: none;
    height: auto;
    margin-top: 12px;
  }

  .ssr-map .ssr-map__borders {
    overflow-y: visible;
    flex: none;
  }

  .ssr-map__railfoot::before { display: none; }

  .ssr-map__railhead { padding: 18px 18px 16px; }
  .ssr-map__rail > .ssr-map__eyebrow { padding: 14px 18px 8px; }
  .ssr-map .ssr-map__borderlink { padding: 12px 18px; }
  .ssr-map__railfoot { padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssr-map * {
    transition: none !important;
    animation: none !important;
  }
}