/*
Theme Name:   DoReMini
Theme URI:    https://www.doremini.be
Description:  Child-theme met de volledige huisstijl van DoReMini Dansstudio. Alle opmaak staat in dit ene bestand, zodat je de website later makkelijk kan aanpassen zonder aan het moedertheme te raken.
Author:       DoReMini
Template:     astra
Version:      1.3.8
Text Domain:  doremini-child
*/

/* Lettertypes worden geladen via functions.php (wp_enqueue_style). */

/* ===========================================================
   DOREMINI DANSSTUDIO — GLOBALE STYLESHEET
   Eén stylesheet voor alle pagina's van de website.
   Volgorde: 1 tokens · 2 basis · 3 typografie · 4 knoppen
             5 versieringen · 6 header · 7 hero · 8 secties
             9 componenten · 10 footer · 11 responsive
   =========================================================== */


/* ====== 1. TOKENS ========================================= */
:root {
  --cream:#fbf7f3;
  --paper:#fffdfb;
  --ink:#3f3936;
  --muted:#756d68;
  --pink:#e7b6b0;
  --pink-dark:#bd7d77;
  --pink-soft:#f4dedd;
  --sage:#aebaa2;
  --sage-dark:#66745d;
  --sage-soft:#dfe6da;
  --peach:#edc8a6;
  --gold:#d9ad5d;
  --gold-soft:#f5e1bb;
  --mauve:#cdb8c8;
  --mauve-soft:#e6dbe4;
  --line:rgba(63,57,54,.12);
  --shadow:0 18px 50px rgba(91,70,62,.10);
  --radius:30px;
  --max:1160px;
  --header:78px;
}


/* ====== 2. BASIS ========================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(231,182,176,.20),transparent 26rem),
    radial-gradient(circle at 92% 28%,rgba(174,186,162,.19),transparent 28rem),
    var(--cream);
  font-family:"DM Sans",system-ui,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:radial-gradient(rgba(80,65,58,.08) .55px,transparent .55px);
  background-size:7px 7px;
  z-index:-1;
}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#f0e7e0}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--pink),var(--sage));border:3px solid #f0e7e0;border-radius:99px}
*{scrollbar-width:thin;scrollbar-color:var(--pink) #f0e7e0}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}

:focus-visible{outline:3px solid var(--pink-dark);outline-offset:3px;border-radius:6px}

.container{width:min(calc(100% - 42px),var(--max));margin:auto}
.container.narrow{max-width:880px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--sage-dark);color:#fff;padding:12px 20px;border-radius:0 0 14px 0}
.skip-link:focus{left:0}


/* ====== 3. TYPOGRAFIE ===================================== */
h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0;
}
h1{font-size:clamp(3.3rem,7vw,6.7rem)}
h2{font-size:clamp(2.6rem,5vw,4.5rem)}
h3{font-size:1.8rem}
h4{font-size:1.22rem;line-height:1.25}
p{margin:0 0 1rem}
.script{font-family:"Patrick Hand",cursive;color:var(--pink-dark);font-size:1.35rem}
.pink{color:var(--pink-dark)}
.sage{color:var(--sage-dark)}
.gold{color:var(--gold)}
.lead{max-width:630px;font-size:1.09rem;color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--sage-dark);font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase
}
.eyebrow:before,.eyebrow:after{
  content:"";height:1px;width:28px;background:currentColor;opacity:.65
}

/* --- Verfveeg achter een woord ---------------------------
   BELANGRIJK: .brush zelf krijgt GEEN z-index. Daardoor maakt
   het element geen eigen stapelcontext en zakt de veeg (::before,
   z-index:-1) naar de onderste laag van de kop. Zo valt de veeg
   altijd ACHTER de tekst ernaast en blokkeert die geen woorden.
   De `isolation` hieronder houdt de veeg netjes binnen de kop.  */
.brush{position:relative;display:inline-block}
.brush:before{
  content:"";position:absolute;z-index:-1;left:-3%;right:-7%;top:20%;bottom:4%;
  background:var(--pink-soft);
  border-radius:52% 48% 44% 56% / 55% 44% 56% 45%;
  transform:rotate(-2deg)
}
.brush.sage:before{background:var(--sage-soft)}
.brush.gold:before{background:var(--gold-soft)}
.brush.mauve:before{background:var(--mauve-soft)}

/* Elk element dat een .brush kan bevatten, wordt een eigen
   stapelcontext zodat z-index:-1 niet achter sectie-achtergronden valt. */
h1,h2,h3,h4,.lead,.has-brush{isolation:isolate}


/* ====== 4. KNOPPEN ======================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 22px;border:1px solid transparent;
  border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
.btn:after{
  content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transition:transform .5s ease
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(70,50,45,.14)}
.btn:hover:after{transform:translateX(110%)}
.btn-primary{background:var(--pink-dark);color:white}
.btn-primary:hover{background:#a96e69}
.btn-sage{background:var(--sage-dark);color:white}
.btn-sage:hover{background:#55624e}
.btn-soft{background:rgba(255,255,255,.68);border-color:var(--line)}
.btn-soft:hover{background:white}
.btn-big{min-height:58px;padding:15px 27px;font-size:1rem;box-shadow:0 10px 28px rgba(189,125,119,.22)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-row.center{justify-content:center}

.text-link{display:inline-block;margin-top:10px;font-weight:700;color:var(--pink-dark)}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}

.pulse{animation:pulse 2.7s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 28px rgba(189,125,119,.18)}50%{box-shadow:0 15px 38px rgba(189,125,119,.34)}}


/* ====== 5. VERSIERINGEN =================================== */
/* De zwevende muzieknootjes en voetjes blijven exact zoals ze waren. */
.decor{position:absolute;pointer-events:none;user-select:none;z-index:2}
.note{font-size:1.8rem;color:var(--pink-dark);animation:floatNote 5s ease-in-out infinite}
.note:nth-child(2){animation-delay:1.2s;color:var(--sage-dark)}
.note:nth-child(3){animation-delay:2.4s;color:var(--gold)}
.feet{font-size:1.65rem;letter-spacing:5px;color:var(--sage-dark);animation:feet 6s ease-in-out infinite}
@keyframes floatNote{0%,100%{opacity:0;transform:translateY(12px) rotate(-8deg)}25%,75%{opacity:.72}50%{opacity:1;transform:translateY(-18px) rotate(8deg)}}
@keyframes feet{0%,100%{opacity:0;transform:translateY(8px) rotate(-4deg)}35%,70%{opacity:.55}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:.32;transform:scale(.9) rotate(-4deg)}50%{opacity:.95;transform:scale(1.06) rotate(4deg)}}
@keyframes driftConfetti{0%,100%{opacity:.4;transform:translateY(7px)}50%{opacity:.9;transform:translateY(-8px)}}

/* Handgetekende versieringen in de stijl van de flyer.
   Ze staan als achtergrondafbeelding in de CSS, zodat de HTML
   licht blijft en je ze met één regel kunt aan- of uitzetten. */
.deco{position:absolute;pointer-events:none;user-select:none;
  background-repeat:no-repeat;background-size:contain;background-position:center;z-index:0}


.deco-bunting{
  width:280px;height:110px;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 110'%3E%3Cpath d='M4 10C70 44 150 62 276 52' fill='none' stroke='%23a3b195' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M30 24l30 12-12 30z' fill='%23a3b195'/%3E%3Cpath d='M74 42l32 10-16 29z' fill='%23e7b6b0'/%3E%3Cpath d='M120 54l32 6-19 27z' fill='%23d9ad5d'/%3E%3Cpath d='M166 60l32 3-21 26z' fill='%23a3b195'/%3E%3Cpath d='M212 61l32-1-24 25z' fill='%23e7b6b0'/%3E%3C/svg%3E")
}

.deco-rainbow{
  width:150px;height:100px;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='13'%3E%3Cpath d='M14 92a61 61 0 01122 0' stroke='%23e7b6b0'/%3E%3Cpath d='M31 92a44 44 0 0188 0' stroke='%23edc8a6'/%3E%3Cpath d='M48 92a27 27 0 0154 0' stroke='%23a3b195'/%3E%3C/g%3E%3Cpath d='M75 74c-5-8-15-4-13 4 1 5 8 9 13 13 5-4 12-8 13-13 2-8-8-12-13-4z' fill='%23d98a83'/%3E%3C/svg%3E")
}

.deco-crown{
  width:110px;height:100px;opacity:.95;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cg stroke='%23d9ad5d' stroke-width='4.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M28 74h54l6-34-19 14-14-22-14 22-19-14z' stroke-linejoin='round'/%3E%3Cpath d='M55 8v10M20 18l6 8M90 18l-6 8M6 44l10 3M104 44l-10 3M12 68l9-2M98 68l-9-2'/%3E%3C/g%3E%3C/svg%3E")
}

.deco-sparkle{
  width:80px;height:80px;opacity:.9;
  animation:twinkle 4.6s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg stroke-linecap='round' stroke-width='4.4' fill='none'%3E%3Cpath d='M40 8v13' stroke='%23d98a83'/%3E%3Cpath d='M18 16l8 10' stroke='%23d9ad5d'/%3E%3Cpath d='M62 16l-8 10' stroke='%23b6a1c4'/%3E%3Cpath d='M8 40h12' stroke='%23a3b195'/%3E%3Cpath d='M72 40H60' stroke='%23d98a83'/%3E%3C/g%3E%3Cpath d='M40 40c-6-10-19-5-16 5 2 7 10 12 16 17 6-5 14-10 16-17 3-10-10-15-16-5z' fill='%23e7b6b0'/%3E%3C/svg%3E")
}

.deco-confetti{
  width:150px;height:80px;opacity:.8;
  animation:driftConfetti 7s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 80'%3E%3Ccircle cx='16' cy='22' r='7' fill='%23e7b6b0'/%3E%3Ccircle cx='44' cy='12' r='5' fill='%23a3b195'/%3E%3Ccircle cx='68' cy='28' r='8' fill='%23d9ad5d'/%3E%3Ccircle cx='96' cy='14' r='5' fill='%23c0a8cf'/%3E%3Ccircle cx='122' cy='30' r='7' fill='%23e7b6b0'/%3E%3Ccircle cx='30' cy='52' r='4' fill='%23d9ad5d'/%3E%3Ccircle cx='58' cy='62' r='6' fill='%23a3b195'/%3E%3Ccircle cx='88' cy='54' r='4' fill='%23e7b6b0'/%3E%3Ccircle cx='116' cy='62' r='5' fill='%23c0a8cf'/%3E%3Ccircle cx='140' cy='48' r='4' fill='%23a3b195'/%3E%3C/svg%3E")
}

.deco-notes-row{
  width:200px;height:70px;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70'%3E%3Cg fill='none' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M28 52V14l18 7' stroke='%23a3b195'/%3E%3Cpath d='M78 52V14l18 7' stroke='%23d98a83'/%3E%3Cpath d='M128 52V14l18 7' stroke='%23b6a1c4'/%3E%3Cpath d='M172 52V14l18 7' stroke='%23d9ad5d'/%3E%3C/g%3E%3Cg%3E%3Cellipse cx='21' cy='52' rx='9' ry='7' fill='%23a3b195'/%3E%3Cellipse cx='71' cy='52' rx='9' ry='7' fill='%23d98a83'/%3E%3Cellipse cx='121' cy='52' rx='9' ry='7' fill='%23b6a1c4'/%3E%3Cellipse cx='165' cy='52' rx='9' ry='7' fill='%23d9ad5d'/%3E%3C/g%3E%3C/svg%3E")
}

.deco-bubble{
  width:110px;height:100px;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cpath d='M55 8a42 34 0 100 68c6 0 12-1 17-3l20 11-5-19a33 33 0 0010-23A42 34 0 0055 8z' fill='%23e7b6b0'/%3E%3Cpath d='M55 32c-6-9-18-4-15 5 2 6 9 11 15 15 6-4 13-9 15-15 3-9-9-14-15-5z' fill='%23fffdfb'/%3E%3C/svg%3E")
}


/* ====== 6. HEADER & NAVIGATIE ============================= */
.site-header{
  height:var(--header);position:fixed;inset:0 0 auto;z-index:1000;
  background:rgba(251,247,243,.90);backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(63,57,54,.08)
}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}

/* Logo + naam. Het hele blok is één link naar de startpagina. */
.brand{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:4px 12px 4px 4px;border-radius:999px;
  transition:background .2s ease
}
.brand:hover{background:rgba(231,182,176,.20)}
.brand-logo{width:60px;height:50px;object-fit:contain;object-position:center;flex:0 0 auto}
.brand-name{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.62rem;line-height:1;letter-spacing:-.03em;white-space:nowrap
}
.b-do{color:var(--pink-dark)}
.b-re{color:var(--sage-dark)}
.b-mini{color:var(--gold)}
.brand-fallback{display:none;font-family:"Fraunces",serif;font-size:1.8rem}

.nav{display:flex;align-items:center;gap:4px}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;font-size:.83rem;font-weight:600;padding:10px 12px;border-radius:999px;color:#574f4b}
.nav a:hover{background:var(--pink-soft);color:var(--pink-dark)}
.nav a[aria-current="page"],
.nav .current-menu-item > a{background:var(--sage-soft);color:var(--sage-dark)}
.nav li.cta{border-radius:999px}
.nav a.cta,
.nav li.cta > a{background:var(--sage-dark);color:white;padding-inline:18px;border-radius:999px}
.nav a.cta:hover,
.nav li.cta > a:hover{background:#55624e;color:white}
.menu{display:none;border:0;background:transparent;font-size:1.4rem;width:44px;height:44px;border-radius:50%;cursor:pointer}


/* ====== 7. HERO =========================================== */
.hero{
  min-height:calc(100vh - 15px);padding:calc(var(--header) + 42px) 0 72px;
  display:grid;align-items:center;position:relative;overflow:hidden
}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:55px;align-items:center}
.hero-copy h1{margin:16px 0 20px}
/* De spreuk staat bewust in één kleur (sage) — zoals op de flyer. */
.hero-copy h1,
.slogan{color:var(--sage-dark)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:.87rem;color:var(--muted)}
.hero-meta strong{color:var(--sage-dark)}

/* De organische vorm achter het hero-logo.
   Het logo is zelf een volledige cirkel, dus de vorm is een
   licht onregelmatige cirkel in plaats van de vroegere schildvorm
   die naar onder toe smaller werd. Het binnenringetje is weg,
   want dat kwam dubbelop met de cirkellijn van het logo zelf. */
.logo-card{
  position:relative;padding:38px 54px 100px;max-width:575px;margin-inline:auto;
  background:rgba(255,255,255,.64);
  border:1px solid rgba(63,57,54,.07);
  /* Plectrumvorm: breed en rond bovenaan, uitlopend naar een zachte
     punt onderaan. De extra ruimte onder het logo hoort bij die vorm,
     zodat de ronde logolijn nergens buiten de rand valt. */
  border-radius:47% 53% 44% 56% / 28% 30% 70% 72%;
  box-shadow:var(--shadow);
  transform:rotate(1deg)
}
/* Het dunne binnenlijntje volgt dezelfde plectrumvorm. */
.logo-card:before{
  content:"";position:absolute;inset:26px;
  border:1px solid rgba(189,125,119,.26);
  border-radius:46% 54% 43% 57% / 27% 29% 71% 73%;
  transform:rotate(-2deg)
}
.hero-logo{
  display:block;width:100%;max-width:590px;margin:auto;position:relative;z-index:1;
  border-radius:50%
}
.badge{
  position:absolute;left:-25px;bottom:20px;width:135px;height:135px;border-radius:50%;
  background:var(--peach);display:grid;place-items:center;text-align:center;
  font-family:"Fraunces",serif;font-size:1.2rem;line-height:1.15;
  transform:rotate(-8deg);box-shadow:0 15px 35px rgba(90,65,52,.12);z-index:3
}

/* Compacte hero voor alle onderliggende pagina's */
.page-hero{
  padding:calc(var(--header) + 62px) 0 52px;
  position:relative;overflow:hidden;text-align:center
}
.page-hero .container{max-width:840px}
.page-hero h1{font-size:clamp(2.7rem,6vw,4.9rem);margin:15px 0 18px}
.page-hero p{color:var(--muted);font-size:1.07rem;max-width:640px;margin-inline:auto}
.page-hero .btn-row{justify-content:center;margin-top:24px}


/* ====== 8. SECTIES ======================================== */
.strip{
  padding:16px 0;background:var(--sage-dark);color:white;overflow:hidden;
  border-block:1px solid rgba(255,255,255,.25)
}
.strip-inner{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:.83rem;font-weight:600}
.strip span{opacity:.95}

section{padding:105px 0;position:relative}
section.tight{padding:70px 0}
.soft{background:rgba(255,255,255,.45)}
.section-head{max-width:760px;margin-bottom:45px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:12px 0 14px}
.section-head p{color:var(--muted);font-size:1.02rem}


/* ====== 9. COMPONENTEN ==================================== */

/* --- Aanbodkaarten --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{
  padding:31px;border-radius:var(--radius);border:1px solid rgba(63,57,54,.07);
  box-shadow:0 12px 38px rgba(85,65,58,.055);transition:transform .25s ease,box-shadow .25s ease
}
.card:hover{transform:translateY(-6px) rotate(-.3deg);box-shadow:var(--shadow)}
.card:nth-child(1){background:var(--sage-soft)}
.card:nth-child(2){background:var(--pink-soft)}
.card:nth-child(3){background:var(--gold-soft)}
.cards.two .card:nth-child(2){background:var(--pink-soft)}
.icon{width:67px;height:67px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;font-size:1.9rem;margin-bottom:20px}
.card .age{font-size:.82rem;font-weight:700;color:var(--sage-dark)}
.card h3{margin:5px 0 9px}
.card p{color:#635b56}

/* --- Waarom / voordelen --- */
.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center}
.why-visual{
  min-height:430px;border-radius:45% 55% 50% 50% / 20% 18% 82% 80%;
  background:linear-gradient(140deg,var(--pink-soft),var(--sage-soft));
  display:grid;place-items:center;text-align:center;padding:35px;position:relative;overflow:hidden
}
.why-visual:after{content:"♡";font-family:"Fraunces";font-size:18rem;color:rgba(255,255,255,.34);position:absolute;bottom:-90px;right:-15px}
.visual-note{position:relative;z-index:1;max-width:300px}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px 35px}
.benefits.one{grid-template-columns:1fr}
.benefit{display:flex;gap:13px;padding:15px 0}
.check{width:29px;height:29px;border:1px solid var(--pink);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--pink-dark)}
.benefit p{color:var(--muted);font-size:.9rem;margin-top:3px;margin-bottom:0}

/* --- Fotogalerij --- */
.gallery-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.photo{
  display:block;min-height:260px;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--sage-soft),var(--pink-soft));
  border:1px solid rgba(63,57,54,.07);transition:transform .25s ease
}
.photo:hover{transform:translateY(-4px)}
.photo.large{min-height:540px}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.placeholder{
  height:100%;min-height:inherit;display:grid;place-items:center;text-align:center;padding:30px;
  color:var(--muted);background:
  radial-gradient(circle at 25% 20%,rgba(255,255,255,.65),transparent 11rem),
  linear-gradient(135deg,var(--sage-soft),var(--pink-soft))
}
.placeholder strong{display:block;color:var(--ink);font-family:"Fraunces";font-size:1.5rem;margin-bottom:5px}
.gallery-stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery-grid .photo{min-height:300px}

/* --- Locatie --- */
.location{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:stretch}
.location-copy{background:var(--sage-soft);border-radius:var(--radius);padding:40px}
.location-map{
  border-radius:var(--radius);min-height:360px;background:#eee5dd;
  border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:30px
}
.address{display:flex;gap:14px;margin:22px 0}
.address-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center;flex:0 0 auto}

/* Ingesloten Google Maps-kaart */
.map-embed{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#eee5dd;line-height:0
}
.map-embed iframe{display:block;width:100%;height:480px;border:0}

/* --- Danskampen --- */
.camp{display:grid;grid-template-columns:1.1fr .7fr;gap:22px}
.camp-main{background:var(--gold-soft);border-radius:38px;padding:43px;position:relative;overflow:hidden}
.camp-main:after{content:"✦";position:absolute;right:25px;top:10px;font-size:5rem;color:rgba(217,173,93,.45)}
.camp-main p{color:#655a50;max-width:650px}
.camp-list{display:grid;gap:10px;margin:23px 0}
.camp-list div{display:flex;gap:10px}
.camp-list b{color:var(--sage-dark)}
.camp-side{background:var(--mauve);border-radius:38px;padding:35px;display:flex;flex-direction:column;justify-content:center}
.big-price{font-family:"Fraunces";font-size:4rem;line-height:1;margin:9px 0}

/* --- Lesrooster (opbouw van de flyer) --- */
.schedule{display:grid;gap:16px}
.slot{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:26px 30px;border-radius:36px;border:1px solid rgba(63,57,54,.07)
}
.slot.baby{background:var(--sage-soft)}
.slot.peuter{background:var(--pink-soft)}
.slot.kamp{background:var(--gold-soft)}
.slot-icon{
  width:72px;height:72px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:2rem;background:rgba(255,255,255,.6)
}
.slot.baby .slot-icon{background:var(--sage)}
.slot.peuter .slot-icon{background:var(--pink)}
.slot.kamp .slot-icon{background:var(--gold)}
.slot-body h3{margin-bottom:6px}
.slot-times{display:grid;gap:6px;margin:12px 0 10px}
.slot-time{
  display:flex;justify-content:space-between;gap:24px;max-width:400px;
  padding:8px 16px;border-radius:14px;background:rgba(255,255,255,.55);
  font-size:.95rem
}
.slot-time b{font-weight:700}
.slot-note{font-family:"Patrick Hand",cursive;font-size:1.2rem;color:#655a50;margin:0}

/* --- Mini-logo's per rubriek ---------------------------------
   De figuurtjes uit het logo zijn zelf al een gekleurde cirkel,
   dus er komt geen extra cirkel omheen. Door een vierkant kader
   met object-fit:contain worden alle drie even hoog weergegeven,
   ook al verschillen de bestanden in formaat.                 */
.figure-icon{
  display:block;flex:0 0 auto;
  width:78px;height:78px;
  object-fit:contain;object-position:center
}
.card > .figure-icon{width:74px;height:74px;margin-bottom:16px}

/* --- Tarieven --- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:30px;padding:32px 26px;text-align:center
}
.price h3{font-size:1.4rem;margin-bottom:14px}
.price .amount{
  display:inline-block;font-family:"Fraunces",serif;font-size:2.5rem;line-height:1;
  padding:10px 24px;border-radius:999px
}
.price:nth-child(1) .amount{background:var(--mauve-soft)}
.price:nth-child(2) .amount{background:var(--pink-soft)}
.price:nth-child(3) .amount{background:var(--gold-soft)}
.price p{color:var(--muted);font-size:.92rem;margin:14px 0 0}
.price .script{display:block;margin-top:12px;font-size:1.2rem}

/* --- Aandachtsblok / notitie --- */
.callout{
  display:flex;gap:20px;align-items:flex-start;
  padding:28px 32px;border-radius:32px;
  background:var(--sage-soft);border:1px solid rgba(63,57,54,.07)
}
.callout.pink{background:var(--pink-soft)}
.callout.gold{background:var(--gold-soft)}
.callout.mauve{background:var(--mauve-soft)}
.callout.plain{background:rgba(255,255,255,.7)}
.callout-icon{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;
  background:rgba(255,255,255,.65);display:grid;place-items:center;font-size:1.5rem
}
.callout h3{font-size:1.45rem;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.callout p{color:#5f574f}

/* --- Ervaringen --- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quotes.two{grid-template-columns:repeat(2,1fr)}
.quote{
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  border-radius:30px;padding:58px 32px 28px;position:relative;
  box-shadow:0 12px 38px rgba(85,65,58,.055)
}
.quote:before{
  content:"“";position:absolute;top:14px;left:30px;
  height:32px;overflow:hidden;
  font-family:"Fraunces",Georgia,serif;font-size:3.8rem;line-height:.84;
  color:var(--pink);opacity:.7
}
.quote p{position:relative;color:#5b534e;font-size:1.02rem}
.quote-author{display:flex;align-items:center;gap:12px;margin-top:18px}
.quote-avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-family:"Fraunces",serif;font-size:1.2rem;color:#fff
}
.quote:nth-child(3n+1) .quote-avatar{background:var(--sage)}
.quote:nth-child(3n+2) .quote-avatar{background:var(--pink)}
.quote:nth-child(3n+3) .quote-avatar{background:var(--gold)}
.quote-author strong{display:block;font-size:.95rem;line-height:1.3}
.quote-author span{font-size:.82rem;color:var(--muted)}

/* --- Verhaal (Over ons) --- */
.portrait{
  width:100%;max-width:330px;margin:0 auto 34px;aspect-ratio:4/5;
  border-radius:48% 52% 43% 57% / 16% 18% 82% 84%;
  background:linear-gradient(140deg,var(--pink-soft),var(--sage-soft));
  border:1px solid rgba(63,57,54,.07);box-shadow:var(--shadow);
  display:grid;place-items:center;text-align:center;padding:34px;color:var(--muted)
}
.portrait strong{
  display:block;font-family:"Fraunces",Georgia,serif;font-size:1.4rem;
  color:var(--ink);margin-bottom:6px
}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.story{max-width:680px;margin:0 auto}
.story p{color:#5b534e;font-size:1.05rem}
.story p.intro{font-size:1.2rem;color:var(--ink);font-weight:500}
.pull{
  margin:32px 0;padding:28px 34px;border:0;border-radius:30px;
  background:var(--pink-soft);
  font-family:"Fraunces",Georgia,serif;font-size:1.45rem;line-height:1.28;
  letter-spacing:-.02em;color:var(--pink-dark);text-align:center
}
.signature{margin-top:36px;text-align:right}
.signature .script{display:block;margin-bottom:2px}
.signature strong{
  font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;
  color:var(--sage-dark)
}

/* --- FAQ --- */
.faq{max-width:900px;margin:auto}
details{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:18px;margin-bottom:11px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:20px 54px 20px 23px;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:20px;top:13px;font-size:1.65rem;color:var(--pink-dark);transition:transform .2s ease}
details[open] summary:after{transform:rotate(45deg)}
details[open]{background:rgba(255,255,255,.95)}
details p{padding:0 23px 22px;color:var(--muted)}
details p:last-child{margin-bottom:0}

.faq-group{max-width:900px;margin:0 auto 40px}
.faq-group > h3{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;font-size:1.5rem;color:var(--sage-dark)
}
.faq-group > h3:after{content:"";flex:1;height:1px;background:var(--line)}
.faq-tools{max-width:900px;margin:0 auto 20px;display:flex;justify-content:flex-end}
.faq-toggle-all{
  border:1px solid var(--line);background:rgba(255,255,255,.7);
  border-radius:999px;padding:9px 20px;font-size:.85rem;font-weight:700;
  color:var(--sage-dark);cursor:pointer;transition:background .2s ease
}
.faq-toggle-all:hover{background:#fff}

/* --- Stappen / dagindeling --- */
.timeline{max-width:760px;margin:0 auto;display:grid;gap:2px}
.timeline-item{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:18px 0;border-bottom:1px dashed var(--line)}
.timeline-item:last-child{border-bottom:0}
.timeline-time{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--pink-dark)}
.timeline-item p{margin:4px 0 0;color:var(--muted);font-size:.94rem}

/* --- Contactregels --- */
.contact-list{display:grid;gap:16px;margin:24px 0}
.contact-row{display:flex;gap:14px;align-items:center}
.contact-row .address-icon{width:42px;height:42px;font-size:1.1rem}

/* --- CTA --- */
.cta-section{padding-top:75px}
.cta-box{
  background:linear-gradient(120deg,var(--pink-soft),var(--sage-soft));
  border-radius:40px;padding:55px;position:relative;overflow:hidden;text-align:center
}
.cta-box:before,.cta-box:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(63,57,54,.18)}
.cta-box:before{width:280px;height:280px;left:-160px;top:-170px}
.cta-box:after{width:350px;height:350px;right:-220px;bottom:-240px}
.cta-box p{color:var(--muted);max-width:600px;margin:13px auto 25px}
.cta-box > *{position:relative;z-index:1}

/* --- Pop-upvenster (bv. privacyverklaring) -------------------
   Gebruikt het <dialog>-element van de browser zelf: dat regelt
   de achtergrond, de Escape-toets en de toetsenbordfocus.      */
.link-btn{
  border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px
}
.link-btn:hover{color:var(--pink-dark)}
dialog.modal{
  width:min(720px, calc(100% - 32px));
  max-height:min(82vh, 780px);
  padding:0;border:1px solid var(--line);border-radius:28px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 30px 80px rgba(70,50,45,.26);overflow:hidden
}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal::backdrop{background:rgba(63,57,54,.45)}
.modal-head{
  flex:0 0 auto;
  display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
  padding:26px 28px 16px;border-bottom:1px solid var(--line)
}
.modal-head h2{font-size:1.9rem;margin:0}
.modal-close{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.7);
  font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink);
  transition:background .2s ease
}
.modal-close:hover{background:#fff}
.modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:22px 28px;-webkit-overflow-scrolling:touch
}
.modal-body h3{font-size:1.22rem;margin:24px 0 8px;color:var(--sage-dark)}
.modal-body h3:first-child{margin-top:0}
.modal-body p,.modal-body li{color:var(--muted);font-size:.97rem}
.modal-body ul{padding-left:20px;margin:0 0 1rem}
.modal-body li{margin-bottom:4px}
.modal-foot{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  padding:16px 28px 22px;border-top:1px solid var(--line);background:var(--paper)
}

@media(max-width:560px){
  dialog.modal{width:calc(100% - 20px);max-height:88vh;border-radius:22px}
  .modal-head{padding:20px 20px 14px}
  .modal-head h2{font-size:1.55rem}
  .modal-body{padding:18px 20px}
  .modal-foot{padding:14px 20px 18px}
  .modal-foot .btn{flex:1 1 auto}
}

/* --- Redactienotitie (verwijderen voor livegang) --- */
.editor-note{
  max-width:900px;margin:0 auto 30px;padding:18px 24px;border-radius:20px;
  background:rgba(255,255,255,.8);border:1px dashed var(--pink);
  font-size:.9rem;color:var(--muted)
}
.editor-note strong{color:var(--pink-dark)}


/* ====== 10. FOOTER ======================================== */
footer{padding:48px 0 25px;background:#dddac9;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:35px;padding-bottom:28px;border-bottom:1px solid rgba(63,57,54,.13)}
.footer-brand{font-family:"Fraunces";font-size:2.2rem;line-height:1.1}
footer p,footer a{color:#605b53}
footer a:hover{color:var(--pink-dark)}
footer strong{display:block}
.footer-links{display:grid;gap:4px;margin-top:10px}
.footer-bottom{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-top:18px;font-size:.76rem;color:#777268}
.footer-legal{display:flex;gap:8px 18px;flex-wrap:wrap}
.socials{display:flex;gap:10px;margin-top:16px}
.social{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.6);color:var(--pink-dark);
  transition:transform .2s ease,background .2s ease
}
.social:hover{transform:translateY(-3px);background:#fff}
.social svg{width:20px;height:20px;fill:currentColor}


/* ====== 11. RESPONSIVE ==================================== */
/* Navigatie klapt eerder in dan de rest van de lay-out,
   omdat het menu meer items telt. */
@media(max-width:1160px){
  /* vlaggenlijn heeft te weinig ruimte naast de hero-afbeelding */
  .deco-bunting{display:none}
}

@media(max-width:1080px){
  .menu{display:grid;place-items:center}
  .nav{
    display:none;position:absolute;top:calc(var(--header) - 1px);left:14px;right:14px;
    flex-direction:column;align-items:stretch;padding:12px;
    background:var(--paper);border-radius:22px;box-shadow:var(--shadow)
  }
  .nav.open{display:flex}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a{text-align:center;padding:12px}
}

@media(max-width:900px){
  :root{--header:70px}
  /* Zonder min-width:0 duwt een lang woord de hele kolom breder dan het scherm. */
  .hero-grid > *,.why > *,.location > *,.camp > *,.cards > *,.schedule > *,
  .prices > *,.quotes > *,.gallery-teaser > *,.benefits > *{min-width:0}
  .hero-copy h1,.slogan{overflow-wrap:break-word}
  .container{width:min(calc(100% - 28px),var(--max))}
  .hero-grid,.why,.gallery-teaser,.location,.camp{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-copy{order:1}
  .hero-visual{order:0}
  .cards,.cards.two,.prices,.quotes,.quotes.two,.gallery-grid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .photo.large{min-height:360px}
  .gallery-stack{grid-template-rows:260px 260px}
  .footer-grid{grid-template-columns:1fr}
  .deco-bunting,.deco-rainbow{display:none}
  .map-embed iframe{height:380px}
}

@media(max-width:560px){
  h1{font-size:clamp(2.3rem,11.5vw,3.6rem)}
  h2{font-size:clamp(1.95rem,8.5vw,2.65rem)}
  h3{font-size:1.5rem}
  section{padding:75px 0}
  .hero-actions,.btn-row{flex-direction:column}
  .btn{width:100%}
  /* Op gsm: de plectrum blijft binnen de schermranden (de rotatie
     zou anders 3 px afgesneden worden) en het logo krijgt
     verhoudingsgewijs meer ruimte, zodat het niet wegvalt. */
  .logo-card{max-width:min(330px, calc(100% - 16px));padding:18px 24px 48px;transform:rotate(.5deg)}
  .logo-card:before{inset:12px}
  .badge{width:105px;height:105px;left:0;bottom:5px;font-size:1rem}
  .camp-main,.camp-side,.location-copy,.cta-box{padding:28px}
  .hero-meta{display:grid;gap:6px}
  .footer-bottom{flex-direction:column}
  .brand-logo{width:48px;height:42px}
  .brand-name{font-size:1.4rem}
  .slot{grid-template-columns:1fr;gap:16px;padding:24px}
  .figure-icon,.card > .figure-icon{width:66px;height:66px}
  .callout{flex-direction:column;gap:14px}
  .timeline-item{grid-template-columns:1fr;gap:2px}
  .deco{display:none}
  .note,.feet{display:block}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}


/* ====== 12. WORDPRESS-COMPATIBILITEIT ===================== */
/* Alleen nodig binnen WordPress; heeft geen effect op de losse HTML. */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){.admin-bar .site-header{top:46px}}
.wp-block-group,.entry-content > .wp-block-html{margin:0}
.entry-content{margin:0}