/* =============================================================
   Spartan Agency — Service-area map (Leaflet + OSM)

   Markup from inc/map.php:

     .tx-map.tx-map--compact|--full          wrapper  [data-spartan-map]
       .tx-map__canvas                        Leaflet mounts here
       .tx-map__legend                        4-item legend strip
       .tx-map__list                          accessible pin list (full)
         .tx-map__group > .tx-map__items > .tx-map__item

   Leaflet's own stylesheet (assets/vendor/leaflet/leaflet.css) loads
   before this file; everything below either skins Leaflet chrome to
   the tokens or styles our own pins/popups. Colours come from
   tokens.css except the county outline red, which is the SOW spec value
   #c41e3a (5.7:1 on white; map.js draws the polygon with the same hex,
   2px, dash "8 6", no fill) so the legend swatch matches the stroke.
   ============================================================= */

.tx-map {
  --map-red: #c41e3a;
  --map-pin-home: var(--slate-blue-2);
  --map-pin-commercial: var(--slate-blue);
  --map-pin-office: var(--gold);
  --map-pin-off: #8A8A8E;
  /* Office key orientation. The skeleton-key glyph (inc/map.php) is
     drawn upright: bow on top, bit at the foot, teeth to the left.
     20deg clockwise leans the shaft to about 70deg from horizontal --
     bow up, bit swinging down-left, not dead vertical (client spec
     2026-09). Change this one value to re-orient the key everywhere
     (markers + legend). */
  --map-key-rotate: 20deg;
  position: relative;
}

.tx-map__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  background: #E9E5DC;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

.tx-map--full .tx-map__canvas {
  aspect-ratio: 16 / 9;
  min-height: 420px;
  max-height: 78vh;
}

.tx-map__canvas:focus-visible {
  outline: 3px solid var(--charcoal-2);
  outline-offset: 2px;
}

.tx-map__noscript {
  margin: var(--s-3) 0 0;
  color: var(--text);
}

.site-footer .tx-map__noscript { color: var(--on-plum); }

/* Leaflet chrome: keep it inside the tokens. */
.tx-map .leaflet-container {
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: #E9E5DC;
}

.tx-map .leaflet-container a { color: var(--link); }

.tx-map .leaflet-bar {
  border: 0;
  box-shadow: var(--elev-2);
  border-radius: var(--r-md);
  overflow: hidden;
}

.tx-map .leaflet-bar a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  color: var(--charcoal);
  background: var(--surface);
  border-bottom-color: var(--rule-light);
  font-weight: 600;
}

.tx-map .leaflet-bar a:hover { background: var(--bone); color: var(--charcoal-2); }

.tx-map .leaflet-bar a:focus-visible,
.tx-map .leaflet-container a:focus-visible,
.tx-map .leaflet-popup-close-button:focus-visible {
  outline: 3px solid var(--charcoal-2);
  outline-offset: -3px;
  z-index: 2;
}

.tx-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  padding: 2px 6px;
  border-radius: var(--r-sm) 0 0 0;
}

.tx-map .leaflet-control-attribution a { color: var(--link); }

/* ---------- Pins (L.divIcon) ---------- */
.tx-map__pin {
  background: none;
  border: 0;
  cursor: pointer;
}

.tx-map__pin-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  color: var(--map-pin-home);
  border: 2px solid currentColor;
  box-shadow: var(--elev-2);
  transition: transform var(--dur-fast) var(--ease-out);
}

.tx-map__pin-glyph svg { width: 58%; height: 58%; }

.tx-map__pin--commercial .tx-map__pin-glyph { color: var(--map-pin-commercial); }

.tx-map__pin--off .tx-map__pin-glyph {
  color: var(--map-pin-off);
  background: var(--bone);
  border-style: dashed;
  opacity: 0.85;
}

/* Office pin is a classic teardrop marker, gold, no circular chip. */
.tx-map__pin--office .tx-map__pin-glyph {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--map-pin-office);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.tx-map__pin--office .tx-map__pin-glyph svg {
  width: 100%;
  height: 100%;
  stroke: var(--charcoal-2);
  stroke-width: 12;
  paint-order: stroke fill;
}

/* Key variant (default): same gold + charcoal outline as the teardrop,
   centred on the coordinate (map.js anchors it at its middle) and
   tilted by --map-key-rotate. A slightly heavier stroke keeps the thin
   shaft legible over busy tiles. */
.tx-map__pin--key .tx-map__pin-glyph svg {
  width: 92%;
  height: 92%;
  stroke-width: 18;
  transform: rotate(var(--map-key-rotate));
}

.tx-map__pin:hover .tx-map__pin-glyph { transform: scale(1.1); }

.tx-map .leaflet-marker-icon:focus-visible {
  outline: 3px solid var(--charcoal-2);
  outline-offset: 3px;
  border-radius: 50%;
}

/* ---------- Popups ---------- */
.tx-map .tx-map__leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: 0;
  color: var(--text);
}

/* Width is set per open by map.js (about two-thirds of the canvas, capped
   at 300px / 220px compact); the CSS only guards against overflowing the
   viewport on very small screens. */
.tx-map .tx-map__leaflet-popup .leaflet-popup-content {
  margin: 0;
  line-height: var(--lh-body);
  max-width: calc(100vw - 3rem);
}

/* Footer preview: listing hero as a 16:9 banner on top of the card,
   then the linked address + facts. ~260px wide × ~180px tall so it
   stays inside the 240px-tall canvas (see listingPopup). */
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup {
  padding: 0 0 var(--s-2);
}
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup:not(.tx-map__popup--has-thumb) {
  padding: var(--s-3) var(--s-5) var(--s-2) var(--s-3);
}
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-thumb-link {
  display: block;
  margin: 0 0 var(--s-2);
}
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-title,
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-facts {
  padding-inline: var(--s-3);
}
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup p:last-child { margin-bottom: 0; }
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-title { font-size: 0.9375rem; line-height: 1.25; }
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-title a { text-decoration: underline; text-underline-offset: 2px; }
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-addr,
.tx-map .tx-map__leaflet-popup--compact .tx-map__popup-facts { font-size: 0.8125rem; }
.tx-map .tx-map__leaflet-popup--compact .leaflet-popup-close-button {
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 24px;
}

.tx-map .tx-map__leaflet-popup .leaflet-popup-tip { box-shadow: var(--elev-1); }

.tx-map .leaflet-popup-close-button {
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 28px;
  color: var(--charcoal);
  top: 4px;
  right: 4px;
  border-radius: 50%;
}

.tx-map__popup {
  padding: var(--s-4) var(--s-4) var(--s-3);
}

.tx-map__popup p { margin: 0 0 var(--s-1); }

.tx-map__popup-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
}

.tx-map__popup-kind {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

.tx-map__popup-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
}

.tx-map__popup-title a { color: var(--ink); text-decoration: none; }
.tx-map__popup-title a:hover,
.tx-map__popup-title a:focus-visible { color: var(--link); text-decoration: underline; }

.tx-map__popup-addr,
.tx-map__popup-facts { color: var(--ink-muted); font-size: 0.875rem; }

.tx-map__popup--off .tx-map__popup-facts { font-style: italic; }

.tx-map__popup-link {
  display: inline-block;
  margin-top: var(--s-2);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Legend ----------
   The legend sits directly under the map canvas. `--s-3` used to
   render as if the swatches were bolted to the tile grid; `--s-5`
   (2026-09) opens a clearer breath between the canvas edge and the
   first legend row so the item labels read as an index of the map
   rather than a caption baked into it. Same on the /map/ page and
   on the compact footer variant. */
.tx-map__legend {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.tx-map__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.tx-map__legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.tx-map__legend-swatch svg { width: 14px; height: 14px; }

.tx-map__legend-swatch--county {
  width: 26px;
  height: 0;
  border-top: 2px dashed var(--map-red);
}

.tx-map__legend-swatch--office { color: var(--map-pin-office); }
.tx-map__legend-swatch--office svg {
  width: 18px;
  height: 18px;
  stroke: var(--charcoal-2);
  stroke-width: 14;
  paint-order: stroke fill;
}

.tx-map__legend-swatch--key svg {
  stroke-width: 20;
  transform: rotate(var(--map-key-rotate));
}

.tx-map__legend-swatch--home,
.tx-map__legend-swatch--commercial {
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid currentColor;
}

.tx-map__legend-swatch--home { color: var(--map-pin-home); }
.tx-map__legend-swatch--commercial { color: var(--map-pin-commercial); }

/* ---------- Accessible list (full variant) ---------- */
.tx-map__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-7);
}

.tx-map__group-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 3px solid var(--accent);
}

.tx-map__count { color: var(--ink-muted); font-weight: 400; }

.tx-map__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.tx-map__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-elevated);
  border: 1px solid var(--rule-light);
  border-radius: var(--r-card);
}

.tx-map__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--map-pin-home);
  border: 2px solid currentColor;
}

.tx-map__item-icon svg { width: 16px; height: 16px; }

.tx-map__group[aria-labelledby$="-commercial"] .tx-map__item-icon { color: var(--map-pin-commercial); }

.tx-map__item--off .tx-map__item-icon { color: var(--map-pin-off); border-style: dashed; }

.tx-map__item-body { display: grid; gap: 2px; min-width: 0; }

.tx-map__item-title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tx-map__item-title:hover,
.tx-map__item-title:focus-visible { color: var(--link); text-decoration: underline; }

.tx-map__item-facts { font-size: var(--fs-small); color: var(--ink-muted); }

.tx-map__locate {
  appearance: none;
  background: transparent;
  border: 1px solid var(--charcoal-2);
  color: var(--charcoal-2);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  min-height: 40px;
  font: 600 0.8125rem/1.2 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tx-map__locate:hover { background: var(--charcoal-2); color: var(--text-on-dark); }
.tx-map__locate:focus-visible { outline: 2px solid var(--charcoal-2); outline-offset: 3px; }
.tx-map__locate[aria-pressed="true"] { background: var(--charcoal-2); color: var(--text-on-dark); }

/* View presets above the full-page canvas; only meaningful once
   Leaflet is running, so hidden until map.js flags the wrapper. */
.tx-map__tools {
  display: none;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.tx-map.is-ready .tx-map__tools { display: flex; }

.tx-map__empty { color: var(--ink-muted); margin: 0; }

/* ---------- /map/ page shell (page-map.php) ---------- */
.tx-map-page {
  background: var(--surface-page);
  padding: var(--s-6) 0 var(--section-y);
}

.tx-map-page__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tx-map-page__inner > p {
  max-width: var(--max-w-narrow);
  margin: 0 0 var(--s-5);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.tx-map-page__inner > p a { color: var(--link); }

/* "Browse rentals" row back to the three listing archives. */
.tx-map-page__archives {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.tx-map-page__archives-lead {
  /* An <h2> that only exists to keep heading order intact
     (H1 -> H2 -> footer H3). The visible cue is the button below;
     the label itself uses .screen-reader-text on the markup so any
     visual styling here would be dead code. */
  margin: 0;
}

.tx-map-page__archives-cta {
  margin: 0;
  display: flex;
  justify-content: flex-start;
}

/* Text-only stand-in printed when the properties plugin is inactive. */
.tx-map--static .tx-map__office {
  margin: 0 0 var(--s-3);
  color: var(--text);
  line-height: var(--lh-body);
}

/* ---------- Footer (dark surface) overrides ---------- */
.site-footer .tx-map__canvas { border-color: var(--rule-dark); }
.site-footer .tx-map__canvas:focus-visible,
.site-footer .tx-map .leaflet-marker-icon:focus-visible { outline-color: var(--focus-ring-dark); }
.site-footer .tx-map__legend { color: var(--on-plum-muted); }
.site-footer .tx-map__legend-swatch--home { color: #FFFFFF; background: var(--slate-blue-2); border: 1px solid rgba(255, 255, 255, 0.45); }
.site-footer .tx-map__legend-swatch--commercial { color: #E3B7CF; background: var(--slate-blue-2); border: 1px solid rgba(255, 255, 255, 0.45); }
.site-footer .tx-map__legend-swatch--county { border-top-color: #FF6B6B; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .tx-map__list { grid-template-columns: 1fr; }
  .tx-map--full .tx-map__canvas { aspect-ratio: 4 / 3; min-height: 360px; }
}

@media (max-width: 480px) {
  .tx-map__item {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .tx-map__locate { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-map__pin-glyph { transition: none; }
  .tx-map__pin:hover .tx-map__pin-glyph { transform: none; }
  .tx-map .leaflet-zoom-anim .leaflet-zoom-animated,
  .tx-map .leaflet-fade-anim .leaflet-tile,
  .tx-map .leaflet-fade-anim .leaflet-popup { transition: none !important; }
}