/*
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%}
html,body{overflow-x:hidden;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}
.logo{display:flex;align-items:center;gap:12px;line-height:1;cursor:pointer}
.logo-mark{width:54px;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(1.05rem,1rem + .3vw,1.25rem);color:var(--inkt);letter-spacing:-.02em}
.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;aspect-ratio:4/3;object-fit:cover}
.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:0}
.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)}

/* 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%;min-height:100%;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)}
.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{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.split-beeld--staand img{aspect-ratio:3/4}

/* fotogrid */
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.foto{border-radius:var(--r);overflow:hidden;background:var(--zand);box-shadow:var(--schaduw)}
.foto img{width:100%;height:auto;aspect-ratio:4/3;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}

/* ===== Agenda (datumkiezer) ===== */
.agenda{background:var(--wit);color:var(--inkt);border-radius:var(--r);padding:clamp(20px,2.5vw,30px);box-shadow:var(--schaduw)}
.agenda-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.agenda-maand{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);text-transform:capitalize}
.agenda-pijl{width:38px;height:38px;border-radius:50%;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.agenda-pijl:hover{background:var(--geel-zweem);border-color:var(--geel-diep)}
.agenda-pijl[disabled]{opacity:.3;cursor:default;pointer-events:none}
.agenda-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.agenda-week span{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dof);padding:4px 0}
.agenda-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.agenda-dag{position:relative;aspect-ratio:1;border:0;border-radius:10px;background:transparent;color:var(--inkt);font-family:'Karla',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,box-shadow .15s}
.agenda-dag:hover{background:var(--geel-zweem)}
.agenda-dag:focus-visible{outline:2px solid var(--geel-diep);outline-offset:1px}
.agenda-dag.is--leeg{visibility:hidden}
.agenda-dag.is--verleden{color:#b6c1b8;cursor:default;pointer-events:none;font-weight:400}
.agenda-dag.is--vandaag{box-shadow:inset 0 0 0 1.5px var(--lijn)}
.agenda-dag.is--bezet{color:var(--dof);cursor:not-allowed;font-weight:400}
.agenda-dag.is--bezet:hover{background:transparent}
.agenda-dag.is--bezet::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--geel-diep)}
.agenda-dag.is--gekozen{background:var(--geel);color:var(--inkt);box-shadow:none}
.agenda-legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.agenda-leg{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--dof)}
.agenda-leg .dot{width:11px;height:11px;border-radius:50%}
.agenda-leg .dot.is--keuze{background:var(--geel)}
.agenda-leg .dot.is--bezet{background:var(--geel-diep)}
#datum-gekozen{background:var(--wit)}
.datum-melding{margin-top:6px;font-size:.85rem;font-weight:700;color:#b3541e}
#datum-gekozen.is--gevuld{background:var(--geel-zweem);border-color:var(--geel-diep);font-weight:700}

/* 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%}
/* 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}
}