/* Sol: styled street map (sol/map block, assets/js/sol-map.js).
   Before the map loads, and wherever JavaScript or WebGL is unavailable, the address card shows on its own. */
.sol-map__canvas { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: var(--sol-space-24); background: #E7E8EC; }
.sol-map { position: relative; }
.sol-map > .sol-map__canvas, .sol-map__frame > .sol-map__canvas { position: absolute; inset: 0; }
.sol-map__canvas > .sol-map__gl { position: absolute; inset: 0; width: 100%; height: 100%; place-self: stretch; } /* beats maplibre-gl.css position: relative */
.sol-map__canvas.is-live > .sol-map__card { display: none; }

/* address card: the fallback and the pin's popup share it */
.sol-map__card { max-width: 300px; padding: 20px 22px; border-radius: 12px; background: var(--sol-white); box-shadow: 0 12px 32px rgb(15 58 64 / 0.16); font-family: var(--sol-font-body); text-align: left; }
.sol-map__card > * { margin: 0; }
.sol-map__name { padding-right: 24px; font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--sol-ink); }
.sol-map__addr { margin-top: 4px; font-size: 0.8125rem; line-height: 1.45; }
.sol-map__addr a { color: var(--sol-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sol-map__addr a:hover { color: var(--sol-brand-teal); }
.sol-map__go { margin-top: 14px; }
.sol-map__btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--sol-hairline);
  border-radius: 6px; background: var(--sol-white); font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: var(--sol-ink); text-decoration: none;
}
.sol-map__btn:hover { border-color: var(--sol-brand-teal); color: var(--sol-deep-teal); }
.sol-map__card a:focus-visible, .sol-map__pin:focus-visible { outline: 3px solid var(--sol-brand-teal); outline-offset: 2px; border-radius: 4px; }

/* popup chrome around the card */
.sol-map__popup .maplibregl-popup-content { padding: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.sol-map__popup .sol-map__card.is-popup { box-shadow: 0 12px 32px rgb(15 58 64 / 0.18); }
.sol-map__popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--sol-white); }
.sol-map__popup .maplibregl-popup-close-button {
  top: 12px; right: 12px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  font-size: 22px; line-height: 26px; color: var(--sol-ink); background: transparent;
}
.sol-map__popup .maplibregl-popup-close-button:hover { background: var(--sol-sand); }

/* the pin: brand teal, name beside it */
.sol-map__pin { position: relative; display: block; width: 28px; height: 36px; padding: 0; border: 0; background: none; color: var(--sol-brand-teal); cursor: pointer; filter: drop-shadow(0 2px 3px rgb(15 58 64 / 0.3)); }
.sol-map__pin svg { display: block; }
.sol-map__pin-label {
  position: absolute; left: 34px; top: 9px; white-space: nowrap; font-family: var(--sol-font-body); font-size: 0.8125rem; font-weight: 800;
  color: var(--sol-brand-teal); text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff;
}

/* map controls in the site style */
.sol-map__gl .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 4px 14px rgb(15 58 64 / 0.14); overflow: hidden; }
.sol-map__gl .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.sol-map__gl .maplibregl-ctrl-attrib { font-size: 10px; }
.sol-map__gl .maplibregl-cooperative-gesture-screen { font-family: var(--sol-font-body); background: rgb(15 58 64 / 0.72); }

@media (max-width: 760px) {
  .sol-map__frame { min-height: 360px; }
  .sol-map__card { max-width: 240px; padding: 16px 18px; }
  .sol-map__name { font-size: 1rem; }
  .sol-map__pin-label { font-size: 0.75rem; }
}