/* Eeterij Tapperij 't Ambacht, flow A (herontwerp met hun content).
   Palet uit hun eigen beeld: nachtblauw van het blauwe uur boven het Waaltje,
   amber van de lichtslingers, hun eigen oranje accent #F58523, creme.
   Fonts: Rozha One (kop) + Sora (body), lokaal. */
:root{
  --nacht:#16222E;
  --nacht-diep:#0F1821;
  --oranje:#F58523;
  --oranje-donker:#DD7212;
  --amber:#F5C86E;
  --creme:#F7F2E8;
  --wit:#FFFFFF;
  --inkt:#1C2430;
  --lijn:rgba(28,36,48,.14);
  --kop:"Rozha One",Georgia,serif;
  --body:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@font-face{font-family:"Rozha One";src:url(../fonts/rozhaone.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url(../fonts/sora.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:16.5px;line-height:1.72;color:var(--inkt);background:var(--creme)}
img{display:block;max-width:100%;height:auto}
a{color:var(--oranje-donker)}
h1,h2,h3{font-family:var(--kop);font-weight:400;line-height:1.1;margin:0 0 .45em}
h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.kader{width:min(1140px,100% - 48px);margin-inline:auto}
.kader--smal{width:min(800px,100% - 48px);margin-inline:auto}
.overlijn{display:block;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oranje);margin-bottom:12px}

/* ── Navigatie (donker, over de hero) ── */
.sitekop{position:absolute;top:0;left:0;right:0;z-index:50;color:var(--wit)}
.sitekop--effen{position:sticky;background:var(--nacht)}
.sitekop .kader{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.sitekop__logo img{width:96px;height:56px;object-fit:contain}
.hoofdnav{display:flex;align-items:center;gap:24px}
.hoofdnav a{text-decoration:none;color:var(--wit);font-weight:600;font-size:.95rem}
.hoofdnav a:hover,.hoofdnav a[aria-current="page"]{color:var(--amber)}
.knop{display:inline-block;background:var(--oranje);color:var(--nacht-diep);text-decoration:none;font-weight:700;
  padding:13px 28px;border-radius:10px;border:0;cursor:pointer;font-size:.98rem;line-height:1.25;
  transition:background .18s ease,transform .18s ease}
.knop:hover{background:var(--amber);transform:translateY(-1px)}
.hoofdnav a.knop{color:var(--nacht-diep)}
.knop--rand{background:transparent;color:var(--wit);border:1.5px solid rgba(255,255,255,.75)}
.knop--rand:hover{background:rgba(255,255,255,.12);color:var(--wit)}
.knop--donker{background:var(--nacht);color:var(--wit)}
.knop--donker:hover{background:var(--nacht-diep)}
.navknop{display:none}
@media (max-width:900px){
  .hoofdnav{position:fixed;inset:0;background:var(--nacht-diep);flex-direction:column;justify-content:center;gap:26px;
    transform:translateX(100%);transition:transform .3s ease;z-index:60}
  .hoofdnav.open{transform:translateX(0)}
  .hoofdnav a{font-size:1.45rem;font-family:var(--kop);font-weight:400}
  .navknop{display:block;z-index:70;background:none;border:0;cursor:pointer;padding:8px;font-size:1.7rem;line-height:1;color:var(--wit)}
}

/* ── Hero: het pand aan het water als held, gecentreerd ── */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--wit);isolation:isolate;background:var(--nacht)}
.hero__beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__beeld img{width:100%;height:100%;object-fit:cover}
.hero__beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,24,33,.5) 0%,rgba(15,24,33,.18) 45%,rgba(15,24,33,.7) 100%)}
.hero__inhoud{padding:120px 0 72px}
.hero h1{color:var(--wit);max-width:22ch;margin-inline:auto;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero__sub{font-size:clamp(1rem,2.1vw,1.25rem);color:var(--amber);letter-spacing:.04em;margin:0 0 1.6em}
.hero__acties{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.statusregel{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px;font-size:.93rem;color:rgba(255,255,255,.92)}
.statusregel .bol{width:9px;height:9px;border-radius:50%;background:#E2A14E;flex:none}
.statusregel.pil--open .bol{background:#7FC97F}
.statusregel .ster{color:var(--amber)}

.paginakop{position:relative;min-height:48vh;display:flex;align-items:flex-end;color:var(--wit);isolation:isolate;background:var(--nacht)}
.paginakop__beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.paginakop__beeld img{width:100%;height:100%;object-fit:cover}
.paginakop__beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,24,33,.45),rgba(15,24,33,.72))}
.paginakop .kader{padding:130px 0 46px}
.paginakop h1{color:var(--wit)}
.paginakop p{color:rgba(255,255,255,.92);max-width:62ch}
.paginakop .statusregel{justify-content:flex-start}

/* ── Secties ── */
.sectie{padding:84px 0}
.sectie--nacht{background:var(--nacht);color:#E8E3D8}
.sectie--nacht h2,.sectie--nacht h3{color:var(--wit)}
.sectie--wit{background:var(--wit)}
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.tweeluik{grid-template-columns:1fr;gap:28px}}
.tweeluik__foto{overflow:hidden;border-radius:16px}
.tweeluik__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tweeluik__foto:hover img{transform:scale(1.035)}

/* Tegels (Het Bosch-ritme: ronde beelden, rustige rij) */
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
@media (max-width:860px){.tegels{grid-template-columns:1fr}}
.tegel{text-decoration:none;color:var(--inkt)}
.tegel__beeld{width:min(240px,70%);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 18px;
  box-shadow:0 10px 30px rgba(22,34,46,.18)}
.tegel__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tegel:hover .tegel__beeld img{transform:scale(1.06)}
.tegel h3{margin-bottom:6px}
.tegel p{color:rgba(28,36,48,.68);font-size:.95rem;max-width:30ch;margin-inline:auto}
.tegel__meer{display:inline-block;margin-top:8px;font-weight:700;color:var(--oranje-donker)}

/* Events-band (Waterkant-energie, in hun kleuren) */
.events{background:var(--nacht);color:#E8E3D8;position:relative;overflow:hidden}
.events .kader{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;padding:84px 0}
@media (max-width:860px){.events .kader{grid-template-columns:1fr;gap:28px}}
.events h2{color:var(--wit)}
.events__kaart{background:var(--nacht-diep);border:1px solid rgba(245,200,110,.25);border-radius:16px;padding:30px 34px}
.events__kaart .dag{font-family:var(--kop);font-size:1.5rem;color:var(--amber)}
.events__kaart p{margin:6px 0 0;color:rgba(232,227,216,.85)}
.events__foto{overflow:hidden;border-radius:16px}
.events__foto img{width:100%;height:100%;object-fit:cover}

/* Reviewband */
.reviewband{background:var(--wit)}
.reviewband .kader{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;padding:54px 0;text-align:center}
.reviewband .score{font-family:var(--kop);font-size:3rem;line-height:1}
.reviewband .sterren{color:var(--amber);font-size:1.3rem;letter-spacing:.12em}
.reviewband p{margin:0;color:rgba(28,36,48,.7)}

/* ── Menukaart ── */
.menu-nav{position:sticky;top:0;z-index:40;background:var(--creme);border-bottom:1px solid var(--lijn);padding:12px 0}
.menu-nav .kader{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu-nav a{text-decoration:none;font-size:.88rem;font-weight:600;color:var(--inkt);
  border:1px solid var(--lijn);border-radius:10px;padding:7px 14px;transition:all .15s ease}
.menu-nav a:hover{border-color:var(--oranje);color:var(--oranje-donker)}
.menu-zoek{flex:1 1 200px;min-width:170px;margin-left:auto}
.menu-zoek input{width:100%;padding:10px 16px;border:1px solid rgba(28,36,48,.25);border-radius:10px;
  font-family:var(--body);font-size:.95rem;background:var(--wit);color:var(--inkt)}
.menu-zoek input:focus{outline:2px solid var(--oranje)}
.menublok{background:var(--wit);border-radius:16px;padding:34px 40px 26px;margin:34px 0;box-shadow:0 2px 16px rgba(22,34,46,.07)}
@media (max-width:700px){.menublok{padding:24px 20px 18px}}
.menublok h2{color:var(--nacht);font-size:1.5rem;border-bottom:2px solid var(--oranje);padding-bottom:8px}
.menublok .noot{font-size:.88rem;color:rgba(28,36,48,.6);font-style:italic;margin:4px 0 10px}
.gerecht{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px dotted rgba(28,36,48,.16)}
.gerecht:last-child{border-bottom:0}
.gerecht__naam{font-weight:700;font-size:1rem}
.gerecht__oms{display:block;font-weight:400;color:rgba(28,36,48,.68);font-size:.93rem}
.gerecht__prijs{white-space:nowrap;font-family:var(--kop);font-size:1.05rem;color:var(--nacht)}
.gerecht.verborgen{display:none}
.menu-leeg{display:none;color:rgba(28,36,48,.6);padding:16px 0;text-align:center}
.tag{display:inline-block;font-size:.68rem;font-weight:700;color:var(--oranje-donker);border:1px solid var(--oranje);
  border-radius:6px;padding:0 6px;margin-left:8px;vertical-align:1px;letter-spacing:.04em}

/* ── Galerij-achtig raster (evenementen/over ons) ── */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:700px){.raster{grid-template-columns:1fr 1fr}}
.raster figure{margin:0;overflow:hidden;border-radius:12px}
.raster img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.raster figure:hover img{transform:scale(1.045)}
.raster .staand{grid-row:span 2}
.raster .staand img{aspect-ratio:auto;height:100%}

/* ── Uren ── */
.uren{width:100%;border-collapse:collapse;font-size:.96rem}
.uren td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.uren td:last-child{text-align:right;white-space:nowrap}
.uren tr.vandaag td{color:var(--amber);font-weight:700}
.uren--licht td{border-color:var(--lijn)}
.uren--licht tr.vandaag td{color:var(--oranje-donker)}

/* ── Footer ── */
.voet{background:var(--nacht-diep);color:rgba(232,227,216,.88);padding:64px 0 0;font-size:.95rem}
.voet h3{color:var(--wit);font-size:1.05rem;margin-bottom:14px}
.voet a{color:rgba(232,227,216,.88)}
.voet a:hover{color:var(--wit)}
.voet__kolommen{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:40px}
@media (max-width:860px){.voet__kolommen{grid-template-columns:1fr}}
.voet__logo{width:120px;height:70px;object-fit:contain}
.voet__onder{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding:18px 0;font-size:.85rem;
  text-align:center;color:rgba(232,227,216,.6)}

/* ── Mobiele belbalk (wijkt voor de att-contactbalk) ── */
.belbalk{display:none}
@media (max-width:700px){
  .belbalk{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:var(--oranje);
    box-shadow:0 -4px 18px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom,0)}
  .belbalk a{flex:1;text-align:center;padding:15px 8px;color:var(--nacht-diep);text-decoration:none;font-weight:700;font-size:.95rem}
  .belbalk a + a{border-left:1px solid rgba(15,24,33,.25)}
  body{padding-bottom:54px}
}
body:has(.att-cb.att-cb--in) .belbalk{display:none}

/* ── Animaties ── */
@keyframes opkomen{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero h1,.hero__sub,.hero__acties,.hero .statusregel{animation:opkomen .8s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation-delay:.08s}
.hero__acties{animation-delay:.22s}
.hero .statusregel{animation-delay:.34s}
.anim{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.anim.zichtbaar{opacity:1;transform:none}
.anim:nth-child(2){transition-delay:.1s}
.anim:nth-child(3){transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .knop:hover{transform:none}
  .hero h1,.hero__sub,.hero__acties,.hero .statusregel{animation:none}
  .anim{opacity:1;transform:none;transition:none}
  .tweeluik__foto img,.tegel__beeld img,.raster img{transition:none}
}