/* ===== theme.css — verfijnde kleuren, typografie, fotoplekken en afspraak-pop-up (laadt als laatste) ===== */
:root{
  --bg:#faf8f4; --bg2:#f2ece2; --ink:#1c1917; --muted:#6b6258; --line:#e3dbcd;
  --accent:#a47f4b; --accent-d:#85653a; --accent-l:#d3b88c; --deep:#1c1917; --cream:#efe6d6;
  --shadow:0 24px 60px -30px rgba(40,28,12,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#15130f;--bg2:#1d1a14;--ink:#f1ebe0;--muted:#a79d8d;--line:#363025;--accent:#c9ae88;--accent-d:#d8c09c;--deep:#0f0d0a}
}
body{font-size:16px;letter-spacing:.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:400}
::selection{background:var(--accent);color:#fff}
.label{color:var(--accent-d);letter-spacing:.42em}

/* knoppen */
.btn{border-color:var(--ink);letter-spacing:.3em;padding:16px 40px;font-weight:400}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid::before{background:var(--accent-d)}
.btn.solid:hover{color:#fff}

/* topbar + header */
.topbar{background:var(--deep);color:var(--cream);letter-spacing:.3em;font-size:10.5px;padding:11px 12px}
header.site{padding:16px clamp(20px,4vw,56px);border-bottom:1px solid transparent}
header.site.scrolled{border-color:var(--line);box-shadow:0 10px 30px -24px rgba(30,20,8,.4)}
nav.main a.l{font-weight:400;font-size:11.5px;letter-spacing:.24em}
nav.main a.book{background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:11px 22px;letter-spacing:.24em;transition:background .35s,border-color .35s,color .35s}
nav.main a.book:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}

/* hero */
.hero{min-height:min(88vh,860px);min-height:min(88svh,860px);background:var(--bg);isolation:isolate;display:flex;align-items:center;justify-content:center}
.hero::before{content:"";position:absolute;inset:0;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;animation:none;background:radial-gradient(ellipse 60% 55% at 50% 40%,color-mix(in srgb,var(--accent-l) 24%,transparent),transparent 72%)}
.hero h1{font-size:clamp(42px,7.2vw,118px);letter-spacing:.07em;font-weight:300}
.hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--accent-d);font-weight:400}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:clamp(24px,5vw,56px);height:1px;background:currentColor;opacity:.6}
.hero .hero-slot{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;background:transparent}
.hero-slot::before,.hero-slot::after{display:none}
.hero.has-photo::before{display:none}
.hero.has-photo .hero-slot::after{content:"";display:block;position:absolute;inset:0;transform:none;padding:0;background:linear-gradient(rgba(18,13,8,.46),rgba(18,13,8,.58));z-index:2}
.hero.has-photo .eyebrow{color:rgba(255,255,255,.9)}
.hero.has-photo h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero.has-photo .hero-cta .btn{color:#fff;border-color:rgba(255,255,255,.85)}
.hero.has-photo .hero-cta .btn::before{background:#fff}
.hero.has-photo .hero-cta .btn:hover{color:#1c1917}
.hero.has-photo .scroll-cue{background:rgba(255,255,255,.35)}
.hero.has-photo .scroll-cue::after{background:#fff}
.hero-photo-tag{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,24px);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.65;z-index:3;pointer-events:none}
.hero.has-photo .hero-photo-tag{display:none}
.hero-text,.scroll-cue{z-index:3}

/* paginakop */
.phero{background:linear-gradient(var(--bg2),var(--bg));padding:clamp(54px,8vw,110px) 20px clamp(30px,4vw,56px)}
.phero h1{font-size:clamp(34px,6vw,84px);letter-spacing:.09em;font-weight:300}
.phero h1::after{content:"";display:block;width:56px;height:1px;background:var(--accent);margin:clamp(20px,2.4vw,30px) auto 0}
.phero .label{color:var(--accent-d)}

/* secties */
section{padding:clamp(64px,9vw,128px) var(--pad)}
.alt{background:var(--bg2)}
.sec-head{margin-bottom:clamp(34px,4.4vw,64px)}
.sec-head h2{font-weight:300;letter-spacing:.02em}
.what h2{font-weight:300}

/* fotoplekken */
.slot{position:relative;display:block;margin:0;overflow:hidden;background:linear-gradient(155deg,#efe8dc,#e5dccb);aspect-ratio:3/4;isolation:isolate}
.slot.r45{aspect-ratio:4/5}.slot.r34{aspect-ratio:3/4}.slot.r169{aspect-ratio:16/9}.slot.r11{aspect-ratio:1/1}.slot.r1610{aspect-ratio:16/10}.slot.r23{aspect-ratio:2/3}
.slot.arch{border-radius:999px 999px 0 0}
.slot::before{content:"";position:absolute;inset:12px;border:1px solid rgba(164,127,75,.4);pointer-events:none;z-index:1;transition:inset .6s var(--ease),border-color .4s}
.slot.arch::before{border-radius:999px 999px 0 0}
.slot::after{content:"+\A fotos/" attr(data-foto) ".jpg";white-space:pre;text-align:center;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.22em;text-transform:uppercase;line-height:2.4;color:#8c7a62;z-index:1;padding:0 16px}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.6s var(--ease);z-index:2}
.slot.has img{opacity:1;transform:none}
.slot.has::before,.slot.has::after{display:none}
.card:hover .slot.has img,.tcard:hover .slot.has img,.gal .slot:hover img{transform:scale(1.045)}
.card:hover .slot::before,.tcard:hover .slot::before{inset:8px;border-color:rgba(164,127,75,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .slot{background:linear-gradient(155deg,#27221a,#1e1a14)}:root:not([data-theme="light"]) .slot::after{color:#a8967a}}

/* kaarten met foto */
.card{border:0!important;background:none!important;padding:0!important;box-shadow:none!important;transform:none!important}
.card h3{margin-top:22px;font-size:clamp(15px,1.4vw,20px);letter-spacing:.2em}
.card:hover{transform:none!important;box-shadow:none!important}
.grid{gap:clamp(16px,2.4vw,36px)}
.grid3{gap:clamp(24px,3vw,48px) clamp(16px,2.4vw,36px)}
.bq{border:0;padding:0;background:none}
.bq blockquote{margin:24px auto 12px;max-width:30ch;font-size:clamp(19px,1.8vw,24px)}
.bq figcaption{color:var(--accent-d)}
.bq:hover{border:0}
.about .slot{aspect-ratio:4/5;max-width:520px;width:100%;justify-self:end}
.tgrid .card h3{font-size:clamp(13px,1.2vw,17px);letter-spacing:.16em}

/* galerij */
.gal{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(12px,2vw,28px);max-width:1300px;margin:0 auto;align-items:center}
.gal .slot:nth-child(2){aspect-ratio:3/4.3}
.gal .slot{aspect-ratio:3/3.9}
@media (max-width:700px){.gal{grid-template-columns:1fr 1fr}.gal .slot:nth-child(2){grid-row:span 2;aspect-ratio:3/5}.gal .slot:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}}

/* afspraakkaarten in het boekingsscherm */
.tcard{border-color:var(--line);box-shadow:none}
.tcard .slot{aspect-ratio:16/10}
.tcard .tb{padding:26px 26px 30px}
.tcard h3{font-size:24px;letter-spacing:.1em}
.tcard:hover,.tcard:focus-visible{box-shadow:var(--shadow)}

/* CTA */
.cta{background:radial-gradient(ellipse 80% 120% at 50% 0%,#3a2f22,#1c1917 70%);color:var(--cream)}
.cta::before{background:radial-gradient(circle,rgba(211,184,140,.22),transparent 65%)}
.cta .label{color:var(--accent-l)}
.cta h2{font-weight:300}
.cta .hero-cta{margin-top:6px}
.cta .btn{border-color:rgba(255,255,255,.7);color:#fff}
.cta .btn:hover{color:#1c1917}

/* footer */
footer.site{background:var(--deep);color:#d9cfbd;border-top:0;padding-top:clamp(56px,7vw,96px)}
footer.site .logo{color:var(--cream)}
footer.site h4{color:var(--accent-l);font-weight:400}
footer.site a,footer.site p{color:#b9ae9b}
footer.site a:hover{color:#fff}
footer.site .btn{color:var(--cream)!important;border-color:rgba(239,230,214,.6)}
footer.site .btn:hover{color:#1c1917!important}
footer.site .btn::before{background:var(--cream)}
footer.site .news{border-color:rgba(239,230,214,.35)}
footer.site .news input{color:var(--cream)}
footer.site .news input::placeholder{color:#8f8573}
footer.site .news button{color:var(--cream)}
footer.site .copy{border-color:rgba(239,230,214,.14);color:#8f8573}
footer.site .copy a{color:#8f8573}

/* ===== afspraak-pop-up rechtsonder ===== */
.aw{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:250;display:flex;flex-direction:column;align-items:flex-end;gap:14px;font-family:var(--sans);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.aw.in{opacity:1;transform:none;pointer-events:auto}
html.menu-open .aw,html.intro-lock .aw{opacity:0;pointer-events:none}
.aw-btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:0 24px 0 20px;min-height:54px;border-radius:999px;font:400 11.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 40px -16px rgba(20,12,4,.55);transition:background .3s,transform .4s var(--ease),box-shadow .4s}
.aw-btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff;transform:translateY(-2px)}
.aw-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.aw.open .aw-btn{background:var(--bg);color:var(--ink);border-color:var(--line)}
.aw-panel{width:min(380px,calc(100vw - 40px));background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:30px 28px 22px;box-shadow:0 36px 90px -30px rgba(25,16,6,.55);position:relative;animation:awin .5s var(--ease) both;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow:auto}
.aw-panel[hidden]{display:none}
@keyframes awin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.aw-panel::before{content:"";position:absolute;left:28px;top:0;width:44px;height:2px;background:var(--accent)}
.aw-x{position:absolute;right:10px;top:8px;width:44px;height:44px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.aw-x:hover{color:var(--ink)}
.aw-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent-d);margin-bottom:8px}
.aw-panel h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;margin:0 0 10px}
.aw-sub{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.aw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.aw-list a{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),color .3s;min-height:56px}
.aw-list a:hover,.aw-list a:focus-visible{padding-left:10px;color:var(--accent-d)}
.aw-n{font-family:var(--serif);font-size:21px;letter-spacing:.04em}
.aw-m{grid-column:1;font-size:12px;color:var(--muted);letter-spacing:.04em}
.aw-list i{grid-column:2;grid-row:1/3;font-style:normal;font-size:18px;color:var(--accent)}
.aw-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.aw-foot a{padding:8px 0;border-bottom:1px solid transparent;color:var(--muted)}
.aw-foot a:hover,.aw-all{color:var(--ink)}
.aw-all{border-bottom-color:var(--accent)!important}
@media (max-width:520px){
  .aw{right:12px;left:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .aw-panel{width:100%}
  .aw-btn{padding:0 20px;min-height:52px}
}
@media (prefers-reduced-motion:reduce){.aw,.aw-panel{transition:none;animation:none}}
@media print{.aw{display:none!important}}

/* pop-up: warm beige */
.aw-panel{background:#f3eadb;border-color:#e0d1b8;color:#2a2219}
.aw-panel::before{background:#a47f4b}
.aw-sub,.aw-m,.aw-x{color:#6f6249}
.aw-list,.aw-list a{border-color:#e0d1b8}
.aw-list a:hover,.aw-list a:focus-visible{color:#85653a}
.aw-foot a{color:#6f6249}.aw-foot a:hover,.aw-all{color:#2a2219}
.aw-btn{background:#efe2cc;color:#2a2219;border-color:#d8c4a0;box-shadow:0 16px 36px -16px rgba(80,55,20,.45)}
.aw-btn:hover{background:#e6d5b8;border-color:#b9985f;color:#2a2219}
.aw.open .aw-btn{background:#f3eadb;color:#2a2219;border-color:#d8c4a0}
.aw-eyebrow{color:#85653a}
.aw-panel h2{color:#2a2219}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aw-panel,:root:not([data-theme="light"]) .aw-btn{background:#efe2cc}}

/* ===== hero met video (de video bevat zelf het Arous-logo in het midden; tekst staat daarom onderaan) ===== */
.hero{background:#1c1917;min-height:max(560px,min(calc(100vh - 118px),900px));min-height:max(560px,min(calc(100svh - 118px),900px));align-items:flex-end;padding-bottom:clamp(56px,9vh,110px)}
.hero::before{display:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1s ease}
.hero.has-video .hero-video{opacity:1}
.hero-video.fade{opacity:0;transition-duration:.6s}
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,13,8,.28) 0%,rgba(18,13,8,0) 30%,rgba(18,13,8,0) 52%,rgba(18,13,8,.68) 100%)}
.hero .eyebrow{color:rgba(255,255,255,.88)}
.hero h1{color:#fff;font-size:clamp(34px,5.4vw,84px);margin:16px 0 28px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero .hero-cta .btn{color:#fff;border-color:rgba(255,255,255,.85)}
.hero .hero-cta .btn::before{background:#fff}
.hero .hero-cta .btn:hover{color:#1c1917}
.hero .scroll-cue{background:rgba(255,255,255,.35)}
.hero .scroll-cue::after{background:#fff}
@media (max-width:700px){.hero .eyebrow{display:none}.hero h1{margin-top:0}.hero{padding-bottom:84px}.hero .hero-cta{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){.hero-video{transition:none}}

/* logo (png, beige) */
.logo .logo-img{height:40px;width:auto;display:block}
@media (max-width:700px){.logo .logo-img{height:32px}}

/* ===== homepage: doorzichtige header over de video ===== */
body.home header.site{position:fixed;left:0;right:0;top:38px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none;transition:top .3s,background .35s,padding .35s}
body.home header.site.scrolled{top:0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(30,20,8,.4)}
.logo .logo-lite{display:none}
body.home header.site:not(.scrolled) .logo-dark{display:none}
body.home header.site:not(.scrolled) .logo-lite{display:block}
body.home header.site:not(.scrolled) nav.main a.l{color:#fff}
body.home header.site:not(.scrolled) nav.main a.book{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.8);color:#fff}
body.home header.site:not(.scrolled) nav.main a.book:hover{background:#fff;color:var(--ink)}
body.home header.site:not(.scrolled) .burger{color:#fff}
body.home .hero{min-height:max(560px,calc(100vh - 38px));min-height:max(560px,calc(100svh - 38px));padding-top:110px}
body.home.menu-open header.site{z-index:200}

/* knop precies in het midden, vlak onder het logo in de video */
body.home .hero{display:block}
body.home .hero-text{position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);width:max-content;max-width:92vw;margin:0}
body.home .hero-cta{justify-content:center}

/* galerij met twee foto's */
.gal{grid-template-columns:1fr 1.12fr;max-width:1000px}
@media (max-width:700px){.gal{grid-template-columns:1fr 1fr}.gal .slot:nth-child(2){grid-row:auto;aspect-ratio:3/3.9}}
/* open mobiel menu: logo en kruisje zichtbaar op lichte achtergrond */
html.menu-open header.site .logo .logo-lite{display:none!important}
html.menu-open header.site .logo .logo-dark{display:block!important}
html.menu-open .burger span{background:var(--ink)!important}