/*
Theme Name: De Heren van Valkenburg
Theme URI: https://webstudio7.nl
Author: Webstudio 7
Author URI: https://webstudio7.nl
Description: Maatwerk thema voor B&B De Heren van Valkenburg (Voorstel A - Mergel & Kasteel). Klassieke Limburgse uitstraling met mergeltinten, petrol en goud. Bevat eigen beheerschermen voor Kamers, Arrangementen, Omgeving en Foto's, een koppelbaar boekingssysteem en een demo-wachtwoord.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: heren
*/

:root{
    --mergel:#EDE6D6;
    --mergel-diep:#DCD2BA;
    --leisteen:#0C4252;
    --oker:#A38841;
    --wit:#FFFDF9;
    --lijn:rgba(30,42,39,.18);
    --serif:"Cormorant Garamond",Georgia,serif;
    --sans:"Source Sans 3",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--leisteen);background:var(--mergel);line-height:1.55;font-size:17px}
  img{max-width:100%;display:block}
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1}
  h2{font-size:clamp(2rem,5vw,3rem)}
  h3{font-size:1.5rem}
  .wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
  section{padding-block:4rem}
  @media(min-width:900px){section{padding-block:6rem}}

  /* image containers replace the old grey placeholders */
  .shot{overflow:hidden;background:var(--mergel-diep);position:relative}
  .shot img{width:100%;height:100%;object-fit:cover}

  .knop{display:inline-flex;align-items:center;justify-content:center;background:var(--oker);color:var(--leisteen);font-weight:600;padding:.85rem 1.5rem;border:0;border-radius:2px;text-decoration:none;cursor:pointer;font-size:1rem;line-height:1}
  .knop:hover{background:#8a7338}
  .knop.licht{background:transparent;color:var(--leisteen);border:1.5px solid var(--leisteen)}
  :focus-visible{outline:3px solid var(--oker);outline-offset:3px}

  /* ---------- header (all items vertically centred) ---------- */
  header{position:sticky;top:0;z-index:20;background:rgba(237,230,214,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:1rem}
  .logo{display:flex;align-items:center;text-decoration:none}
  .logo-svg{height:54px;width:auto;display:block}
  @media(max-width:560px){.logo-svg{height:44px}}
  nav.desk{display:none}
  @media(min-width:900px){
    nav.desk{display:flex;align-items:center;gap:1.75rem;font-weight:600;font-size:.95rem}
    nav.desk a{display:inline-flex;align-items:center;line-height:1;text-decoration:none;height:42px}
    nav.desk a.knop{padding:.55rem 1.1rem}
  }
  .menu{width:42px;height:42px;flex:none;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  .menu i{display:block;width:22px;height:2px;background:var(--leisteen);box-shadow:0 -7px 0 var(--leisteen),0 7px 0 var(--leisteen)}
  @media(min-width:900px){.menu{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:0}
  .hero-media{position:relative;height:72vh;min-height:460px;overflow:hidden}
  .hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.03)}
  .hero-media .scrim{position:absolute;inset:0;background:
      linear-gradient(180deg,rgba(12,66,82,.05) 0%,rgba(12,66,82,.12) 42%,rgba(12,66,82,.66) 100%),
      linear-gradient(30deg,rgba(163,136,65,.28),rgba(163,136,65,0) 55%)}
  .hero .tekst{position:absolute;left:50%;transform:translateX(-50%);bottom:5.5rem;width:min(1120px,100% - 2.5rem);color:var(--wit);pointer-events:none}
  .hero h1{font-size:clamp(2.6rem,8vw,5.2rem);max-width:12ch;text-shadow:0 2px 20px rgba(0,0,0,.35)}
  .hero .tekst p{font-size:1.15rem;max-width:36ch;margin-top:.75rem;text-shadow:0 1px 12px rgba(0,0,0,.4)}

  /* booking bar — controls in a row, note full-width beneath a divider */
  .boek{background:var(--wit);border:1px solid var(--lijn);margin:-4.5rem auto 0;width:min(1000px,100% - 1.5rem);position:relative;z-index:2;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 20px 40px -24px rgba(30,42,39,.5)}
  .velden{display:grid;gap:.75rem}
  .boek label{font-size:.8rem;font-weight:600;display:block;margin-bottom:.25rem}
  .boek input,.boek select{width:100%;font:inherit;padding:.7rem .8rem;border:1px solid var(--lijn);background:var(--wit);border-radius:2px}
  .velden .knop{width:100%;padding-block:1rem}
  .boek .noot{font-size:.85rem;color:#4b5854;border-top:1px solid var(--lijn);padding-top:.9rem;text-align:center;margin:0}
  @media(min-width:900px){
    .boek{padding:1.5rem}
    .velden{grid-template-columns:1.2fr 1.2fr 1fr auto;align-items:end}
    .velden .knop{width:auto}
  }

  /* ---------- waarom direct boeken ---------- */
  .direct{padding-block:3rem}
  .direct ul{display:grid;gap:1rem;list-style:none}
  .direct li{padding-left:1.5rem;position:relative}
  .direct li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:.7rem;background:var(--oker);transform:rotate(45deg)}
  .direct li b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:500}
  @media(min-width:700px){.direct ul{grid-template-columns:repeat(3,1fr);gap:2rem}}

  /* ---------- kamers ---------- */
  .kamers{background:var(--wit)}
  .kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
  .kop p{max-width:52ch}
  .kamer-lijst{display:grid;gap:2rem}
  .kamer{display:grid;gap:1rem}
  .kamer .shot{aspect-ratio:4/3}
  .kamer h3{margin-bottom:.25rem}
  .kamer .prijs{font-family:var(--serif);font-size:1.6rem}
  .kamer .prijs small{font-family:var(--sans);font-size:.85rem}
  .kamer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem;color:#4b5854;margin:.5rem 0 1rem}
  .kamer ul li::before{content:"·";margin-right:.4rem;color:var(--oker)}
  @media(min-width:700px){.kamer-lijst{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.kamer-lijst{grid-template-columns:repeat(3,1fr)}.kamer.groot{grid-column:span 2;grid-template-columns:1.2fr 1fr;align-items:center}.kamer.groot .shot{aspect-ratio:auto;height:100%;min-height:320px}}

  /* ---------- extra's / upselling ---------- */
  .extras{background:var(--leisteen);color:var(--mergel)}
  .extras .kop p{color:var(--mergel-diep)}
  .extras .grid{display:grid;gap:1px;background:rgba(237,230,214,.15);border:1px solid rgba(237,230,214,.15)}
  .extra{background:var(--leisteen);padding:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
  .extra .icoon{width:52px;height:52px;flex:none;border:1px solid var(--oker);display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem;color:var(--oker)}
  .extra h3{color:var(--wit);font-size:1.35rem}
  .extra p{font-size:.95rem;color:var(--mergel-diep);margin:.3rem 0 .6rem}
  .extra .prijs{color:var(--oker);font-weight:600}
  @media(min-width:700px){.extras .grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.extras .grid{grid-template-columns:repeat(4,1fr)}.extra{grid-template-columns:1fr}}

  /* ---------- arrangementen ---------- */
  .arr-lijst{display:grid;gap:1.5rem}
  .arr{border:1px solid var(--lijn);background:var(--wit);display:grid}
  .arr .shot{aspect-ratio:16/9}
  .arr .body{padding:1.5rem}
  .arr .body p{margin:.5rem 0 1rem;color:#4b5854}
  .arr .pp{font-family:var(--serif);font-size:1.5rem;margin-bottom:1rem}
  @media(min-width:800px){.arr-lijst{grid-template-columns:repeat(3,1fr)}}

  /* ---------- omgeving (dark band, big gold distances) ---------- */
  .omgeving{background:var(--leisteen);color:var(--mergel)}
  .omgeving .head{max-width:54ch;margin-bottom:2.5rem}
  .omgeving h2{color:var(--wit)}
  .omgeving .intro{color:var(--mergel-diep);margin-top:.6rem}
  .plaats-grid{display:grid;gap:1px;background:rgba(237,230,214,.16);border:1px solid rgba(237,230,214,.16)}
  .plaats{background:var(--leisteen);padding:1.9rem 1.5rem}
  .plaats .num{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--oker)}
  .plaats .unit{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--mergel-diep);margin:.3rem 0 1rem}
  .plaats h3{color:var(--wit);font-size:1.3rem;margin-bottom:.35rem}
  .plaats p{color:var(--mergel-diep);font-size:.92rem}
  @media(min-width:600px){.plaats-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.plaats-grid{grid-template-columns:repeat(4,1fr)}}
  .op-donker{color:var(--mergel);border-color:var(--mergel)}
  .op-donker:hover{background:rgba(237,230,214,.1)}

  /* ---------- over ons (richer) ---------- */
  .over{background:var(--wit)}
  .over .grid{display:grid;gap:2.5rem}
  .over blockquote{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);font-style:italic;line-height:1.2;max-width:20ch;position:relative;padding-top:1.5rem}
  .over blockquote::before{content:"\201C";position:absolute;top:-1.2rem;left:-.2rem;font-family:var(--serif);font-size:5rem;line-height:1;color:var(--oker);opacity:.5}
  .over p.verhaal{margin-top:1.25rem;max-width:56ch}
  .over .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1.5rem;margin:1.75rem 0 1rem}
  .over .stat{border-top:2px solid var(--oker);padding-top:.5rem}
  .over .stat b{font-family:var(--serif);font-size:2.1rem;display:block;line-height:1}
  .over .stat span{font-size:.8rem;color:#4b5854}
  .over .sign{font-family:var(--serif);font-style:italic;font-size:1.25rem;margin:.25rem 0 1.5rem}
  .over .shot{aspect-ratio:4/5}
  @media(min-width:520px){.over .stats{grid-template-columns:repeat(4,1fr)}}
  @media(min-width:900px){.over .grid{grid-template-columns:1fr 1fr;align-items:center}}

  /* ---------- impressie: 6 vierkante foto's ---------- */
  .galerij{padding:0}
  .galerij .eyebrow{width:min(1120px,100% - 2.5rem);margin:0 auto;padding-block:2.5rem 1.25rem;text-align:center}
  .galerij .eyebrow h2{font-size:clamp(1.6rem,4vw,2.2rem)}
  .galerij .eyebrow p{color:#4b5854;margin-top:.35rem}
  .strip{display:grid;grid-template-columns:repeat(2,1fr)}
  .strip .vk{aspect-ratio:1;overflow:hidden;background:var(--mergel-diep)}
  .strip .vk img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  .strip .vk:hover img{transform:scale(1.05)}
  @media(min-width:600px){.strip{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1000px){.strip{grid-template-columns:repeat(6,1fr)}}
  @media(prefers-reduced-motion:reduce){.strip .vk img{transition:none}.strip .vk:hover img{transform:none}}

  /* ---------- footer (taller, petrol, contact + menu + credit) ---------- */
  footer{background:var(--leisteen);color:var(--mergel-diep);padding:3.75rem 0 1.5rem;font-size:.92rem}
  .foot-top{display:grid;gap:2.25rem}
  .fcol h4{font-family:var(--serif);color:var(--wit);font-size:1.2rem;font-weight:500;margin-bottom:.85rem}
  .fcol a{text-decoration:none}
  .fcol a:hover{color:var(--wit)}
  .fcol ul{list-style:none;display:grid;gap:.45rem}
  .fmerk{font-family:var(--serif);color:var(--wit);font-size:1.55rem;line-height:1.1;margin-bottom:.65rem}
  .brand p{max-width:34ch}
  .fsocial{display:flex;gap:.6rem;margin-top:1rem}
  .fsocial a{border:1px solid rgba(237,230,214,.35);border-radius:2px;padding:.35rem .75rem;font-size:.82rem}
  .fsocial a:hover{border-color:var(--mergel)}
  .fnote{font-size:.82rem;color:rgba(237,230,214,.6);margin-top:.75rem}
  .foot-top .knop{margin-top:.5rem}
  .foot-bottom{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:center;border-top:1px solid rgba(237,230,214,.18);margin-top:2.75rem;padding-top:1.5rem;font-size:.85rem}
  .foot-bottom nav{display:flex;flex-wrap:wrap;gap:1.25rem}
  .foot-bottom a{text-decoration:none}
  .credit a{color:var(--oker);text-decoration:none}
  .credit a:hover{text-decoration:underline}
  @media(min-width:760px){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}

  .sticky{position:fixed;bottom:0;left:0;right:0;z-index:30;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(12,66,82,.96);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--wit)}
  .sticky span{font-size:.85rem}
  .sticky span b{display:block;font-size:1rem}
  @media(min-width:900px){.sticky{display:none}}
  body{padding-bottom:72px}
  @media(min-width:900px){body{padding-bottom:0}}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =====================================================================
   THEMA-AANPASSINGEN t.o.v. het statische voorstel
   ===================================================================== */

/* WordPress admin bar spacing */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}

/* --- Kamers: strak, gelijk uitgelijnd raster (feedback José) ---------- */
.kamer-lijst{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:640px){.kamer-lijst{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kamer-lijst{grid-template-columns:repeat(3,1fr)}}
.kamer{display:flex;flex-direction:column;gap:1rem;background:var(--wit);border:1px solid var(--lijn)}
.kamer .shot{aspect-ratio:4/3;width:100%}
.kamer .kamer-body{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.25rem 1.5rem;flex:1}
.kamer h3{margin-bottom:.15rem}
.kamer .prijs{font-family:var(--serif);font-size:1.5rem}
.kamer .prijs small{font-family:var(--sans);font-size:.82rem;color:#4b5854}
.kamer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .85rem;font-size:.9rem;color:#4b5854;margin:.35rem 0 1rem}
.kamer ul li::before{content:"\00B7";margin-right:.4rem;color:var(--oker)}
.kamer .knop{margin-top:auto;align-self:flex-start}
/* optioneel: 1 kamer uitlichten voor wat variatie, maar blijft netjes uitgelijnd */
@media(min-width:1000px){
  .kamer.uitgelicht{grid-column:span 2;flex-direction:row;align-items:stretch}
  .kamer.uitgelicht .shot{aspect-ratio:auto;width:56%;min-height:340px}
  .kamer.uitgelicht .kamer-body{width:44%;justify-content:center}
}

/* --- Kamers archief (alle kamers) ------------------------------------ */
.pagina-hero{background:var(--leisteen);color:var(--mergel);padding:3.5rem 0 3rem}
.pagina-hero h1{color:var(--wit);font-size:clamp(2.2rem,5vw,3.2rem)}
.pagina-hero p{color:var(--mergel-diep);max-width:60ch;margin-top:.6rem}
.pagina{padding-block:4rem}
@media(min-width:900px){.pagina{padding-block:5rem}}

/* single kamer / arrangement */
.detail{display:grid;gap:2rem}
.detail .shot{aspect-ratio:16/10}
.detail .meta{font-family:var(--serif);font-size:1.8rem}
.detail .meta small{font-family:var(--sans);font-size:.9rem;color:#4b5854;display:block}
.detail .content{line-height:1.7}
.detail .content h2,.detail .content h3{margin:1.2rem 0 .5rem}
.detail .content p{margin-bottom:1rem}
.detail .kenmerken{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:1rem 0}
.detail .kenmerken li{background:var(--wit);border:1px solid var(--lijn);padding:.35rem .8rem;font-size:.9rem}
.detail-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
@media(min-width:700px){.detail-gallery{grid-template-columns:repeat(3,1fr)}.detail{grid-template-columns:1.1fr .9fr;align-items:start}.detail .shot{aspect-ratio:4/3}}
.detail-gallery .shot{aspect-ratio:1}
.terug{display:inline-block;margin-top:2rem}

/* booking embed container */
.boeking-embed{background:var(--wit);border:1px solid var(--lijn);padding:1.25rem;box-shadow:0 20px 40px -24px rgba(12,66,82,.5)}
.boeking-embed iframe{width:100%;border:0;min-height:520px;display:block}
.hero .boeking-embed{margin:-4.5rem auto 0;width:min(1000px,100% - 1.5rem);position:relative;z-index:2}

/* impressie fallback / cms */
.strip .vk{background:var(--mergel-diep)}

/* demo password gate */
.demo-gate{min-height:100vh;display:grid;place-items:center;background:var(--leisteen);color:var(--mergel);padding:2rem;text-align:center}
.demo-card{width:min(420px,100%);background:var(--wit);color:var(--leisteen);padding:2.5rem 2rem;border-top:4px solid var(--oker)}
.demo-card .logo-svg{height:64px;width:auto;margin:0 auto 1.5rem}
.demo-card h1{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin-bottom:.4rem}
.demo-card p{color:#4b5854;font-size:.95rem;margin-bottom:1.25rem}
.demo-card input{width:100%;font:inherit;padding:.8rem;border:1px solid var(--lijn);margin-bottom:1rem;text-align:center}
.demo-card .knop{width:100%}
.demo-card .fout{color:#a3341e;font-size:.9rem;margin-bottom:1rem}

/* wp core alignment helpers inside content */
.content img{height:auto}
.content .wp-block-image{margin:1.25rem 0}

/* --- Mobiel menu ----------------------------------------------------- */
nav.mobiel{display:none}
nav.desk li{list-style:none;display:inline-flex;align-items:center}
nav.desk .menu{display:flex;align-items:center;gap:1.75rem;margin:0;padding:0}
@media(min-width:900px){nav.mobiel{display:none!important}}
@media(max-width:899px){
  body.nav-open nav.mobiel{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.25rem 1.4rem;background:var(--mergel);border-top:1px solid var(--lijn)}
  nav.mobiel a{padding:.7rem 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--lijn)}
  nav.mobiel a.knop{border:0;margin-top:.75rem;justify-content:center;color:var(--leisteen)}
  nav.mobiel .menu-mob{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  nav.mobiel .menu-mob li{list-style:none}
  nav.mobiel .menu-mob a{display:block;padding:.7rem 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--lijn)}
}

/* --- Fotovlak-fallbacks (zolang er nog geen foto is) ----------------- */
.hero-media.geen-foto{background:linear-gradient(160deg,#cfe0e6,#a9c39b 45%,#4e5c3c)}
.shot.geen-foto{background:repeating-linear-gradient(45deg,var(--mergel) 0 14px,var(--mergel-diep) 14px 28px)}
.vk.geen-foto,.plaats.geen-foto{background:var(--mergel-diep)}

/* --- Omgeving-archief (licht) ---------------------------------------- */
.omgeving-lijst{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:700px){.omgeving-lijst{grid-template-columns:repeat(2,1fr)}}
.plaats-licht{background:var(--wit);border:1px solid var(--lijn);padding:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.plaats-licht .num-licht{font-family:var(--serif);font-size:2.6rem;color:var(--oker);line-height:1;min-width:2.4ch}
.plaats-licht .num-licht small{display:block;font-family:var(--sans);font-size:.68rem;color:#4b5854;margin-top:.2rem}
.plaats-licht h3{font-size:1.25rem;margin-bottom:.2rem}
.plaats-licht p{color:#4b5854}

/* --- Paginanavigatie ------------------------------------------------- */
.pagination{display:flex;gap:.5rem;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;min-width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--lijn);text-decoration:none;padding:0 .5rem}
.pagination .current{background:var(--oker);border-color:var(--oker);color:var(--leisteen);font-weight:600}