/*
Theme Name: Zeearend
Theme URI: https://zeearend.thegreensurfer.com
Author: The Green Surfer
Description: Thema voor Ruben Meijer — gastlessen, lezingen en veldwerk rond de zeearend. Alle vaste teksten en beelden zijn bewerkbaar via de pagina-editor of "Snel bewerken" op de site zelf.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: zeearend
*/

/* ============================================================
   ZEEAREND — merkfamilie: Bricolage Grotesque + Karla + marker-geel.
   Natuurpalet: water-petrol, lucht, zand.
   ============================================================ */

:root{
  --lucht:#eef2ef; --wit:#ffffff; --inkt:#12292c; --dof:#54696b;
  --water:#175054; --water-diep:#0d3a3e; --water-zweem:rgba(23,80,84,.08);
  --geel:#ffd64d; --geel-diep:#f0be1e; --geel-zweem:rgba(255,214,77,.4);
  --zand:#f2ead6; --lijn:#dbe2da;
  --schaduw:0 2px 4px rgba(13,58,62,.05),0 16px 36px -18px rgba(13,58,62,.24);
  --r:14px; --maxw:1140px;

  --fs-label:clamp(.72rem,.68rem + .15vw,.8rem);
  --fs-body:clamp(1rem,.96rem + .18vw,1.09rem);
  --fs-lead:clamp(1.08rem,1rem + .4vw,1.28rem);
  --fs-h4:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --fs-h3:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  --fs-h2:clamp(1.75rem,1.25rem + 2.4vw,3rem);
  --fs-hero:clamp(2.1rem,1.3rem + 3.9vw,4.1rem);
  --sp:clamp(56px,7.5vw,116px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* clip i.p.v. hidden: beide voorkomen horizontaal scrollen, maar hidden maakt
   van html/body een scroll-container en breekt daarmee position:sticky. */
html,body{overflow-x:clip;max-width:100%}
body{font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-body);color:var(--inkt);background:var(--lucht);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;line-height:1.06;letter-spacing:-.02em;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
::selection{background:var(--geel);color:var(--inkt)}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sectie{padding:var(--sp) 0}
.sectie h2{font-size:var(--fs-h2);margin-bottom:18px;max-width:20ch}
.lead{font-size:var(--fs-lead);color:var(--dof);max-width:58ch}
.label{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt);margin-bottom:18px}
.label::before{content:"";width:22px;height:10px;background:var(--geel);border-radius:3px;transform:rotate(-2deg)}
.op-donker .label{color:var(--lucht)}
.mark{background-image:linear-gradient(transparent 62%,var(--geel-zweem) 62%)}
.op-donker .mark{background-image:none;background-color:var(--geel);color:var(--inkt);padding:.04em .14em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tekst p + p{margin-top:1em}
.tekst{color:var(--dof)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--geel);color:var(--inkt);padding:10px 18px;border-radius:999px;font-weight:700}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.98rem;padding:15px 28px;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-geel{background:var(--geel);color:var(--inkt)}
.btn-geel:hover{background:var(--geel-diep);transform:translateY(-2px)}
.btn-water{background:var(--water);color:#fff}
.btn-water:hover{background:var(--water-diep);transform:translateY(-2px)}
.btn-lijn{background:transparent;border-color:var(--inkt);color:var(--inkt)}
.btn-lijn:hover{background:var(--inkt);color:var(--lucht);transform:translateY(-2px)}
.op-donker .btn-lijn{border-color:var(--lucht);color:var(--lucht)}
.op-donker .btn-lijn:hover{background:var(--lucht);color:var(--inkt)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .3s,box-shadow .3s,padding .3s}
.nav.scrolled{background:rgba(238,242,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--lijn);padding:11px 0}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;position:relative;min-height:46px}
.logo{display:flex;align-items:center;gap:12px;line-height:1;cursor:pointer}
.logo img{height:44px;width:auto;display:block}
.logo--licht img{height:46px}
@media(max-width:600px){ .logo img{height:36px} }
.logo-mark{width:62px;height:auto;flex:none}
.logo-tekst{display:flex;flex-direction:column}
.logo b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(.86rem,.8rem + .25vw,1.02rem);line-height:1.05;text-transform:uppercase;color:var(--inkt);letter-spacing:-.01em;white-space:nowrap}
.logo span{font-family:'Karla',sans-serif;font-weight:700;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dof);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{position:relative;font-weight:700;font-size:.94rem;color:var(--inkt);padding:8px 14px;cursor:pointer;display:block}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;background:var(--geel);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.32,.72,0,1)}
.nav-links a:not(.nav-cta):hover::after,.nav-links .current-menu-item > a:not(.nav-cta)::after{transform:scaleX(1)}
.nav-links a.nav-cta{background:var(--water);color:#fff;border-radius:999px;padding:10px 22px;margin-left:10px;transition:background .2s,transform .2s}
.nav-links a.nav-cta:hover{background:var(--water-diep);transform:translateY(-1px)}
.nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.hamburger span{width:26px;height:2.5px;background:var(--inkt);border-radius:2px;transition:.3s}
.nav-overlay{position:fixed;inset:0;z-index:90;background:rgba(13,58,62,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;cursor:pointer}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
@media(min-width:861px){.nav-overlay{display:none}}

/* hero */
.hero{position:relative;padding:clamp(130px,15vw,180px) 0 clamp(48px,6vw,80px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,56px);align-items:center}
.hero h1{font-size:var(--fs-hero);margin-bottom:20px;max-width:16ch}
.hero .lead{margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-beeld{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.hero-beeld img{width:100%;height:auto;display:block}
.hero-arend{position:relative}
.hero-arend svg{width:100%;height:auto;display:block}
@media(prefers-reduced-motion:no-preference){
  .hero-arend{animation:zos-zweef 9s ease-in-out infinite alternate}
  @keyframes zos-zweef{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-14px) rotate(1.2deg)}}
}
.hero--kaal{padding-bottom:clamp(34px,4.5vw,60px)}
.hero--kaal .hero-grid{grid-template-columns:1fr;max-width:800px}

.feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(34px,4vw,52px)}
.feit{padding:6px 28px 2px}
.feit:first-child{padding-left:0}
.feit + .feit{border-left:1px solid var(--lijn)}
.feit b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);color:var(--water);margin-bottom:2px}
.feit span{color:var(--dof);font-size:.95rem}
.op-donker .feit + .feit{border-left-color:rgba(238,242,239,.2)}
.op-donker .feit b{color:var(--geel)}
.op-donker .feit span{color:rgba(238,242,239,.75)}
/* losse cijferstrook direct onder de hero: heeft eigen ruimte nodig, anders
   plakt hij tegen de rand van de volgende sectie */
.feiten-strip{padding-bottom:clamp(48px,6vw,84px)}

/* routes: drie kaarten (home) */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);margin-top:44px}
.route{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw);transition:transform .25s,box-shadow .25s}
.route:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(13,58,62,.06),0 26px 50px -22px rgba(13,58,62,.4)}
.route-beeld{aspect-ratio:16/11;overflow:hidden;background:var(--zand)}
.route-beeld img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.route:hover .route-beeld img{transform:scale(1.04)}
.route-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.route-body h3{font-size:var(--fs-h4)}
/* ===== Blog ===== */
/* Berichtpagina: kop met kruimelpad, daaronder tekst + meelopende zijkolom.
   Verhoudingen naar het voorbeeld: ~2:1 met een gat van 3.2rem. */
.bericht-kop{background:var(--lucht);padding:calc(var(--navh) + clamp(26px,4vw,54px)) 0 clamp(22px,2.6vw,34px)}
/* Kop en content lopen in dezelfde kleur door, dus hier geen volle
   sectie-ruimte ertussen: dat leest als een gat in de pagina. */
.bericht-kop + .sectie{padding-top:clamp(16px,2vw,26px)}
.bericht-kop h1{margin:10px 0 0}
.kruimels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-family:'Karla',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dof)}
.kruimels a{color:var(--dof)}
.kruimels a:hover{color:var(--inkt)}
.kruimels span[aria-current]{color:var(--inkt);font-weight:700}
.bericht-lead{margin-top:16px;max-width:60ch}
.bericht-meta{margin-top:14px;font-family:'Karla',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dof)}
.bericht-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:3.2rem;align-items:start}
.bericht-tekst{min-width:0}
.bericht-beeld{margin:0 0 30px;border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.bericht-beeld img{width:100%;height:auto;display:block}
.bericht-beeld figcaption{padding:10px 2px 0;font-size:.86rem;color:var(--dof)}
.bericht-zijkolom{position:sticky;top:calc(var(--navh) + 24px);display:flex;flex-direction:column;gap:20px}
.zijkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:24px 26px;box-shadow:var(--schaduw)}
.zijkaart__kop{font-size:var(--fs-h4);margin:8px 0 10px}
.zijkaart p{color:var(--dof);font-size:.95rem}
.zijkaart__acties{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}
.zijlijst{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.zijlijst li{display:flex;flex-direction:column;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.zijlijst li:last-child{padding-bottom:0;border-bottom:0}
.zijlijst a{font-weight:700;color:var(--inkt);line-height:1.3}
.zijlijst a:hover{color:var(--water)}
@media(max-width:900px){
  .bericht-grid{grid-template-columns:1fr;gap:34px}
  .bericht-zijkolom{position:static;top:auto}
}
.bericht-datum{font-family:'Karla',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dof)}
.blog-paginering{margin-top:44px}
.verhalen-meer{margin-top:34px}
.blog-paginering .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.blog-paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--lijn);border-radius:999px;font-weight:700;font-size:.94rem;color:var(--inkt);background:var(--wit);transition:background .2s,transform .2s}
.blog-paginering a.page-numbers:hover{background:var(--zand);transform:translateY(-1px)}
.blog-paginering .page-numbers.current{background:var(--water);border-color:var(--water);color:#fff}
.blog-paginering .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bericht-terug{margin-top:40px;padding-top:28px;border-top:1px solid var(--lijn)}
.bericht-terug .arr{margin-right:6px}
.route-body p{color:var(--dof);font-size:.97rem;flex:1}
.route-link{display:inline-flex;align-items:center;gap:.45em;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:var(--water);margin-top:6px}
.route:hover .route-link .arr{transform:translateX(4px)}
.route-link .arr{transition:transform .25s}

/* gastles: open stappenlijst */
.les-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:start}
.les-kop{position:sticky;top:110px}
.lesstappen{list-style:none;counter-reset:stap}
.lesstappen li{counter-increment:stap;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--lijn)}
.lesstappen li:last-child{border-bottom:1px solid var(--lijn)}
.lesstappen li::before{content:"0" counter(stap);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;color:var(--geel-diep);line-height:1.2}
.lesstappen li > h3,.lesstappen li > p{grid-column:2}
.lesstappen h3{font-size:var(--fs-h4);margin-bottom:6px}
.lesstappen p{color:var(--dof);font-size:.97rem}
.op-donker .lesstappen li{border-color:rgba(238,242,239,.18)}
.op-donker .lesstappen p{color:rgba(238,242,239,.75)}

/* spanwijdte-lint (signatuur) */
.lint{margin-top:clamp(44px,6vw,72px)}
.lint-kop{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.lint-kop p{color:var(--dof)}
.lint-kop b{color:var(--inkt)}
.krabbel{font-family:'Caveat',cursive;font-weight:600;font-size:1.3rem;color:var(--water);transform:rotate(-2deg);display:inline-block}
.lint-svg{display:block;width:100%;height:auto}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center}
.split--omgekeerd .split-beeld{order:2}
.split-beeld{border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.split-beeld img,.split-beeld video{width:100%;height:auto;display:block}

/* fotogrid */
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.foto{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--zand);box-shadow:var(--schaduw)}
.foto img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.foto:hover img{transform:scale(1.04)}
.foto-grid .foto:nth-child(2){transform:rotate(1deg)}
.foto-grid .foto:nth-child(4){transform:rotate(-1deg)}

/* citaat */
.citaat{max-width:44ch;margin:0 auto;text-align:center}
.citaat blockquote{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:var(--fs-h3);line-height:1.24;letter-spacing:-.02em}
.citaat figcaption{margin-top:18px;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--dof)}
.op-donker .citaat figcaption{color:rgba(238,242,239,.7)}

/* tijdlijn (conservatie) */
.tijdlijn{list-style:none;margin-top:44px;display:grid;gap:0}
.tijdlijn li{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--lijn)}
.tijdlijn li:last-child{border-bottom:1px solid var(--lijn)}
.tijdlijn b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem;color:var(--water)}
.tijdlijn h3{font-size:var(--fs-h4);margin-bottom:6px}
.tijdlijn p{color:var(--dof);font-size:.97rem}

/* vlakken */
.vlak-wit{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.vlak-zand{background:var(--zand)}
.vlak-donker{background:var(--water-diep);color:var(--lucht)}
.vlak-donker h2,.vlak-donker h3{color:#fff}
/* witte kaarten binnen een donker vlak houden hun eigen inktkleur */
.vlak-donker .agenda h2,.vlak-donker .agenda h3,
.vlak-donker .contact-aside h2,.vlak-donker .contact-aside h3,
.vlak-donker .form h2,.vlak-donker .form h3{color:var(--inkt)}
.vlak-donker .lead{color:rgba(238,242,239,.75)}
.vlak-donker .tekst{color:rgba(238,242,239,.78)}

/* cta-band */
.cta-band{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,48px);align-items:center}
.cta-band .btnrij{display:flex;flex-wrap:wrap;gap:14px}

/* agenda-intro */
.agenda-noot{display:flex;gap:12px;align-items:flex-start;margin-top:26px;color:rgba(238,242,239,.78);font-size:.95rem;max-width:640px}
.agenda-noot .stip{flex:none;width:12px;height:12px;border-radius:50%;background:var(--geel);margin-top:6px}

/* datumveld in het aanvraagformulier */
#datum-gekozen{background:var(--wit)}
#datum-gekozen.is--gevuld{background:var(--geel-zweem);border-color:var(--geel-diep);font-weight:700}
.veld-bij{font-weight:400;color:var(--dof);font-size:.8rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,56px);align-items:start}
.form{display:grid;gap:16px;background:var(--wit);border-radius:var(--r);padding:clamp(24px,3vw,36px);color:var(--inkt);box-shadow:var(--schaduw)}
.form .rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px}
.veld input,.veld textarea,.veld select{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--geel-diep);box-shadow:0 0 0 3px var(--geel-zweem)}
.veld textarea{min-height:130px;resize:vertical}
.veld--pot{position:absolute;left:-9999px}
.form-noot{font-size:.85rem;color:var(--dof)}
.form-melding{display:none;padding:14px 18px;border-radius:12px;font-weight:600}
.form-melding.is--ok{display:block;background:var(--water);color:#fff}
.form-melding.is--fout{display:block;background:#fdeee4;color:#a4400f;border:1px solid #f0c7ad}
.form .direct{font-size:.9rem;color:var(--dof)}
.form .direct a{font-weight:700;color:var(--water)}
.form .direct a:hover{color:var(--geel-diep)}
.contact-aside{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:32px 30px;box-shadow:var(--schaduw);color:var(--inkt)}
.contact-aside h3{font-size:var(--fs-h4);margin-bottom:6px}
.contact-aside .belofte{font-weight:700;color:var(--water);margin-bottom:22px}
.contact-aside .ci{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.contact-aside .ci-icoon{flex:none;width:40px;height:40px;border-radius:12px;background:var(--water-zweem);display:grid;place-items:center;color:var(--water)}
.contact-aside .ci a:hover{color:var(--geel-diep)}

/* footer */
.footer{background:var(--inkt);color:rgba(238,242,239,.7);padding:56px 0 30px}
.footer .logo b{color:#fff}
.footer .logo span{color:rgba(238,242,239,.55)}
.footer-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;list-style:none}
.footer-links a{font-weight:700;font-size:.93rem;cursor:pointer;border-bottom:2px solid transparent}
.footer-links a:hover{border-color:var(--geel);color:#fff}
.footer-onder{border-top:1px solid rgba(238,242,239,.14);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.85rem}

/* algemene pagina / 404 */
.pagina-inhoud{max-width:70ch}
.pagina-inhoud h2{font-size:var(--fs-h3);margin:1.4em 0 .5em}
.pagina-inhoud p{margin-bottom:1em;color:var(--dof)}
.pagina-inhoud ul,.pagina-inhoud ol{margin:0 0 1em 1.2em;color:var(--dof)}

/* responsive */
@media(max-width:1000px){
  .routes{grid-template-columns:1fr}
}
@media(max-width:960px){
  .hero-grid,.split,.contact-grid,.cta-band{grid-template-columns:1fr;gap:34px}
  .split--omgekeerd .split-beeld{order:0}
  .hero-arend{max-width:420px;margin:0 auto}
  .les-grid{grid-template-columns:1fr}
  .les-kop{position:static}
  .foto-grid{grid-template-columns:1fr 1fr}
  .tijdlijn li{grid-template-columns:1fr;gap:6px}
}
@media(max-width:860px){
  .hamburger{display:flex}
  .nav-links{
    position:absolute;top:calc(100% + 8px);left:14px;right:14px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--wit);border:1px solid var(--lijn);border-radius:20px;
    box-shadow:0 26px 60px -22px rgba(13,58,62,.5);
    padding:10px;max-height:calc(100dvh - 96px);overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px) scale(.97);transform-origin:top center;
    transition:opacity .26s,transform .3s cubic-bezier(.32,.72,0,1),visibility .26s;
  }
  .nav-toggle:checked ~ .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links a{color:var(--inkt);padding:14px 16px;border-radius:13px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s,background .2s}
  .nav-links a:hover{background:var(--water-zweem)}
  .nav-links a.nav-cta{margin:6px 0 0;justify-content:center;text-align:center;border-radius:999px;padding:15px}
  .nav-toggle:checked ~ .nav-links a{opacity:1;transform:none}
  .nav-toggle:checked ~ .nav-links li:nth-child(1) a{transition-delay:.05s}
  .nav-toggle:checked ~ .nav-links li:nth-child(2) a{transition-delay:.10s}
  .nav-toggle:checked ~ .nav-links li:nth-child(3) a{transition-delay:.15s}
  .nav-toggle:checked ~ .nav-links li:nth-child(4) a{transition-delay:.20s}
  .nav-toggle:checked ~ .nav-links li:nth-child(5) a{transition-delay:.25s}
  .nav-toggle:checked ~ .nav-links li:nth-child(6) a{transition-delay:.30s}
  .nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:640px){
  .foto-grid,.form .rij{grid-template-columns:1fr}
  .feiten{grid-template-columns:1fr;gap:18px}
  .feit{padding:0}
  .feit + .feit{border-left:0;border-top:1px solid var(--lijn);padding-top:18px}
}

/* scroll-reveal */
@media (prefers-reduced-motion: no-preference){
  .wa-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.32,.72,0,1),transform .75s cubic-bezier(.32,.72,0,1)}
  .wa-reveal.wa-in{opacity:1;transform:none}
  .wa-stagger > *{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.32,.72,0,1),transform .75s cubic-bezier(.32,.72,0,1)}
  .wa-stagger.wa-in > *{opacity:1;transform:none}
  .wa-stagger.wa-in > *:nth-child(2){transition-delay:.08s}
  .wa-stagger.wa-in > *:nth-child(3){transition-delay:.16s}
  .wa-stagger.wa-in > *:nth-child(4){transition-delay:.24s}
  .wa-stagger.wa-in > *:nth-child(5){transition-delay:.32s}
  .wa-stagger.wa-in > *:nth-child(6){transition-delay:.40s}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ===== Snel bewerken (inline) ===== */
@keyframes zea-saved-flash{0%{background:var(--geel-zweem)}100%{background:transparent}}
.zea-editmode [data-zea-ed]{outline:1px dashed var(--geel-diep);outline-offset:3px;border-radius:4px;cursor:text;position:relative;z-index:5}
.zea-editmode [data-zea-ed]:hover,.zea-editmode [data-zea-ed]:focus{outline-style:solid;background:rgba(255,214,77,.14)}
[data-zea-ed].is-saving{opacity:.55}
[data-zea-ed].is-saved{animation:zea-saved-flash 1.2s ease}
.zea-editmode a:has([data-zea-ed]){pointer-events:none}
.zea-editmode [data-zea-ed]{pointer-events:auto}
.zea-editfab{position:fixed;right:20px;bottom:20px;z-index:99990;font-family:'Karla',sans-serif;font-weight:700;font-size:.95rem;background:var(--water);color:var(--lucht);border:0;border-radius:999px;padding:12px 22px;box-shadow:0 8px 24px rgba(13,58,62,.28);cursor:pointer;transition:background-color .2s,color .2s}
.zea-editfab:hover,.zea-editmode .zea-editfab{background:var(--geel);color:var(--inkt)}

/* placeholder zolang er nog geen foto gekozen is */
.zea-ph{width:100%;aspect-ratio:4/3;display:grid;place-items:center;color:#7d8b7f;background:repeating-linear-gradient(45deg,#e3e9e2,#e3e9e2 12px,#dbe2da 12px,#dbe2da 24px);border:1.5px dashed #b9c4ba;border-radius:var(--r)}
.split-beeld .zea-ph,.route-beeld .zea-ph,.foto .zea-ph,.hero-beeld .zea-ph{border-radius:0;border:0;height:100%}

/* ===== Lightbox: hover-hint op de foto's ===== */
.zea-zoom{position:relative;display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:inherit;line-height:0;color:var(--inkt)}
.zea-zoom::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,58,62,.42),rgba(13,58,62,.16));opacity:0;transition:opacity .28s cubic-bezier(.32,.72,0,1);pointer-events:none}
.zea-zoom__hint{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.88rem;line-height:1;background:var(--geel);color:var(--inkt);padding:11px 18px;border-radius:999px;box-shadow:0 10px 26px -10px rgba(13,58,62,.7);opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .28s cubic-bezier(.32,.72,0,1),transform .28s cubic-bezier(.32,.72,0,1);pointer-events:none}
.zea-zoom:hover::after,.zea-zoom:focus-visible::after{opacity:1}
.zea-zoom:hover .zea-zoom__hint,.zea-zoom:focus-visible .zea-zoom__hint{opacity:1;transform:translate(-50%,-50%) scale(1)}
.zea-zoom:focus-visible{outline:3px solid var(--inkt);outline-offset:3px}
.foto .zea-zoom:hover img,.route-beeld .zea-zoom:hover img{transform:scale(1.04)}
/* de knop moet de hoogte van de kaart overnemen, anders klapt de 16/11-kader dicht */
.route-beeld .zea-zoom{height:100%}
.route-beeld .zea-zoom img{height:100%;object-fit:cover}
/* Zelfde als bij de kaarten: de zoom-wrapper moet het kader vullen,
   anders houdt de img zijn eigen hoogte en blijft er zand over. */
.foto .zea-zoom{height:100%}
.foto .zea-zoom img{height:100%;object-fit:cover}
/* Een video in de galerij vult hetzelfde kader als een foto. */
.foto video{width:100%;height:100%;display:block;object-fit:cover;background:var(--inkt)}
/* Op aanraakschermen bestaat hover niet: dan altijd een klein loepje in de hoek. */
@media (hover:none){
  .zea-zoom__hint{left:auto;right:10px;top:auto;bottom:10px;transform:none;opacity:1;padding:9px;border-radius:50%}
  .zea-zoom:hover .zea-zoom__hint,.zea-zoom:focus-visible .zea-zoom__hint{transform:none}
  .zea-zoom__woord{display:none}
}

/* ===== Lightbox: het venster ===== */
body.zea-lb-open{overflow:hidden}
.zea-lb{position:fixed;inset:0;z-index:99995;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,24px);padding:clamp(52px,7vw,72px) clamp(12px,3vw,40px);background:rgba(9,32,34,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zea-lb[hidden]{display:none}
.zea-lb__figuur{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;margin:0}
.zea-lb__beeld{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.zea-lb__bijschrift{color:rgba(238,242,239,.82);font-size:.94rem;text-align:center;max-width:60ch;line-height:1.5}
.zea-lb__sluit,.zea-lb__nav{border:0;background:rgba(238,242,239,.1);color:var(--lucht);border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.zea-lb__sluit:hover,.zea-lb__nav:hover{background:var(--geel);color:var(--inkt)}
.zea-lb__sluit:focus-visible,.zea-lb__nav:focus-visible{outline:3px solid var(--geel);outline-offset:3px}
.zea-lb__sluit{position:absolute;top:16px;right:16px;width:46px;height:46px;font-size:1.9rem;line-height:1;padding-bottom:4px}
.zea-lb__nav{width:52px;height:52px;font-size:1.3rem}
.zea-lb__nav--vorige{grid-column:1}
.zea-lb__nav--volgende{grid-column:3}
.zea-lb__nav[hidden]{visibility:hidden;display:grid}
.zea-lb__teller{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:rgba(238,242,239,.6);font-size:.85rem;letter-spacing:.1em}
@media(max-width:640px){
  .zea-lb{grid-template-columns:1fr;padding:60px 12px 76px}
  .zea-lb__figuur{grid-column:1}
  .zea-lb__nav{position:absolute;bottom:16px;width:46px;height:46px}
  .zea-lb__nav--vorige{left:16px}
  .zea-lb__nav--volgende{right:16px}
  .zea-lb__beeld{max-height:calc(100dvh - 210px)}
  .zea-lb__teller{bottom:32px}
}

/* ===== CTA-strook halverwege een pagina ===== */
.cta-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;
  padding:clamp(22px,3vw,32px) clamp(24px,3.5vw,38px);margin:clamp(48px,6vw,80px) 0;
  background:var(--wit);border:1px solid var(--lijn);border-left:5px solid var(--geel);
  border-radius:var(--r);box-shadow:var(--schaduw)}
.cta-strip__tekst{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:var(--fs-h4);
  line-height:1.25;letter-spacing:-.01em;color:var(--inkt);max-width:46ch;margin:0}
.cta-strip__knop{flex:none}
@media(max-width:640px){
  .cta-strip{flex-direction:column;align-items:flex-start}
  .cta-strip__knop{width:100%;justify-content:center}
}

/* ===== Beeldband: beeld over de volle schermbreedte ===== */
.beeldband{margin:0;width:100%;background:var(--zand);overflow:hidden;line-height:0}
.beeldband__beeld{width:100%;height:auto;display:block}
/* Rustige aankomst: het beeld komt net iets tot stilstand, één keer bij het laden. */
@media (prefers-reduced-motion:no-preference){
  .beeldband__beeld{animation:zea-aankomst 1.4s cubic-bezier(.32,.72,0,1) both}
  @keyframes zea-aankomst{from{transform:scale(1.055);opacity:.55}to{transform:scale(1);opacity:1}}
}

/* De band bovenaan de pagina staat binnen de contentkolom (boxed) en op de
   volle breedte daarvan. Het beeld wordt bewust NIET bijgesneden: de zeearend
   moet compleet in beeld staan, dus hoogte volgt de eigen verhouding van de
   foto. De balk is fixed, vandaar de offset met --navh; die klopt doordat
   .nav-inner een vaste min-height heeft (46 + 2x18 padding = 82px). */
:root{--navh:82px}
.beeldband--bovenaan{max-width:var(--maxw);margin:calc(var(--navh) + clamp(20px,3.5vw,48px)) auto 0;
  padding:0 24px;background:none;overflow:visible}
.beeldband--bovenaan .beeldband__beeld{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
  min-height:0;max-height:none;border-radius:var(--r);box-shadow:var(--schaduw)}
/* Het blok onder het beeld is een call-to-action, geen tweede hero: titel links,
   tekst en knoppen rechts. De kop hoeft niet op hero-formaat — het beeld is de
   blikvanger. align-items:start, want met 'end' duwt de hoogste kolom de titel
   omlaag terwijl die juist direct onder de foto hoort. */
.hero--na-beeld h1{font-size:var(--fs-h2);max-width:20ch;margin-bottom:0}
/* .hero--kaal .hero-grid zet één kolom met max-width 800px en weegt zwaarder,
   vandaar dezelfde specificiteit hier. */
/* Gelijke kolommen: smaller maakt de titel korter maar laat de knoppen
   afbreken naar twee rijen, en dan wordt het blok juist hoger. */
.hero--kaal .hero-grid--cta{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:start;max-width:none}
.hero-actie{display:flex;flex-direction:column;gap:20px}
.hero-actie .lead{margin:0;font-size:var(--fs-body);max-width:none}
.hero-actie .hero-cta{margin:0}

/* Op de homepage heeft de balk vanaf de eerste pixel een eigen ondergrond: het
   beeld schuift er straks onderdoor weg en dan moet het menu leesbaar blijven. */
.is-home .nav{background:rgba(238,242,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--lijn)}

/* ===== Zoom-hero: vastgepind beeld dat naar volle schermbreedte groeit ===== */
/* De sectie levert de scroll-afstand; het binnenblok plakt onder de balk vast en
   bevat beeld én call-to-action. Het kader groeit alleen omlaag, zodat het niet
   onder de balk door kruipt; de CTA schuift met dezelfde afstand mee en blijft
   dus op vaste afstand onder de foto hangen. */
.zoomhero{
  --zh-pad:clamp(10px,1.4vw,16px);
  --zh-gat:clamp(18px,2.4vw,30px);
  /* Tot hoever het beeld mag uitgroeien. Op een gewoon scherm is dat de volle
     breedte; op een ultrabreed scherm stopt het hier, anders wordt de foto
     onhandelbaar hoog (breedte gedeeld door 2,17). */
  --zh-max:1800px;
  /* Lucht tussen de CTA en de eerstvolgende sectie, na de pin. Let op: dit
     wordt in JS met parseFloat gelezen, en getComputedStyle lost custom
     properties niet op — dus een kale px-waarde, geen clamp() of calc(). */
  --zh-na-ruimte:64px;
  --zh-kader-b:min(calc(var(--maxw) - 48px),calc(100vw - 48px));
  position:relative;padding-top:var(--navh);height:auto}
/* Geen overflow:hidden — de CTA mag tijdens de groei onder het blok uit zakken. */
.zoomhero__kleef{position:static;height:auto;padding-top:var(--zh-pad)}
.zoomhero__frame{
  margin:0 auto;overflow:hidden;
  width:var(--zh-kader-b);
  aspect-ratio:var(--zh-verhouding,1.5);
  border-radius:var(--r);
  box-shadow:var(--schaduw)}
.zoomhero__beeld{width:100%;height:100%;display:block;object-fit:cover}
/* ===== Wisselende hero =====
   De foto's liggen op elkaar en kruisen over via opacity. Het kader houdt de
   verhouding van de eerste foto, de rest vult met cover. De bullets liggen in
   het kader en krijgen de zoomschaal omgekeerd mee, zodat ze bij het uitgroeien
   niet meegroeien. */
.zoomhero__frame--wissel{position:relative}
.zoomhero__frame--wissel .zoomhero__beeld{position:absolute;inset:0;object-fit:cover;opacity:0;transition:opacity .9s cubic-bezier(.32,.72,0,1)}
.zoomhero__frame--wissel .zoomhero__beeld.is-actief{opacity:1}
.zoomhero__bullets{position:absolute;left:50%;bottom:18px;z-index:3;display:flex;gap:9px;padding:9px 12px;border-radius:999px;background:rgba(13,58,62,.42);backdrop-filter:blur(6px);
  transform:translateX(-50%) scale(calc(1 / var(--zh-scale,1)));transform-origin:bottom center}
.zoomhero__bullet{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(238,242,239,.5);cursor:pointer;transition:background .3s,transform .3s}
.zoomhero__bullet:hover{background:rgba(238,242,239,.8)}
.zoomhero__bullet.is-actief{background:var(--geel);transform:scale(1.25)}
.zoomhero__bullet:focus-visible{outline:2px solid var(--geel);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .zoomhero__frame--wissel .zoomhero__beeld{transition:none}
}
@media(max-width:600px){
  .zoomhero__bullets{bottom:12px;padding:7px 10px;gap:7px}
}
.zoomhero__na{margin-top:var(--zh-gat)}
.zoomhero__na .hero{padding:clamp(18px,3vw,28px) 0 0}

/* Het beeld mag niet zo hoog worden dat de eerste titel onder de vouw valt:
   begrens de hoogte op wat er overblijft na de balk, het gat en de kop. De
   ondergrens voorkomt dat het beeld op een laag venster een streepje wordt.
   Alleen vanaf 861px, want daaronder staat alles toch al gestapeld. */
@media(min-width:861px){
  .zoomhero__frame{max-height:max(320px,calc(100svh - var(--navh) - 233px))}
}

/* Het meegroeien tijdens het scrollen is uitgezet: de hero is nu een gewoon
   beeld met de CTA eronder, op elk schermformaat. */
@media(max-width:860px){
  .hero--kaal .hero-grid--cta{grid-template-columns:1fr;align-items:start;gap:18px}
}

/* ===== CTA-blok in de footer (staat op elke pagina) ===== */
.footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;padding:0 0 clamp(30px,4vw,44px);margin-bottom:clamp(30px,4vw,44px);
  border-bottom:1px solid rgba(238,242,239,.14)}
.footer-cta__kop{font-size:var(--fs-h3);color:#fff;max-width:18ch;margin:0}
.footer-cta__tekst{color:rgba(238,242,239,.7);margin:8px 0 0;max-width:46ch}
.footer-cta .btn{flex:none}
@media(max-width:640px){
  .footer-cta{flex-direction:column;align-items:flex-start}
  .footer-cta .btn{width:100%;justify-content:center}
}

/* ===== Vaste aanvraagknop onderaan op de telefoon ===== */
.mobiel-cta{display:none}
@media(max-width:860px){
  .mobiel-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(238,242,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 -1px 0 var(--lijn);
    transform:translate3d(0,110%,0);transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .mobiel-cta.is-zichtbaar{transform:none}
  .mobiel-cta .btn{width:100%;justify-content:center;padding:14px 20px}
  /* ruimte onderaan de pagina, zodat de balk de footer niet afdekt */
  body{padding-bottom:78px}
  body.nav-open .mobiel-cta{transform:translate3d(0,110%,0)}
}
@media(prefers-reduced-motion:reduce){
  .mobiel-cta{transition:none}
}