/*
Theme Name: Waterside Cottage
Theme URI: 
Author: Bureau Gerritsma / Rogier
Description: Thema voor vakantiehuis Waterside Cottage aan het Gein in Abcoude. Gebaseerd op een warm, landelijk ontwerp met een riviermotief als terugkerend element.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: geinoord
*/

:root{
  --groen-diep:#28372B;
  --groen-mid:#48604A;
  --rivier:#7C99A0;
  --rivier-licht:#DCE7E6;
  --zand:#E9DFC5;
  --linnen:#F8F3E7;
  --roest:#8B5A3C;
  --roest-donker:#6E4530;
  --inkt:#232C22;
  --wit:#FFFEFB;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans', sans-serif;
  color:var(--inkt);
  background:var(--linnen);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--groen-diep);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--roest-donker); font-weight:600; display:inline-block; margin-bottom:14px;
}

/* HEADER */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
header.site.scrolled{
  background:rgba(248,243,231,0.94); backdrop-filter:blur(6px);
  padding:14px 0; box-shadow:0 1px 0 rgba(40,55,43,0.08);
}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:23px; color:var(--wit); transition:color .4s ease; display:flex; align-items:center; gap:10px;
}
header.site.scrolled .logo{color:var(--groen-diep);}
.logo img{max-height:40px;}
nav.main ul{list-style:none; display:flex; gap:36px;}
nav.main a{
  font-size:14.5px; color:var(--wit); font-weight:500; letter-spacing:.01em;
  position:relative; padding-bottom:4px; transition:color .4s ease;
}
header.site.scrolled nav.main a{color:var(--groen-diep);}
nav.main a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .25s ease;
}
nav.main a:hover::after{width:100%;}
.nav-toggle{display:none; background:none; border:none; color:var(--wit); font-family:'Work Sans'; font-size:14px; cursor:pointer;}
header.site.scrolled .nav-toggle{color:var(--groen-diep);}

/* HERO */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(35,44,34,0.25) 0%, rgba(35,44,34,0.15) 40%, rgba(35,44,34,0.75) 100%),
    radial-gradient(ellipse at 30% 20%, #8CA98F 0%, #5C7A5E 35%, #33452F 75%),
    linear-gradient(140deg, #7C99A0 0%, #48604A 55%, #28372B 100%);
  padding-bottom:90px;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, rgba(124,153,160,0) 0%, rgba(124,153,160,0.35) 100%);
  mix-blend-mode:overlay;
}
.hero-content{position:relative; z-index:2; max-width:640px;}
.hero h1{
  font-size:clamp(38px, 6vw, 72px); color:var(--wit); font-style:italic; font-weight:500;
  line-height:1.05; margin-bottom:22px;
}
.hero p.lead{
  color:var(--rivier-licht); font-size:18px; max-width:480px; margin-bottom:34px; font-weight:300;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--roest); color:var(--wit); padding:14px 28px;
  font-size:14.5px; font-weight:500; letter-spacing:.02em; border-radius:2px;
  border:1px solid var(--roest); transition:background .25s ease, color .25s ease; cursor:pointer;
}
.btn:hover{background:transparent; color:var(--wit);}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.55); color:var(--wit);}
.btn.ghost:hover{background:rgba(255,255,255,0.12);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

/* RIVER MOTIF */
.river-motif{
  position:absolute; top:0; bottom:0; left:64px; width:120px;
  z-index:1; opacity:0.55; pointer-events:none; display:block;
}
@media (max-width:900px){ .river-motif{display:none;} }
.river-motif svg path{
  fill:none; stroke:var(--rivier-licht); stroke-width:1.4;
  stroke-dasharray:6 7; stroke-linecap:round;
}
.river-node{
  position:absolute; left:64px; width:120px; z-index:2;
  display:flex; align-items:center; transform:translate(-50%,-50%);
  pointer-events:none;
}
@media (max-width:900px){ .river-node{display:none;} }
.river-node .dot{
  width:9px; height:9px; border-radius:50%; background:var(--roest);
  box-shadow:0 0 0 4px rgba(248,243,231,0.9); flex-shrink:0;
}
.river-node .label{
  font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--groen-mid);
  font-weight:600; margin-left:14px; white-space:nowrap;
}

/* FACTS BAR */
.facts-bar{ background:var(--groen-diep); color:var(--wit); }
.facts-bar .wrap{ display:flex; flex-wrap:wrap; padding:26px 32px; }
.fact{ flex:1 1 180px; padding:10px 26px; border-left:1px solid rgba(255,255,255,0.15); }
.fact:first-child{border-left:none;}
.fact .num{font-family:'Fraunces'; font-style:italic; font-size:26px; color:var(--rivier-licht); display:block; margin-bottom:2px;}
.fact .txt{font-size:13.5px; color:rgba(255,254,251,0.85); letter-spacing:.01em;}

/* SECTIONS */
section{padding:120px 0; position:relative;}
.section-inner{position:relative; z-index:2;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:820px){ .grid-2{grid-template-columns:1fr; gap:40px;} }
.grid-2.rev .ph{order:2;}
@media (max-width:820px){ .grid-2.rev .ph{order:0;} }

h2{font-size:clamp(30px, 3.6vw, 44px); font-weight:500; margin-bottom:22px; line-height:1.1;}
h2 em{font-style:italic; color:var(--roest-donker);}
.body-text p{margin-bottom:16px; font-size:16.5px; color:#3A453A; max-width:52ch;}
.body-text.wide p{max-width:72ch;}

/* placeholder photo blocks */
.ph{
  position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden;
  background:linear-gradient(150deg, var(--zand) 0%, var(--rivier) 100%);
}
.ph.wide{aspect-ratio:16/10;}
.ph::after{
  content:attr(data-label);
  position:absolute; left:16px; bottom:16px;
  background:rgba(35,44,34,0.68); color:var(--wit);
  font-size:11.5px; letter-spacing:.06em; padding:6px 11px; border-radius:2px;
}
.ph img{width:100%; height:100%; object-fit:cover;}
.ph-grid{display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:100%;}
.ph-grid .ph:first-child{grid-row:1 / 3;}

.welkom{background:var(--linnen);}
.huis{background:var(--wit);}
.omgeving{background:var(--zand);}

.quote{ background:var(--groen-diep); color:var(--wit); text-align:center; padding:110px 0; }
.quote blockquote{
  font-family:'Fraunces'; font-style:italic; font-weight:400;
  font-size:clamp(24px,3vw,34px); max-width:760px; margin:0 auto 22px; line-height:1.4;
}
.quote cite{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--rivier-licht); font-style:normal;}

.cta-band{ background:var(--roest); color:var(--wit); text-align:center; padding:90px 0; }
.cta-band h1, .cta-band h2{color:var(--wit); margin-bottom:14px;}
.cta-band p{color:rgba(255,254,251,0.85); margin-bottom:32px; font-size:17px; max-width:600px; margin-left:auto; margin-right:auto;}
.cta-band .btn{background:var(--wit); color:var(--roest-donker); border-color:var(--wit);}
.cta-band .btn:hover{background:transparent; color:var(--wit);}

/* generic page template */
.page-header{padding:170px 0 40px;}
.page-header h1{font-size:clamp(32px,4vw,52px); margin-bottom:4px;}
.page-content{padding-bottom:100px;}
.page-content .body-text{max-width:720px;}
.page-content img{border-radius:2px; margin:24px 0;}

footer.site{background:var(--groen-diep); color:rgba(255,254,251,0.75); padding:56px 0 30px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; border-bottom:1px solid rgba(255,255,255,0.12); padding-bottom:36px; margin-bottom:22px;}
footer .f-logo{font-family:'Fraunces'; font-style:italic; font-size:21px; color:var(--wit); margin-bottom:10px;}
footer .f-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--rivier-licht); margin-bottom:12px; font-family:'Work Sans'; font-weight:600;}
footer .f-col a, footer .f-col p{display:block; font-size:14px; margin-bottom:8px; color:rgba(255,254,251,0.78);}
footer .fine{font-size:12.5px; text-align:center; color:rgba(255,254,251,0.5);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:820px){
  nav.main{display:none; position:absolute; top:100%; left:0; right:0; background:var(--wit); padding:20px 32px; box-shadow:0 10px 20px rgba(0,0,0,0.08);}
  nav.main.open{display:block;}
  nav.main ul{flex-direction:column; gap:16px;}
  nav.main a{color:var(--groen-diep) !important;}
  .nav-toggle{display:block;}
  section{padding:80px 0;}
}