/* ==========================================================================
   cms.css — opmaak voor vrij invulbare CMS-blokken (.cms)
   Laden NA style.css. Gebruikt --color-link uit style.css (met fallback).
   ========================================================================== */

.cms {
  color: var(--color-muted);
}
.cms > :last-child { margin-bottom: 0; }
.cms p { margin-bottom: 1rem; }
.cms h1,
.cms h2,
.cms h3 { color: var(--color-text); }
.cms h2,
.cms h3 { margin-top: 1.75rem; }
.cms a:not(.button) {
  color: var(--color-link, var(--color-primary));
  text-underline-offset: .2em;
}

/* Lijsten — accentkleur op de marker, geen aparte class nodig */
.cms ul,
.cms ol { padding-left: 1.2rem; }
.cms li { margin-bottom: .5rem; }
.cms li:last-child { margin-bottom: 0; }
.cms ul { list-style: disc; }
.cms ol { list-style: decimal; }
.cms ul > li::marker,
.cms ol > li::marker {
  color: var(--color-accent);
  font-weight: 700;
}
.cms ul ul,
.cms ol ol,
.cms ul ol,
.cms ol ul { margin-top: .5rem; }

/* Knoppen los in de tekst (vervangt de vaste .button-row wrapper-div) */
.cms .button { margin-top: .5rem; }
.cms .button + .button { margin-left: .75rem; }

/* Sectie-specifieke breedte/grootte, zelfde principe als de oude .hero-copy */
.hero-content .cms {
  max-width: 37rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

/* --------------------------------------------------------------------------
   Donkere secties (.section-dark, .trust, .subhero)
   Geldt in licht én donker thema: de achtergrond is daar altijd donker.
   Voorheen kregen koppen var(--color-text) = donker op donker (licht thema)
   en links var(--color-primary) = zelfde kleur als de achtergrond.
   -------------------------------------------------------------------------- */
.section-dark .cms,
.trust .cms { color: rgba(255, 255, 255, .72); }
.subhero .cms { color: rgba(255, 255, 255, .82); }

.section-dark .cms h1,
.section-dark .cms h2,
.section-dark .cms h3,
.trust .cms h1,
.trust .cms h2,
.trust .cms h3,
.subhero .cms h1,
.subhero .cms h2,
.subhero .cms h3 { color: var(--color-white); }

.section-dark .cms a:not(.button),
.trust .cms a:not(.button),
.subhero .cms a:not(.button) { color: #cbb08b; }

.section-dark .cms .button-ghost,
.trust .cms .button-ghost {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.section-dark .cms .button-ghost:hover,
.trust .cms .button-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

/* --------------------------------------------------------------------------
   CTA-blok (beige achtergrond) — zelfde kleuren als .cta-actions .rich-text
   -------------------------------------------------------------------------- */
.cta .cms { color: rgba(23, 63, 59, .72); }
.cta .cms h1,
.cta .cms h2,
.cta .cms h3 { color: var(--color-primary); }

@media (prefers-color-scheme: dark) {
  .cta .cms { color: rgba(255, 255, 255, .72); }
  .cta .cms h1,
  .cta .cms h2,
  .cta .cms h3 { color: #fff; }
}