/* jbl booking page — "Kje se dobiva?" Slovenia region map. Loaded after
   main.css via the jbl_page_start 'styles' option on the booking pages only.
   Map palette is scoped to .reach-map (design tokens stay in main.css). */

.reach-map {
  /* anchor target of the contact-page link — clear the sticky header */
  scroll-margin-top: 6.5rem;
  --map-out: #D8D4CE;
  --map-stroke: #FFFFFF;
  --map-reach: #8A2BE0;
  --map-reach-hover: #9C4AE7;
}
@media (prefers-color-scheme: dark) {
  .reach-map {
    --map-out: #3a3546;
    --map-stroke: #14111C;
    --map-reach: #9d4ded;
    --map-reach-hover: #ad66f1;
  }
}

/* the map itself (inlined SVG, styled from here so it follows the theme) */
.reach-map .wrap { max-width: 760px; }
.map-figure { margin-top: 1.5rem; }
.si-map { display: block; width: 100%; height: auto; }
.si-region {
  fill: var(--map-out);
  stroke: var(--map-stroke);
  stroke-width: 2;
  stroke-linejoin: round;
}
.si-region.is-reach {
  fill: var(--map-reach);
  transition: fill .15s ease;
}
.si-region.is-reach:hover { fill: var(--map-reach-hover); }

/* legend */
.map-legend {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.map-legend li { display: flex; align-items: flex-start; gap: .65rem; }
.map-swatch {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-top: .2em;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.map-swatch-reach { background: var(--map-reach); border-color: transparent; }
.map-swatch-out { background: var(--map-out); }

/* caption + data attribution (quiet) */
.map-caption { color: var(--muted); font-size: .92rem; margin: 1rem 0 0; }
.map-attrib { color: var(--muted); font-size: .78rem; margin: .35rem 0 0; }