/* ------------------------------------------------------------------ *
 * Weber Supply locations map
 *
 * Sits in the hero of the locations page where the 500px snazzymaps iframe
 * used to be. maplibre-gl.css handles the controls; this file handles our
 * container, the branch markers and the card highlight.
 * ------------------------------------------------------------------ */

.wb-map {
  position: relative;
  width: 100%;
  height: 500px;
  background: #333333;   /* same as the basemap land, so nothing flashes while tiles load */
  overflow: hidden;
  /* Own stacking context: marker z-indexes (used for north-to-south stacking)
     must never compete with the sticky site header (z-index 2000). */
  isolation: isolate;
  z-index: 0;
}

.wb-map .maplibregl-canvas { outline: none; }

/* Branch markers - the Weber leaf badge, 54x62, tip on the coordinate. */
.wb-marker {
  display: block;
  line-height: 0;
  cursor: pointer;
}

.wb-marker img {
  display: block;
  width: 54px;
  height: 62px;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transition: transform .15s ease-out;
}

.wb-marker:hover img,
.wb-marker:focus-visible img { transform: translateY(-3px); }

.wb-marker:focus { outline: none; }
.wb-marker:focus-visible img { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 4px; }

/* Attribution and controls on a dark map. */
.wb-map .maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
}

/* Shown only when the map cannot run (no JS module support, no WebGL, file missing). */
.wb-map__fallback {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #d4d4d4;
  font-size: 15px;
}

/* ---- the branch card a marker just jumped to ---- */

.wb-branch-card {
  scroll-margin-top: 96px;   /* clears the sticky site header */
  transition: box-shadow .25s, border-color .25s;
}

.wb-branch-card.is-highlighted {
  border-color: #c62d3f;
  box-shadow: 0 0 0 3px rgba(198, 45, 63, .22);
}

@media (prefers-reduced-motion: reduce) {
  .wb-marker img, .wb-branch-card { transition: none; }
}