/* OnzeUitjes radarkaart — hoort bij onzeuitjes-radarkaart.js. Kleuren als tokens; de site is altijd licht.
   1.2.2: themakleuren afgestemd op de themaslugs van de site (t-<slug> uit THEMES). */
:root {
  --rm-sea: #DCEFF6; --rm-land: #FCFDF8; --rm-coast: #B7D5CB; --rm-ring: #F3B9A8;
  --rm-beam: #FCAD06; --rm-label: #5E7178; --rm-home: #D63E1A; --rm-ink: #002D40;
  --rm-dot: #01837F; --rm-unknown: #6FB7B0; --rm-line: #E3E8EA; --rm-btn: #FFFFFF; --rm-btn-hover: #F3F6F7;
}
.rmap-host { width: 100%; }
.rm-frame { position: relative; max-width: 460px; margin-inline: auto; border: 1px solid var(--rm-line); border-radius: 14px; overflow: hidden; }
.rmap { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1; touch-action: none; cursor: grab; }
.rmap.is-dragging { cursor: grabbing; }
.rm-sea { fill: var(--rm-sea); }
.rm-land { fill: var(--rm-land); stroke: var(--rm-coast); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rm-water { fill: var(--rm-sea); stroke: var(--rm-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rm-ring { fill: none; stroke: var(--rm-ring); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.rm-ring.rm-range { stroke-width: 2; stroke-dasharray: 6 4; }
.rm-rl { fill: var(--rm-home); font-weight: 700; }
.rm-cl { fill: var(--rm-label); font-weight: 600; }
.rm-cdot { fill: var(--rm-label); }
.rm-beam { fill: var(--rm-beam); opacity: .26; }
.rm-home { fill: var(--rm-home); stroke: #FFFFFF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rm-hl { fill: var(--rm-ink); font-weight: 800; paint-order: stroke; stroke: var(--rm-land); stroke-width: 3; vector-effect: non-scaling-stroke; }
.rm-hit { fill: transparent; }
.rm-pt { fill: var(--rm-dot); stroke: #FFFFFF; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.rm-dot.is-out { opacity: .22; }
.rm-dot.is-hot .rm-pt { stroke: var(--rm-ink); stroke-width: 2.4; }
.rm-dot:focus-visible { outline: none; }
.rm-dot:focus-visible .rm-pt { stroke: var(--rm-ink); stroke-width: 3; }
a.rm-dot { cursor: pointer; }
/* Themakleuren van de stippen (klasse t-<themaslug>) */
.rm-dot.t-cultuur-erfgoed .rm-pt { fill: #7A4FB0; }
.rm-dot.t-pretparken-attracties .rm-pt { fill: #FC542D; }
.rm-dot.t-dieren-natuur .rm-pt { fill: #39953E; }
.rm-dot.t-water .rm-pt { fill: #1F7FC0; }
.rm-dot.t-workshops-proeverijen .rm-pt { fill: #D63E1A; }
.rm-dot.t-actief-avontuur .rm-pt { fill: #2B6E2F; }
.rm-dot.t-spellen-games .rm-pt { fill: #C77700; }
.rm-dot.t-spelen-met-kinderen .rm-pt { fill: #E0A000; }
.rm-dot.t-shows-entertainment .rm-pt { fill: #6E8794; }
.rm-dot.t-tours-rondvaarten .rm-pt { fill: #4FB3AE; }
/* Na de themakleuren, zodat "onbekend" altijd een open rondje is. */
.rm-dot.is-maybe .rm-pt { fill: #FFFFFF; stroke: var(--rm-unknown); stroke-width: 1.6; }
.rm-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.rm-zoom button { width: 32px; height: 32px; border: 1px solid var(--rm-line); border-radius: 8px; background: var(--rm-btn); color: var(--rm-ink); font: inherit; font-weight: 800; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 45, 64, .12); }
.rm-zoom button:hover { background: var(--rm-btn-hover); }
.rm-zoom button:focus-visible { outline: 2px solid var(--rm-ink); outline-offset: 2px; }
.rm-label { position: absolute; left: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(252, 253, 248, .85); color: var(--rm-label); font-size: 10.5px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rm-sweep { display: none; } }
/* 1.4: clusters (bolletje met een getal; klik, Enter of spatie zoomt in) */
:root { --rm-cluster: #003F58; }
.rm-cluster { cursor: pointer; }
.rm-cl-hit { fill: transparent; }
.rm-cl-bol { fill: var(--rm-cluster); fill-opacity: .88; stroke: #FFFFFF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rm-cl-n { fill: #FFFFFF; font-weight: 800; pointer-events: none; }
.rm-cluster:hover .rm-cl-bol { fill-opacity: 1; }
.rm-cluster:focus { outline: none; }
.rm-cluster:focus-visible .rm-cl-bol { stroke: #FCAD06; stroke-width: 3.5; }