/*
Theme Name: Moeder Dochter Coaching
Theme URI: https://moederdochtercoaching.nl
Author: Ilse
Description: Eigen thema voor Moeder Dochter Coaching. Neemt de bestaande huisstijl over (warm crème, roodbruin/oudroze accent) zonder page builder of formulier-plugins.
Version: 3.4
Text Domain: mdc
*/

/*
  3.4  Het thema richt zich nu zelf in op een lege installatie: pagina's,
       reviews, voorpagina en menu worden automatisch aangemaakt. Drie
       fouten hersteld: (1) het menu werd opgebouwd vóórdat de pagina's
       bestonden, kwam daardoor leeg uit en probeerde het nooit meer;
       (2) het terugvalmenu somde bestaande pagina's op en was dus leeg
       op een lege site — het toont weer gewoon de hoofdstructuur, zoals
       in de eerste versies; (3) er was geen opmaak voor submenu's,
       waardoor alle niveaus door elkaar in de balk stonden.
  3.3  HERSTEL. In 3.0 bleven alle teksten leeg op een installatie waar nog
       niets in de Customizer was opgeslagen: get_theme_mod() kent de
       standaardwaarde uit add_setting() niet, en mijn hulpfuncties gaven een
       lege string mee. De standaardteksten worden nu uit de veldentabel
       gehaald. Verder: de herbouwknop verwijderde elk menu met de naam
       "Hoofdmenu", ook een zelfgemaakt menu — nu alleen nog een menu dat het
       thema zelf heeft aangemaakt. De voorbeeldinhoud wijzigt de voorpagina
       alleen als er nog geen vaste voorpagina is, en is terug te draaien.
  3.2  Scherm "Weergave → Aan de slag" toegevoegd: overzicht van alle
       sjablonen en een knop die in één keer alle pagina's aanmaakt met
       het juiste sjabloon, plus voorbeeldreviews. Het thema leegt nu de
       sjabloon-cache van WordPress zodra het versienummer verandert,
       zodat nieuwe sjablonen meteen in het uitklapmenu staan.
  3.1  Menu-opbouw werkt nu ook als je de themabestanden vervangt zonder
       van thema te wisselen. Een leeg menu telt niet langer als geldig
       menu, zodat de site terugvalt op de paginalijst in plaats van
       niets te tonen. Waarschuwing in de beheeromgeving met de reden.
  3.0  Alle teksten, afbeeldingen en kleuren instelbaar via de Customizer.
       Reviews zijn nu een eigen berichttype in WordPress. Het thema bouwt
       bij activering zijn eigen hoofdmenu op, zodat het menu van een vorig
       thema niet blijft hangen. Templates voor de Verbonden Relatie
       Methode, cursusprijzen en Inspiratie toegevoegd.
  2.3  Templates voor Coaching, Trajecten, Tarieven, Online cursus en
       Doeboek toegevoegd. Terugvalmenu somt nu bestaande pagina's op
       in plaats van vaste adressen, en knoppen zoeken de pagina op
       via mdc_page_url() zodat er geen dode links meer ontstaan.
  2.2  Templates voor Over Ilse, E-boek, Contact en het blog
       (overzicht, losstaand bericht, paginering) toegevoegd,
       met de echte teksten van de site.
  2.1  Achtergrond-sfeer: bloesemblaadjes vervangen door twee grote
       kleurvelden. Klassenaam .field hernoemd naar .aura, omdat die
       botste met de formuliervelden. Header weer zonder animatie.
       Stylesheet-versie volgt nu de bestandsdatum, zodat browsers
       nooit meer een oude versie uit de cache serveren.
  2.0  Huisstijl van de bestaande site overgenomen (kleuren gemeten
       uit een schermafbeelding), asymmetrische twee kolommen.
  1.0  Eerste opzet.
*/

/* =========================================================
   TOKENS — overgenomen uit de bestaande site
   ========================================================= */
:root{
  --bg:          #F8F3EF;  /* warme crème achtergrond          */
  --surface:     #FFFFFF;  /* header, kaarten                  */
  --rose:        #9E7F70;  /* koppen, primaire accentkleur     */
  --rose-light:  #B08B82;  /* subkoppen, "Mijn Missie"         */
  --rose-border: #CBB0AA;  /* randen van kaders                */
  --rose-tint:   #F1E5E0;  /* zachte vlakvulling               */
  --text:        #666563;  /* bodytekst, warm grijs            */
  --text-soft:   #8A8582;
  --nav:         #B3A49B;  /* menu-items                       */

  --font-head: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 3rem;
  --sp-5: 5rem;

  --radius: 14px;
  --max-w: 1400px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--rose); }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-4); }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:400;
  color:var(--rose);
  line-height:1.25;
  margin:0 0 var(--sp-2);
  letter-spacing:.2px;
}
h1{ font-size:clamp(2rem, 3.4vw, 3.05rem); }
h2{ font-size:clamp(1.4rem, 2vw, 1.75rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.2em; }

/* =========================================================
   KNOPPEN
   ========================================================= */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:.95em 2.1em;
  border:1px solid var(--rose);
  border-radius:999px;
  background:var(--rose);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{
  background:var(--rose-light);
  border-color:var(--rose-light);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(158,127,112,.65);
}
.btn-ghost{ background:transparent; color:var(--rose); }
.btn-ghost:hover{ background:var(--rose); color:#fff; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--surface);
  box-shadow:0 1px 0 rgba(158,127,112,.10);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.site-logo{ display:flex; align-items:center; gap:.7em; text-decoration:none; }
.site-logo .mark{
  width:34px; height:34px; flex:none;
  color:var(--rose-light);
}
.site-logo .mark svg{ width:100%; height:100%; display:block; }
.site-logo .name{
  font-family:var(--font-head); font-size:.95rem; color:var(--rose);
  letter-spacing:.04em; white-space:nowrap;
}

.primary-nav ul{ list-style:none; display:flex; gap:2.1rem; margin:0; padding:0; }
.primary-nav a{
  position:relative;
  text-decoration:none;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--nav);
  padding:.4em 0;
  transition:color .3s var(--ease);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a{ color:var(--rose); }
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rose-light);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after{ transform:scaleX(1); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.5em; }
.nav-toggle span{
  display:block; width:24px; height:1.5px; background:var(--rose);
  margin:5px 0; border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1024px){
  .wrap{ padding:0 var(--sp-3); }
  .nav-toggle{ display:block; }
  .primary-nav{
    position:fixed; inset:64px 0 0 0;
    background:var(--surface);
    padding:var(--sp-4) var(--sp-3);
    opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    overflow-y:auto;
  }
  .primary-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; gap:var(--sp-3); }
  .primary-nav a{ font-size:.95rem; }
}

/* =========================================================
   HERO — asymmetrische twee kolommen, net als de huidige site
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--sp-5);
  align-items:start;
  padding:var(--sp-5) 0;
  position:relative;
}
@media (max-width:1024px){
  .layout{ grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-4) 0; }
}

.col-narrative > * + *{ margin-top:var(--sp-4); }
.col-aside > * + *{ margin-top:var(--sp-4); }

.hero-lead h1{ margin-bottom:.35em; }
.hero-lead .sub{
  font-family:var(--font-head);
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  color:var(--rose-light);
  margin-bottom:1.1em;
  font-weight:400;
}

.layout > *{ position:relative; z-index:1; }

/* Missie-kader — afgeronde omlijning zoals op de site */
.frame{
  border:1px solid var(--rose-border);
  border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);
  text-align:center;
  background:transparent;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.frame:hover{ border-color:var(--rose-light); background:rgba(241,229,224,.35); }
.frame h2{ color:var(--rose-light); margin-bottom:.8em; }
.frame .strong{ font-weight:700; color:var(--text); }

/* Lijsten met bullets, zoals de huidige opsommingen */
.list{ list-style:none; margin:0; padding:0; }
.list li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:.55em;
}
.list li::before{
  content:""; position:absolute; left:.15em; top:.72em;
  width:5px; height:5px; border-radius:50%;
  background:var(--rose-light);
}

/* Hero-foto met heel langzame zoom */
.figure{
  overflow:hidden;
  border-radius:4px;
  background:linear-gradient(160deg, var(--rose-tint), #E6D3CB);
  aspect-ratio:4/5;
}
.figure img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  animation:slow-zoom 28s ease-in-out infinite alternate;
}
@keyframes slow-zoom{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.09); }
}
@media (max-width:1024px){ .figure{ aspect-ratio:16/11; } }

/* Testimonials — quote-icoon, ronde avatar, naam vet */
.quote{ text-align:center; }
.quote .mark{
  color:var(--text-soft);
  font-family:Georgia, serif;
  font-size:2.4rem;
  line-height:1;
  display:block;
  margin-bottom:.5rem;
}
.quote-body{ display:flex; gap:var(--sp-3); align-items:flex-start; text-align:left; }
.quote-avatar{
  width:76px; height:76px; flex:none;
  border-radius:50%; overflow:hidden;
  background:var(--rose-tint);
}
.quote-avatar img{ width:100%; height:100%; object-fit:cover; }
.quote cite{ display:block; margin-top:1em; font-style:normal; font-weight:700; color:var(--text); }
@media (max-width:520px){
  .quote-body{ flex-direction:column; align-items:center; text-align:center; }
}

/* =========================================================
   SECTIES ONDER DE FOLD
   ========================================================= */
.band{ padding:var(--sp-5) 0; }
.band-tint{ background:var(--rose-tint); }
.band-surface{ background:var(--surface); }
.band-head{ max-width:680px; margin:0 auto var(--sp-4); text-align:center; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--surface);
  border:1px solid var(--rose-border);
  border-radius:var(--radius);
  padding:var(--sp-3);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -24px rgba(158,127,112,.55); }
.card .price{
  font-family:var(--font-head); font-size:1.6rem; color:var(--rose-light);
  margin:.1em 0 .7em;
}
.card ul{ list-style:none; padding:0; margin:0 0 var(--sp-3); flex:1; font-size:.95rem; }
.card ul li{ padding:.45em 0; border-bottom:1px solid rgba(203,176,170,.35); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); list-style:none; padding:0; margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.steps .num{
  display:block; font-family:var(--font-head); font-size:2rem;
  color:var(--rose-border); line-height:1; margin-bottom:.3em;
}

/* =========================================================
   FORMULIEREN
   ========================================================= */
.form-card{
  background:var(--surface);
  border:1px solid var(--rose-border);
  border-radius:var(--radius);
  padding:var(--sp-4);
  max-width:640px; margin:0 auto;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:var(--sp-2); }
.field label{
  display:block; font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:.45em;
}
.field input, .field textarea{
  width:100%; padding:.85em 1em;
  border:1px solid var(--rose-border);
  border-radius:8px;
  background:var(--bg);
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; background:var(--surface);
  border-color:var(--rose-light);
  box-shadow:0 0 0 3px rgba(176,139,130,.18);
}
.form-status{ margin:var(--sp-2) 0 0; min-height:1.4em; font-size:.92rem; font-weight:600; }
.form-status[data-state="ok"]{ color:var(--rose); }
.form-status[data-state="err"]{ color:#A45248; }

/* =========================================================
   ANIMATIE — rustige fade-up bij scrollen
   ========================================================= */
.rise{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.rise.is-in{ opacity:1; transform:none; }
.rise-group > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.rise-group.is-in > *{ opacity:1; transform:none; }
.rise-group.is-in > *:nth-child(1){ transition-delay:.04s; }
.rise-group.is-in > *:nth-child(2){ transition-delay:.12s; }
.rise-group.is-in > *:nth-child(3){ transition-delay:.20s; }
.rise-group.is-in > *:nth-child(4){ transition-delay:.28s; }
.rise-group.is-in > *:nth-child(5){ transition-delay:.36s; }
.rise-group.is-in > *:nth-child(6){ transition-delay:.44s; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--surface);
  border-top:1px solid rgba(203,176,170,.5);
  padding:var(--sp-4) 0 var(--sp-3);
  font-size:.94rem;
}
.footer-grid{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--rose-light); }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.footer-note{
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid rgba(203,176,170,.4);
  font-size:.82rem; color:var(--text-soft);
}

/* Toegankelijkheid */
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:100; background:var(--rose); color:#fff; padding:.8em 1.2em; border-radius:6px; }
:focus-visible{ outline:2px solid var(--rose-light); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .rise, .rise-group > *{ opacity:1 !important; transform:none !important; }
}

/* Knop onderaan een kaart vult de breedte, tekst gecentreerd */
.card .btn{ text-align:center; }

/* =========================================================
   MOBIELE VOLGORDE
   Op smalle schermen: eerst de foto, dan het verhaal,
   dan de ervaringen — in plaats van de hele rechterkolom
   onderaan de pagina.
   ========================================================= */
@media (max-width:1024px){
  .layout > .col-narrative,
  .layout > .col-aside{ display:contents; }

  .col-narrative > * + *,
  .col-aside > * + *{ margin-top:0; }

  .layout > .col-aside > .figure{ order:-1; }
  .layout > .col-narrative > *{ order:0; }
  .layout > .col-aside > .quote{ order:1; }
  .layout > .col-aside > *:not(.figure):not(.quote){ order:2; }

  .layout{ gap:var(--sp-4); }
}

/* =========================================================
   ACHTERGROND-SFEER IN HET HOOFDGEDEELTE

   Twee grote, zachte kleurvelden — één warm roze, één warm
   zand — die elkaar heel langzaam naderen en weer loslaten.
   Waar ze elkaar overlappen wordt de kleur voller: het beeld
   van twee mensen die naar elkaar toe bewegen.

   Bewust groot en traag gehouden. Kleine, vage vormen lezen
   op een scherm altijd als stof of vlekken; vormen die veel
   breder zijn dan het beeldscherm zelf nooit.

   De laag ligt achter de inhoud: in de crème stukken zie je
   hem, achter de witte en roze blokken verdwijnt hij vanzelf.
   ========================================================= */
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* Alle echte inhoud staat boven de sfeerlaag. Blokken met een
   eigen achtergrondkleur dekken hem daardoor netjes af. */
#main > *:not(.ambient){ position:relative; z-index:1; }

.aura{
  position:absolute;
  top:50%;
  width:64vw;
  max-width:900px;
  aspect-ratio:1;
  border-radius:50%;
  will-change:transform;
}

/* Het roze veld komt van links, iets boven het midden. */
.aura-moeder{
  left:-26vw;
  margin-top:-38vw;
  background:radial-gradient(circle,
    rgba(212,183,175,.50) 0%,
    rgba(212,183,175,.22) 42%,
    rgba(212,183,175,0)   72%);
  animation:mdc-naderen-links 46s ease-in-out infinite alternate;
}

/* Het zandkleurige veld komt van rechts, iets onder het midden. */
.aura-dochter{
  right:-26vw;
  margin-top:-24vw;
  background:radial-gradient(circle,
    rgba(234,214,199,.55) 0%,
    rgba(234,214,199,.24) 42%,
    rgba(234,214,199,0)   72%);
  animation:mdc-naderen-rechts 57s ease-in-out infinite alternate;
}

/* De twee looptijden (46s en 57s) delen geen gemene deler, zodat
   de velden elkaar steeds op een net iets ander punt ontmoeten. */
@keyframes mdc-naderen-links{
  from{ transform:translate3d(0,0,0)          scale(1);    }
  to  { transform:translate3d(24vw,4vw,0)     scale(1.10); }
}
@keyframes mdc-naderen-rechts{
  from{ transform:translate3d(0,0,0)          scale(1.08); }
  to  { transform:translate3d(-22vw,-5vw,0)   scale(1);    }
}

/* Op smalle schermen liggen de velden dichter bij elkaar en
   bewegen ze minder ver, anders wordt het onrustig. */
@media (max-width:768px){
  .aura{ width:100vw; }
  .aura-moeder { left:-30vw; margin-top:-60vw; }
  .aura-dochter{ right:-30vw; margin-top:-20vw; }
  @keyframes mdc-naderen-links{
    from{ transform:translate3d(0,0,0);      }
    to  { transform:translate3d(16vw,6vw,0); }
  }
  @keyframes mdc-naderen-rechts{
    from{ transform:translate3d(0,0,0);        }
    to  { transform:translate3d(-16vw,-6vw,0); }
  }
}

/* =========================================================
   ONDERDELEN VOOR DE BINNENPAGINA'S
   ========================================================= */

/* Klein regeltje boven een kop, zoals "Echte aandacht.
   Warme begeleiding." op de pagina Over Ilse. */
.eyebrow-line{
  font-family:var(--font-head);
  color:var(--rose-light);
  font-size:1.05rem;
  margin-bottom:.4em;
}

/* Leesbare tekstkolom voor lange verhalen. */
.prose{ max-width:68ch; }
.prose p{ margin-bottom:1.3em; }
.band-head + .prose{ margin-top:0; }

/* Drie losse uitspraken naast elkaar. */
.statements{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:900px){ .statements{ grid-template-columns:1fr; gap:var(--sp-3); } }
.statement{
  font-family:var(--font-head);
  font-size:1.15rem;
  line-height:1.45;
  color:var(--rose);
  text-align:center;
  margin:0;
  padding:0 var(--sp-2);
  border-left:1px solid var(--rose-border);
}
.statement:first-child{ border-left:0; }
@media (max-width:900px){
  .statement{ border-left:0; border-top:1px solid var(--rose-border); padding:var(--sp-3) 0 0; }
  .statement:first-child{ border-top:0; padding-top:0; }
}

/* Opleidingen: titel met daaronder het instituut. */
.credentials{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin:0; }
@media (max-width:900px){ .credentials{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .credentials{ grid-template-columns:1fr; } }
.credential{ border-top:2px solid var(--rose-border); padding-top:var(--sp-2); }
.credential dt{ font-family:var(--font-head); color:var(--rose); font-size:1.02rem; line-height:1.3; }
.credential dd{ margin:.3em 0 0; font-size:.9rem; color:var(--text-soft); }

/* =========================================================
   BLOG
   ========================================================= */
.postlist{ display:grid; gap:var(--sp-4); }

.postcard{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:var(--sp-3);
  align-items:start;
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--rose-border);
}
.postlist > .postcard:last-child{ border-bottom:0; padding-bottom:0; }
@media (max-width:768px){ .postcard{ grid-template-columns:1fr; } }

.postcard-media{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(160deg, var(--rose-tint), #E6D3CB);
  aspect-ratio:4/3;
}
.postcard-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.postcard:hover .postcard-media img{ transform:scale(1.05); }

.postcard-body h2{ font-size:1.35rem; margin-bottom:.35em; }
.postcard-body h2 a{ text-decoration:none; transition:color .3s var(--ease); }
.postcard-body h2 a:hover{ color:var(--rose-light); }

.postmeta{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-soft);
  margin-bottom:.8em;
}
.postmeta span{ margin:0 .5em; }

.readmore{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--rose);
  border-bottom:1px solid var(--rose-border);
  padding-bottom:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.readmore:hover{ color:var(--rose-light); border-color:var(--rose-light); }

/* Losstaand bericht */
.single-post{ max-width:760px; margin:0 auto; }
.single-post .prose h2,
.single-post .prose h3{ margin-top:1.6em; }
.single-post .prose img{ border-radius:var(--radius); margin:var(--sp-3) 0; }
.single-post .prose blockquote{
  margin:var(--sp-3) 0;
  padding:0 0 0 var(--sp-3);
  border-left:2px solid var(--rose-border);
  font-family:var(--font-head);
  font-size:1.1rem;
  color:var(--rose);
}

.post-nav{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  justify-content:space-between;
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--rose-border);
}

/* Paginering */
.pagination-wrap{ margin-top:var(--sp-5); }
.pagination-wrap .nav-links{
  display:flex; flex-wrap:wrap; gap:.4em; justify-content:center; align-items:center;
}
.pagination-wrap .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 .7em;
  border:1px solid var(--rose-border);
  border-radius:999px;
  text-decoration:none;
  font-size:.9rem;
  color:var(--rose);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.pagination-wrap .page-numbers:hover,
.pagination-wrap .page-numbers.current{
  background:var(--rose); color:#fff; border-color:var(--rose);
}
.pagination-wrap .screen-reader-text{ position:absolute; left:-9999px; }

/* Tarievenoverzicht */
.pricetable{ width:100%; border-collapse:collapse; margin:0; }
.pricetable th,
.pricetable td{
  text-align:left;
  padding:.85em 0;
  border-bottom:1px solid var(--rose-border);
  font-weight:400;
}
.pricetable th{ color:var(--text); padding-right:var(--sp-2); }
.pricetable td{
  text-align:right;
  white-space:nowrap;
  font-family:var(--font-head);
  color:var(--rose);
  font-size:1.05rem;
}
.pricetable tr:last-child th,
.pricetable tr:last-child td{ border-bottom:0; }

/* Zes fasen als genummerde kaarten */
.phases{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
}
@media (max-width:900px){ .phases{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .phases{ grid-template-columns:1fr; } }
.phases li{ border-top:2px solid var(--rose-border); padding-top:var(--sp-2); }
.phase-num{
  display:block; font-family:var(--font-head); font-size:1.5rem;
  color:var(--rose-border); line-height:1; margin-bottom:.25em;
}
.phases h3{ font-size:1.1rem; margin-bottom:.4em; }
.phases p{ font-size:.95rem; margin:0; }

/* Vier kaarten naast elkaar (edities online cursus) */
.cards.cards-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .cards.cards-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards.cards-4{ grid-template-columns:1fr; } }

/* Ronde pasfoto bij een review */
.quote-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* =========================================================
   SUBMENU'S
   Het opgebouwde hoofdmenu heeft twee niveaus (Coaching en
   Inspiratie hebben onderliggende pagina's). Zonder deze
   regels zouden die items gewoon achter elkaar in de balk
   komen te staan.
   ========================================================= */
.primary-nav li{ position:relative; }

.primary-nav .sub-menu{
  display:block;
  position:absolute;
  top:100%; left:-1rem;
  min-width:230px;
  flex-direction:column;
  gap:0;
  padding:.6rem 0;
  margin:0;
  background:var(--surface);
  border:1px solid var(--rose-border);
  border-radius:10px;
  box-shadow:0 16px 34px -22px rgba(158,127,112,.6);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:70;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.primary-nav .sub-menu li{ width:100%; }
.primary-nav .sub-menu a{
  display:block;
  padding:.5rem 1.2rem;
  font-size:.74rem;
  letter-spacing:.08em;
  white-space:nowrap;
}
.primary-nav .sub-menu a::after{ display:none; }
.primary-nav .sub-menu a:hover{ background:var(--rose-tint); color:var(--rose); }

/* Derde niveau (Doeboek en Online cursus prijzen onder Tarieven) */
.primary-nav .sub-menu .sub-menu{
  top:0; left:100%;
  margin-left:2px;
}

/* Pijltje bij een item met onderliggende pagina's */
.primary-nav .menu-item-has-children > a::before{
  content:"";
  position:absolute; right:-13px; top:50%;
  width:5px; height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  opacity:.7;
}
.primary-nav .sub-menu .menu-item-has-children > a::before{
  right:12px;
  transform:translateY(-50%) rotate(-45deg);
}

/* Op mobiel klapt alles gewoon onder elkaar uit */
@media (max-width:1024px){
  .primary-nav .sub-menu{
    position:static;
    opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; background:transparent;
    padding:.4rem 0 0 1rem;
    min-width:0;
    border-left:1px solid var(--rose-border);
    margin-top:.5rem;
  }
  .primary-nav .sub-menu a{ font-size:.85rem; padding:.45rem 0 .45rem .8rem; }
  .primary-nav .sub-menu .sub-menu{ margin-left:0; }
  .primary-nav .menu-item-has-children > a::before{ display:none; }
}