/* Eetcafé de Brakke Grond. Kloon van hun eigen Squarespace-design:
   slate #3D4F59, inkt #181716, wit, licht #F4F4F2, zwarte pill-knoppen,
   caps-koppen in een strak grotesk (Inter Tight als vrije vervanger van hun
   Neue Haas Grotesk trial-font). "Qua design identiek, met pluspunten". */
:root{
  --slate:#3D4F59;
  --slate-donker:#32424B;
  --inkt:#181716;
  --wit:#FFFFFF;
  --licht:#F4F4F2;
  --grijs:#9FA6A9;
  --lijn:rgba(24,23,22,.14);
  --oker:#E9A23B;
  --oker-donker:#D4902C;
  --kop:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@font-face{font-family:"Inter Tight";src:url(../fonts/intertight.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/intertight-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--inkt);background:var(--wit)}
img{display:block;max-width:100%;height:auto}
a{color:var(--inkt)}
h1,h2,h3{font-family:var(--kop);font-weight:500;line-height:1.08;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.3rem,5.6vw,4rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);text-transform:uppercase}
h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em}
p{margin:0 0 1em}
.kader{width:min(1180px,100% - 48px);margin-inline:auto}
.kader--smal{width:min(780px,100% - 48px);margin-inline:auto}
.kop-grijs{color:var(--grijs)}

/* ── Navigatie ── */
.sitekop{position:absolute;top:0;left:0;right:0;z-index:50;color:var(--wit)}
.sitekop--vast{position:sticky;background:var(--slate)}
.sitekop .kader{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}
.sitekop__logo img{width:74px;height:97px;object-fit:contain;filter:brightness(0) invert(1)}
.hoofdnav{display:flex;align-items:center;gap:24px}
.hoofdnav a{text-decoration:none;color:var(--wit);font-weight:400;font-size:.98rem}
.hoofdnav a:hover,.hoofdnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.knop{display:inline-block;background:#000;color:var(--wit);text-decoration:none;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;font-size:.82rem;
  padding:15px 30px;border-radius:300px;border:0;cursor:pointer;line-height:1.2;
  transition:background .18s ease,transform .18s ease}
.knop:hover{background:var(--slate-donker);transform:translateY(-1px)}
.knop--rand{background:transparent;color:var(--inkt);border:1px solid var(--inkt)}
.knop--rand:hover{background:var(--inkt);color:var(--wit)}
.knop--oker{background:var(--oker);color:var(--inkt)}
.knop--oker:hover{background:var(--oker-donker)}
.knop--wit,.hoofdnav a.knop--wit{background:var(--wit);color:var(--inkt)}
.knop--wit:hover,.hoofdnav a.knop--wit:hover{background:var(--licht);text-decoration:none}
.navknop{display:none}
@media (max-width:900px){
  .hoofdnav{position:fixed;inset:0;background:var(--slate);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.4rem;text-transform:uppercase}
  .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 ── */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:var(--wit);isolation:isolate;background:var(--slate)}
.hero__beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__beeld img{width:100%;height:100%;object-fit:cover;opacity:.78}
.hero__beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,23,22,.3),rgba(61,79,89,.55))}
.hero__inhoud{padding:120px 0 80px}
.hero h1{color:var(--wit);max-width:16ch;margin-bottom:.6em}
.hero__acties{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__pillen{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pil{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px);border-radius:300px;padding:8px 16px;font-size:.9rem;color:var(--wit)}
.pil--open .bol{width:9px;height:9px;border-radius:50%;background:#7FC97F;flex:none}
.pil--dicht .bol{width:9px;height:9px;border-radius:50%;background:#E2A14E;flex:none}
.pil__ster{color:#F5C86E}
.statusregel{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:.95rem;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:#F5C86E}

.paginakop{position:relative;min-height:56vh;display:flex;align-items:center;color:var(--wit);isolation:isolate;background:var(--slate)}
.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(24,23,22,.35),rgba(24,23,22,.35))}
.paginakop .kader{padding:120px 0 56px}
.paginakop h1{color:var(--wit)}
.paginakop p{color:rgba(255,255,255,.9);max-width:62ch}

/* ── Secties ── */
.sectie{padding:88px 0}
.sectie--slate{background:var(--slate);color:var(--wit)}
.sectie--slate h2,.sectie--slate h3{color:var(--wit)}
.sectie--licht{background:var(--licht)}
.tweeluik{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:start}
@media (max-width:860px){.tweeluik{grid-template-columns:1fr;gap:26px}}

.drieluik{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:860px){.drieluik{grid-template-columns:1fr}}
.blok{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.blok h3{margin:0 0 14px}
.blok figure{margin:0 0 18px;width:100%;overflow:hidden}
.blok img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.blok:hover img{transform:scale(1.04)}
.blok__sub{color:rgba(24,23,22,.6);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px}
.sectie--slate .blok__sub{color:rgba(255,255,255,.7)}

.fullbeeld{height:62vh;overflow:hidden}
.fullbeeld img{width:100%;height:100%;object-fit:cover}

/* ── Menukaart ── */
.menu-nav{position:sticky;top:0;z-index:40;background:var(--wit);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:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;
  border:1px solid var(--lijn);border-radius:300px;padding:8px 16px;transition:all .15s ease}
.menu-nav a:hover{border-color:var(--inkt)}
.menu-zoek{flex:1 1 200px;min-width:170px;margin-left:auto}
.menu-zoek input{width:100%;padding:10px 18px;border:1px solid var(--lijn);border-radius:300px;
  font-family:var(--body);font-size:.95rem;background:var(--wit);color:var(--inkt)}
.menu-zoek input:focus{outline:2px solid var(--slate);outline-offset:1px}
.menublok{background:var(--wit);border:1px solid rgba(24,23,22,.4);padding:36px 44px 30px;margin:38px 0}
.menublok h2{font-size:1.45rem;letter-spacing:normal;text-transform:none;font-weight:400;text-align:center;margin-bottom:20px}
.menublok > p{text-align:center;margin-top:-12px}
.menublok__items{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
@media (max-width:760px){.menublok__items{grid-template-columns:1fr}.menublok{padding:26px 22px 20px}}
.gerecht{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0}
.gerecht__naam{font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.015em}
.gerecht__oms{color:rgba(24,23,22,.62);font-size:.95rem;margin-top:3px;text-transform:none;font-weight:400}
.gerecht__prijs{font-weight:500;white-space:nowrap}
.gerecht.verborgen{display:none}
.menu-leeg{display:none;color:rgba(24,23,22,.6);padding:20px 0}
.dieet{font-size:.8rem;color:rgba(24,23,22,.5);font-weight:400}

/* ── Review (in hun vormentaal: rustig, links/rechts) ── */
.reviewrij{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center;margin-top:30px}
@media (max-width:860px){.reviewrij{grid-template-columns:1fr;gap:22px}}
.review__score{font-size:3.4rem;font-weight:500;line-height:1}
.review__sterren{color:#D9A441;font-size:1.25rem;letter-spacing:.12em;margin:8px 0 6px}
.quote{font-size:1.15rem;margin:0 0 8px}
.quote__bron{font-size:.9rem;color:rgba(24,23,22,.55)}

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

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

/* ── CTA-band + footer (wit, zoals hun site) ── */
.ctaband{background:var(--slate);padding:44px 0;text-align:center}
.voet{background:var(--wit);color:var(--inkt);padding:64px 0 0;font-size:.97rem}
.voet h3{color:var(--inkt);font-size:1.35rem;letter-spacing:.01em;font-weight:400;margin-bottom:16px;text-transform:uppercase}
.voet a{color:var(--inkt);text-decoration:underline;text-underline-offset:3px}
.voet a:hover{opacity:.7}
.voet__kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){.voet__kolommen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.voet__kolommen{grid-template-columns:1fr}}
.voet__kolommen p{line-height:2}
.voet__logo{width:88px;height:116px;object-fit:contain}
.voet__vandaag{color:rgba(24,23,22,.6);font-size:.9rem}
.voet__onder{margin-top:46px;padding:20px 0;font-size:.85rem;text-align:center;color:rgba(24,23,22,.65)}

/* ── 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:#000;
    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(--wit);text-decoration:none;font-weight:600;
    font-size:.9rem;text-transform:uppercase;letter-spacing:.03em}
  .belbalk a + a{border-left:1px solid rgba(255,255,255,.25)}
  body{padding-bottom:54px}
}
body:has(.att-cb.att-cb--in) .belbalk{display:none}

/* ── Animaties (subtiel) ── */
@keyframes opkomen{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero h1,.hero__acties,.hero__pillen{animation:opkomen .8s cubic-bezier(.22,.61,.36,1) both}
.hero__acties{animation-delay:.15s}
.hero__pillen{animation-delay:.3s}
.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__acties,.hero__pillen{animation:none}
  .anim{opacity:1;transform:none;transition:none}
  .blok img,.galerij img{transition:none}
  .blok:hover img,.galerij figure:hover img{transform:none}
}