/* ============================================================
   Le Croissant — Restaurant & Wok, Deurne
   Donkere basis met gouden accenten
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Oppervlakken — warm bijna-zwart, afgeleid van het interieur */
  --ink:        #0D0B0A;
  --ink-2:      #141110;
  --ink-3:      #1C1815;
  --ink-4:      #262019;

  /* Goud — uit het logo en de huisstijlposter */
  --gold:       #C9A24A;
  --gold-brt:   #E8C86A;
  --gold-deep:  #8A5F14;
  --gold-glow:  rgba(201,162,74,.18);

  /* Tekst */
  --cream:      #F2EBE0;
  --cream-dim:  #B8AE9F;
  --cream-mute: #8A8175;

  --line:       rgba(201,162,74,.22);
  --line-soft:  rgba(242,235,224,.10);

  /* Typografie */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Ritme — spacious (density 3/10) */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;
  --sp-4: 2.25rem; --sp-5: 3.5rem;  --sp-6: 5rem;
  --sp-7: 7rem;    --sp-8: 9.5rem;

  --wrap: 1200px;
  --menu-w: 1100px;   /* breedte van de menukaart-kolommen */
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:400; line-height:1.08; }
p{ margin:0 0 1.1em; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- Focus & skip ---------- */
:focus-visible{
  outline:2px solid var(--gold-brt);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.85rem 1.4rem; font-weight:500; letter-spacing:.04em;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Layout ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.narrow{ max-width:760px; }
.center{ text-align:center; }
.section{ padding-block:var(--sp-7); position:relative; }

@media (max-width:700px){
  .wrap{ width:min(100% - 1.75rem, var(--wrap)); }
  .section{ padding-block:var(--sp-6); }
  /* Gelijke, volle breedte zodat de twee CTA's niet ongelijk uitlijnen */
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-kicker{ letter-spacing:.2em; }
}

/* ---------- Typografie ---------- */
.h2{
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);
  letter-spacing:-.015em;
  margin-bottom:var(--sp-3);
}
.h2-xl{ font-size:clamp(2.8rem,1.7rem + 4.4vw,5.5rem); }
.h2 em, .hero-title em{
  font-style:italic;
  color:var(--gold);
}
.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin:0 0 1.1rem;
}
.lede{
  color:var(--cream-dim);
  font-size:clamp(1.02rem,.98rem + .25vw,1.16rem);
  max-width:62ch;
}
.center-lede{ margin-inline:auto; }
.center .lede{ margin-inline:auto; }
.note{
  color:var(--cream-mute); font-size:.94rem;
  margin-top:var(--sp-4); max-width:60ch; margin-inline:auto;
}
.note a{ color:var(--gold); text-underline-offset:3px; }

/* ---------- Ornament (uit de huisstijlposter) ---------- */
.ornament{ display:flex; justify-content:center; margin-bottom:var(--sp-3); }
.ornament svg{ width:min(240px,60%); height:auto; }
.ornament line{ stroke:var(--line); stroke-width:1; }
.ornament path{ fill:none; stroke:var(--gold); stroke-width:1.1; }
.ornament circle{ fill:var(--gold); }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.9rem;
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.btn-lg{ padding:1.05rem 2.3rem; }
.btn-gold{ background:var(--gold); color:var(--ink); border:1px solid var(--gold); }
.btn-gold:hover{ background:var(--gold-brt); border-color:var(--gold-brt); }
.btn-ghost{ background:transparent; color:var(--cream); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-brt); }
.btn:active{ transform:translateY(1px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.1rem;
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease),
             border-color var(--dur) var(--ease), backdrop-filter var(--dur);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(13,11,10,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.6rem;
}
.header-inner{ display:flex; align-items:center; gap:var(--sp-3); }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.brand-mark{ width:44px; height:auto; transition:width var(--dur) var(--ease); }
.is-stuck .brand-mark{ width:36px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--font-display); font-size:1.4rem; color:var(--gold);
  letter-spacing:.01em;
}
.brand-sub{
  font-size:.53rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-mute); margin-top:.28rem;
}

.nav{ margin-left:auto; }
.nav-list{ display:flex; gap:var(--sp-3); }
.nav-list a{
  position:relative; text-decoration:none; font-size:.79rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim);
  padding:.6rem 0; display:inline-block;
  transition:color .3s var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:.15rem;
  height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-list a:hover{ color:var(--gold-brt); }
.nav-list a:hover::after, .nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a.is-active{ color:var(--gold); }

.header-cta{ flex-shrink:0; padding:.7rem 1.4rem; min-height:44px; font-size:.74rem; }

.nav-toggle{
  display:none; width:48px; height:48px; margin-left:auto;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle-bar{
  display:block; width:24px; height:1.5px; background:var(--cream);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1150px){
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0; margin:0;
    background:rgba(13,11,10,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav-list{ flex-direction:column; gap:var(--sp-2); text-align:center; }
  .nav-list a{ font-size:1.15rem; letter-spacing:.2em; padding:.8rem 1rem; }
  body.nav-open{ overflow:hidden; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-block:8rem 6rem; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(13,11,10,.72) 0%, rgba(13,11,10,.5) 38%, rgba(13,11,10,.88) 82%, var(--ink) 100%),
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(13,11,10,.15), rgba(13,11,10,.75));
}
.hero-body{ position:relative; z-index:1; max-width:840px; }

.hero-logo{
  width:min(380px,74vw); height:auto; margin:0 auto var(--sp-4);
  filter:drop-shadow(0 4px 30px rgba(0,0,0,.6));
}
.hero-kicker{
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 var(--sp-3);
}
.hero-title{
  font-size:clamp(2.7rem,1.7rem + 4.6vw,5.4rem);
  letter-spacing:-.02em; margin-bottom:var(--sp-3);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero-lede{
  color:var(--cream-dim); max-width:52ch; margin:0 auto var(--sp-4);
  font-size:clamp(1.02rem,.98rem + .25vw,1.14rem);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.hero-body .hero-actions, .center-actions{ justify-content:center; }

.hero-scroll{
  position:absolute; bottom:2.2rem; left:50%; translate:-50% 0; z-index:1;
  width:44px; height:64px; display:flex; align-items:flex-end; justify-content:center;
}
.hero-scroll-line{
  display:block; width:1px; height:46px;
  background:linear-gradient(to bottom, transparent, var(--gold));
  animation:scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:.35; transform:scaleY(.6); transform-origin:bottom; }
  50%    { opacity:1;   transform:scaleY(1);  transform-origin:bottom; }
}

/* ============================================================
   WELKOM + pijlers
   ============================================================ */
.section-welkom{ padding-top:var(--sp-6); }
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.pillar{
  padding:var(--sp-4) var(--sp-3);
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pillar:hover{ border-color:var(--line); transform:translateY(-4px); }
.pillar-num{
  display:block; font-family:var(--font-display); font-size:.95rem;
  color:var(--gold); opacity:.75; letter-spacing:.2em; margin-bottom:1rem;
}
.pillar h3{ font-size:1.75rem; margin-bottom:.6rem; color:var(--cream); }
.pillar p{ color:var(--cream-dim); font-size:.97rem; margin:0; }

@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }

/* ============================================================
   FEATURE (brunchbuffet)
   ============================================================ */
.section-feature{ background:linear-gradient(180deg, var(--ink), var(--ink-2) 50%, var(--ink)); }
.feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6);
  align-items:center;
}
.feature-text .h2{ margin-bottom:var(--sp-3); }
.tick-list{ margin:var(--sp-3) 0 var(--sp-4); display:grid; gap:.7rem; }
.tick-list li{
  position:relative; padding-left:1.9rem; color:var(--cream-dim); font-size:.98rem;
}
.tick-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; rotate:45deg;
  border:1px solid var(--gold);
}
.feature-media{ position:relative; display:grid; gap:var(--sp-2); }
.fig{ margin:0; overflow:hidden; border:1px solid var(--line-soft); }
.fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.fig:hover img{ transform:scale(1.045); }
.fig-tall{ aspect-ratio:4/5; }
.fig-offset{
  aspect-ratio:16/10; width:78%; margin-left:auto;
  margin-top:calc(var(--sp-4) * -1);
  position:relative; z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}

@media (max-width:900px){
  .feature-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .fig-offset{ width:100%; margin-top:0; }
}

/* ============================================================
   ONZE KEUKEN
   ============================================================ */
.dish-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
  margin-top:var(--sp-5);
}
.dish{
  border:1px solid var(--line-soft); overflow:hidden;
  background:var(--ink-2);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dish:hover{ border-color:var(--line); transform:translateY(-5px); }
.dish-media{ aspect-ratio:1; overflow:hidden; }
.dish-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.dish:hover .dish-media img{ transform:scale(1.06); }
.dish-body{ padding:var(--sp-3) var(--sp-2) var(--sp-4); }
.dish-body h3{
  font-size:1.55rem; color:var(--gold); margin-bottom:.45rem;
}
.dish-body p{ color:var(--cream-dim); font-size:.93rem; margin:0; }

@media (max-width:1150px){ .dish-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dish-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PRIVÉFEESTEN
   ============================================================ */
.section-feesten{ position:relative; overflow:hidden; padding-block:var(--sp-8); }
.feesten-bg{ position:absolute; inset:0; z-index:0; }
.feesten-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 68%; }
.feesten-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(13,11,10,.88) 35%, rgba(13,11,10,.9) 65%, var(--ink) 100%);
}
.feesten-body{ position:relative; z-index:1; }
.feesten-body .lede{ margin-inline:auto; }
.feesten-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2);
  margin:var(--sp-5) 0;
}
.fcard{
  padding:var(--sp-3);
  border:1px solid var(--line);
  background:rgba(20,17,16,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fcard h3{ font-size:1.35rem; color:var(--gold); margin-bottom:.45rem; }
.fcard p{ color:var(--cream-dim); font-size:.92rem; margin:0; }

@media (max-width:820px){ .feesten-cards{ grid-template-columns:1fr; } }

/* ============================================================
   GALERIJ
   ============================================================ */
.gallery{
  display:grid; gap:var(--sp-2); margin-top:var(--sp-5);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
}
.gallery .g{ margin:0; overflow:hidden; border:1px solid var(--line-soft); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery .g:hover img{ transform:scale(1.06); }
.g1{ grid-column:span 2; grid-row:span 2; }
.g2{ grid-column:span 2; grid-row:span 1; }
.g3{ grid-column:span 1; grid-row:span 1; }
.g4{ grid-column:span 1; grid-row:span 1; }
.g5{ grid-column:span 2; grid-row:span 1; }
.g6{ grid-column:span 2; grid-row:span 2; }

@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .g1,.g2,.g5,.g6{ grid-column:span 2; }
  .g1,.g6{ grid-row:span 2; }
  .g3,.g4{ grid-column:span 1; }
}
@media (max-width:520px){ .gallery{ grid-auto-rows:140px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.section-contact{ background:linear-gradient(180deg, var(--ink), var(--ink-2)); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:start; }

.info{ margin:var(--sp-4) 0; display:grid; gap:1.4rem; }
.info-row{ display:grid; grid-template-columns:130px 1fr; gap:1rem; align-items:start; }
.info dt{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding-top:.3rem;
}
.info dd{ color:var(--cream); }
.info dd a{
  display:inline-block; padding-block:.45rem;
  text-decoration:none; border-bottom:1px solid var(--line);
  transition:border-color .3s, color .3s;
}
.info dd a:hover{ color:var(--gold-brt); border-bottom-color:var(--gold); }

.hours{ display:grid; gap:.35rem; }
.hours-row{
  display:flex; justify-content:space-between; gap:1rem;
  max-width:300px; color:var(--cream-dim); font-size:.95rem;
}
/* De gesloten dag mag niet wegvallen tussen de andere */
.hours-row.is-closed{ color:var(--cream-mute); }
.hours-row.is-closed span:last-child{
  color:var(--gold); font-style:italic;
}

.socials{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); flex-wrap:wrap; }
.socials a{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:.6rem 1.1rem;
  border:1px solid var(--line-soft); text-decoration:none;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim);
  transition:border-color .3s, color .3s;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold-brt); }

.contact-map{ position:relative; }
.contact-map iframe{
  width:100%; height:420px; border:1px solid var(--line-soft); display:block;
  background:var(--ink-2);
  filter:invert(.92) hue-rotate(180deg) saturate(.35) brightness(.92) contrast(1.05);
}
.map-link{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 0;
  margin-top:calc(var(--sp-2) - .5rem);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.map-link:hover{ color:var(--gold-brt); }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map iframe{ height:320px; }
}
@media (max-width:480px){
  .info-row{ grid-template-columns:1fr; gap:.3rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); border-top:1px solid var(--line);
  padding-top:var(--sp-6);
}
.footer-inner{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--sp-4);
  padding-bottom:var(--sp-5);
}
.footer-brand img{ width:220px; margin-bottom:var(--sp-2); }
.footer-brand p{ color:var(--cream-mute); font-size:.9rem; margin:0; }
.footer-nav ul{ display:grid; gap:.15rem; }
.footer-nav a{
  display:inline-flex; align-items:center; min-height:40px; padding:.35rem 0;
  text-decoration:none; color:var(--cream-dim); font-size:.86rem;
  letter-spacing:.1em; transition:color .3s;
}
.footer-nav a:hover{ color:var(--gold-brt); }
.footer-contact{ display:grid; gap:.15rem; align-content:start; }
.footer-contact a{
  display:inline-flex; align-items:center; min-height:40px; padding:.35rem 0;
  width:fit-content;
  text-decoration:none; color:var(--cream-dim); font-size:.9rem;
  transition:color .3s;
}
.footer-contact a:hover{ color:var(--gold-brt); }

.footer-base{
  border-top:1px solid var(--line-soft); padding-block:var(--sp-3);
}
.footer-base p{ margin:0; color:var(--cream-mute); font-size:.8rem; letter-spacing:.06em; }

@media (max-width:820px){
  .footer-inner{ grid-template-columns:1fr; gap:var(--sp-4); }
  .footer-brand img{ width:190px; }
}

/* ============================================================
   TAALWISSEL
   ============================================================ */
.lang{
  display:flex; align-items:center; gap:.15rem; flex-shrink:0;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; min-height:38px; padding:.4rem .5rem;
  text-decoration:none; color:var(--cream-mute);
  transition:color .3s var(--ease);
}
.lang a:hover{ color:var(--gold-brt); }
.lang a[aria-current="true"]{ color:var(--gold); }
.lang-sep{ color:var(--line); }

@media (max-width:1150px){
  .header-inner .lang{ margin-left:auto; }
  .nav .lang{ display:none; }
}

/* ============================================================
   MENUPAGINA
   ============================================================ */
.page-hero{
  position:relative; padding-block:11rem var(--sp-6);
  text-align:center; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, var(--gold-glow), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.page-hero > *{ position:relative; z-index:1; }

/* Sprongnavigatie tussen de menucategorieën.
   --header-h en --jump-h worden door main.js gemeten, zodat dit blijft
   kloppen als er categorieën bijkomen en de balk over meer regels loopt. */
.menu-jump{
  position:sticky; top:var(--header-h, 66px); z-index:50;
  background:rgba(13,11,10,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line-soft);
}
.menu-jump ul{
  display:flex; gap:.25rem; justify-content:center; flex-wrap:wrap;
  padding-block:.5rem;
}
.menu-jump a{
  display:inline-flex; align-items:center; min-height:40px; padding:.4rem .9rem;
  text-decoration:none; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-dim);
  transition:color .3s var(--ease);
}
.menu-jump a:hover, .menu-jump a.is-active{ color:var(--gold); }

.menu-note{
  margin:var(--sp-4) auto 0; max-width:60ch; padding:1rem 1.4rem;
  border:1px solid var(--line); background:rgba(201,162,74,.06);
  color:var(--cream-dim); font-size:.9rem;
}
.menu-note strong{ color:var(--gold); font-weight:500; }

.menu-cat{
  padding-block:var(--sp-4);
  /* Ruimte voor de vaste kop + sprongnavigatie bij het springen naar een anker */
  scroll-margin-top:calc(var(--header-h, 66px) + var(--jump-h, 58px) + 2.5rem);
}
.menu-cat + .menu-cat{ border-top:1px solid var(--line-soft); }
.menu-cat-head{ text-align:center; margin-bottom:var(--sp-4); }
.menu-cat-head h2{
  font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem); margin-bottom:.4rem;
}
.menu-cat-head p{ color:var(--cream-dim); margin:0; font-size:.97rem; }

/* Twee kolommen die van BOVEN NAAR BENEDEN vullen, niet van links naar
   rechts. Zo blijven bij elkaar horende gerechten samen: alle bami links,
   alle nasi rechts. --rows komt uit de generator (aantal rijen per groep). */
.menu-items{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(var(--rows,1), auto);
  grid-auto-flow:column;
  gap:var(--sp-3) var(--sp-5);
  max-width:var(--menu-w); margin-inline:auto;
}
@media (max-width:820px){
  .menu-items{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
  }
}

.menu-item{ display:block; }
.menu-item-top{
  display:flex; align-items:baseline; gap:.6rem;
}
.menu-item-name{
  font-family:var(--font-display); font-size:1.35rem; color:var(--cream);
  line-height:1.2;
  /* Mag afbreken: anders duwt een lange gerechtnaam de prijs uit beeld */
  flex:0 1 auto; min-width:0;
}
.menu-item-lead{
  flex:1; height:1px; margin-bottom:.28em;
  background-image:linear-gradient(to right, var(--line) 40%, transparent 0);
  background-size:6px 1px; background-repeat:repeat-x;
}
.menu-item-price{
  font-size:.95rem; color:var(--gold); font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.menu-item-desc{
  color:var(--cream-dim); font-size:.9rem; margin:.35rem 0 0; max-width:46ch;
}
.menu-item-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.menu-tag{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.2rem .55rem; border:1px solid var(--line);
  color:var(--gold); border-radius:2px;
}

/* Keuzeregels die voor een hele categorie gelden ("keuze uit: ...") */
.menu-choice{
  max-width:var(--menu-w); margin:0 auto var(--sp-3);
  display:grid; gap:.4rem;
}
.menu-choice li{
  position:relative; padding-left:1.5rem;
  color:var(--cream-dim); font-size:.88rem;
}
.menu-choice li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; rotate:45deg; border:1px solid var(--gold);
}
.menu-choice strong{ color:var(--gold); font-weight:500; }

/* Subgroep binnen een categorie (bv. de wokgerechten).
   Krijgt bewust veel lucht erboven: anders lopen de groepen in elkaar over. */
.menu-sub{
  max-width:var(--menu-w); margin:var(--sp-6) auto var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:1.25rem;
}
/* De eerste groep sluit aan op de categoriekop, dus zonder streep erboven.
   Klasse komt uit de generator: :first-of-type zou hier de categoriekop
   raken, want dat is ook een div. */
.menu-sub.is-first{
  margin-top:var(--sp-3); padding-top:0; border-top:0;
}
.menu-sub h3{
  font-size:clamp(1.9rem, 1.5rem + .9vw, 2.4rem);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--gold-brt);
  white-space:nowrap;
}
/* Gouden lijn die van de titel weg uitdooft */
.menu-sub::after{
  content:""; flex:1; height:1px; position:relative; top:-.4em;
  background:linear-gradient(to right, var(--gold), transparent);
  opacity:.55;
}

@media (max-width:600px){
  .menu-sub{ margin-top:var(--sp-5); gap:.9rem; }
  .menu-sub h3{ white-space:normal; }
}

/* Categorie die nog aangevuld wordt */
.menu-soon{
  max-width:var(--menu-w); margin:0 auto; padding:var(--sp-3);
  border:1px dashed var(--line); text-align:center;
  color:var(--cream-mute); font-style:italic;
}

/* Formule-blok (brunchbuffet) */
.menu-formula{
  max-width:760px; margin:0 auto var(--sp-4);
  border:1px solid var(--line); padding:var(--sp-4);
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  text-align:center;
}
.menu-formula .price{
  font-family:var(--font-display); font-size:2.6rem; color:var(--gold);
  display:block; margin:.3rem 0 .6rem;
}
.menu-formula p{ color:var(--cream-dim); margin:0; }

/* ============================================================
   FORMULIER
   ============================================================ */
.section-form{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
.form-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-5); align-items:start; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }

.form-aside .lede{ max-width:38ch; }
.form-aside .info{ margin-top:var(--sp-3); }

.form{ display:grid; gap:var(--sp-3); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
.field .req{ color:var(--cream-mute); }
.field-hint{ font-size:.8rem; color:var(--cream-mute); }

.field input,
.field select,
.field textarea{
  width:100%; min-height:48px; padding:.8rem 1rem;
  font-family:var(--font-body); font-size:1rem; font-weight:300;
  color:var(--cream); background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.6; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.6rem; cursor:pointer;
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--line); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); background:var(--ink-4); outline:none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--gold-brt); outline-offset:2px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-mute); opacity:.7; }

/* Foutmeldingen bij het veld zelf */
.field-error{
  font-size:.84rem; color:#F0A0A0; display:none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#C86B6B; }
.field.has-error .field-error{ display:block; }

/* Samenvatting bovenaan na een mislukte verzending */
.form-summary{
  display:none; padding:1rem 1.3rem; border:1px solid #C86B6B;
  background:rgba(200,107,107,.09); color:var(--cream);
}
.form-summary.is-shown{ display:block; }
.form-summary h3{ font-size:1.15rem; margin-bottom:.5rem; color:#F0A0A0; }
.form-summary ul{ display:grid; gap:.3rem; }
.form-summary a{ color:var(--cream); font-size:.9rem; }

/* Spamval. Bewust niet display:none — veel bots slaan verborgen velden
   dan over. Zo staat het buiten beeld maar bestaat het wel. */
.honeypot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form-status{ font-size:.92rem; }
.form-status.ok{ color:var(--gold-brt); }
.form-status.err{ color:#F0A0A0; }

.form-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* ============================================================
   Scroll-reveal
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .hero-scroll-line{ animation:none; opacity:.7; }
}