/*
Theme Name: Mentaplus
Theme URI: https://mentaplus.nl
Author: Mentaplus
Description: Thema voor mentaplus.nl, omgezet vanuit het statische ontwerp (homepage-zacht + subpagina's).
Version: 1.0
Text Domain: mentaplus
*/

/* ============================================================
   MENTAPLUS — GEDEELD STYLESHEET · ZACHT & MENSELIJK
   Gebruikt door alle subpagina's (de homepage is self-contained).
   Brandbook: Urbanist (koppen, −2% spacing) · Sora (tekst, lh 1.6+)
   Palet: POEDER #FDF2F7 · PETAL #FFC8DD · BABY PINK #FFAFCC
          SKY #A2D2FF · ICY #BDE0FE · THISTLE #CDB4DB · INKT #3D2E4F
   INKT alleen voor tekst & merkteken, nooit als groot vlak.
   ============================================================ */
:root {
  --poeder: #FDF2F7;
  --petal: #FFC8DD;
  --pink: #FFAFCC;
  --sky: #A2D2FF;
  --icy: #BDE0FE;
  --thistle: #CDB4DB;
  --inkt: #3D2E4F;
  --inkt-60: rgba(61, 46, 79, .72);
  --inkt-45: rgba(61, 46, 79, .75);
  --wit: #FFFFFF;
  --radius-l: 28px;
  --radius-m: 18px;
  --maxw: 1120px;
  --head: 'Urbanist', sans-serif;
  --body: 'Sora', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--poeder); color: var(--inkt);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--head); letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Fotoplekken */
.photo {
  background: var(--icy); border-radius: var(--radius-l);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 12px, transparent 12px 24px);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .lbl {
  font: 400 12px/1.5 var(--body); color: var(--inkt-60);
  background: rgba(255,255,255,.75); padding: 6px 14px; border-radius: 999px;
}

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font: 700 15px/1 var(--head); letter-spacing: -0.02em;
  padding: 16px 28px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink); color: var(--inkt); box-shadow: 0 6px 18px -8px rgba(255,175,204,.9); }
.btn-secondary { background: transparent; color: var(--inkt); border: 1.5px solid var(--inkt); }
.btn-ink { background: var(--inkt); color: var(--poeder); }
.btn-soft { background: var(--wit); color: var(--inkt); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,242,247,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(61,46,79,.08);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font: 800 21px/1 var(--head); letter-spacing: -0.02em; color: var(--inkt); }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links > a:not(.btn), .nav-drop {
  font: 600 14.5px/1 var(--body); color: var(--inkt); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 11px 15px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav-links > a:not(.btn):hover, .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { background: rgba(255,255,255,.9); }
.nav-links .btn { margin-left: 12px; padding: 12px 22px; font-size: 14px; }
.nav-drop .chev { display: grid; place-items: center; color: var(--inkt-45); transition: transform .2s ease; }
.nav-item { position: relative; }
.nav-item:hover .nav-drop .chev, .nav-item:focus-within .nav-drop .chev { transform: rotate(180deg); }

/* Submenu — ronde witte kaart */
.submenu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 6px);
  background: var(--wit); border-radius: 26px; padding: 24px 26px;
  box-shadow: 0 24px 60px -24px rgba(61,46,79,.35), 0 2px 10px -4px rgba(61,46,79,.12);
  display: flex; gap: 34px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
}
.submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.sub-col { display: flex; flex-direction: column; gap: 2px; min-width: 216px; }
.sub-head {
  font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--inkt-45); padding: 4px 10px 12px;
}
.sub-col a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font: 600 14px/1.3 var(--body); color: var(--inkt);
  padding: 8px 10px; border-radius: 14px; white-space: nowrap;
}
.sub-col a:hover { background: var(--poeder); }
.sub-ic {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  font: 800 17px/1 var(--head); color: var(--inkt);
}
.sub-more { font-size: 13.5px; color: var(--inkt-60); margin-top: 4px; }
.sub-more:hover { color: var(--inkt); }

/* Hamburger */
.hamburger {
  display: none; margin-left: auto; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px; padding: 10px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.hamburger span { display: block; height: 2.5px; border-radius: 2px; background: var(--inkt); }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ---------- Mobiel menu (fullscreen) ---------- */
.mmenu {
  position: fixed; inset: 0; z-index: 100; background: var(--poeder);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mmenu.open { opacity: 1; visibility: visible; transform: none; }
.mmenu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid rgba(61,46,79,.1);
}
.mmenu-close {
  background: none; border: none; cursor: pointer; padding: 10px;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
}
.mmenu-list { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; }
.mmenu-list > a, .mmenu-acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 800 27px/1.2 var(--head); letter-spacing: -0.02em; color: var(--inkt);
  text-decoration: none; padding: 19px 0; cursor: pointer; list-style: none;
}
.mmenu-acc summary::-webkit-details-marker { display: none; }
.mmenu-list .chev { color: var(--inkt-45); flex: none; display: grid; place-items: center; transition: transform .2s ease; }
.mmenu-acc[open] summary .chev { transform: rotate(180deg); }
.mmenu-sub { display: flex; flex-direction: column; padding: 2px 0 16px; }
.mmenu-sub a {
  font: 600 17px/1.4 var(--body); color: var(--inkt-60); text-decoration: none;
  padding: 10px 0 10px 4px; display: flex; align-items: center; gap: 13px;
}
.mmenu-sub .sub-ic { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.mmenu-ctas {
  padding: 18px 24px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(61,46,79,.1);
  display: flex; flex-direction: column; gap: 10px;
}
.mmenu-ctas .btn { width: 100%; padding: 18px 28px; font-size: 16px; }
@media (min-width: 901px) { .mmenu { display: none; } }
body.menu-open { overflow: hidden; }

/* ---------- Pagina-hero (subpagina's) ---------- */
.page-hero { padding: 64px 0 40px; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; line-height: 1.08; text-wrap: balance; }
.page-hero h1 .plus { color: var(--pink); }
.page-hero .sub { font-size: 17px; color: var(--inkt-60); max-width: 56ch; margin-top: 18px; }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.crumbs { font: 400 13px/1.5 var(--body); color: var(--inkt-45); margin-bottom: 18px; }
.crumbs a { color: var(--inkt-60); text-decoration: none; }
.crumbs a:hover { color: var(--inkt); }

/* ---------- Secties ---------- */
section { padding: 64px 0; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.12; text-wrap: balance; }
.sec-intro { font-size: 16px; color: var(--inkt-60); max-width: 56ch; margin-top: 14px; }
.sec-wit { background: var(--wit); }
.sec-wit-rond { background: var(--wit); border-radius: 48px 48px 0 0; }

/* ---------- Kaarten & grids ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 860px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }
.kaart { background: var(--wit); border-radius: var(--radius-l); padding: 32px 30px; }
.kaart-poeder { background: var(--poeder); border-radius: var(--radius-m); padding: 26px 24px; }
.kaart h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.kaart p { font-size: 14.5px; color: var(--inkt-60); }

/* Klachten-grid */
.klachten-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
@media (max-width: 900px) { .klachten-grid { grid-template-columns: repeat(2, 1fr); } }
.klacht {
  background: var(--poeder); border-radius: var(--radius-m); padding: 24px 22px;
  text-decoration: none; transition: transform .15s ease, background .15s ease; display: block;
}
.sec-wit .klacht, .sec-wit-rond .klacht { background: var(--poeder); }
.klacht:hover { transform: translateY(-3px); background: var(--petal); }
.klacht h3 { font-size: 17px; font-weight: 700; }
.klacht p { font-size: 13px; color: var(--inkt-60); margin-top: 5px; }
.klacht .arrow { font: 700 14px/1 var(--head); color: var(--inkt); margin-top: 14px; display: block; }

/* Psychologen-kaarten */
.psy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.psy-grid.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .psy-grid.vier { grid-template-columns: repeat(2, 1fr); } }
.psy-card { background: var(--wit); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.psy-card .photo { border-radius: 0; aspect-ratio: 4/3.4; }
.psy-card:nth-child(2) .photo { background-color: var(--petal); }
.psy-card:nth-child(3) .photo { background-color: var(--thistle); }
.psy-card:nth-child(4) .photo { background-color: var(--poeder); }
.psy-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.psy-body h3 { font-size: 19px; font-weight: 700; }
.psy-body .big { font: 400 12.5px/1.5 var(--body); color: var(--inkt-60); margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag { background: var(--poeder); border-radius: 999px; padding: 5px 13px; font: 600 12px/1.4 var(--body); color: var(--inkt); }
.psy-body .btn { margin-top: auto; align-self: flex-start; padding: 12px 22px; font-size: 14px; }
.psy-body .tags { margin-bottom: 18px; }
@media (max-width: 860px) {
  .psy-grid, .psy-grid.vier {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 44px -24px 0; padding: 0 24px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .psy-grid::-webkit-scrollbar { display: none; }
  .psy-card { flex: 0 0 76%; scroll-snap-align: center; }
}

/* Stappen (verticale tijdlijn) */
.tijdlijn { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.tl-stap { background: var(--wit); border-radius: var(--radius-l); padding: 30px 30px; display: flex; gap: 22px; align-items: flex-start; }
.tl-stap .n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 800 18px/1 var(--head); flex: none;
}
.tl-stap:nth-child(1) .n { background: var(--petal); }
.tl-stap:nth-child(2) .n { background: var(--icy); }
.tl-stap:nth-child(3) .n { background: var(--thistle); }
.tl-stap:nth-child(4) .n { background: var(--sky); }
.tl-stap:nth-child(5) .n { background: var(--petal); }
.tl-stap h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.tl-stap p { font-size: 14.5px; color: var(--inkt-60); }
.tl-stap .dur { font: 600 12.5px/1 var(--body); color: var(--inkt-45); margin-top: 12px; display: block; }

/* ---------- Formulieren ---------- */
.veld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.veld label { font: 700 14px/1.4 var(--head); letter-spacing: -0.01em; }
.veld .hint { font: 400 12.5px/1.5 var(--body); color: var(--inkt-45); }
.veld input, .veld select, .veld textarea {
  font: 400 15px/1.5 var(--body); color: var(--inkt);
  background: var(--wit); border: 1.5px solid rgba(61,46,79,.15); border-radius: 14px;
  padding: 14px 16px; outline: none; width: 100%;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,175,204,.25); }
.veld textarea { min-height: 110px; resize: vertical; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .veld-rij { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-opt {
  font: 600 14px/1 var(--body); color: var(--inkt);
  background: var(--wit); border: 1.5px solid rgba(61,46,79,.15); border-radius: 999px;
  padding: 11px 18px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.chip-opt:hover { border-color: var(--pink); }
.chip-opt.actief { background: var(--petal); border-color: var(--petal); }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.faq-list details { background: var(--wit); border-radius: var(--radius-m); padding: 0; overflow: hidden; }
.sec-wit .faq-list details, .sec-wit-rond .faq-list details { background: var(--poeder); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 22px 26px;
  font: 700 16px/1.4 var(--head); letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 800 22px/1 var(--head); color: var(--pink); transition: transform .2s ease; flex: none; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 26px 24px; font-size: 14.5px; color: var(--inkt-60); max-width: 62ch; }

/* ---------- Slot-CTA ---------- */
.sec-slot { padding-bottom: 40px; }
.slot-card {
  background: linear-gradient(135deg, var(--petal), var(--icy));
  border-radius: var(--radius-l); padding: 64px 56px; text-align: center;
}
@media (max-width: 700px) { .slot-card { padding: 48px 26px; } }
.slot-card h2 { font-size: clamp(28px, 4vw, 40px); max-width: 22ch; margin: 0 auto; }
.slot-card p { font-size: 16px; color: var(--inkt); opacity: .75; margin: 16px auto 0; max-width: 46ch; }
.slot-card .btn { margin-top: 30px; }

/* ---------- Spoed ---------- */
.spoed { padding: 0 0 64px; }
.spoed-inner {
  background: var(--wit); border: 1.5px solid var(--thistle); border-radius: var(--radius-m);
  padding: 22px 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.spoed-inner .ic { font-size: 22px; }
.spoed-inner p { font-size: 14px; color: var(--inkt); }
.spoed-inner b { font-weight: 700; }

/* ---------- Tekstpagina (juridisch) ---------- */
.tekst-pagina { padding: 24px 0 72px; }
.tekst-kaart { background: var(--wit); border-radius: var(--radius-l); padding: 48px 52px; max-width: 820px; }
@media (max-width: 700px) { .tekst-kaart { padding: 32px 26px; } }
.tekst-kaart h2 { font-size: 22px; margin: 34px 0 12px; }
.tekst-kaart h2:first-child { margin-top: 0; }
.tekst-kaart p, .tekst-kaart li { font-size: 15px; color: var(--inkt-60); }
.tekst-kaart ul, .tekst-kaart ol { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.tekst-kaart p + p { margin-top: 12px; }
.invullen {
  background: var(--poeder); border: 1.5px dashed var(--thistle); border-radius: 12px;
  padding: 14px 18px; font: 400 13.5px/1.6 var(--body); color: var(--inkt-60); margin-top: 12px;
}

/* ---------- Tabellen ---------- */
.tabel-scroll { overflow-x: auto; margin-top: 30px; }
table.mp { border-collapse: collapse; width: 100%; background: var(--wit); border-radius: var(--radius-m); overflow: hidden; }
table.mp th, table.mp td { text-align: left; padding: 14px 18px; font-size: 14px; }
table.mp th { font: 700 13px/1.4 var(--head); background: var(--icy); }
table.mp td { color: var(--inkt-60); border-top: 1px solid rgba(61,46,79,.08); }

/* ---------- Footer ---------- */
footer { background: var(--wit); border-top: 1px solid rgba(61,46,79,.08); padding: 56px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a { font: 400 13.5px/1.5 var(--body); color: var(--inkt-60); text-decoration: none; }
.foot-grid a:hover { color: var(--pink); }
.foot-brand p { font-size: 13.5px; color: var(--inkt-60); margin-top: 14px; max-width: 30ch; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(61,46,79,.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 12.5px/1.6 var(--body); color: var(--inkt-45);
}

/* ============================================================
   HOMEPAGE-ONLY SECTIES (uit homepage-zacht.html, niet in stijl.css)
   Deze klassen worden alleen gebruikt door front-page.php.
   ============================================================ */

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.hero h1 { font-size: clamp(38px, 5.4vw, 58px); font-weight: 800; line-height: 1.06; text-wrap: balance; }
.hero h1 .plus { color: var(--pink); }
.hero .sub { font-size: 17px; color: var(--inkt-60); max-width: 46ch; margin-top: 20px; }
/* .hero-ctas staat in stijl.css alleen genest onder .page-hero; de homepage gebruikt de klasse los, dus hier los toevoegen */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--wit); border-radius: 999px; padding: 8px 16px;
  font: 600 13px/1 var(--body); color: var(--inkt);
}
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); flex: none; }
.hero-photo { aspect-ratio: 4/4.2; }
.hero-photo .plusmark { position: absolute; bottom: 22px; right: 22px; z-index: 2; }

/* ---------- Trust-strip ---------- */
.trust { padding: 8px 0 8px; }
.trust-inner {
  background: var(--wit); border-radius: var(--radius-l); padding: 30px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 860px) { .trust-inner { grid-template-columns: repeat(2, 1fr); } }
.t-item { text-align: center; }
.t-item .num { font: 800 30px/1.1 var(--head); letter-spacing: -0.02em; color: var(--inkt); }
.t-item .num em { font-style: normal; color: var(--pink); }
.t-item .cap { font: 400 13px/1.5 var(--body); color: var(--inkt-60); margin-top: 6px; }

/* ---------- Hoe werkt het (homepage-stappen) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.step { background: var(--wit); border-radius: var(--radius-l); padding: 34px 30px; }
.step .n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 800 18px/1 var(--head); margin-bottom: 20px;
}
.step:nth-child(1) .n { background: var(--petal); }
.step:nth-child(2) .n { background: var(--icy); }
.step:nth-child(3) .n { background: var(--thistle); }
.step h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--inkt-60); }
/* Op een witte sectie zou een witte kaart wegvallen; zelfde omkering als bij .klacht en .faq-list */
.sec-wit .step, .sec-wit-rond .step { background: var(--poeder); }
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    position: sticky;
    border: 1px solid rgba(61,46,79,.07);
    box-shadow: 0 -16px 40px -24px rgba(61,46,79,.4);
    padding: 30px 26px 38px;
  }
  .step:nth-child(1) { top: 86px; }
  .step:nth-child(2) { top: 98px; margin-top: 22px; }
  .step:nth-child(3) { top: 110px; margin-top: 22px; }
}

/* ---------- Klachten (homepage-achtergrond) ---------- */
/* .klachten-grid en .klacht staan al hierboven (uit stijl.css); homepage voegt alleen de ronde witte achtergrond toe */
.sec-klachten { background: var(--wit); border-radius: 48px 48px 0 0; }

/* ---------- Psychologen (homepage-kop) ---------- */
.psy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Vergoeding ---------- */
.sec-vergoed { background: var(--wit); }
.vergoed-card {
  background: var(--icy); border-radius: var(--radius-l); padding: 52px 56px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) { .vergoed-card { grid-template-columns: 1fr; padding: 36px 28px; } }
.vergoed-card h2 { font-size: clamp(26px, 3.2vw, 34px); }
.vergoed-card .sec-intro { color: var(--inkt); opacity: .78; }
.vergoed-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vergoed-checks li { display: flex; gap: 12px; font-size: 15px; align-items: flex-start; }
.vergoed-checks .c {
  width: 24px; height: 24px; border-radius: 50%; background: var(--wit); color: var(--inkt);
  display: grid; place-items: center; font: 800 13px/1 var(--head); flex: none; margin-top: 1px;
}
.vergoed-side { background: var(--wit); border-radius: var(--radius-m); padding: 30px; }
.vergoed-side h3 { font-size: 17px; margin-bottom: 8px; }
.vergoed-side p { font-size: 13.5px; color: var(--inkt-60); }
.vergoed-side .btn { margin-top: 18px; }

/* ---------- Reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.review { background: var(--wit); border-radius: var(--radius-l); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; margin: 0; }
.stars { color: var(--pink); font-size: 15px; letter-spacing: 3px; }
.review q { font-size: 15px; quotes: "“" "”"; }
.review .who { font: 600 13px/1.5 var(--body); color: var(--inkt-60); margin-top: auto; }
.zorgkaart-note { font: 400 13px/1.6 var(--body); color: var(--inkt-45); margin-top: 24px; }
@media (max-width: 860px) {
  .review-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 44px -24px 0; padding: 0 24px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 82%; scroll-snap-align: center; }
}

/* ---------- Sessies ---------- */
.sec-sessies { background: var(--wit); }
.sessies-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .sessies-grid { grid-template-columns: 1fr; gap: 36px; } }
.sessies-photo { aspect-ratio: 4/3.2; background-color: var(--petal); }
.sessie-items { display: flex; flex-direction: column; gap: 22px; margin-top: 34px; }
.sessie-item { display: flex; gap: 18px; align-items: flex-start; }
.sessie-item .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 20px; flex: none;
}
.sessie-item:nth-child(1) .ic { background: var(--icy); }
.sessie-item:nth-child(2) .ic { background: var(--petal); }
.sessie-item:nth-child(3) .ic { background: var(--thistle); }
.sessie-item h3 { font-size: 17px; font-weight: 700; }
.sessie-item p { font-size: 14px; color: var(--inkt-60); margin-top: 4px; }

/* ---------- FAQ (homepage-link onder de lijst) ---------- */
.faq-more { margin-top: 22px; font-size: 14px; }
.faq-more a { color: var(--inkt); font-weight: 600; }

/* ============================================================
   SUBPAGINA-SPECIFIEKE STIJLEN
   Elke subpagina had in de statische site een eigen klein <style>-blok
   (naast stijl.css) voor zijn eigen lay-outklassen. Omdat page.php,
   archive-psycholoog.php en single-psycholoog.php de content van die
   pagina's ongewijzigd overnemen (inclusief class-attributen), staan
   die klassen hier gebundeld zodat de pagina's correct blijven ogen.
   Niet expliciet genoemd in de themastructuur-opdracht, maar nodig om
   "exact zoals de bron-HTML" ook visueel te kloppen.
   ============================================================ */

/* over-ons.html */
.missie-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .missie-grid { grid-template-columns: 1fr; gap: 36px; } }
.team-foto { aspect-ratio: 3/2; }
.kwaliteit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .kwaliteit-grid { grid-template-columns: 1fr; } }
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; background: var(--wit); border-radius: var(--radius-l); padding: 36px 40px; }
@media (max-width: 700px) { .cijfers { grid-template-columns: 1fr; } }
.cijfer { text-align: center; }
.cijfer .num { font: 800 34px/1.1 var(--head); letter-spacing: -0.02em; }
.cijfer .num em { font-style: normal; color: var(--pink); }
.cijfer .cap { font: 400 13.5px/1.5 var(--body); color: var(--inkt-60); margin-top: 6px; }

/* contact.html */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; padding: 24px 0 72px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { background: var(--wit); border-radius: var(--radius-l); padding: 38px 42px 42px; }
@media (max-width: 640px) { .contact-form { padding: 26px 22px 30px; } }
.contact-form h2 { font-size: 22px; margin-bottom: 22px; }
.contact-zij { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) {
  .contact-grid { display: flex; flex-direction: column; }
  .contact-zij { order: -1; }
  .crisis-kaart { order: -1; }
}
.contact-kaart { background: var(--wit); border-radius: var(--radius-m); padding: 26px 28px; }
.contact-kaart h3 { font-size: 16px; margin-bottom: 12px; }
.contact-kaart p, .contact-kaart li { font-size: 13.5px; color: var(--inkt-60); }
.contact-kaart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-kaart a { font-weight: 600; color: var(--inkt); text-decoration: none; }
.contact-kaart a:hover { color: var(--pink); }
.crisis-kaart { border: 1.5px solid var(--thistle); }
.verzonden { display: none; background: var(--petal); border-radius: var(--radius-m); padding: 18px 22px; font-size: 14.5px; margin-top: 8px; }

/* hoe-werkt-het.html */
.herhaal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .herhaal { grid-template-columns: 1fr; } }
.herhaal .kaart { display: flex; flex-direction: column; }
.herhaal .kaart .btn { margin-top: auto; align-self: flex-start; }
.herhaal .kaart p { margin-bottom: 20px; }

/* klachten.html (klachten-overzicht: klachtkaarten hier wit i.p.v. poeder) */
.klachten-grid .klacht { background: var(--wit); }
.klachten-grid .klacht:hover { background: var(--petal); }

/* klacht-angst.html — model voor alle klachtpagina's */
.herken { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; max-width: 860px; }
@media (max-width: 700px) { .herken { grid-template-columns: 1fr; } }
.herken .item {
  background: var(--wit); border-radius: var(--radius-m); padding: 20px 24px;
  display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--inkt-60);
}
.herken .item .c {
  width: 26px; height: 26px; border-radius: 50%; background: var(--petal); color: var(--inkt);
  display: grid; place-items: center; font: 800 14px/1 var(--head); flex: none;
}
.aanpak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .aanpak { grid-template-columns: 1fr; } }

/* vergoeding.html */
.kern-band { background: var(--icy); border-radius: var(--radius-l); padding: 44px 48px; margin-top: 8px; }
@media (max-width: 700px) { .kern-band { padding: 30px 26px; } }
.kern-band h2 { font-size: clamp(24px, 3vw, 32px); }
.kern-band p { font-size: 15.5px; color: var(--inkt); opacity: .8; max-width: 60ch; margin-top: 12px; }
.verzekeraars { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.verz-chip {
  background: var(--wit); border-radius: 14px; padding: 16px 26px;
  font: 700 15px/1 var(--head); color: var(--inkt-45); letter-spacing: -0.01em;
}
.verz-chip--logo { display: grid; place-items: center; padding: 14px 22px; }
.verz-chip--logo img {
  display: block; height: auto; width: auto;
  max-height: 38px; max-width: 132px; object-fit: contain;
}

/* Bewegende variant (shortcode [mp_verzekeraars] met weergave "bewegend") */
.verz-carrousel {
  margin-top: 36px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.verz-spoor {
  display: flex; width: max-content;
  animation: verz-schuif var(--verz-duur, 30s) linear infinite;
}
/* Stilzetten zodra iemand ernaar wijst of ertussen tabt, zodat de logo's leesbaar blijven */
.verz-carrousel:hover .verz-spoor,
.verz-carrousel:focus-within .verz-spoor { animation-play-state: paused; }
.verz-groep { display: flex; gap: 12px; padding-right: 12px; }
@keyframes verz-schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* Terugval op het statische raster; de dubbele set zou dan dubbele logo's tonen */
  .verz-spoor { animation: none; flex-wrap: wrap; width: auto; gap: 12px; }
  .verz-groep:nth-child(2) { display: none; }
  .verz-carrousel { -webkit-mask-image: none; mask-image: none; }
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .duo { grid-template-columns: 1fr; } }

/* psychologen.html (archive-psycholoog.php) */
.filterbalk {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  background: var(--wit); border-radius: var(--radius-m); padding: 16px 18px;
}
.filterbalk .flabel { font: 700 13px/1 var(--body); color: var(--inkt-45); align-self: center; margin-right: 4px; }
.fchip {
  font: 600 13.5px/1 var(--body); color: var(--inkt);
  background: var(--poeder); border: none; border-radius: 999px;
  padding: 11px 18px; cursor: pointer; transition: background .15s ease;
}
.fchip:hover { background: var(--petal); }
.fchip.actief { background: var(--petal); }

/* psycholoog-profiel.html (single-psycholoog.php) — profiel-template */
.profiel-kop { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; padding: 40px 0 0; }
@media (max-width: 860px) { .profiel-kop { grid-template-columns: 1fr; gap: 30px; } }
.profiel-foto { aspect-ratio: 4/4.4; }
.profiel-kop h1 { font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; line-height: 1.06; }
.profiel-kop .titel { font-size: 16px; color: var(--inkt-60); margin-top: 10px; }
.profiel-kop .bigno { font: 400 13px/1.5 var(--body); color: var(--inkt-45); margin-top: 6px; }
.profiel-kop .tags { margin-top: 20px; }
.profiel-kop .hero-ctas { margin-top: 30px; }
.werkwijze-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; margin-top: 40px; align-items: start; }
@media (max-width: 860px) { .werkwijze-grid { grid-template-columns: 1fr; } }
.feitjes { background: var(--poeder); border-radius: var(--radius-m); padding: 26px 28px; }
.feitjes h3 { font-size: 16px; margin-bottom: 14px; }
.feitjes dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feitjes .rij { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.feitjes dt { color: var(--inkt-45); }
.feitjes dd { margin: 0; color: var(--inkt); font-weight: 600; text-align: right; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .quote-grid { grid-template-columns: 1fr; } }
.quote { background: var(--wit); border-radius: var(--radius-l); padding: 30px; margin: 0; }
.quote q { font-size: 15px; quotes: "“" "”"; }
.quote .who { display: block; font: 600 13px/1.5 var(--body); color: var(--inkt-60); margin-top: 14px; }