/*
  Region map widget styles — flat, no-basemap "browse by location" look:
  solid region fills, white borders, a bold heading. The region link list
  under the map duplicates the map's own links for screen readers, so
  it's visually hidden (see .ebm-map-region-list). No build-step
  dependency — plain CSS. Colors:
    region fill     #3DA5E0 (hover #1B4D91)
    hub dot         #111111 fill, thin #3DA5E0 border (matches region fill)
    tooltip         #FC0 background, #111111 bold text, fully opaque
  Adjust to match whatever theme this ends up in.
*/

.ebm-map-heading {
  font-family: "quiet-sans", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #111111;
  margin: 0 0 1em;
}

/* new stacking context for the block wrapper, so the map (and its
   Leaflet tooltips/panes) don't get clipped or layered oddly by
   whatever the theme stacks around it. Also sets the font for all text
   in the widget (heading, hover tooltip, region list) via inheritance —
   see the explicit rules on .leaflet-tooltip/.ebm-map-heading below for
   the selectors that need it spelled out anyway (Leaflet tooltips can
   get themed/reset by other page CSS). */
.block-sphmap-block {
  font-family: "quiet-sans", sans-serif;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* the theme's ".nid__3 .region-post-content .block" rule (global.css)
   adds a 3.5em bottom margin to every block on that node type. Override
   via the block's own ID — its specificity beats a 3-class selector
   regardless of stylesheet load order, so this doesn't need !important */
#block-strongerpracticehubsorgukd10-browsebylocationmap {
  margin-bottom: 0;
}

#ebm-country-map {
  max-width: 1200px;
  height: 675px;
  margin: 0 auto;
  background-color: transparent;
}

/* breakpoints match the theme's scale in
   scss/01_tools/_mixins__mediaQueries.scss (984, 624) */
@media (max-width: 984px) {
  #ebm-country-map {
    height: 490px;
  }
}

@media (max-width: 624px) {
  #ebm-country-map {
    height: 490px;
  }
}

@media (max-width: 455px) {
  #ebm-country-map {
    height: 360px;
  }
}

@media (max-width: 365px) {
  #ebm-country-map {
    height: 280px;
  }
}


/* region shapes */
#ebm-country-map .leaflet-interactive {
  fill: #3DA5E0;
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-width: 2;
  transition: fill 0.15s ease;
}
#ebm-country-map .leaflet-interactive:hover {
  fill: #1B4D91;
}
#ebm-country-map.ebm-map--linked .leaflet-interactive {
  cursor: pointer;
}

/* Wales — context only, not a hub region: no hover/click (see map.js,
   which adds it with interactive: false so it never gets the
   leaflet-interactive class these rules key off). Pale tint of the
   region blue (#3DA5E0) rather than grey, so it reads as part of the
   same map instead of a masked-out area. */
#ebm-country-map .ebm-map-wales {
  fill: #BEE0F5;
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-width: 1;
}

/* hover tooltip (region name) */
#ebm-country-map .leaflet-tooltip {
  background-color: #FC0;
  color: #111111;
  border: none;
  border-radius: 2px;
  padding: 5px 15px;
  font-family: "quiet-sans", sans-serif;
  font-size: 0.925rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 1;
}
#ebm-country-map .leaflet-tooltip::before {
  display: none;
}

/* static point markers (e.g. town/venue dots) — not clickable. Border is
   semi-transparent so it doesn't read as a hard blue ring when it sits
   on the darker hover fill (#1B4D91) rather than the default region
   blue it's meant to match. */
#ebm-country-map .ebm-map-point {
  fill: #111111;
  fill-opacity: 1;
  stroke: #3DA5E0;
  stroke-width: 1;
  stroke-opacity: 0.5;
}

/* 
  map key, under the map — explains the black hub-venue dot. Dot styling
   mirrors .ebm-map-point below (same fill/border/opacity) so it reads as
   the same mark, just at a fixed CSS size rather than an SVG radius. 
  //padding: 0.5em 0.5em;   
  //padding: 0.19em 0.32em;
*/
.ebm-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  max-width: 375px;
  margin: 0;
  padding: 0.19em 0.32em 0.25em 0.32em;
  border: 1px solid #3DA5E0;
}
.ebm-map-legend__heading {
  font-size: 18px;
  color: #111111;
  margin: 0;
}
.ebm-map-legend__item {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.ebm-map-legend__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #111111;
  border: 1px solid black;
  margin-top: 2px;
}

.ebm-map-legend__label {
  font-size: 18px;
  font-weight: 400;
  color: #111111;
}

/* region link list, under the map — same region links the map shapes
   already provide, kept for screen readers only. Clipped rather than
   display:none/visibility:hidden so it stays in the accessibility tree. */
.ebm-map-region-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}