/* eventmap.css — written to static/cms/eventmap.css on every build
   (writeEventmapAssets) and linked by partials/blocks/eventmap.html, after
   leaflet.css so it wins on equal specificity.

   Everything is scoped under .block-eventmap: Leaflet renders its panes and
   popups inside the map container, which lives inside the block, so no rule
   here can reach another theme's elements.

   Colours resolve from the --block-* custom properties block-knobs.css sets
   from data-tone. Those properties only exist when a tone is actually chosen —
   an untoned block leaves them unset — so every use carries a literal
   fallback. The popup deliberately paints an explicit background AND
   foreground together: half-inheriting a palette is how you get grey-on-grey. */

/* Leaflet stacks its own furniture high — panes up to z-index 700, the zoom
   and attribution controls at 1000 — and those numbers are written against
   whatever stacking context they land in. A theme's sticky header is typically
   an order of magnitude lower (nordic's is 40), so without this the map scrolls
   OVER the header instead of under it.

   `position: relative` + an explicit `z-index` makes the canvas its own
   stacking context: everything Leaflet does is then resolved INSIDE the map and
   the whole block participates in the page at this one z-index, which any
   positioned header beats. Removing either half of this pair silently brings
   the bug back. */
.block-eventmap .eventmap-canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.block-eventmap[data-eventmap-height="small"] .eventmap-canvas { height: 320px; }
.block-eventmap[data-eventmap-height="large"] .eventmap-canvas { height: 640px; }
@media (max-width: 640px) {
  .block-eventmap .eventmap-canvas { height: 320px; }
}
/* With no scripting there is no map to put in the container, and an empty
   panel above the list is worse than no panel. Browsers that do not know the
   `scripting` feature simply keep the reserved space, which is the old
   behaviour and still correct. */
@media (scripting: none) {
  .block-eventmap .eventmap-canvas { display: none; }
}

/* The venue list. It is what the page renders before — and without — the
   script, so it is dressed as a deliberate index of places and dates rather
   than left as a browser-default <ol>; the popups are built from this very
   markup (eventmap.js hands Leaflet each venue's innerHTML), so the same rules
   carry both renderings and the two cannot drift apart. */
.block-eventmap .eventmap-venues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-eventmap .eventmap-venue {
  padding: .7rem .85rem;
  border: 1px solid color-mix(in srgb, var(--block-fg, currentColor) 18%, transparent);
  border-radius: 2px;
}
.block-eventmap .eventmap-venue-name {
  margin: 0 0 .4rem;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}
.block-eventmap .eventmap-venue-events {
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-eventmap .eventmap-venue-events li + li { margin-top: .3rem; }
.block-eventmap .eventmap-venue-events a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.block-eventmap .eventmap-venue-events a:hover,
.block-eventmap .eventmap-venue-events a:focus-visible {
  text-decoration: underline;
}
.block-eventmap .eventmap-venue-events time {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}
.block-eventmap .eventmap-event-title { font-weight: 500; }

/* Once the map is live the list is redundant for sighted visitors, but it
   stays in the accessibility tree: the markers' popups are not reachable by a
   screen reader in reading order, and this list is. Same specificity as the
   rules above, so it has to come after them. */
.block-eventmap .eventmap-venues--replaced {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tile skins. "osm" leaves the map as OpenStreetMap draws it. "light" quiets it
   so it sits under the page's own colour instead of competing. "dark" inverts
   it for a dark section and rotates the hue back so water stays blue rather
   than turning orange. */
.block-eventmap[data-eventmap-skin="light"] .leaflet-tile {
  filter: saturate(0.45) brightness(1.03);
}
.block-eventmap[data-eventmap-skin="dark"] .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) saturate(0.5) brightness(0.92) contrast(0.95);
}

/* The pin is drawn, not loaded: an inline SVG in a divIcon, so it takes the
   theme's accent and costs no image request. currentColor is the fallback, so
   an untoned block still gets a pin in the section's own ink. */
.block-eventmap .eventmap-pin { position: relative; }
.block-eventmap .eventmap-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.block-eventmap .eventmap-pin svg path { fill: var(--block-accent, currentColor); }
.block-eventmap .eventmap-pin svg circle { fill: var(--block-bg, #fff); }
.block-eventmap .eventmap-pin-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 1.15em;
  padding: 0 .25em;
  border-radius: 1em;
  background: var(--block-bg, #fff);
  color: var(--block-accent, currentColor);
  border: 1px solid var(--block-accent, currentColor);
  font: 600 .7rem/1.5 inherit;
  text-align: center;
}

/* Popup. Its contents — the venue's name and its events — are the same
   elements as in the list, already styled above; what is left to dress is
   Leaflet's card around them. Its default is a white rounded box in system
   sans; inherit the section's typography instead, and square the corners off
   to match the rest of the block vocabulary. */
.block-eventmap .leaflet-popup.eventmap-popup .leaflet-popup-content-wrapper {
  background: var(--block-bg, #fff);
  color: var(--block-fg, #16181d);
  border-radius: 2px;
  /* A dark-tone popup sitting on the dark-filtered tiles is close enough in
     value that a plain drop shadow disappears into them — the border is what
     actually separates the card from the map underneath, in every tone. */
  border: 1px solid color-mix(in srgb, var(--block-fg, #16181d) 20%, transparent);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  font: inherit;
}
.block-eventmap .leaflet-popup.eventmap-popup .leaflet-popup-tip {
  background: var(--block-bg, #fff);
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--block-fg, #16181d) 20%, transparent);
}
.block-eventmap .leaflet-popup.eventmap-popup .leaflet-popup-content {
  margin: .75rem .9rem;
  font: inherit;
  line-height: 1.45;
}
/* Attribution is a licence requirement, not decoration — keep it legible
   rather than hiding it, but let it sit quietly. */
.block-eventmap .leaflet-control-attribution {
  background: color-mix(in srgb, var(--block-bg, #fff) 85%, transparent);
  color: var(--block-fg, #16181d);
  font-size: .68rem;
}
.block-eventmap .leaflet-control-attribution a { color: inherit; }

.block-eventmap .eventmap-empty { opacity: .7; }