/**
 * @file
 * Leaflet map styling for the measuring point map.
 *
 * NOTE: this is hand-written CSS rather than Sass. The theme's Gulp pipeline
 * still pins node-sass 4, which no longer builds on current Node versions, so
 * regenerating css/styles.css is not possible right now. Keeping the map
 * styles in their own file avoids touching that build. Once the toolchain is
 * updated this can be folded into sass/components/content-type/_measuring-point.scss
 * and dropped from coretheme.libraries.yml.
 *
 * Reproduces the look of the former Google Maps InfoWindow (see the .gm-style-iw
 * rules in _measuring-point.scss, now dead).
 */

/* Leaflet's panes sit at z-index 400-800, which would otherwise cover the site
   header and the filter dropdowns. A stacking context keeps them contained. */
#gmaps {
  position: relative;
  z-index: 0;
  background: #f2f2f2;
}

/*
 * The basemap needs no colour correction.
 *
 * It used to: CARTO Positron painted water a desaturated grey (#d4dadc), which
 * was re-saturated here to bring it back to a Google-like blue. The MapLibre
 * style now served from our own tile server paints water #BCE1F1 directly, so
 * that filter has been removed along with the .basemap-roadmap hook it used.
 */

/* Map type switcher: two adjacent buttons, bottom left, where Google's map type
   control sat. Lifted clear of the attribution strip on the same edge. */
#gmaps .leaflet-bottom.leaflet-left {
  margin-bottom: 16px;
}

#gmaps .map-type-control {
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: #fff;
}

#gmaps .map-type-control__button {
  appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 8px 16px;
  background: #fff;
  color: #093e52;
  font-family: "Flanders Art Sans Light", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

#gmaps .map-type-control__button + .map-type-control__button {
  border-left: 1px solid #e0e6e9;
}

#gmaps .map-type-control__button:hover {
  background: #f2f6f8;
}

#gmaps .map-type-control__button.is-active {
  background: #0da2dd;
  color: #fff;
  font-weight: 700;
}

#gmaps .map-type-control__button:focus-visible {
  outline: 2px solid #093e52;
  outline-offset: -2px;
}

/* Popup: square, hard shadow, matching the old bubble. */
#gmaps .leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 0;
}

#gmaps .leaflet-popup-content {
  margin: 10px 14px;
  font-family: "Flanders Art Sans Light", arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#gmaps .leaflet-popup-content a {
  color: #093e52;
  text-decoration: none;
  display: block;
}

#gmaps .leaflet-popup-content a:hover,
#gmaps .leaflet-popup-content a:focus {
  text-decoration: underline;
}

/* Replace Leaflet's default CSS triangle with the theme's arrow image. */
#gmaps .leaflet-popup-tip-container {
  width: 11px;
  height: 6px;
  margin-left: -6px;
}

#gmaps .leaflet-popup-tip {
  display: none;
}

#gmaps .leaflet-popup-tip-container:after {
  content: '';
  display: block;
  width: 11px;
  height: 6px;
  background: transparent url(../img/bubble-arrow.png) no-repeat 0 0;
}

/* Attribution: ODbL requires the OpenStreetMap credit to stay visible. */
#gmaps .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.8);
}

#gmaps .leaflet-control-attribution a {
  color: #093e52;
}