/* maps.css — scoped overrides for atlas/map regions. */
.country-parks-map, .europe-countries-map__canvas, .map-figure {
  --color-accent: var(--color-accent-map);
}

/* ---------- Europe selector ---------- */
.europe-countries-map { text-align: center; }
.europe-countries-map h1 { margin-bottom: var(--space-2); }
.europe-countries-map .lede { color: var(--color-muted); margin-bottom: var(--space-5); }
.europe-countries-map__canvas {
  display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto;
  font-family: var(--font-sans);
}
.europe-countries-map__canvas .country { fill: var(--color-subtle); stroke: var(--color-rule); stroke-width: 0.6; pointer-events: none; }
.europe-countries-map__canvas .country--interactive { pointer-events: auto; cursor: pointer; }
.europe-countries-map__canvas .country--interactive path { fill: var(--color-subtle); stroke: var(--color-rule); stroke-width: 0.6; transition: fill var(--duration-hover) var(--ease-out), transform var(--duration-hover) var(--ease-out); }
.europe-countries-map__canvas .country--interactive:hover path,
.europe-countries-map__canvas .country--interactive:focus path { fill: var(--color-accent); transform: translateY(-3px); filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)); }
.europe-countries-map__canvas a { outline: none; }

/* ---------- Country atlas plate ---------- */
.country-atlas {
  display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-5); align-items: start;
}
@media (max-width: 900px) { .country-atlas { grid-template-columns: 1fr; } }
.country-atlas__map svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.country-parks-map .frame { stroke: var(--color-rule); stroke-width: 1; }
.country-parks-map .coastline { fill: var(--color-subtle); stroke: var(--color-rule); stroke-width: 0.8; }
.country-parks-map .archipelago { fill: var(--color-subtle); stroke: var(--color-rule); stroke-width: 0.4; opacity: 0.7; }
.country-parks-map .lakes { fill: var(--color-water); stroke: var(--color-water-stroke); stroke-width: 0.3; opacity: 0.5; }
.country-parks-map .graticule path { fill: none; stroke: var(--color-rule); stroke-width: 0.4; opacity: 0.45; }
.country-parks-map .park-polygon { fill: var(--color-accent); fill-opacity: 0; stroke: var(--color-accent); stroke-width: 1.4; transition: fill-opacity var(--duration-hover) var(--ease-out), stroke-width var(--duration-hover) var(--ease-out); }
.country-parks-map .park-dot { fill: var(--color-accent); opacity: 0.5; transition: opacity var(--duration-hover) var(--ease-out); }
.country-parks-map .park-leader { stroke: var(--color-accent); stroke-width: 0.8; opacity: 0; transition: opacity var(--duration-hover) var(--ease-out); }
.country-parks-map .park-label { fill: var(--color-accent); font-size: 13px; letter-spacing: 0.08em; opacity: 0; pointer-events: none; transition: opacity var(--duration-hover) var(--ease-out); }
.country-parks-map a.park:hover .park-polygon,
.country-parks-map a.park:focus .park-polygon,
.country-parks-map a.park.is-highlighted .park-polygon { fill-opacity: 0.22; stroke-width: 1.8; }
.country-parks-map a.park:hover .park-leader,
.country-parks-map a.park:focus .park-leader,
.country-parks-map a.park.is-highlighted .park-leader,
.country-parks-map a.park:hover .park-label,
.country-parks-map a.park:focus .park-label,
.country-parks-map a.park.is-highlighted .park-label { opacity: 1; }
.country-parks-map .inset-frame { stroke: var(--color-rule); stroke-width: 1; }
.country-parks-map .inset-label { fill: var(--color-muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.country-parks-map .inset-graticule path { opacity: 0.35; }
.country-parks-map .compass circle { stroke: var(--color-rule); stroke-width: 0.6; }
.country-parks-map .compass path { fill: var(--color-ink); }
.country-parks-map .compass text { fill: var(--color-muted); font-size: 11px; letter-spacing: 0.1em; }
.country-parks-map .scalebar line { stroke: var(--color-ink); stroke-width: 1; }
.country-parks-map .scalebar text { fill: var(--color-muted); font-size: 10px; letter-spacing: 0.08em; }

/* ---------- Country park list ---------- */
.park-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.park-list a { color: var(--color-ink); text-decoration: none; }
.park-list a:hover, .park-list li.is-highlighted a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Park detail ---------- */

.map-figure {
  position: relative;
  margin: var(--space-5) 0;
  border: 1px solid var(--color-rule);
  background: var(--color-subtle);
}
#park-map { width: 100%; height: clamp(280px, 60vh, 560px); }
.map-figure[data-map-failed="true"] #park-map { display: none; }
.map-figure[data-map-failed="true"] .map-fallback { display: block; }
.map-fallback { display: none; width: 100%; }
.map-fallback img { width: 100%; height: auto; display: block; }
.map-attribution {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--color-muted);
  text-align: right;
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-rule);
}
.map-attribution a { color: inherit; }