/* ===================================================================
   Map surface and the Mapbox widgets that sit on it.
   Kept separate from main.css because everything here overrides markup
   the Mapbox libraries inject at runtime — it is not ours to restructure,
   only to restyle in place.
   =================================================================== */

/* -------------------------------------------------------------------
   Geocoder (the autocomplete input inside the search pill)
   ------------------------------------------------------------------- */

.mapboxgl-ctrl-geocoder {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-shadow: none;
  background: transparent;
  font-family: var(--yf-font);
}

.mapboxgl-ctrl-geocoder--input {
  height: 40px;
  padding: 0 28px 0 0;   /* room on the right for the library's clear button */
  /* This is the line that stops the text being clipped along its top edge.
     Mapbox sets `font: inherit` on the input, which drags in the 20px
     line-height from .mapboxgl-ctrl-geocoder, and its own `overflow:
     hidden` (needed for the ellipsis) then crops whatever does not fit.
     Overriding font-size alone does not help — the line-height has to go
     back to normal so the browser centres the text itself. */
  line-height: normal;
  border: 0;
  background: transparent;
  color: var(--yf-ink);
  font-family: var(--yf-font);
  font-size: 16px;
  font-weight: 400;
  text-overflow: ellipsis;
}
.mapboxgl-ctrl-geocoder--input:focus { outline: none; box-shadow: none; }
.mapboxgl-ctrl-geocoder--input::placeholder { color: #333333; opacity: 1; }

/* The library ships a magnifier inside the field; the pill has its own
   button, so hide the duplicate rather than showing two. */
.mapboxgl-ctrl-geocoder--icon-search { display: none; }

/* Its clear button stays — it appears only when there is text to clear,
   which is better than the design's always-visible cross. */
.mapboxgl-ctrl-geocoder--button {
  background: transparent;
  top: 8px;
  right: 0;
}
.mapboxgl-ctrl-geocoder--icon-close {
  fill: var(--yf-ink-soft);
  width: 20px;
  height: 20px;
  transition: fill var(--yf-ease);
}
@media (hover: hover) and (pointer: fine) {
  .mapboxgl-ctrl-geocoder--button:hover .mapboxgl-ctrl-geocoder--icon-close { fill: var(--yf-ink); }
}

.mapboxgl-ctrl-geocoder--powered-by { display: none !important; }

/* Suggestions drop over the panel below; the pill is rounded, so square
   off the top of the list and round the bottom. */
.mapboxgl-ctrl-geocoder .suggestions {
  border-radius: 0 0 var(--yf-radius-card) var(--yf-radius-card);
  box-shadow: 0 6px 18px rgba(16, 18, 19, .18);
  font-family: var(--yf-font);
  font-size: 15px;
  overflow: hidden;
}
.mapboxgl-ctrl-geocoder .suggestions > li > a {
  padding: 10px 16px;
  color: var(--yf-ink);
  transition: background-color var(--yf-ease), color var(--yf-ease);
}
.mapboxgl-ctrl-geocoder .suggestions > .active > a {
  background: var(--yf-water);
  color: var(--yf-ink);
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
    background: var(--yf-water);
    color: var(--yf-ink);
    text-decoration: none;
  }
}

/* -------------------------------------------------------------------
   Pins
   -------------------------------------------------------------------
   Markers are real DOM elements, so the number is text and inherits the
   page font. The number is written by place_mapbox_markers() from the
   rank the server sent — never recomputed on the client.

   Same fill as .store-rank on purpose: a pin and its card show the same
   number, so they must read as the same object.
   ------------------------------------------------------------------- */

.marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--yf-cyan);
  color: var(--yf-surface);
  font-family: var(--yf-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  /* letter-spacing is set to zero because tracking is added AFTER the
     last glyph. On one character that trailing space is inside the
     centred box, so any inherited tracking drags the digit left.

     The nudge variables come from main.css; the vertical one is 0 now
     that the font files carry repaired metrics (see the note there),
     the horizontal one corrects the '1' glyph's uneven side bearings. */
  letter-spacing: 0;
  padding-top: var(--yf-digit-nudge-y);
  padding-left: var(--yf-digit-nudge-x);
  cursor: pointer;
  /* Kept small and near-centred: a heavier offset shadow darkens the
     lower right of the circle and makes a centred digit look high-left. */
  box-shadow: 0 1px 3px rgba(16, 18, 19, .30);
  transition: width var(--yf-ease), height var(--yf-ease),
              font-size var(--yf-ease), background-color var(--yf-ease);
}

@media (hover: hover) and (pointer: fine) {
  .marker.hover { background: var(--yf-blue); }
}

.marker.clicked {
  width: 34px;
  height: 34px;
  font-size: 15px;
  background: var(--yf-blue-deep);
  z-index: 2;
}

/* Zoom controls */
.mapboxgl-ctrl-group { border-radius: 10px; overflow: hidden; }
.mapboxgl-ctrl-group button { transition: background-color var(--yf-ease); }
.mapboxgl-ctrl-group button:focus { box-shadow: none; }
/* Put a keyboard ring back: the box-shadow removed above IS Mapbox's own
   focus indicator, and both zoom buttons sit in the tab order. Inset offset
   because the group clips to its 10px radius, so an outside ring is cut. */
.mapboxgl-ctrl-group button:focus-visible {
  outline: 3px solid var(--yf-blue-deep);
  outline-offset: -3px;
  position: relative;
  z-index: 1;
}