/* Area "map" (docs/V2_BUILD.md). The maps are Leaflet maps, as in the v1: their look comes from
   static/v1/style_leaflet.css, style_leaflet_responsive.css and the .pop-up rules of style.css. */

/* Maps: static/js/map.js -------------------------------------------------------------------- */
.hsm-map { position: relative; height: 420px; width: 100%; }
/* Before the dark tiles arrive (or without them): dark, not the light grey of Leaflet. */
.hsm-map.leaflet-container { background: #191A1A; }
.hsm-map__notice { position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0; z-index: 500;
  color: #BFBFBF; font: 500 14px/1.4 var(--hsm-font); }
.hsm-map:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.hsm-map .leaflet-marker-icon:focus-visible { outline: 2px solid #FFFFFF; }

/* The v1 popup buttons are <button> inside <a>: here the links themselves take the v1 look. */
.pop-up-links a.hsm-v1-popup-btn { box-sizing: border-box; text-decoration: none; margin-bottom: 14px; background-repeat: no-repeat; }
.pop-up-links a.pop-up-links-learn-more { box-sizing: border-box; }
.pop-up a { color: inherit; }
.pop-up-head h1 { color: #EEEEEE; }
.pop-up-head .logo-genre { display: inline-block; margin-bottom: 2px; }
.pop-up-head .hsm-popup__sponsored { color: #BFBFBF; }
.pop-up--place { height: auto; overflow: visible; padding-bottom: 14px; }
.pop-up--place .pop-up-head { border-bottom: 0; padding-bottom: 0; }
.hsm-popup__more { display: inline-block; margin-top: 12px; }

/* Home and lists ------------------------------------------------------------------------ */
.hsm-results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.hsm-results__head .hsm-overline, .hsm-results__count { margin: 8px 0 0; }
.hsm-results__empty { padding: 32px 0; margin: 0; }
.hsm-sponsored { display: block; margin-bottom: 8px; color: #BFBFBF; }
.hsm-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; }
.hsm-pager__links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* City autocomplete (static/js/map-search.js), in the look of the v1 jQuery UI list ------------- */
.hsm-suggest { position: relative; display: block; }
.hsm-suggest__list {
  position: absolute; z-index: 1100; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none; background: #2B2B2B; color: #BFBFBF; border: 1px solid #c5c5c5;
}
.hsm-suggest__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 3px 1em 3px .4em; border: 1px solid transparent; cursor: pointer;
  font: 500 16px/1.4 "roc-grotesk", sans-serif;
}
.hsm-suggest__item .hsm-overline { color: inherit; opacity: .7; font-size: 11px; }
.hsm-suggest__item:hover, .hsm-suggest__item[aria-selected="true"] { border-color: #003eff; background: #007fff; color: #FFFFFF; }