/*
Theme Name: Integritas
Theme URI: https://psychologiepraktijkintegritas.nl
Description: Psychologiepraktijk Integritas – custom thema
Author: Yde
Version: 7.8.20
*/

/* === RESET & VARIABLES === */
:root{
  /* Brand colors from identity doc */
  --coral:#f39982;--green:#7eb491;--gold:#fabc6c;--mint:#e5f2e8;
  --lavender:#bca8d1;--dark:#595857;--blue:#769fd2;
  /* Extended palette */
  --cream:#ffffff;--white:#ffffff;--light:#f5f0ea;
  /* Semantic */
  --text:#595857;--heading:#4a4746;--accent:#f39982;--cta:#7eb491;--cta-hover:#6aa37f;
  /* Fonts */
  --fb:'Lexend',sans-serif;--fh:'Lexend',sans-serif;--fa:'Caveat',cursive;
  /* Cloud shape — reusable SVG mask. Based on logo cloud-bubble form.
     Use as background (with color) or mask-image (shape cutout). */
  --cloud-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360'><path d='M 100,200 C 60,200 40,165 60,135 C 35,105 70,65 110,75 C 125,40 180,35 205,65 C 225,35 275,30 300,60 C 330,25 390,30 410,65 C 445,45 495,65 495,105 C 535,110 555,155 525,180 C 555,205 540,255 500,255 C 490,295 435,305 410,280 C 390,310 340,315 315,285 C 290,315 240,315 215,285 C 195,310 140,310 125,280 C 85,295 50,260 70,225 C 40,220 45,185 100,200 Z' fill='black'/></svg>");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;margin-top:0 !important}
body{font-family:var(--fb);font-size:1rem;line-height:1.7;color:var(--text);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cta);text-decoration:none;transition:color .3s}
a:hover{color:var(--cta-hover)}
h1,h2,h3,h4{font-family:var(--fh);color:var(--heading);font-weight:600;line-height:1.25}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem)}
h3{font-size:1.15rem}

/* === LAYOUT === */
.ct{max-width:1140px;margin:0 auto;padding:0 1.5rem}

/* === CTA BAND (eind-CTA op subpagina's) === */
.cta-band{background:var(--mint);padding:2.5rem 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before,.cta-band::after{content:'';position:absolute;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;pointer-events:none;opacity:.12}
.cta-band::before{width:300px;height:190px;top:-40px;right:-60px;background-color:var(--coral);transform:rotate(-5deg)}
.cta-band::after{width:240px;height:150px;bottom:-30px;left:-50px;background-color:var(--gold);transform:rotate(8deg)}
.cta-band>.ct{position:relative;z-index:1}

/* === HEADER === */
.sh{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--cream);border-bottom:1px solid rgba(0,0,0,0.04);transition:box-shadow .3s}
.sh.sc{box-shadow:0 2px 20px rgba(0,0,0,0.06)}
body.admin-bar .sh{top:32px}
@media screen and (max-width:782px){body.admin-bar .sh{top:46px}}
.hi{max-width:1140px;margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.sl{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.sl img{height:52px;width:auto}
.lt{font-family:var(--fh);font-size:1.3rem;font-weight:700;color:var(--dark);line-height:1.15}
.lt span{display:block;font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:.6}
.mn{display:flex;align-items:center;gap:1.5rem}
.nm{list-style:none;display:flex;gap:1.25rem}
.nm li a{font-size:.88rem;font-weight:500;color:var(--text);text-decoration:none;transition:color .3s;padding:.25rem 0}
.nm li a:hover,.nm li.current-menu-item a{color:var(--coral)}
.bc{display:inline-flex;align-items:center;padding:.5rem 1.25rem;background:var(--coral);color:#fff;border-radius:50px;font-size:.85rem;font-weight:600;transition:background .3s,transform .2s}
.bc:hover{background:#e88870;color:#fff;transform:translateY(-1px)}
.mt{display:none;background:none;border:none;cursor:pointer;padding:.25rem}
.mt span{display:block;width:22px;height:2px;background:var(--dark);margin:5px 0;border-radius:2px;transition:all .3s}

/* === HERO (full-width photo banner) === */
.hero{position:relative;height:620px;overflow:hidden;margin-top:72px}
.hero-bg{position:absolute;inset:0;background:var(--dark);z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-bg--placeholder{width:100%;height:100%;background:linear-gradient(135deg,#546a6a 0%,#3d4f4f 40%,#5a6e6e 70%,#4a5a5a 100%)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,rgba(0,0,0,.35) 100%);z-index:1}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.5rem}
.hero h1{color:#fff;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.25;margin-bottom:1rem;text-shadow:0 2px 20px rgba(0,0,0,.2);font-weight:800;max-width:880px}
.hero h1 em{font-style:normal}
.hero-tagline{font-family:var(--fa);font-size:clamp(1.4rem,3vw,1.9rem);color:rgba(255,255,255,.92);margin-bottom:0;line-height:1.3}

/* === VERVOLG (two-column: text + photo) === */
.vervolg-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:center;padding:0}
.vervolg-grid>div:first-child p{font-size:.9rem;margin-bottom:.65rem;line-height:1.75}
.vervolg-photo{border-radius:4px;aspect-ratio:4/3;overflow:hidden;background:var(--mint);display:flex;align-items:center;justify-content:center;font-family:var(--fa);color:var(--text);font-size:.9rem}
.vervolg-photo img{display:block}

/* === HULPVRAGEN (wavy mint section) === */
.wave-top,.wave-bottom{display:block;line-height:0;margin:0}.wave-top svg,.wave-bottom svg{display:block;width:100%;height:40px}
.hulpvragen{background:var(--mint);padding:1.5rem 0 2.75rem;text-align:center;position:relative;overflow:hidden}
.hv-cloud{position:absolute;z-index:0;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;background-color:var(--green);opacity:.10;width:820px;height:470px;top:50%;left:50%;transform:translate(-50%,-48%)}
.hulpvragen .ct{position:relative;z-index:1}
.hv-vragen{font-family:var(--fa);font-size:1.18rem;color:rgba(126,180,145,.75);line-height:2.1;max-width:620px;margin:.75rem auto 0}
.hv-vragen p{margin-bottom:0}

/* === THREE STEPS (playful blob numbers, blue subtitles) === */
.stappen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.stap-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.stap-nr-wrap{position:relative;width:56px;height:56px;flex-shrink:0}
.stap-nr-wrap svg.blob{position:absolute;inset:-4px;width:64px;height:64px;z-index:0}
.stap-nr{position:relative;z-index:1;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;color:#fff}
.stap-titles{padding-top:.3rem}
.stap-titles h3{font-size:1.15rem;margin:0;line-height:1.25;font-weight:700}
.stap-titles .stap-sub{font-family:var(--fa);font-size:1.1rem;color:var(--blue);margin:0;line-height:1.3}
.stap>p{font-size:.9rem;line-height:1.75;margin-top:.25rem}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;padding:.55rem 1.4rem;border-radius:50px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s}
.bp{background:var(--coral);color:#fff}.bp:hover{background:#e88870;color:#fff;transform:translateY(-2px)}
.bs{background:rgba(255,255,255,0.15);color:#fff;border:1.5px solid rgba(255,255,255,0.35)}.bs:hover{background:rgba(255,255,255,0.25);color:#fff}

/* === SECTIONS === */
.sec{padding:4rem 0}
.sec--cream{background:var(--cream)}
.sec--white{background:var(--white)}
.sec--mint{background:var(--mint)}
.sec--mint .slb{color:var(--green)}
.sec--mint .slb::after{background:var(--green)}
.sec--dark{background:var(--dark);color:#fff}
.sec--dark .slb{color:var(--gold)}.sec--dark h2{color:#fff}
.sec--dark p,.sec--dark li{color:rgba(255,255,255,0.85)}
.slb{font-family:var(--fh);font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--coral);margin-bottom:.5rem;display:inline-block;position:relative}
.slb::after{content:'';display:block;width:40px;height:2px;background:var(--coral);border-radius:1px;margin-top:.35rem;opacity:.4}
.sdiv{height:3px;background:var(--mint);border-radius:2px;max-width:180px;margin:0 auto}

/* === PAGE HEADER === */
.ph{padding:7rem 0 2.5rem;background:linear-gradient(170deg,#faf6f1 0%,var(--mint) 100%);text-align:center;position:relative;overflow:hidden}
.ph::before,.ph::after{content:'';position:absolute;background-color:var(--coral);-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;pointer-events:none}
.ph::before{width:420px;height:260px;top:-70px;right:-80px;opacity:.14;transform:rotate(-6deg)}
.ph::after{width:320px;height:200px;bottom:-60px;left:-70px;opacity:.16;background-color:var(--green);transform:rotate(10deg)}
.ph .slb{position:relative;z-index:1}
.ph h1{position:relative;z-index:1}
.ph>.ct{position:relative;z-index:1}

/* === QUOTE BANNER === */
.qb{background:var(--mint);padding:2.5rem 0;text-align:center}
.qb blockquote{font-family:var(--fa);font-size:clamp(1.3rem,3vw,1.8rem);color:var(--dark);margin:0;padding:0;border:none}
.qb cite{display:block;margin-top:.5rem;font-family:var(--fb);font-size:.85rem;font-style:normal;color:var(--text);opacity:.7}

/* === HULPVRAGEN (handschrift op mintbalk) === */
.hulpvragen-balk{background:var(--mint);padding:3rem 0;text-align:center}
.hulpvragen-balk .vragen{font-family:var(--fa);font-size:1.15rem;color:var(--dark);line-height:2.2;max-width:700px;margin:1.5rem auto 0}
.hulpvragen-balk .vragen p{margin-bottom:.25rem}

/* === RESULTS GRID === */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}
.ri{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:1rem 1.25rem;display:flex;align-items:flex-start;gap:.75rem}
.rc{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.ri p{font-size:.92rem}

/* === ABOUT GRID === */
.agrid{display:grid;grid-template-columns:340px 1fr;gap:3rem;align-items:start}
.aia{position:sticky;top:6rem}
.aph{width:100%;aspect-ratio:3/4;border-radius:20px;background:linear-gradient(160deg,var(--mint),var(--cream));display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--fa);font-style:italic;color:var(--text);padding:2rem;text-align:center}
.creds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.ctag{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:50px;background:var(--mint);font-size:.8rem;font-weight:500;color:var(--dark)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* === VISION PILLARS === */
.vpillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1.5rem}
.pillar{background:var(--white);border-radius:16px;padding:1.5rem;text-align:center;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.pillar h4{margin:.75rem 0 .35rem;font-size:.95rem;color:var(--heading)}
.pillar p{font-size:.85rem;color:var(--text)}
.ico{display:flex;align-items:center;justify-content:center;margin:0 auto}
.ico-lg{width:64px;height:42px;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;background-color:var(--mint);font-size:1.2rem}
.ico-xl{width:76px;height:50px;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;background-color:var(--mint);font-size:1.4rem}

/* === STEP CARDS === */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;position:relative}
.scard{background:var(--white);border-radius:20px;padding:2rem 1.5rem;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.scard:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.snum-wrap{position:relative;width:56px;height:56px;margin-bottom:1rem}
.snum-cloud{position:absolute;inset:-4px;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(-8deg)}
.snum-num{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:1.25rem;color:#fff;z-index:1}
/* Legacy .snum (kept as fallback for any hardcoded usage) */
.snum{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:1rem}
.s1{background:var(--coral)}.s2{background:var(--green)}.s3{background:var(--blue)}
.ssub{font-family:var(--fa);font-size:1rem;color:var(--coral);margin:.25rem 0 .75rem}

/* === TEXT + IMAGE === */
.txt-img{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}
.txt-img--rev{grid-template-columns:300px 1fr}
.txt-img__img{border-radius:16px;overflow:hidden;background:var(--mint);display:flex;align-items:center;justify-content:center;padding:2rem;font-family:var(--fa);color:var(--text)}
.txt-img__img--portrait{aspect-ratio:3/4}
.txt-img__img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* === HERO IMAGE PLACEHOLDER === */
.hip{width:100%;max-width:460px;aspect-ratio:4/5;border-radius:24px;background:linear-gradient(160deg,var(--mint),var(--cream));display:flex;align-items:center;justify-content:center;font-family:var(--fa);font-style:italic;color:var(--text);padding:0;text-align:center;font-size:1rem;overflow:hidden}
.hip img{width:100%;height:100%;object-fit:cover}

/* === RESEARCH AREAS === */
.dareas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-top:1.5rem}
.da{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);border-radius:14px;padding:1rem 1.25rem;text-align:center;font-size:.9rem;font-weight:500;color:var(--mint);display:flex;align-items:center;justify-content:center;min-height:56px;transition:background .3s,transform .3s}
.da:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}

/* === TEST CARDS === */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:1.5rem}
.tcard{background:var(--white);border-radius:20px;padding:2rem;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.tcard h3{color:var(--heading);margin-bottom:.25rem}
.tage{font-family:var(--fa);color:var(--coral);font-size:1rem;margin-bottom:.75rem}
.tdoms{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.td{padding:.3rem .7rem;border-radius:50px;background:var(--mint);font-size:.78rem;font-weight:500;color:var(--dark)}

/* === LAYERS (begeleiding) === */
.tlayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:1.5rem}
.tl{background:var(--white);border-radius:20px;padding:2rem 1.5rem;text-align:center;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.tl:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.tl h3{margin:.75rem 0 .5rem}

/* === SFEERBEELD === */
.sfb{width:100%;height:280px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-family:var(--fa);color:var(--text);font-size:1rem;overflow:hidden;position:relative}
.sfb::after{content:'';position:absolute;inset:0;box-shadow:inset 0 4px 12px rgba(0,0,0,.06)}

/* === CONTACT === */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-top{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:1.5rem}
.portrait-sm{width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:.7rem}
.portrait-sm img{width:100%;height:100%;object-fit:cover}
.cdets{margin:1.5rem 0}
.ci{display:flex;gap:.75rem;margin-bottom:1rem;align-items:flex-start}
.ci strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text);opacity:.6}
.ci a{color:var(--text);text-decoration:none}.ci a:hover{color:var(--coral)}
.cico-css{width:36px;height:36px;border-radius:10px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--dark);flex-shrink:0}
.cfa{background:var(--white);border-radius:20px;padding:2rem;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04)}

/* Contact registraties + beroepsverenigingen + badges */
.cregs{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,0.08)}
.cregs h3{font-size:1rem;margin-bottom:.85rem;color:var(--heading)}
.cregs ul{list-style:none;padding:0;margin:0}
.cregs li{display:flex;gap:1rem;padding:.45rem 0;font-size:.9rem;border-bottom:1px dashed rgba(0,0,0,0.06);flex-wrap:wrap}
.cregs li:last-child{border-bottom:none}
.cregs li span{flex:0 0 130px;color:var(--text);opacity:.7;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;align-self:center}
.cberoep{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,0.08)}
.cberoep h3{font-size:1rem;margin-bottom:.5rem;color:var(--heading)}
.cberoep p{font-size:.9rem;margin-bottom:.75rem}
.cbadges{display:flex;gap:1.25rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
.cbadges img{height:60px;width:auto;object-fit:contain;border-radius:8px;background:var(--white);padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .25s}
.cbadges img:hover{transform:translateY(-2px)}

/* === OUDER-TESTIMONIALS (begeleidingspagina) === */
.testimonials{display:flex;flex-direction:column;gap:1.5rem;max-width:760px;margin:2rem auto 0;align-items:stretch}
.tmcard{position:relative;background:var(--white);border-radius:24px;padding:2.25rem 2.25rem 2rem;border:1px solid rgba(0,0,0,0.05);box-shadow:0 4px 20px rgba(0,0,0,.04);margin:0;overflow:hidden}
.tmcard::before{content:'';position:absolute;top:-30px;right:-30px;width:140px;height:90px;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;opacity:.08;transform:rotate(8deg);pointer-events:none}
.tmcard[data-accent="coral"]::before{background-color:var(--coral)}
.tmcard[data-accent="green"]::before{background-color:var(--green)}
.tmcard[data-accent="gold"]::before{background-color:var(--gold)}
.tmcard:nth-child(2)::before{right:auto;left:-30px;transform:rotate(-10deg)}
.tmquote{position:absolute;top:.4rem;left:1.4rem;font-family:Georgia,serif;font-size:5rem;line-height:1;opacity:.18;font-weight:700}
.tmtext{font-family:var(--fb);font-size:1rem;line-height:1.7;color:var(--text);margin:0 0 1rem;border:none;padding:0;font-style:normal;position:relative;z-index:1}
.tmname{font-family:var(--fa);font-size:1.6rem;font-weight:400;text-align:right;line-height:1;margin:0;position:relative;z-index:1}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem;color:var(--heading)}
.fg input,.fg textarea{width:100%;padding:.65rem .9rem;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-family:var(--fb);font-size:.9rem;background:var(--white);transition:border-color .3s}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--coral)}

/* === CF7 styling — match .fg look inside .cfa === */
.cfa .wpcf7-form p{margin:0 0 1rem}
.cfa .wpcf7-form label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem;color:var(--heading)}
.cfa .wpcf7-form-control-wrap{display:block}
.cfa .wpcf7-form input[type="text"],
.cfa .wpcf7-form input[type="email"],
.cfa .wpcf7-form input[type="tel"],
.cfa .wpcf7-form input[type="url"],
.cfa .wpcf7-form textarea{width:100%;padding:.65rem .9rem;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-family:var(--fb);font-size:.9rem;background:var(--white);transition:border-color .3s;box-sizing:border-box}
.cfa .wpcf7-form input[type="text"]:focus,
.cfa .wpcf7-form input[type="email"]:focus,
.cfa .wpcf7-form input[type="tel"]:focus,
.cfa .wpcf7-form input[type="url"]:focus,
.cfa .wpcf7-form textarea:focus{outline:none;border-color:var(--coral)}
.cfa .wpcf7-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1.5rem;background:var(--coral);color:#fff;border:none;border-radius:999px;font-family:var(--fh);font-size:.95rem;font-weight:500;cursor:pointer;margin-top:.75rem;transition:transform .25s,box-shadow .25s,background .25s;text-align:center}
.cfa .wpcf7-form input[type="submit"]:hover{background:#e88871;transform:translateY(-1px);box-shadow:0 6px 16px rgba(243,153,130,.35)}
.cfa .wpcf7-form input[type="submit"]:disabled{opacity:.6;cursor:wait}
.cfa .wpcf7-spinner{margin:.5rem auto 0;display:block}
.cfa .wpcf7-form .wpcf7-not-valid-tip{color:var(--coral);font-size:.8rem;margin-top:.25rem;display:block}
.cfa .wpcf7-form .wpcf7-response-output{margin:1rem 0 0;padding:.85rem 1rem;border-radius:10px;font-size:.88rem;border:none}
.cfa .wpcf7-form.sent .wpcf7-response-output{background:rgba(126,180,145,.15);color:var(--green)}
.cfa .wpcf7-form.invalid .wpcf7-response-output,
.cfa .wpcf7-form.failed .wpcf7-response-output{background:rgba(243,153,130,.15);color:var(--coral)}

/* === FOOTER (light, matching design) === */
.sf{background:#f5f1ec;border-top:1px solid rgba(0,0,0,.06);padding:2.5rem 0}
.footer-grid{display:grid;grid-template-columns:auto 1fr 1fr 1.5fr;gap:2.5rem;align-items:start}
.footer-brand{min-width:200px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.35rem}
.footer-col li a{font-size:.82rem;color:var(--text);text-decoration:none;opacity:.7}
.footer-col li a:hover{opacity:1;color:var(--coral)}
.footer-praktijk-h{font-family:var(--fh);font-size:.95rem;font-weight:600;color:var(--heading);margin-bottom:.65rem}
.footer-praktijk-list{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;row-gap:.18rem;font-size:.8rem;line-height:1.45;color:var(--text)}
.footer-praktijk-list dt{font-weight:600;color:var(--dark);opacity:.85}
.footer-praktijk-list dd{color:var(--text);opacity:.85;word-break:break-word}
.footer-praktijk-list dd a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.footer-praktijk-list dd a:hover{color:var(--coral);border-color:var(--coral)}
.footer-praktijk-echa{margin-top:.75rem;font-family:var(--fa);font-size:1rem;color:var(--green);line-height:1.3}

/* === FLOATING CONTACT CTA === */
.fab-cta{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.55rem 1.1rem .55rem .55rem;
  background:var(--white);border:1px solid rgba(0,0,0,0.08);border-radius:50px;
  box-shadow:0 8px 28px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  text-decoration:none;color:var(--heading);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease,box-shadow .3s ease;
  max-width:calc(100vw - 2.5rem);
}
.fab-cta.fab-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.fab-cta.fab-hidden{opacity:0!important;transform:translateY(20px)!important;pointer-events:none!important}
.fab-cta:hover{box-shadow:0 12px 36px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.08);color:var(--heading)}
.fab-cta:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.fab-cta-photo{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--mint);position:relative;
}
.fab-cta-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fab-cta-photo::after{
  content:'';position:absolute;right:-2px;bottom:-2px;
  width:12px;height:12px;border-radius:50%;background:var(--green);
  border:2px solid var(--white);
}
.fab-cta-text{display:flex;flex-direction:column;line-height:1.2;padding-right:.25rem}
.fab-cta-line1{font-size:.72rem;font-weight:500;color:var(--text);opacity:.75}
.fab-cta-line2{font-size:.9rem;font-weight:600;font-family:var(--fa);color:var(--coral)}
.fab-cta-close{
  flex-shrink:0;width:22px;height:22px;border:none;background:rgba(0,0,0,.05);
  border-radius:50%;color:var(--text);font-size:1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;padding:0;margin-left:.25rem;opacity:.6;
}
.fab-cta-close:hover{background:rgba(0,0,0,.1);opacity:1}
@media(max-width:480px){
  .fab-cta{right:.75rem;bottom:.75rem;padding:.45rem .9rem .45rem .45rem;gap:.55rem}
  .fab-cta-photo{width:38px;height:38px}
  .fab-cta-line1{font-size:.65rem}
  .fab-cta-line2{font-size:.85rem}
  .fab-cta-close{width:20px;height:20px}
}
/* WordPress admin bar mag hem niet overlappen */
body.admin-bar .fab-cta{bottom:1.25rem}
@media(prefers-reduced-motion:reduce){
  .fab-cta{transition:opacity .01ms,transform .01ms}
}

/* === FADE IN === */
.fi{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.fi.vis{opacity:1;transform:none}
.fi2{opacity:0;transform:translateY(15px);transition:opacity .8s ease .2s,transform .8s ease .2s}.fi2.vis{opacity:1;transform:none}
.fid1{transition-delay:.1s}.fid2{transition-delay:.2s}.fid3{transition-delay:.3s}.fid4{transition-delay:.4s}

/* === ACCESSIBILITY === */
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.bc:focus-visible{outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .fi,.fi2{opacity:1;transform:none}
}

/* === RESPONSIVE === */
@media(max-width:900px){
.vervolg-grid{grid-template-columns:1fr}.vervolg-photo{max-width:400px}
.stappen-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:1.5rem}
.agrid{grid-template-columns:1fr}.aia{position:static}
.sgrid{grid-template-columns:1fr;gap:1.5rem}
.tcards{grid-template-columns:1fr}.tlayers{grid-template-columns:1fr}
.cgrid{grid-template-columns:1fr}
.txt-img,.txt-img--rev{grid-template-columns:1fr}.txt-img__img{max-width:400px}
.contact-top{flex-direction:column;align-items:flex-start}
.nm{display:none}.nm.act{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--white);padding:1.5rem;border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.mt{display:block}
.hero{height:auto;min-height:65vh}
}
@media(max-width:600px){.sec{padding:2.5rem 0}.rgrid{grid-template-columns:1fr}.dareas{grid-template-columns:1fr}.hero{min-height:60vh}.tmcard{padding:2rem 1.4rem 1.5rem}.tmquote{font-size:3.5rem;left:.8rem}.tmname{font-size:1.4rem}}

/* === BLOG === */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}
.bcard{border-radius:16px;overflow:hidden;background:var(--white);border:1px solid rgba(0,0,0,0.06);transition:transform .3s,box-shadow .3s;position:relative}
.bcard:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
.bcard-link{text-decoration:none;color:inherit;display:block}
.bcard-img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--mint),var(--cream));position:relative}
.bcard-img img{width:100%;height:100%;object-fit:cover}
.bcard-img--ph{display:flex;align-items:center;justify-content:center}
/* Subtiel wolkje op hover in elke kaart */
.bcard-img::after{content:'';position:absolute;width:120px;height:75px;bottom:-20px;right:-25px;opacity:0;background-color:#fff;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(-8deg);transition:opacity .3s ease}
.bcard:hover .bcard-img::after{opacity:.35}
.bcard-body{padding:1.25rem;position:relative}
.bcard-date{font-family:var(--fa);font-size:1rem;color:var(--green);display:block;margin-bottom:.15rem}
.bcard-body h3{font-size:1.1rem;color:var(--heading);margin:.15rem 0 .5rem;line-height:1.3;font-weight:600}
.bcard-body p{font-size:.88rem;color:var(--text);line-height:1.6;margin-bottom:.75rem}
.bcard-more{font-size:.85rem;font-weight:600;color:var(--coral);transition:color .2s}
.bcard:hover .bcard-more{color:#e88870}

/* Kleuren-rotatie per kaart via data-accent */
.bcard[data-accent="1"] .bcard-date{color:var(--green)}
.bcard[data-accent="2"] .bcard-date{color:var(--gold)}
.bcard[data-accent="3"] .bcard-date{color:var(--blue)}
.bcard[data-accent="4"] .bcard-date{color:var(--lavender)}
.bcard[data-accent="1"] .bcard-more{color:var(--green)}
.bcard[data-accent="2"] .bcard-more{color:var(--gold)}
.bcard[data-accent="3"] .bcard-more{color:var(--blue)}
.bcard[data-accent="4"] .bcard-more{color:var(--lavender)}

/* Placeholder backgrounds — drie-wolken compositie (logo praatbel motief) */
.blog-img-ph{width:100%;height:100%;position:relative;overflow:hidden}
.blog-img-ph-1{background:linear-gradient(140deg,#faf6f1,var(--mint))}
.blog-img-ph-2{background:linear-gradient(140deg,#faf6f1,#fef0e8)}
.blog-img-ph-3{background:linear-gradient(140deg,#faf6f1,#edf2f8)}
.blog-img-ph-4{background:linear-gradient(140deg,#faf6f1,#f4eef9)}
.blog-img-ph::before,.blog-img-ph::after,.blog-img-ph>.ph-cloud{
  content:'';position:absolute;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;
}
/* Variant 1 (groen basis): blauw + coral + goud — als logo */
.blog-img-ph-1::before{width:55%;height:55%;top:8%;left:6%;background-color:var(--blue);opacity:.55;transform:rotate(-8deg)}
.blog-img-ph-1::after{width:50%;height:46%;top:18%;left:40%;background-color:var(--coral);opacity:.7;transform:rotate(10deg)}
.blog-img-ph-1>.ph-cloud{width:42%;height:40%;top:50%;left:26%;background-color:var(--gold);opacity:.7;transform:rotate(-4deg)}
/* Variant 2 (warm basis): lavender + coral + goud */
.blog-img-ph-2::before{width:52%;height:52%;top:10%;left:8%;background-color:var(--lavender);opacity:.55;transform:rotate(-10deg)}
.blog-img-ph-2::after{width:48%;height:44%;top:22%;left:42%;background-color:var(--coral);opacity:.72;transform:rotate(8deg)}
.blog-img-ph-2>.ph-cloud{width:40%;height:38%;top:48%;left:28%;background-color:var(--gold);opacity:.72;transform:rotate(-6deg)}
/* Variant 3 (koel basis): groen + blauw + lavender */
.blog-img-ph-3::before{width:50%;height:50%;top:8%;left:6%;background-color:var(--green);opacity:.55;transform:rotate(-8deg)}
.blog-img-ph-3::after{width:50%;height:45%;top:20%;left:40%;background-color:var(--blue);opacity:.65;transform:rotate(10deg)}
.blog-img-ph-3>.ph-cloud{width:38%;height:36%;top:50%;left:30%;background-color:var(--lavender);opacity:.65;transform:rotate(-4deg)}
/* Variant 4 (zacht basis): coral + lavender + groen */
.blog-img-ph-4::before{width:52%;height:52%;top:8%;left:8%;background-color:var(--coral);opacity:.55;transform:rotate(-8deg)}
.blog-img-ph-4::after{width:48%;height:44%;top:22%;left:42%;background-color:var(--lavender);opacity:.65;transform:rotate(10deg)}
.blog-img-ph-4>.ph-cloud{width:40%;height:38%;top:50%;left:28%;background-color:var(--green);opacity:.65;transform:rotate(-4deg)}

/* === FEATURED POST (bovenaan archive) === */
.blog-featured{background:var(--white);border-radius:20px;overflow:hidden;margin-bottom:3rem;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s;position:relative}
.blog-featured:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.08)}
.blog-featured-link{display:grid;grid-template-columns:1fr 1fr;text-decoration:none;color:inherit}
.blog-featured-img{position:relative;min-height:320px;overflow:hidden;background:linear-gradient(160deg,var(--mint),var(--gold))}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-featured-img::after{content:'';position:absolute;width:220px;height:140px;top:-30px;right:-40px;opacity:.2;background-color:var(--coral);-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(-6deg);pointer-events:none}
.blog-featured-body{padding:2rem 2rem 2rem}
.blog-featured-body h2{font-size:1.6rem;color:var(--heading);margin:.5rem 0 .5rem;line-height:1.25;font-weight:600}
.blog-featured-body p{font-size:.95rem;color:var(--text);line-height:1.7;margin:.75rem 0 1rem}
.blog-more{font-size:.9rem;font-weight:600;color:var(--coral);display:inline-block}

/* === TAGS & BADGES === */
.blog-tags-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.5rem}
.blog-tag{display:inline-block;padding:.25rem .75rem;background:rgba(243,153,130,.15);color:var(--coral);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:50px}
.blog-tag-cat{background:rgba(126,180,145,.15);color:var(--green)}
.blog-tag-inline{display:inline-block;font-size:.7rem;font-weight:600;color:var(--coral);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}

.blog-date{display:block;font-family:var(--fa);font-size:1.1rem;color:var(--green);margin:0 0 .25rem}

/* === PAGINATION === */
.bpag{margin-top:3rem;text-align:center}
.bpag .nav-links{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.bpag .page-numbers{padding:.5rem 1rem;border-radius:10px;background:var(--white);border:1px solid rgba(0,0,0,0.08);font-size:.9rem;color:var(--text);text-decoration:none;transition:all .2s}
.bpag .page-numbers:hover{border-color:var(--coral);color:var(--coral)}
.bpag .page-numbers.current{background:var(--coral);color:#fff;border-color:var(--coral)}

/* === EMPTY STATE === */
.blog-empty{text-align:center;padding:4rem 0}

/* === SINGLE POST === */
.blog-single-ph{padding-bottom:2rem}
.blog-back-link{font-family:var(--fa);font-size:1.05rem;color:var(--coral);text-decoration:none;transition:color .2s}
.blog-back-link:hover{color:#e88870}
.blog-post-meta{display:flex;justify-content:center;gap:.75rem;align-items:center;font-size:.85rem;color:var(--text);opacity:.85;margin-top:.75rem;flex-wrap:wrap}
.blog-post-meta time{font-family:var(--fa);font-size:1.1rem;color:var(--green);opacity:1}
.blog-meta-sep{opacity:.5}

/* Hero image op blogpost */
.blog-hero-img{max-width:900px;margin:-1rem auto 2rem;padding:0 1.5rem;position:relative;z-index:2}
.blog-hero-img-inner{border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.08);aspect-ratio:16/9;background:linear-gradient(140deg,var(--mint),var(--lavender))}
.blog-hero-img-inner img{width:100%;height:100%;object-fit:cover}

/* === AUTHOR BOX === */
.blog-author{max-width:720px;margin:2.5rem auto 0;padding:1.5rem 2rem;background:#faf6f1;border-radius:20px;display:flex;gap:1.25rem;align-items:center;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.04)}
.blog-author::after{content:'';position:absolute;width:200px;height:125px;top:-30px;right:-50px;opacity:.12;background-color:var(--gold);-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(-5deg);pointer-events:none}
.blog-author-photo{flex-shrink:0;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--mint);display:flex;align-items:center;justify-content:center;color:var(--dark);font-weight:600;font-size:1.5rem;position:relative;z-index:1;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.blog-author-photo img{width:100%;height:100%;object-fit:cover;display:block}
.blog-author-info{position:relative;z-index:1;flex:1}
.blog-author-name{font-size:1rem;font-weight:600;color:var(--heading);margin:0}
.blog-author-role{font-family:var(--fa);font-size:1rem;color:var(--coral);margin:.1rem 0 .35rem}
.blog-author-bio{font-size:.88rem;color:var(--text);line-height:1.6;margin:0}

/* === RELATED POSTS === */
.blog-related{position:relative;overflow:hidden}
.blog-related::before{content:'';position:absolute;width:260px;height:165px;top:-40px;right:-60px;opacity:.1;background-color:var(--coral);-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(-6deg);pointer-events:none}
.blog-related::after{content:'';position:absolute;width:200px;height:125px;bottom:-40px;left:-50px;opacity:.1;background-color:var(--green);-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain;transform:rotate(8deg);pointer-events:none}
.blog-related>.ct{position:relative;z-index:1}
.blog-related-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* === RESPONSIVE BLOG === */
@media(max-width:768px){
  .blog-featured-link{grid-template-columns:1fr}
  .blog-featured-img{min-height:220px;aspect-ratio:16/9}
  .blog-featured-body{padding:1.5rem}
  .blog-featured-body h2{font-size:1.3rem}
  .blog-author{flex-direction:column;text-align:center;padding:1.5rem}
  .blog-author-photo{width:64px;height:64px}
  .blog-hero-img{margin-top:-.5rem;padding:0 1rem}
}
@media(max-width:600px){.bgrid{grid-template-columns:1fr}}

/* === PAGE CONTENT === */
.pcontent{max-width:720px;line-height:1.8;margin:0 auto}
.pcontent h2{font-size:1.5rem;margin:2.25rem 0 .75rem;color:var(--heading);position:relative;display:inline-block;padding-bottom:.15rem}
.pcontent h2::after{content:'';display:block;width:70%;max-width:180px;height:7px;margin-top:.2rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6'><path d='M2,3 Q20,1 40,3 T78,3' stroke='%23fabc6c' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.75'/></svg>");background-repeat:no-repeat;background-size:contain;background-position:left center}
.pcontent h3{font-size:1.2rem;margin:1.75rem 0 .5rem;color:var(--heading)}
.pcontent p{margin-bottom:1rem;font-size:1rem;color:var(--text)}
.pcontent ul,.pcontent ol{margin:1rem 0 1rem 1.5rem}
.pcontent li{margin-bottom:.5rem;color:var(--text)}
/* Blockquote als zachte praatbel (logo motief) */
.pcontent blockquote{
  position:relative;
  margin:2rem 0 2.25rem;padding:1.25rem 1.5rem 1.5rem 3rem;
  background:rgba(229,242,232,.55);
  border-radius:22px 22px 22px 6px;
  font-family:var(--fa);font-size:1.4rem;line-height:1.5;color:var(--heading);
  border:none;
}
.pcontent blockquote::before{
  content:'"';position:absolute;top:.25rem;left:1rem;
  font-family:Georgia,serif;font-size:3.5rem;color:var(--green);opacity:.4;
  line-height:1;font-weight:700;
}
.pcontent blockquote::after{
  content:'';position:absolute;left:14px;bottom:-8px;
  width:20px;height:20px;background:rgba(229,242,232,.55);
  border-radius:0 0 60% 10%;
  transform:skew(-18deg);
}
.pcontent blockquote p{font-family:var(--fa);font-size:1.4rem;color:var(--heading);margin:0}
.pcontent img{max-width:100%;height:auto;border-radius:16px;margin:1.75rem 0;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.pcontent a{color:var(--coral);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s}
.pcontent a:hover{color:#e88870}
.pcontent strong{color:var(--heading);font-weight:600}
.pcontent em{font-style:italic;color:var(--heading)}
.pcontent h4{font-size:1.05rem;margin:1.5rem 0 .4rem;color:var(--heading);font-weight:600}

/* Speelse list-bullets: coral wolkje i.p.v. browser-default */
.pcontent ul{list-style:none;padding-left:0;margin:1rem 0}
.pcontent ul li{position:relative;padding-left:1.75rem;margin-bottom:.5rem;color:var(--text)}
.pcontent ul li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:.85rem;height:.6rem;
  background-color:var(--coral);
  -webkit-mask:var(--cloud-svg) no-repeat center/contain;
  mask:var(--cloud-svg) no-repeat center/contain;
}
.pcontent ol{padding-left:1.5rem;margin:1rem 0}
.pcontent ol li{margin-bottom:.5rem;color:var(--text);padding-left:.35rem}
.pcontent ol li::marker{color:var(--coral);font-weight:700}

/* Geneste lijsten netjes inspringen */
.pcontent ul ul,.pcontent ol ol,.pcontent ul ol,.pcontent ol ul{margin:.4rem 0 .4rem 0}

/* Scheidingsblok (Gutenberg <hr>) als zachte mint-golf */
.pcontent hr{
  border:none;height:14px;margin:2.5rem auto;max-width:200px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2,7 Q25,1 50,7 T100,7 T150,7 T198,7' stroke='%237eb491' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:contain;
}

/* Anker-offset: voorkomt dat #artikel-1 onder sticky header verdwijnt */
.pcontent h2[id],.pcontent h3[id],.pcontent h4[id]{scroll-margin-top:90px}

/* Print: schoner, geen decoratieve achtergronden, blockquote als gewone tekst */
@media print{
  .pcontent{max-width:none;line-height:1.6;color:#000}
  .pcontent h2::after,.pcontent hr{background-image:none}
  .pcontent hr{border-top:1px solid #ccc;height:0}
  .pcontent blockquote{background:none;border-left:3px solid #999;border-radius:0;padding:.5rem 0 .5rem 1rem;font-family:inherit;font-size:1rem}
  .pcontent blockquote::before,.pcontent blockquote::after{display:none}
  .pcontent blockquote p{font-family:inherit;font-size:1rem}
  .pcontent ul li::before{background-color:#666}
  .pcontent a{color:#000;text-decoration:underline}
}

/* Gutenberg-block-compatibility: laat WP-block-wrappers gewoon de pcontent-styling overnemen */
.pcontent .wp-block-quote{margin:2rem 0 2.25rem}
.pcontent .wp-block-quote cite,.pcontent .wp-block-pullquote cite{display:block;margin-top:.6rem;font-family:var(--ff);font-size:.9rem;color:var(--text);font-style:normal;opacity:.8}
.pcontent .wp-block-separator{border:none}
.pcontent .has-text-align-center{text-align:center}
.pcontent .has-text-align-right{text-align:right}
/* Lead-paragraph: Gutenberg "Large" font-size in de paragraaf-toolbar */
.pcontent .has-large-font-size,.pcontent p.is-style-lead{font-size:1.15rem;line-height:1.7;color:var(--heading);margin-bottom:1.5rem}

/* Handgeschreven underline onder blog-single titel */
.blog-single-ph h1{position:relative;display:inline-block}
.blog-single-ph h1::after{content:'';display:block;width:90px;height:10px;margin:.5rem auto 0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10'><path d='M3,5 Q22,1 45,5 T87,5' stroke='%23f39982' stroke-width='2.2' stroke-linecap='round' fill='none' opacity='0.75'/></svg>");background-repeat:no-repeat;background-position:center;background-size:contain}

/* Lege staat met wolken-scène */
.blog-empty{text-align:center;padding:4rem 0;position:relative}
.blog-empty-scene{position:relative;width:200px;height:120px;margin:0 auto 1.25rem}
.blog-empty-scene span{position:absolute;-webkit-mask:var(--cloud-svg) no-repeat center/contain;mask:var(--cloud-svg) no-repeat center/contain}
.blog-empty-scene span:nth-child(1){width:75%;height:75%;top:20%;left:3%;background-color:var(--blue);opacity:.35;transform:rotate(-10deg)}
.blog-empty-scene span:nth-child(2){width:65%;height:60%;top:5%;left:25%;background-color:var(--coral);opacity:.4;transform:rotate(8deg)}
.blog-empty-scene span:nth-child(3){width:55%;height:50%;top:40%;left:45%;background-color:var(--gold);opacity:.4;transform:rotate(-5deg)}

@media(max-width:600px){.bgrid{grid-template-columns:1fr}}

/* === PLAYFUL SUBPAGE ACCENTS === */
.sec h3{color:var(--heading);position:relative}
.sec--cream .scard,.sec--cream .tcard,.sec--cream .pillar,.sec--cream .tl{background:var(--white)}
.sec--white .scard,.sec--white .tcard,.sec--white .pillar,.sec--white .tl{background:#faf8f5}

/* Accent cloud-icons in pillars & layers — each gets a brand color and a subtle tilt */
.pillar:nth-child(1) .ico-lg,.tl:nth-child(1) .ico-xl{background-color:var(--coral);transform:rotate(-6deg)}
.pillar:nth-child(2) .ico-lg,.tl:nth-child(2) .ico-xl{background-color:var(--green);transform:rotate(8deg)}
.pillar:nth-child(3) .ico-lg,.tl:nth-child(3) .ico-xl{background-color:var(--gold);transform:rotate(-4deg)}
.pillar:nth-child(4) .ico-lg{background-color:var(--blue);transform:rotate(10deg)}

/* Tags and badges — warmer */
.td{padding:.3rem .7rem;border-radius:50px;background:var(--mint);font-size:.78rem;font-weight:500;color:var(--dark);transition:background .3s}
.td:hover{background:rgba(126,180,145,.25)}
.ctag{transition:transform .2s}
.ctag:hover{transform:translateY(-1px)}

/* Portrait photos — organic shape with subtle shadow */
.aph{box-shadow:0 8px 32px rgba(0,0,0,.08)}
.portrait-sm{box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* Contact icon circles — brand colors rotation */
.ci:nth-child(1) .cico-css{background:rgba(243,153,130,.15);color:var(--coral)}
.ci:nth-child(2) .cico-css{background:rgba(126,180,145,.15);color:var(--green)}
.ci:nth-child(3) .cico-css{background:rgba(118,159,210,.15);color:var(--blue)}
.ci:nth-child(4) .cico-css{background:rgba(250,188,108,.18);color:#c98a3e}

/* Buttons — add subtle shadow */
.bp{box-shadow:0 4px 14px rgba(243,153,130,.3)}
.bp:hover{box-shadow:0 6px 20px rgba(243,153,130,.4)}

/* Dark section tiles — subtle glow */
.sec--dark .da{box-shadow:0 2px 12px rgba(0,0,0,.15)}

/* Mint section tiles — light context inversion */
.sec--mint .da{background:var(--white);border:1px solid rgba(126,180,145,0.25);color:var(--heading);box-shadow:0 2px 10px rgba(126,180,145,0.12)}
.sec--mint .da:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 16px rgba(126,180,145,0.18)}