/* Alleen geladen voor de CMS-pagina care-for-women, na de Carin-basisstijl. */
.care-for-women-page {
  --cfw-purple: #3e2942;
  --cfw-purple-hover: #59405f;
  --cfw-lavender: #ceb7d4;
  --cfw-pink: #edb1cf;
  --cfw-line: #d7cacd;
  --cfw-warm: #fcfaf8;
  --cfw-soft: #f5eff6;
  --cfw-white: #ffffff;
  --cfw-font: 'Open Sans', sans-serif;

  --kleurachtergrond-ook-editor: var(--cfw-warm);
  --kleurtekst: #524e4e;
  --kleur-tekst-strong: var(--cfw-purple);
  --kleur-quoot: var(--cfw-soft);
  --h1: var(--cfw-purple);
  --h2: var(--cfw-purple);
  --h3: var(--cfw-purple);
  --h4: var(--cfw-purple);
  --h5: var(--cfw-purple);
  --h6: var(--cfw-purple);
  --sectie-een: var(--cfw-soft);
  --sectie-twee: var(--cfw-warm);
  --sectie-drie: #f9f0f4;
  --sectiekleurtekst: var(--kleurtekst);
  --sectiedrie-kleur: var(--kleurtekst);
  --achtergrondkleur: var(--cfw-soft);
  --quootes-achtergrondkleur: var(--cfw-soft);

  --cta-kleur-body: var(--cfw-purple);
  --cta-kleur-body-hover: var(--cfw-purple-hover);
  --cta-kleur-rand: var(--cfw-purple);
  --cta-kleur-rand-hover: var(--cfw-purple-hover);
  --cta-kleur-tekst: var(--cfw-white);
  --cta-kleur-tekst-hover: var(--cfw-white);
  --cta-border-radius: 24px;
  --contactform-knop-kleur: var(--cfw-purple);

  --topbalk-achtergrondkleur: var(--cfw-warm);
  --topbalk-kleur-tekst: var(--cfw-purple);
  --menubalk: var(--cfw-warm);
  --menuknop: var(--cfw-purple);
  --menuitem-kleur: var(--cfw-purple);
  --menuitem-kleur-hover: var(--cfw-purple-hover);
  --menuitem-kleur-acief: var(--cfw-purple);
  --menuknop-laatste: var(--cfw-purple);
  --menuknop-laatste-hover: var(--cfw-purple-hover);
  --menuknop-tekst-laatste: var(--cfw-white);
  --menuknop-tekst-laatste-hover: var(--cfw-white);
  --menu-mobiel-achtergrond: var(--cfw-soft);
  --menu-mobiel-hover-back: var(--cfw-lavender);
  --burger-knop-kleur: var(--cfw-purple);
  --burger-knop-kleur-tekst: var(--cfw-white);
  --progress-kleur-leeg: var(--cfw-line);
  --progress-kleur-vol: var(--cfw-purple);

  --footer-achtergrondkleur: var(--cfw-soft);
  --kleur-tekst-voet: var(--kleurtekst);
  --kleur-tekst-voet-hover: var(--cfw-purple);
  --kleur-opsomming-voet: var(--cfw-purple);
  --kleur-tekst-kop-voet: var(--cfw-purple);
  --copyright-achtergrond: var(--cfw-warm);
  --copyright-tekst: var(--kleurtekst);
}

/* Schreefloze koppen; Isidora is niet beschikbaar in de lokale fontbestanden. */
.care-for-women-page :is(h1, h2, h3, h4, h5, h6),
.care-for-women-page #captiontext h1,
.care-for-women-page .rijtegel > .kolom160 :is(h2, h3) {
  font-family: var(--cfw-font);
  font-weight: 600;
  color: var(--cfw-purple);
}

.care-for-women-page .logo {
  width: 245px;
  margin-top: 24px;
  object-fit: contain;
}

.care-for-women-page .menubalk2 {
  box-shadow: 0 1px 8px rgb(62 41 66 / 8%);
}

.care-for-women-page #captionone {
  background: none;
}

.care-for-women-page #captiontext {
  background: rgb(252 250 248 / 94%);
  border-radius: 20px;
  color: var(--kleurtekst);
}

.care-for-women-page #captiontext h1 span {
  color: var(--cfw-purple-hover);
}

.care-for-women-page #captiontext strong {
  color: inherit;
}

.care-for-women-page #captiontext a.cta:hover,
.care-for-women-page :is(a.cta, a.leesverder, a.leesverderblog, a.ctahome, button):hover {
  color: var(--cta-kleur-tekst-hover);
  background: var(--cta-kleur-body-hover);
  border-color: var(--cta-kleur-rand-hover);
}

.care-for-women-page a:focus-visible,
.care-for-women-page button:focus-visible {
  outline: 3px solid var(--cfw-purple);
  outline-offset: 4px;
}

.care-for-women-page #maincontent a:not([class]):hover {
  color: var(--cfw-purple);
  text-decoration: underline;
}

.care-for-women-page :is(.bannervoet, #inhoud-center) {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

/* Dezelfde kolomindeling voor tekst en beeld; kleur verzorgt de kaarten. */
.care-for-women-page .rijtegel {
  gap: 24px;
  margin-top: 0;
  margin-bottom: 24px;
  align-items: stretch;
}

/* Kleur op de rij voegt geen extra inspringing rond de kaarten toe. */
.care-for-women-page .rijtegel.kleur {
  padding: 0;
}

.care-for-women-page .rijtegel > .kolom160 {
  padding: 0;
  margin: 0;
  border: 0;
}

.care-for-women-page #inhoud-center .kolom160.kleur,
.care-for-women-page .bannervoet .kolom160.kleur:not(:only-child) {
  padding: 28px 24px;
  border: 1px solid var(--cfw-line);
  border-radius: 18px;
  background: var(--cfw-white);
  overflow-wrap: anywhere;
}

.care-for-women-page #inhoud-center .kolom160.kleur:only-child {
  background: var(--achtergrondkleur);
  border-color: transparent;
}

.care-for-women-page .rijtegel > .kolom160 p {
  margin: 0 0 12px;
}

.care-for-women-page .rijtegel > .kolom160 > :last-child {
  margin-bottom: 0;
}

.care-for-women-page .kolom160 img + h3 {
  margin-top: 12px;
}

.care-for-women-page .rijtegel > .kolom160.kleur h3 strong {
  font-weight: inherit;
}

.care-for-women-page :is(.quoot, .quoot2, article) {
  border-color: var(--cfw-line);
}

.care-for-women-page .cta-container::before {
  background-color: var(--cfw-line);
}

.care-for-women-page :is(svg.icon, svg.icon-form) {
  color: var(--cfw-purple);
}

.care-for-women-page #footer {
  background-color: var(--footer-achtergrondkleur);
  background-image: none;
  border-top: 1px solid var(--cfw-line);
}

.care-for-women-page #topbutton {
  background: var(--cfw-purple);
}

@media screen and (min-width: 966px) {
  .care-for-women-page #sliderposition {
    padding-top: 0;
    height: clamp(660px, 48vw, 800px);
  }
}

@media screen and (max-width: 965px) {
  .care-for-women-page #top {
    display: block;
    width: min(210px, calc(100vw - 140px));
    margin-left: 24px;
    padding-top: 0;
  }

  .care-for-women-page .logomob {
    width: 100%;
    margin: 12px 0 10px;
    object-fit: contain;
  }

  .care-for-women-page #mijnmenu {
    float: none;
  }

  .care-for-women-page .menu {
    background: var(--menu-mobiel-achtergrond);
  }

  .care-for-women-page .menu a {
    color: var(--cfw-purple);
    border-bottom-color: var(--cfw-line);
  }

  .care-for-women-page .menu a:hover,
  .care-for-women-page .menu a.laatste:hover {
    color: var(--cfw-purple);
    background: var(--menu-mobiel-hover-back);
  }

  .care-for-women-page .menu a.burger,
  .care-for-women-page .menu a.burger:hover {
    color: var(--burger-knop-kleur-tekst);
    background: var(--burger-knop-kleur);
  }

  /* Foto en caption blijven gescheiden; hoogte volgt de bestaande documentflow. */
  .care-for-women-page #captiontext {
    border-radius: 0;
    background: var(--sectie-een);
  }

  .care-for-women-page #maincontent :is(a.cta, a.cta2) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-right: 0;
  }
}