/* /community-pagina: NL-kaart + cadans-tijdlijn. */

/* ── NL-kaart ─────────────────────────────────────────── */
.community-map {
  margin: var(--space-xl) 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-xl);
  text-align: center;
}
.community-map h2 {
  margin: 0 0 var(--space-sm);
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}
.community-map .map-caption {
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.nl-map {
  width: 100%;
  max-width: 460px;
  height: auto;
}
.nl-map .land {
  /* Variant D: NL gevuld met palet-groen, navy stroke voor definitie. */
  fill: var(--color-magenta);
  stroke: var(--color-primary-dark);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.nl-map .dot {
  /* Dark marine (#1a2570) — sterk contrast op de groene NL-fill. */
  fill: var(--color-primary);
  stroke: white;
  stroke-width: 2.5;
  transition: fill 0.15s, r 0.15s;
}
/* Hover-state: was magenta — nu zou groen-op-groen onzichtbaar zijn.
   Wit geeft scherp contrast op de groene NL-fill. */
.nl-map .dot-grp:hover .dot,
.nl-map .dot:hover { fill: white; }

/* Hover-label boven de dot — instant zichtbaar (geen native title-delay).
   stroke + paint-order geeft witte halo zodat tekst leesbaar blijft op
   het land en over andere dots heen. pointer-events: none zodat het label
   geen eigen hover/focus-bubbeling triggert. */
.nl-map .dot-label {
  /* SVG user-space-units (viewBox 1000x1000 op ~460px = 0.46 schaal).
     30 user-units rendert visueel als ~14 CSS-pixels. */
  font-size: 30px;
  font-weight: 700;
  fill: var(--color-primary-dark);
  paint-order: stroke;
  stroke: white;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
  visibility: hidden;
}
.nl-map .dot-grp:hover .dot-label,
.nl-map .dot-grp:focus-within .dot-label,
.nl-map .dot:hover ~ .dot-label,
.nl-map .dot:focus ~ .dot-label {
  visibility: visible;
}

/* Achtergrond-kader van het label — wordt door nl-map.js dynamisch gesized
   op basis van de tekst-bbox. Dezelfde hover-toggle als .dot-label. */
.nl-map .dot-label-bg {
  fill: white;
  stroke: rgba(26, 37, 112, 0.25);
  stroke-width: 1.2;
  visibility: hidden;
  pointer-events: none;
}
.nl-map .dot-grp:hover .dot-label-bg,
.nl-map .dot-grp:focus-within .dot-label-bg {
  visibility: visible;
}

/* ── Cadans-tijdlijn ─────────────────────────────────── */
.community-cadans { margin: calc(var(--space-xl) * 1.5) 0 var(--space-xl); }
.community-cadans > h2 {
  margin: 0 0 var(--space-md);
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}
.cadans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.cadans-card {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-lg);
  border-top: 4px solid var(--color-primary);
}
.cadans-card .freq {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 800;
}
.cadans-card .who {
  margin: 4px 0 var(--space-sm);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text);
}
.cadans-card .what {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .cadans-grid { grid-template-columns: 1fr; }
}