/*
Theme Name: Huisplatform Kust
Theme URI: https://huisplatform.nl
Author: Huisplatform
Description: Kustthema voor Huisplatform.nl. Kustfilter met kust, gebied en plaats; een zoekbalk op Waar? Wanneer? Gasten; raster-, lijst- en kaartweergave; verhuur via particulieren met een eigen portaal; een affiliate-module met klikregistratie; een beschikbaarheidskalender; en een importmodule die feeds van aanbieders binnenhaalt en op de kust filtert. Gesynthetiseerd kustgeluid en stuifzand blijven.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huisplatform-kust
Tags: custom-menu, custom-logo, featured-images, translation-ready, one-column
*/

/* ============================================================
   HUISPLATFORM — kustplatform
   Palet: wadden-inkt, zeegroen, schuim, duinzand, avondzon
   Display: Fraunces  |  Body/UI: Karla
   ============================================================ */
:root{
  --inkt:#0C2A2E;
  --zee:#1F4E4F;
  --getij:#4E8480;
  --schuim:#CFE0DA;
  --zand:#EFE7DA;
  --schelp:#FBF8F3;
  --avondzon:#E3A13C;
  --lijn:rgba(12,42,46,.14);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --pad:clamp(20px,5vw,72px);
  --radius:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zand);color:var(--inkt);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--avondzon);outline-offset:3px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:200;background:var(--schelp);padding:10px 16px;width:auto;height:auto;clip:auto}

h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.015em;line-height:1.06;margin:0}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:400;line-height:1.2}

.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--getij);margin:0 0 14px}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);max-width:52ch;color:rgba(12,42,46,.78)}

/* ---------- navigatie ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px var(--pad);
  transition:background .45s ease,box-shadow .45s ease,padding .45s ease;
}
.nav.vast{background:var(--schelp);box-shadow:0 1px 0 var(--lijn);padding-top:12px;padding-bottom:12px}
.nav--effen{background:var(--schelp);box-shadow:0 1px 0 var(--lijn);position:sticky}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none}
.merk svg{width:30px;height:30px;flex:none}
.merk b{font-family:var(--display);font-weight:400;font-size:1.28rem;letter-spacing:.01em}
.merk small{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.6;margin-top:-4px}
.merk img{max-height:44px;width:auto}
.nav,.nav a{color:var(--schelp)}
.nav.vast,.nav.vast a,.nav--effen,.nav--effen a{color:var(--inkt)}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:500;position:relative;padding:4px 0;display:inline-block}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s ease}
.nav-links a:hover::after{right:0}
.nav-links ul{display:none}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.hero-lagen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(170deg,#2b5c60,#0c2a2e)}
.hero-lagen figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 2.4s ease}
.hero-lagen figure.aan{opacity:1}
.hero-lagen img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:drift 22s linear infinite alternate}
@keyframes drift{to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
.hero-lagen::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,42,46,.62) 0%,rgba(12,42,46,.12) 34%,rgba(12,42,46,.34) 62%,rgba(12,42,46,.82) 100%);
}
.hero-inhoud{position:relative;z-index:2;color:#fff;padding:0 var(--pad) 34px;text-align:center;max-width:940px;margin:0 auto}
.hero-inhoud .eyebrow{color:rgba(255,255,255,.82)}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero h1 em{font-style:italic;font-weight:300}
.hero-sub{margin:20px auto 0;max-width:44ch;color:rgba(255,255,255,.9);font-size:1.02rem}
.hero-link{
  display:inline-block;margin-top:22px;color:#fff;text-decoration:none;font-size:.86rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:5px;
}
.hero-link:hover{border-color:var(--avondzon)}
.slide-punten{display:flex;gap:9px;justify-content:center;margin-top:30px}
.slide-punten button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s;padding:0}
.slide-punten button.aan{background:#fff;transform:scale(1.35)}

.meeuw{position:absolute;z-index:3;top:22%;left:-12%;width:52px;opacity:0;pointer-events:none}
.meeuw.vliegt{animation:overvliegen 13s linear 1}
@keyframes overvliegen{
  0%{opacity:0;transform:translate(0,0)}
  12%{opacity:.75}
  88%{opacity:.75}
  100%{opacity:0;transform:translate(128vw,-42px)}
}
.meeuw path{animation:wiek 1.5s ease-in-out infinite}
@keyframes wiek{50%{transform:scaleY(.42)}}

/* ---------- stuifzand ---------- */
.stuifzand{position:fixed;inset:0;z-index:45;pointer-events:none}
@media(prefers-reduced-motion:reduce){.stuifzand{display:none}}

/* ---------- zoekbalk ---------- */
.zoek-wrap{position:relative;z-index:5;padding:0 var(--pad);margin-top:-6px;transform:translateY(38px)}
.zoek{
  max-width:1120px;margin:0 auto;background:var(--schelp);
  box-shadow:0 26px 60px -28px rgba(12,42,46,.5);
  display:grid;grid-template-columns:1.5fr 1.45fr .95fr auto;align-items:stretch;
  border-radius:var(--radius);
}
.veld{padding:16px 20px;border-right:1px solid var(--lijn);display:flex;flex-direction:column;gap:3px;min-width:0}
.veld:last-of-type{border-right:0}
.veld label{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--getij)}
.veld input,.veld select{border:0;background:none;padding:2px 0;width:100%;font-size:.98rem;font-weight:500}
.veld select{appearance:none;cursor:pointer}
.veld input[type=date]{cursor:pointer}
.stap{display:flex;align-items:center;gap:12px}
.stap button{width:24px;height:24px;border:1px solid var(--lijn);border-radius:50%;font-size:1rem;line-height:1;display:grid;place-items:center;transition:.2s}
.stap button:hover{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.stap span{font-size:.98rem;font-weight:500;min-width:74px}
.zoek-knop{
  background:var(--zee);color:#fff;padding:0 34px;font-weight:600;font-size:.94rem;
  letter-spacing:.06em;transition:background .3s ease;display:flex;align-items:center;gap:10px;
}
.zoek-knop:hover{background:var(--inkt)}
@media(max-width:980px){
  .zoek{grid-template-columns:1fr 1fr}
  .veld{border-bottom:1px solid var(--lijn)}
  .veld:nth-child(odd){border-right:1px solid var(--lijn)}
  .veld:nth-child(even){border-right:0}
  .zoek-knop{grid-column:1/-1;padding:17px;justify-content:center}
}
@media(max-width:520px){
  .zoek{grid-template-columns:1fr}
  .veld{border-right:0!important}
  .zoek-wrap{transform:translateY(24px)}
}

/* ---------- secties ---------- */
.sectie{padding:clamp(88px,11vw,150px) var(--pad)}
.sectie--zand{background:var(--zand)}
.sectie--schelp{background:var(--schelp)}
.sectie--diep{background:var(--inkt);color:var(--schuim)}
.sectie--diep h2,.sectie--diep h3{color:var(--schelp)}
.sectie--diep .eyebrow{color:var(--avondzon)}
.wrap{max-width:1200px;margin:0 auto}
.kop{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:46px}
.kop p{margin:14px 0 0}

/* ---------- resultaten ---------- */
.resultaat-grid{display:grid;grid-template-columns:246px 1fr;gap:44px;align-items:start}
@media(max-width:900px){.resultaat-grid{grid-template-columns:1fr;gap:26px}}

.filters{position:sticky;top:88px;font-size:.92rem}
@media(max-width:900px){.filters{position:static}}
.filter-blok{padding:18px 0;border-bottom:1px solid var(--lijn)}
.filter-blok:first-child{padding-top:0}
.filter-blok h4{margin:0 0 12px;font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--getij)}
.keuze{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;user-select:none}
.keuze input{appearance:none;width:15px;height:15px;border:1px solid var(--getij);flex:none;transition:.2s;border-radius:1px}
.keuze input:checked{background:var(--zee);border-color:var(--zee);box-shadow:inset 0 0 0 3px var(--schelp)}
.keuze small{margin-left:auto;opacity:.5;font-size:.8rem}
input[type=range]{width:100%;accent-color:var(--zee)}
.range-uitleg{display:flex;justify-content:space-between;font-size:.8rem;opacity:.65;margin-top:4px}
.wis{margin-top:18px;font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}

.resultaat-balk{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.resultaat-balk strong{font-weight:600}
.sorteer{border:1px solid var(--lijn);padding:8px 12px;background:var(--schelp);font-size:.88rem;cursor:pointer;appearance:none}

.kaarten{display:flex;flex-direction:column;gap:20px}
.kaart{
  display:grid;grid-template-columns:270px 1fr;background:var(--schelp);
  border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease;
}
.kaart:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(12,42,46,.45)}
.kaart-beeld{position:relative;background:linear-gradient(160deg,#3a6d6c,#0c2a2e);min-height:212px}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vlag{
  position:absolute;top:12px;left:12px;background:var(--avondzon);color:var(--inkt);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 9px;
}
.kaart-body{padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.kaart-plek{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--getij)}
.kaart h3{margin:0}
.kaart h3 a{text-decoration:none}
.kaart h3 a:hover{color:var(--zee)}
.kenmerken{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.kenmerk{font-size:.76rem;border:1px solid var(--lijn);padding:3px 9px;border-radius:99px;color:rgba(12,42,46,.72)}
.kaart-voet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.cijfer{display:flex;align-items:center;gap:9px;font-size:.85rem}
.cijfer b{background:var(--zee);color:#fff;padding:4px 8px;font-weight:600;font-size:.9rem}
.prijs{text-align:right}
.prijs small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--getij);font-weight:600}
.prijs strong{font-family:var(--display);font-size:1.7rem;font-weight:400;line-height:1}
.prijs span{font-size:.78rem;opacity:.6}
.boek{
  display:inline-flex;align-items:center;gap:9px;background:var(--zee);color:#fff;
  padding:12px 20px;text-decoration:none;font-size:.88rem;font-weight:600;
  transition:background .3s ease,gap .3s ease;
}
.boek:hover{background:var(--inkt);gap:14px}
.partner-noot{font-size:.72rem;color:var(--getij);margin:8px 0 0}
@media(max-width:640px){
  .kaart{grid-template-columns:1fr}
  .kaart-beeld{min-height:190px}
}
.leeg{padding:60px 24px;text-align:center;border:1px dashed var(--lijn)}
.leeg h3{margin-bottom:8px}

/* ---------- getijband ---------- */
.getij-band{position:relative;height:150px;background:var(--inkt);overflow:hidden}
.getij-band svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.golf-a{fill:#143a3e;animation:schuiven 19s linear infinite}
.golf-b{fill:var(--zand);animation:schuiven 13s linear infinite reverse}
@keyframes schuiven{to{transform:translateX(-50%)}}

/* ---------- bestemmingen ---------- */
.bestemmingen{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.plek{position:relative;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(160deg,#3a6d6c,#0c2a2e);border-radius:var(--radius)}
.plek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.plek:hover img{transform:scale(1.07)}
.plek::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,42,46,0) 38%,rgba(12,42,46,.8) 100%)}
.plek-tekst{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.plek-tekst h3{color:#fff}
.plek-tekst p{margin:4px 0 0;font-size:.82rem;opacity:.85}
.plek--groot{grid-column:span 2;grid-row:span 2}
.plek--breed{grid-column:span 2}
@media(max-width:860px){
  .bestemmingen{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .plek--groot{grid-row:span 2}
}

/* ---------- werkwijze ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:20px}
@media(max-width:800px){.stappen{grid-template-columns:1fr;gap:26px}}
.stap-item{border-top:1px solid rgba(207,224,218,.28);padding-top:20px}
.stap-item .nr{font-family:var(--display);font-size:2.6rem;color:var(--avondzon);line-height:1;display:block;margin-bottom:10px}
.stap-item p{font-size:.95rem;color:rgba(207,224,218,.82);margin:8px 0 0}
.partners{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.partners span{border:1px solid rgba(207,224,218,.3);padding:9px 16px;font-size:.82rem;letter-spacing:.08em}

/* ---------- aanbieding ---------- */
.actie{display:grid;grid-template-columns:1fr 1fr;background:var(--schelp);border:1px solid var(--lijn);overflow:hidden;align-items:stretch}
.actie-beeld{position:relative;min-height:340px;background:linear-gradient(160deg,#3a6d6c,#0c2a2e)}
.actie-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.actie-tekst{padding:clamp(28px,4vw,56px)}
.actie-tekst p{margin:16px 0 26px}
@media(max-width:800px){.actie{grid-template-columns:1fr}}

/* ---------- geluidsknop ---------- */
.geluid{
  position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:11px;
  background:var(--schelp);border:1px solid var(--lijn);padding:11px 17px 11px 14px;
  box-shadow:0 16px 34px -20px rgba(12,42,46,.6);border-radius:99px;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;transition:.3s;
}
.geluid:hover{background:#fff}
.staafjes{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.staafjes i{width:2.5px;background:var(--getij);height:4px;border-radius:2px;transition:background .3s}
.geluid.aan .staafjes i{background:var(--zee);animation:deinen 2.4s ease-in-out infinite}
.geluid.aan .staafjes i:nth-child(2){animation-delay:-.5s}
.geluid.aan .staafjes i:nth-child(3){animation-delay:-1.1s}
.geluid.aan .staafjes i:nth-child(4){animation-delay:-1.7s}
@keyframes deinen{0%,100%{height:4px}45%{height:15px}}
@media(max-width:520px){.geluid{right:14px;bottom:14px;padding:10px 14px}.geluid b{display:none}}

/* ---------- losse pagina's en berichten ---------- */
.pagina{padding:calc(clamp(88px,11vw,150px) + 40px) var(--pad) clamp(70px,9vw,120px)}
.pagina-inhoud{max-width:70ch;margin:0 auto}
.pagina-inhoud h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:26px}
.pagina-inhoud h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:38px 0 12px}
.pagina-inhoud p{margin:0 0 18px}
.pagina-inhoud ul,.pagina-inhoud ol{margin:0 0 18px 20px}
.pagina-inhoud img{margin:24px 0}
.pagina-inhoud blockquote{border-left:2px solid var(--getij);margin:24px 0;padding-left:20px;font-family:var(--display);font-size:1.2rem}

.verblijf-kop{position:relative;min-height:62svh;display:flex;align-items:flex-end;background:linear-gradient(160deg,#3a6d6c,#0c2a2e)}
.verblijf-kop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.verblijf-kop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,42,46,.5),rgba(12,42,46,.85))}
.verblijf-kop-tekst{position:relative;z-index:2;color:#fff;padding:0 var(--pad) 46px;max-width:1200px;margin:0 auto;width:100%}
.verblijf-kop-tekst h1{color:#fff;font-size:clamp(2.2rem,5vw,4rem)}
.verblijf-body{display:grid;grid-template-columns:1fr 330px;gap:52px;max-width:1200px;margin:0 auto;padding:clamp(50px,7vw,90px) var(--pad)}
@media(max-width:900px){.verblijf-body{grid-template-columns:1fr;gap:34px}}
.boek-kaart{background:var(--schelp);border:1px solid var(--lijn);padding:26px;position:sticky;top:96px;align-self:start}
@media(max-width:900px){.boek-kaart{position:static}}
.boek-kaart dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:20px 0;font-size:.9rem}
.boek-kaart dt{color:var(--getij);font-weight:600}
.boek-kaart dd{margin:0;text-align:right}
.terug{display:inline-block;margin-top:18px;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
.voet{background:var(--inkt);color:rgba(207,224,218,.78);padding:clamp(64px,8vw,96px) var(--pad) 34px}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;max-width:1200px;margin:0 auto}
@media(max-width:860px){.voet-grid{grid-template-columns:1fr 1fr;gap:30px}}
.voet h4,.voet .widget-title{font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--avondzon);margin:0 0 14px;font-weight:700}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.voet a{text-decoration:none;font-size:.9rem;opacity:.85}
.voet a:hover{opacity:1;color:#fff}
.voet .merk b,.voet .merk small{color:var(--schelp)}
.voet-onder{max-width:1200px;margin:52px auto 0;padding-top:22px;border-top:1px solid rgba(207,224,218,.16);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;opacity:.6}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.zicht{opacity:1;transform:none}

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

/* ---------- contactformulier ---------- */
.contact-link{text-decoration:underline;text-underline-offset:3px;color:var(--avondzon);opacity:1}
.contact-link:hover{color:#fff}

.contact-overlay{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(12,42,46,.72);backdrop-filter:blur(3px);
  overflow-y:auto;
}
.contact-overlay:target,
.contact-overlay.open{display:flex}
.contact-sluit-achter{position:absolute;inset:0}

.contact-venster{
  position:relative;background:var(--schelp);color:var(--inkt);
  width:100%;max-width:620px;padding:clamp(26px,4vw,46px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);border-radius:var(--radius);
  margin:auto;animation:opduiken .45s cubic-bezier(.2,.7,.3,1);
}
@keyframes opduiken{from{opacity:0;transform:translateY(18px)}}
.contact-sluit{position:absolute;top:12px;right:16px;font-size:1.8rem;line-height:1;color:var(--getij);padding:6px}
.contact-sluit:hover{color:var(--inkt)}
.contact-intro{margin:14px 0 26px;color:rgba(12,42,46,.75);font-size:.96rem}

.contact-form p{margin:0 0 16px}
.contact-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.contact-rij{grid-template-columns:1fr;gap:0}}
.contact-form label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--getij);margin-bottom:6px}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;border:1px solid var(--lijn);background:#fff;padding:11px 13px;
  font-size:.98rem;border-radius:var(--radius);
}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{border-color:var(--getij);outline:none;box-shadow:0 0 0 3px rgba(78,132,128,.16)}
.contact-honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-noot{font-size:.8rem;color:var(--getij);border-left:2px solid var(--lijn);padding-left:12px}
.contact-verstuur{border:0;margin-top:4px}
.contact-verstuur[disabled]{opacity:.6;cursor:default}
.contact-status{font-size:.9rem;margin-top:14px!important;min-height:1.2em}
.contact-status.goed{color:var(--zee);font-weight:600}
.contact-status.fout{color:#a33a24;font-weight:600}
body.contact-open{overflow:hidden}


/* ---------- Contact Form 7 in de overlay ---------- */
.contact-cf7 .wpcf7{margin:0}
.contact-cf7 .wpcf7 form{margin:0}
.contact-cf7 p{margin:0 0 16px}
.contact-cf7 label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--getij);margin-bottom:6px}
.contact-cf7 input[type=text],
.contact-cf7 input[type=email],
.contact-cf7 input[type=tel],
.contact-cf7 input[type=url],
.contact-cf7 input[type=date],
.contact-cf7 input[type=number],
.contact-cf7 select,
.contact-cf7 textarea{
  width:100%;border:1px solid var(--lijn);background:#fff;padding:11px 13px;
  font-size:.98rem;font-family:var(--body);color:var(--inkt);border-radius:var(--radius);
}
.contact-cf7 textarea{resize:vertical;min-height:120px}
.contact-cf7 input:focus,
.contact-cf7 select:focus,
.contact-cf7 textarea:focus{border-color:var(--getij);outline:none;box-shadow:0 0 0 3px rgba(78,132,128,.16)}
.contact-cf7 input[type=submit],
.contact-cf7 button[type=submit]{
  display:inline-flex;align-items:center;gap:9px;background:var(--zee);color:#fff;border:0;
  padding:13px 22px;font-family:var(--body);font-size:.88rem;font-weight:600;cursor:pointer;
  border-radius:var(--radius);transition:background .3s ease;
}
.contact-cf7 input[type=submit]:hover,
.contact-cf7 button[type=submit]:hover{background:var(--inkt)}
.contact-cf7 .wpcf7-spinner{margin-left:10px}

/* meldingen van de plugin in de stijl van het thema */
.contact-cf7 .wpcf7-not-valid-tip{color:#a33a24;font-size:.8rem;margin-top:5px}
.contact-cf7 .wpcf7-response-output{
  border:0!important;border-left:2px solid var(--getij)!important;
  margin:18px 0 0!important;padding:10px 14px!important;font-size:.9rem;
  background:rgba(78,132,128,.08);
}
.contact-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.contact-cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-cf7 .wpcf7 form.failed .wpcf7-response-output{border-left-color:#a33a24!important;background:rgba(163,58,36,.08)}
.contact-cf7 .wpcf7 form.sent .wpcf7-response-output{border-left-color:var(--zee)!important;color:var(--zee);font-weight:600}

/* ============================================================
   VERSIE 2 — zoekbalk, raster, kaart, kalender en portaal
   Zelfde palet en dezelfde scherpe hoeken als de rest.
   ============================================================ */

/* ---------- hero: de claimregel ---------- */
.hero-claim{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem);color:#fff;margin:14px 0 0;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}

/* ---------- zoekbalk: Waar? Wanneer? Gasten ---------- */
.veld--wanneer .datums{display:flex;align-items:center;gap:8px}
.veld--wanneer .datums input{flex:1;min-width:0}
.veld--wanneer .datums span{color:var(--getij)}
.veld input::placeholder{color:rgba(12,42,46,.4);font-weight:400}
.veld:focus-within{background:rgba(207,224,218,.28)}

@media(max-width:980px){
  .zoek{grid-template-columns:1fr}
  .veld{border-right:0!important;border-bottom:1px solid var(--lijn)}
  .veld input,.veld select{font-size:16px;padding:6px 0} /* voorkomt inzoomen op iOS */
  .stap button{width:34px;height:34px}
  .zoek-knop{padding:18px;justify-content:center}
}

/* ---------- filterkolom: uitklapper op mobiel ---------- */
.filter-opener{display:none;width:100%;border:1px solid var(--zee);color:var(--zee);
  padding:13px 18px;font-weight:600;font-size:.9rem;background:var(--schelp);margin-bottom:14px}
@media(max-width:900px){
  .filter-opener{display:block}
  .filter-inhoud{display:none}
  .filters.open .filter-inhoud{display:block}
}

/* ---------- weergaveknoppen ---------- */
.balk-rechts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.weergave{display:flex;border:1px solid var(--lijn);background:var(--schelp)}
.weergave button{padding:8px 14px;font-size:.84rem;font-weight:600;color:var(--getij);transition:.2s}
.weergave button + button{border-left:1px solid var(--lijn)}
.weergave button.aan{background:var(--zee);color:#fff}
.weergave button:hover:not(.aan){color:var(--inkt)}

/* ---------- rasterweergave: grote foto's, 3 / 2 / 1 ---------- */
.kaarten--raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1080px){.kaarten--raster{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:640px){.kaarten--raster{grid-template-columns:1fr}}

.kaarten--raster .kaart{grid-template-columns:1fr}
.kaarten--raster .kaart-beeld{min-height:0;aspect-ratio:4/3}
.kaarten--raster .kaart-body{padding:20px 22px 24px}
.kaarten--raster .kaart h3{font-size:1.28rem}
.kaarten--raster .kaart-voet{align-items:flex-end}
.kaarten--raster .prijs strong{font-size:1.55rem}
.kaarten--raster .boek{width:100%;justify-content:center;margin-top:12px}
.kaarten--raster .kenmerk:nth-child(n+5){display:none}

.vlag--particulier{top:auto;bottom:12px;background:var(--schelp);color:var(--zee)}

.vrij-melding{margin:2px 0 0;font-size:.82rem;font-weight:600;color:var(--zee)}
.vrij-melding.bezet{color:#a33a24}

/* ---------- kaartweergave ---------- */
.kaartweergave{height:520px;border:1px solid var(--lijn);background:var(--schuim)}
.kaartweergave[hidden]{display:none}
.kaart-popup{font-family:var(--body);font-size:.86rem}
.kaart-popup strong{display:block;font-family:var(--display);font-size:1rem;font-weight:400;margin-bottom:2px}
.detail-kaart{height:320px;border:1px solid var(--lijn);margin:8px 0 26px;background:var(--schuim)}
@media(max-width:640px){.kaartweergave{height:400px}}

/* ---------- beschikbaarheidskalender ---------- */
.kalender{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:26px;
  background:var(--schelp);border:1px solid var(--lijn);padding:22px;margin:8px 0 12px}
@media(max-width:620px){.kalender{grid-template-columns:1fr}}
.kalender h4{margin:0 0 10px;font-family:var(--body);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--getij)}
.kalender-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:.8rem}
.kalender-weekdag{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--getij);padding-bottom:4px}
.kalender-dag{padding:5px 0;background:rgba(207,224,218,.45)}
.kalender-dag.bezet{background:rgba(163,58,36,.14);color:#a33a24;text-decoration:line-through}
.kalender-dag.verleden{background:none;color:rgba(12,42,46,.25)}
.kalender-uitleg{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--getij);margin:0 0 20px}
.stip{width:11px;height:11px;display:inline-block;background:rgba(207,224,218,.9);margin-left:10px}
.kalender-uitleg .stip:first-child{margin-left:0}
.stip--bezet{background:rgba(163,58,36,.32)}

/* ---------- galerij op de detailpagina ---------- */
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:8px 0 26px}
.galerij img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- meldingen ---------- */
.melding{padding:14px 18px;margin:0 0 26px;font-size:.94rem;border-left:2px solid var(--zee);background:rgba(78,132,128,.1)}
.melding--fout{border-left-color:#a33a24;background:rgba(163,58,36,.09);color:#a33a24;font-weight:600}

/* ---------- formulieren buiten de contactoverlay ---------- */
.hpk-form{max-width:720px}
.hpk-form fieldset{border:0;border-top:1px solid var(--lijn);margin:0 0 26px;padding:24px 0 0}
.hpk-form fieldset:first-of-type{border-top:0;padding-top:0}
.hpk-form legend{font-family:var(--display);font-weight:300;font-size:1.5rem;padding:0;margin-bottom:14px}
.hpk-form p{margin:0 0 18px}
.hpk-form label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--getij);margin-bottom:6px}
.hpk-form input,.hpk-form select,.hpk-form textarea{
  width:100%;border:1px solid var(--lijn);background:#fff;padding:11px 13px;font-size:.98rem;border-radius:var(--radius)}
.hpk-form textarea{resize:vertical;min-height:120px}
.hpk-form input:focus,.hpk-form select:focus,.hpk-form textarea:focus{
  border-color:var(--getij);outline:none;box-shadow:0 0 0 3px rgba(78,132,128,.16)}
.hpk-form input[type=file]{padding:9px;background:var(--schelp)}
.hpk-form .hint{display:block;font-size:.8rem;color:var(--getij);margin-top:5px;
  text-transform:none;letter-spacing:0;font-weight:400}
.hpk-form .velden-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.hpk-form .velden-rij{grid-template-columns:1fr;gap:0}}
.hpk-form .vinkjes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 16px}
.hpk-form .vinkjes label{display:flex;align-items:center;gap:9px;font-size:.92rem;letter-spacing:0;
  text-transform:none;font-weight:400;color:var(--inkt);margin:0;padding:5px 0;cursor:pointer}
.hpk-form .vinkjes input{width:15px;height:15px;flex:none;accent-color:var(--zee)}
.hpk-honeypot{position:absolute!important;left:-9999px}
.hpk-form button[type=submit]{border:0}

/* ---------- twee kolommen (inloggen naast registreren) ---------- */
.twee-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:820px){.twee-kolommen{grid-template-columns:1fr}}
.blok{background:var(--schelp);border:1px solid var(--lijn);padding:clamp(22px,3.5vw,36px)}
.blok h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:16px}
.voordelen{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0 0 40px}
@media(max-width:820px){.voordelen{grid-template-columns:1fr;gap:22px}}
.voordelen h3{margin-bottom:8px}
.voordelen p{margin:0;color:rgba(12,42,46,.75);font-size:.95rem}

/* ---------- eigenarenportaal ---------- */
.portaal-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.portaal-acties{display:flex;gap:10px;flex-wrap:wrap}
.knop-lijn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--zee);color:var(--zee);
  padding:11px 19px;text-decoration:none;font-size:.88rem;font-weight:600;transition:.25s}
.knop-lijn:hover{background:var(--zee);color:#fff}
.portaal-lijst{display:grid;gap:14px}
.portaal-rij{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:center;
  background:var(--schelp);border:1px solid var(--lijn);padding:14px}
@media(max-width:760px){.portaal-rij{grid-template-columns:1fr;gap:14px}}
.portaal-beeld{aspect-ratio:4/3;background:linear-gradient(160deg,#3a6d6c,#0c2a2e);overflow:hidden}
.portaal-beeld img{width:100%;height:100%;object-fit:cover}
.portaal-rij h3{margin:6px 0 4px}
.portaal-meta{margin:0;color:var(--getij);font-size:.88rem}
.portaal-knoppen{display:grid;gap:8px;justify-items:stretch}
.portaal-knoppen .knop-lijn,.portaal-knoppen .boek{justify-content:center}
.offline-link{font-size:.82rem;color:#a33a24;text-align:center;text-decoration:underline;text-underline-offset:3px}
.status{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px}
.status--publish{background:rgba(78,132,128,.2);color:var(--zee)}
.status--pending{background:rgba(227,161,60,.28);color:#7a4f10}
.status--draft{background:rgba(12,42,46,.1);color:rgba(12,42,46,.6)}

/* ---------- verhuurdersblok op de homepage ---------- */
.verhuren-blok{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:860px){.verhuren-blok{grid-template-columns:1fr}}
.verhuren-blok ul{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px}
.verhuren-blok li{position:relative;padding-left:22px;color:rgba(207,224,218,.85);font-size:.96rem}
.verhuren-blok li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--avondzon)}
.verhuren-blok .boek{background:var(--schelp);color:var(--inkt)}
.verhuren-blok .boek:hover{background:#fff}
.verhuren-cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(207,224,218,.22)}
.verhuren-cijfers div{background:var(--inkt);padding:22px}
.verhuren-cijfers b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:300;color:var(--avondzon);line-height:1}
.verhuren-cijfers span{font-size:.84rem;color:rgba(207,224,218,.78)}

/* de lijst kan verborgen worden als de kaart aan staat */
.kaarten[hidden]{display:none}

/* ---------- bestemmingsfilter: kust met gebieden eronder ---------- */
.kust-groep + .kust-groep{margin-top:10px;padding-top:10px;border-top:1px dotted var(--lijn)}
.keuze--kust{font-weight:600}
.kust-gebieden{margin-left:25px}
.keuze--gebied{font-size:.88rem;color:rgba(12,42,46,.8)}
.keuze--gebied input{width:13px;height:13px}