/* ========================================
   Cozette — publieke site styles
   Brand: warm, intimate, modern.
   Palette uit Cozette stylesheet (PDF):
     #F4EFDF  cream-licht        (page bg)
     #E3DCC3  cream-warm         (section bg)
     #663013  bruin              (accent)
     #304D21  olijf-groen        (secundair)
     #223022  diep-groen         (primary dark, tekst, hero)
   Fonts:
     "Mr Banks Black" — titels (h1-h3, logo)
     "Brandon Text"   — body
   ======================================== */

/* ===== Fonts ===== */
@font-face {
    font-family: 'Mr Banks Black';
    src: url('/assets/fonts/mrbanks-black.woff2') format('woff2'),
         url('/assets/fonts/mrbanks-black.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Brandon Text';
    src: url('/assets/fonts/brandon-text-regular.woff2') format('woff2'),
         url('/assets/fonts/brandon-text-regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --cream:          #F4EFDF;      /* page bg */
    --cream-warm:     #E3DCC3;      /* alt section bg */
    --bruin:          #663013;      /* accent */
    --bruin-licht:    #8a4a25;
    --olijf:          #304D21;      /* secundair */
    --groen:          #223022;      /* dark primary, tekst, hero */
    --groen-zacht:    #364a35;
    --tekst:          #223022;
    --tekst-zacht:    rgba(34, 48, 34, 0.72);
    --tekst-extra:    rgba(34, 48, 34, 0.45);
    --grens:          rgba(102, 48, 19, 0.18);

    --serif: "Mr Banks Black", "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --sans:  "Brandon Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--tekst);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: normal;
    letter-spacing: 0.005em;
    line-height: 1.05;
    color: var(--groen);
}

a { color: var(--bruin); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--bruin-licht); }

/* Accessibiliteit — screen-reader-only utility */
.visueel-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

/* ===== Sluitings-banner (boven topbar, alleen tijdens actieve vakantie) =====
   Bewust NIET sticky: bezoekers zien 'm bij het binnenkomen, maar bij scrollen
   schuift hij uit beeld zodat de boodschap niet permanent in de weg zit. De
   topbar eronder is wel sticky en neemt de plek over zodra de banner weg is. */
.sluitings-banner {
    background: var(--bruin);
    color: var(--cream);
    border-bottom: 1px solid var(--bruin-licht);
    text-align: center;
}
.sluitings-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.55rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}
.sluitings-banner__inner strong { color: var(--cream); font-weight: 600; }
.sluitings-banner__detail { opacity: 0.92; }
.sluitings-banner__detail em { font-style: italic; opacity: 0.85; }

@media (max-width: 600px) {
    .sluitings-banner__inner {
        padding: 0.55rem 1rem;
        font-size: 0.88rem;
        flex-direction: column;
        align-items: center;   /* cross-axis = horizontaal in column-mode */
        gap: 0.15rem;
    }
}

/* ===== Top bar ===== */
.topbar {
    /* -webkit-sticky nodig voor oudere iOS Safari (<13). De gewone `sticky`
       komt erna en wint waar beide werken. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 239, 223, 0.94);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--grens);
}
.topbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    /* Grid met 3 vaste posities: logo links, nav midden, taal-toggle rechts.
       De buitenste twee kolommen zijn `auto` (eigen breedte), de middelste
       neemt de rest. Daardoor staat het taal-toggle altijd op exact dezelfde
       X-positie, ongeacht of de nav-tekst in NL of EN langer of korter is. */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
}
.topbar__merk {
    grid-column: 1;
    display: flex;
    align-items: center;
    height: 42px;
}
.topbar__merk img {
    height: 36px;
    width: auto;
}
.topbar__nav {
    grid-column: 2;
    display: flex;
    gap: 1.75rem;
    justify-content: center;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.topbar__nav a {
    color: var(--groen);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    font-weight: 400;
}
.topbar__nav a:hover {
    color: var(--bruin);
    border-color: var(--bruin);
}
.topbar__rechts {
    /* Expliciete grid-column 3 voorkomt dat dit element naar kolom 2 schuift
       wanneer .topbar__nav display:none krijgt op mobiel. */
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.taal-toggle {
    display: inline-flex;
    border: 1px solid var(--grens);
    border-radius: 999px;
    padding: 2px;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.taal-toggle a {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--tekst-zacht);
    min-width: 2rem;       /* "NL" en "EN" zijn even breed → geen sub-pixel shift */
    text-align: center;
}
.taal-toggle a.actief {
    background: var(--groen);
    color: var(--cream);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
}
.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--groen);
}

/* ===== Hero — donkergroen met logo =====
   Volle 1768×2500 papier-textuur, contained in viewport, fixed (parallax-style).
   image-set() laat de browser WebP kiezen wanneer ondersteund (96%+ browsers),
   anders JPG fallback. Op mobiel valt fixed-attachment weg (iOS-issue). */
.hero {
    /* Hero = altijd één scherm hoog op elk device.
       svh = "small viewport height" — stabiele waarde op mobiel (rekent met
       de adresbalk zichtbaar). vh-fallback voor browsers <2022. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background-color: var(--groen);
    background-image: url('/assets/images/backgrounds/achtergrond-1.jpg');
    background-image: image-set(
        url('/assets/images/backgrounds/achtergrond-1.webp') type('image/webp'),
        url('/assets/images/backgrounds/achtergrond-1.jpg')  type('image/jpeg')
    );
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
    color: var(--cream);
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34,48,34,0.45) 0%, rgba(34,48,34,0.15) 50%, rgba(34,48,34,0.65) 100%);
    pointer-events: none;
}
.hero__inner {
    max-width: 760px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hero__logo {
    width: clamp(280px, 60vw, 460px);
    margin: 0 auto 2.5rem;
    color: var(--cream);   /* SVG-fills zijn vervangen door currentColor */
}
.hero__logo svg {
    width: 100%;
    height: auto;
    display: block;
}
.hero__tagline {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.3vw, 1.5rem);
    color: var(--cream);
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.hero__klein {
    color: rgba(244, 239, 223, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.72rem;
    margin: 0 0 2.5rem;
}
.hero__cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Knoppen ===== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--sans);
}
.btn--primair {
    background: var(--bruin);
    color: var(--cream) !important;
}
.btn--primair:hover {
    background: var(--cream);
    color: var(--groen) !important;
}
.btn--licht {
    border-color: var(--cream);
    color: var(--cream) !important;
    background: transparent;
}
.btn--licht:hover {
    background: var(--cream);
    color: var(--groen) !important;
}

/* ===== Algemene sectie-styling ===== */
.sectie {
    padding: 6rem 1.5rem;
    position: relative;
}
.sectie__inner {
    max-width: 1080px;
    margin: 0 auto;
}
.sectie__inner--smal { max-width: 720px; }
.sectie__titel {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    text-align: center;
    margin: 0 0 3rem;
    line-height: 1;
}
.sectie__titel::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--bruin);
    margin: 1.2rem auto 0;
}

/* ===== Foto-divider (fixed parallax tussen secties) ===== */
.foto-divider {
    height: 380px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
.foto-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(34, 48, 34, 0.15);
}
/* image-set() laat browser WebP kiezen wanneer ondersteund (96%+ van browsers),
   anders valt het terug op JPG. Per divider scheelt dit honderden KB. */
.foto-divider--interieur {
    background-image: url('/assets/images/foto/row-4.jpg');
    background-image: image-set(
        url('/assets/images/foto/row-4.webp') type('image/webp'),
        url('/assets/images/foto/row-4.jpg')  type('image/jpeg')
    );
}
.foto-divider--koffie {
    background-image: url('/assets/images/foto/foto-thomas-1.jpg');
    background-image: image-set(
        url('/assets/images/foto/foto-thomas-1.webp') type('image/webp'),
        url('/assets/images/foto/foto-thomas-1.jpg')  type('image/jpeg')
    );
}
.foto-divider--salade {
    background-image: url('/assets/images/foto/row-3.jpg');
    background-image: image-set(
        url('/assets/images/foto/row-3.webp') type('image/webp'),
        url('/assets/images/foto/row-3.jpg')  type('image/jpeg')
    );
}
.foto-divider--taart {
    background-image: url('/assets/images/foto/row-2.jpg');
    background-image: image-set(
        url('/assets/images/foto/row-2.webp') type('image/webp'),
        url('/assets/images/foto/row-2.jpg')  type('image/jpeg')
    );
}

/* ===== Verhaal ===== */
.sectie--verhaal {
    background-color: var(--cream-warm);
    background-image: url('/assets/images/backgrounds/achtergrond-3.jpg');
    background-image: image-set(
        url('/assets/images/backgrounds/achtergrond-3.webp') type('image/webp'),
        url('/assets/images/backgrounds/achtergrond-3.jpg')  type('image/jpeg')
    );
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
}
.verhaal-tekst {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--tekst);
}
.verhaal-tekst--onder {
    margin: 3.5rem auto 0;
}
.verhaal-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 780px;            /* kleiner dan vroeger (was 1000px) */
    margin: 0 auto;
}
.verhaal-foto {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(34,48,34,0.15);
}
.verhaal-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.verhaal-foto:hover img { transform: scale(1.04); }

/* ===== Menu — geneste hierarchie + tabs ===== */
.sectie--menu { background: var(--cream); }

/* Tabs (Ontbijt / Lunch / Warme dranken / Frisse dranken …)
   Eén rij, gecentreerd. Bij krappe schermen scrollt horizontaal ipv te wrappen,
   maar de scrollbalk is verborgen — clean look, swipe blijft werken. */
.menu-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 0 auto 3rem;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--grens);
    padding-bottom: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* oude Edge/IE */
}
.menu-tabs::-webkit-scrollbar {     /* Chrome/Safari */
    display: none;
}
.menu-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 1.1rem;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    color: var(--tekst-zacht);
    transition: color 0.2s, border-color 0.2s;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}
.menu-tab:hover { color: var(--bruin); }
.menu-tab--actief {
    color: var(--groen);
    border-bottom-color: var(--bruin);
}
.menu-panel { display: none; }
.menu-panel--actief { display: block; }
.menu-panel[hidden] { display: none; }

/* Kinderen-layout: kolommen (verschillende aantallen) */
.menu-cat__kinderen--kolommen-auto,
.menu-cat__kinderen--kolommen-2,
.menu-cat__kinderen--kolommen-3,
.menu-cat__kinderen--kolommen-4,
.menu-cat__kinderen--kolommen {              /* legacy fallback, mocht migratie nog niet gelopen zijn */
    display: grid;
    align-items: start;
    gap: 2rem 2.5rem;
    margin-top: 1.5rem;
    max-width: 100%;
}
.menu-cat__kinderen--kolommen-auto,
.menu-cat__kinderen--kolommen {
    /* Responsive: zoveel kolommen als passen met min ~220px per stuk */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.menu-cat__kinderen--kolommen-2 { grid-template-columns: repeat(2, 1fr); }
.menu-cat__kinderen--kolommen-3 { grid-template-columns: repeat(3, 1fr); }
.menu-cat__kinderen--kolommen-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.75rem; }

/* Onderliggende menu-cat'en in een grid: full-width binnen hun kolom,
   geen eigen max-width meer (anders zou een niveau-1 cat op 760px clippen) */
[class*="menu-cat__kinderen--kolommen"] > .menu-cat {
    max-width: 100%;
    margin: 0;
}
[class*="menu-cat__kinderen--kolommen"] .menu-items {
    max-width: 100%;
}
[class*="menu-cat__kinderen--kolommen"] .menu-item__naamprijs {
    font-size: 1.05rem;
}
/* Vier kolommen kunnen krap zijn → kleinere font */
.menu-cat__kinderen--kolommen-4 .menu-item__naamprijs { font-size: 0.95rem; }
.menu-cat__kinderen--kolommen-4 .menu-cat__titel { font-size: 1.15rem; }

/* Niveau 0 = hoofdcategorie (Eetkaart, Drankkaart) — heel groot, mid-margin */
.menu-cat--niveau-0 {
    margin-bottom: 5rem;
}
.menu-cat--niveau-0:last-child { margin-bottom: 0; }
.menu-cat__titel--hoofd {
    font-size: clamp(2rem, 4vw, 2.8rem);
    text-align: center;
    color: var(--groen);
    margin: 0 0 2.5rem;
    line-height: 1;
}
.menu-cat__titel--hoofd::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--bruin);
    margin: 1rem auto 0;
}
/* Wanneer er een info-badge volgt: decoratieve lijn weg + minder bottom-margin */
.menu-cat__titel--zonder-lijn::after { display: none; }
.menu-cat__titel--zonder-lijn { margin-bottom: 0.85rem; }

/* Info-badge ONDER de hoofdcategorie-titel (gecentreerd) */
.menu-cat__info-onder {
    text-align: center;
    margin: 0 0 2.25rem;
}
.menu-cat__info-onder .menu-cat__info {
    margin-left: 0;           /* override de inline-margin (geldt enkel naast subcat-h4) */
    font-size: 0.82rem;       /* iets groter dan default 0.72rem voor prominentie */
    padding: 0.3rem 0.9rem;
}

/* Niveau 1 = sub-categorie (Ontbijt, Lunch, Koffie, Iced, …) */
.menu-cat--niveau-1 {
    max-width: 760px;
    margin: 0 auto 3rem;
}
.menu-cat--niveau-1 .menu-cat__titel {
    font-size: 1.5rem;
    text-align: center;
    color: var(--bruin);
    margin: 0 0 0.5rem;
}

/* Niveau 2+ = sub-sub-categorie (zelden gebruikt) */
.menu-cat--niveau-2 .menu-cat__titel,
.menu-cat--niveau-3 .menu-cat__titel {
    font-size: 1.2rem;
    text-align: center;
    color: var(--olijf);
    margin: 1.5rem 0 0.3rem;
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.menu-cat__info {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    background: rgba(102, 48, 19, 0.1);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--bruin);
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: middle;
    line-height: 1.6;
}

.menu-cat__desc {
    text-align: center;
    color: var(--tekst-zacht);
    font-style: italic;
    margin: 0 auto 1.5rem;
    max-width: 540px;
    font-size: 0.95rem;
}

.menu-cat__voet {
    text-align: center;
    color: var(--tekst-zacht);
    font-size: 0.9rem;
    margin: 1rem auto 0;
    max-width: 540px;
}

.menu-items {
    list-style: none;
    padding: 0;
    margin: 0 auto 1rem;
    max-width: 760px;
}
.menu-item {
    padding: 0.9rem 0;
    border-bottom: 1px dotted var(--grens);
}
.menu-item:last-child { border-bottom: 0; }
/* Item zonder prijs = tussentitel, geen scheidingslijn eronder */
.menu-item--zonder-prijs { border-bottom: 0; }
.menu-item__naamprijs {
    display: flex;
    align-items: baseline;
    justify-content: space-between;     /* prijs gewoon naar de rechterrand */
    gap: 0.6rem;
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.3;
}
.menu-item__naam {
    flex-shrink: 1;
    /* geen max-width meer nodig — geen leader om ruimte voor te reserveren */
}
.menu-item__bij {
    display: block;
    font-family: var(--sans);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--tekst-zacht);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.menu-item__prijs {
    color: var(--bruin);
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
}

.leeg {
    text-align: center;
    color: var(--tekst-zacht);
    font-style: italic;
}

/* ===== Cadeaubon ===== */
.sectie--cadeaubon {
    background-color: var(--bruin);
    background-image: url('/assets/images/backgrounds/achtergrond-2.jpg');
    background-image: image-set(
        url('/assets/images/backgrounds/achtergrond-2.webp') type('image/webp'),
        url('/assets/images/backgrounds/achtergrond-2.jpg')  type('image/jpeg')
    );
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
    color: var(--cream);
    text-align: center;
}
.sectie--cadeaubon .sectie__titel { color: var(--cream); }
.sectie--cadeaubon .sectie__titel::after { background: var(--cream); }
.sectie--cadeaubon p { font-size: 1.1rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.sectie--cadeaubon .btn--primair {
    background: var(--cream);
    color: var(--bruin) !important;
}
.sectie--cadeaubon .btn--primair:hover {
    background: var(--groen);
    color: var(--cream) !important;
}

/* ===== Reserveren ===== */
.sectie--reserveren { background: var(--cream); }
.reserveren-uitleg {
    text-align: center;
    max-width: 540px;
    margin: 0 auto 2rem;
    color: var(--tekst-zacht);
}
.reserveren-cta {
    text-align: center;
    margin: 1.5rem 0 1.5rem;
}
.reserveren-cta .btn { font-size: 0.92rem; padding: 1rem 2rem; }
.reserveren-fallback {
    text-align: center;
    color: var(--tekst-zacht);
    font-size: 0.92rem;
    margin: 0;
}
.reserveren-fallback a { color: var(--bruin); }

/* ===== Contact ===== */
.sectie--contact {
    background-color: var(--cream-warm);
    background-image: url('/assets/images/backgrounds/achtergrond-3.jpg');
    background-image: image-set(
        url('/assets/images/backgrounds/achtergrond-3.webp') type('image/webp'),
        url('/assets/images/backgrounds/achtergrond-3.jpg')  type('image/jpeg')
    );
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
}

/* 2-koloms grid: bezoek-card | openingsuren-card.
   Geen align-items: start → grid stretcht beide cards naar dezelfde
   hoogte = die van het langste blok. */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 960px;
    margin: 0 auto;
}

.contact-card {
    background: rgba(255, 255, 255, 0.55);
    padding: 1.75rem 2rem;
    border-radius: 6px;
    border: 1px solid rgba(102, 48, 19, 0.15);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-card__titel {
    font-size: 1.5rem;
    margin: 0;
    color: var(--bruin);
}

/* Adres-blok */
.contact-card__adres {
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tekst);
    margin: 0;
}
.contact-card__maps {
    margin: 0;
}
.contact-card__maps .btn {
    /* Eigen outline-stijl — .btn--licht zou cream-op-cream geven op de card */
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    color: var(--bruin) !important;
    background: transparent;
    border: 1px solid var(--bruin);
}
.contact-card__maps .btn:hover {
    background: var(--bruin);
    color: var(--cream) !important;
}

/* Bel/mail-knoppen — compact, met label + waarde */
.contact-acties {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.contact-actie {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(102, 48, 19, 0.18);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.contact-actie:hover {
    border-color: var(--bruin);
    background: #fff;
    transform: translateY(-1px);
}
.contact-actie__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tekst-zacht);
    font-weight: 500;
}
.contact-actie__waarde {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--bruin);
    word-break: break-word;
}

/* Openingsuren-tabel — duidelijker met meer ruimte */
.uren {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.25rem;
}
.uren th, .uren td {
    text-align: left;
    padding: 0.55rem 0;
    border-bottom: 1px dotted rgba(102, 48, 19, 0.15);
    font-weight: 400;
    font-size: 1.02rem;
    color: var(--tekst);
}
.uren th {
    width: 45%;
    font-family: var(--sans);
    color: var(--groen);
    font-weight: 500;
}
.uren td {
    text-align: right;
    font-family: var(--serif);
    color: var(--bruin);
}
.uren tr:last-child th,
.uren tr:last-child td {
    border-bottom: 0;
}
.uren tr.gesloten td {
    color: var(--tekst-zacht);
    font-style: italic;
    font-family: var(--sans);
}

/* Vakantie-melding boven openingsuren-tabel */
.vakantie-melding {
    padding: 0.85rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
}
.vakantie-melding--nu {
    background: rgba(102, 48, 19, 0.12);
    border-left: 3px solid var(--bruin);
    color: var(--bruin);
}
.vakantie-melding--nu strong { color: var(--bruin); }
.vakantie-melding--komend {
    background: rgba(48, 77, 33, 0.08);
    border-left: 3px solid var(--olijf);
    color: var(--olijf);
    font-size: 0.9rem;
}

@media (max-width: 880px) {
    .contact-layout {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
    .contact-card { padding: 1.5rem 1.5rem; }
}

/* ===== Footer ===== */
.site-voet {
    background: var(--groen);
    color: var(--cream);
    padding: 4rem 1.5rem 2.5rem;
    font-size: 0.92rem;
    position: relative;
    overflow: hidden;
}
.site-voet::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/backgrounds/achtergrond-1.jpg');
    background-image: image-set(
        url('/assets/images/backgrounds/achtergrond-1.webp') type('image/webp'),
        url('/assets/images/backgrounds/achtergrond-1.jpg')  type('image/jpeg')
    );
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;  /* consistent met hero/verhaal/cadeaubon/contact */
    opacity: 0.25;
    pointer-events: none;
}
.site-voet__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.site-voet__badge { display: flex; justify-content: center; color: var(--cream); }
.site-voet__badge a { display: block; line-height: 0; }
.site-voet__badge svg { width: 130px; height: auto; display: block; }
.site-voet__mid { text-align: center; }
.site-voet__mid h4 {
    color: var(--cream);
    margin: 0 0 0.5rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 400;
    opacity: 0.7;
}
.site-voet__mid p { margin: 0 0 0.3rem; }
.site-voet a { color: var(--cream-warm); }
.site-voet a:hover { color: var(--cream); }
.site-voet__onder {
    border-top: 1px solid rgba(244, 239, 223, 0.12);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(244, 239, 223, 0.55);
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.beheer-link { color: rgba(244, 239, 223, 0.55) !important; }

/* ===== Floating Reserveer-knop ===== */
.floating-cta {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--bruin);
    color: var(--cream);
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(34, 48, 34, 0.25);
    z-index: 60;
    transition: transform 0.15s, background 0.15s, opacity 0.3s;
}
.floating-cta:hover {
    background: var(--groen);
    color: var(--cream);
    transform: translateY(-2px);
}

/* background-attachment: fixed werkt slecht op iOS (geen parallax, performance-hit).
   Op mobiel/tablet → scroll-attachment voor stabiele rendering. */
@media (max-width: 1024px), (hover: none) {
    .hero,
    .sectie--verhaal,
    .sectie--cadeaubon,
    .sectie--contact,
    .site-voet::before {
        background-attachment: scroll;
    }
}

/* Kolommen → tablet/mobiel: minder kolommen, of helemaal 1 op smal. */
@media (max-width: 880px) {
    .menu-cat__kinderen--kolommen-3,
    .menu-cat__kinderen--kolommen-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .menu-cat__kinderen--kolommen-auto,
    .menu-cat__kinderen--kolommen-2,
    .menu-cat__kinderen--kolommen-3,
    .menu-cat__kinderen--kolommen-4,
    .menu-cat__kinderen--kolommen {
        grid-template-columns: 1fr;
    }
}

/* Mobile tabs: 2×2 grid (rij 1: ontbijt+lunch, rij 2: warme+frisse).
   Horizontal scroll van desktop wordt vervangen door geneste tab-grid. */
@media (max-width: 600px) {
    .menu-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-bottom: none;
        overflow: visible;
        max-width: 100%;
        margin-bottom: 2.5rem;
    }
    .menu-tab {
        padding: 0.85rem 0.5rem;
        border-bottom: 1px solid rgba(102, 48, 19, 0.2);
        text-align: center;
        white-space: normal;       /* lange namen mogen wrappen */
        font-size: 1.05rem;
        margin-bottom: 0;
    }
    .menu-tab--actief {
        border-bottom-color: var(--bruin);
        border-bottom-width: 2px;
        padding-bottom: calc(0.85rem - 1px);  /* compenseer extra border-px */
    }
}

/* ===== Mobiel ===== */
@media (max-width: 880px) {
    .topbar__inner {
        grid-template-columns: auto 1fr auto;
    }
    .topbar__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--cream);
        padding: 1.25rem 1.5rem 1.75rem;
        border-bottom: 1px solid var(--grens);
        gap: 1rem;
        align-items: center;
    }
    .topbar__nav.open { display: flex; }
    .hamburger { display: flex; }
    .sectie { padding: 4.5rem 1.25rem; }
    .verhaal-fotos {
        /* 3 kolommen behouden op mobiel als compacte triptiek-thumbnails —
           voorkomt dat elke foto bijna een volledig scherm inneemt. */
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        max-width: 100%;
    }
    .foto-divider {
        height: 260px;
        background-attachment: scroll;  /* parallax kapot op iOS */
    }
    .site-voet__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .site-voet__onder {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .floating-cta {
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1.2rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .hero { padding: 3rem 1.25rem; }
    .hero__cta { flex-direction: column; }
    .hero__cta .btn { width: 100%; }
}

/* ===================================================================
   Menu-pagina (standalone QR-pagina, /menu)
   Mobile-first. Sticky header + sticky tab-rail; geen full topbar/footer.
   Hoogtes via --menu-page-header-h zodat header en tab-top in sync blijven.
   =================================================================== */
.menu-page {
    --menu-page-header-h: 56px;
    background: var(--cream);
    /* Geen padding-top: env(safe-area-inset-top) op body — dat breekt
       position:sticky op iOS Safari (sticky top:0 telt vanaf viewport, niet
       vanaf body-padding). De notch is sowieso al uitgesloten van de
       viewport zonder viewport-fit=cover.
       Geen min-height: 100vh op body — dat geeft op iOS Safari een
       inconsistente containing block voor sticky descendants. */
}
/* Shell wrapper rond alles. Sticky elementen mogen GEEN direct child van
   <body> zijn op iOS Safari (sticky faalt dan stilletjes). Deze div
   geeft sticky een nette containing block. min-height hier zodat de
   cream-achtergrond doorloopt op korte tabs. */
.menu-page .menu-page__shell {
    min-height: 100vh;
}

.menu-page .menu-page__header {
    position: -webkit-sticky;   /* iOS 12 fallback */
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--menu-page-header-h);
    padding: 0 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--grens);
}
.menu-page .menu-page__merk {
    display: flex;
    align-items: center;
    line-height: 0;
}
.menu-page .menu-page__merk img {
    height: 32px;
    width: auto;
    display: block;
}
.menu-page .menu-page__header .taal-toggle {
    font-size: 0.85rem;
}

/* Sticky tab-rail: kleeft net onder de header (offset = headerhoogte + border).
   Staat als sibling van .menu-page__header op root-niveau, niet binnen
   .menu-page__main, zodat de strook full-width over de viewport blijft op alle
   schermbreedtes.
   Op mobile gebruiken we de 2-koloms grid uit de onepager (gedeelde
   .menu-tabs override @ max-width 600px) — duidelijker dan een half-zichtbare
   horizontal-scroll, en de extra hoogte geven we mee via --menu-page-tabs-h
   zodat de sticky offset bij scroll vanzelf meegroeit. */
.menu-page .menu-page__tabs {
    position: -webkit-sticky;   /* iOS 12 fallback */
    position: sticky;
    top: var(--menu-page-header-h);
    z-index: 40;
    background: var(--cream);
    border-bottom: 1px solid var(--grens);
    padding: 0 1rem;
}
.menu-page .menu-page__tabs .menu-tabs {
    margin: 0;
    border-bottom: 0;            /* eigen wrapper heeft al een border */
    max-width: 100%;
}
/* Desktop (en tablet >600px): één rij, gecentreerd, niet scrollend */
@media (min-width: 601px) {
    .menu-page .menu-page__tabs .menu-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.25rem;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .menu-page .menu-page__tabs .menu-tabs::-webkit-scrollbar { display: none; }
    .menu-page .menu-page__tabs .menu-tab {
        flex-shrink: 0;
        white-space: nowrap;
        text-align: center;
        padding: 0.7rem 1rem;
        margin-bottom: -1px;
        border-bottom: 2px solid transparent;
        font-size: clamp(1rem, 2.4vw, 1.2rem);
        line-height: 1.2;
    }
    .menu-page .menu-page__tabs .menu-tab--actief {
        border-bottom-color: var(--bruin);
    }
}

.menu-page .menu-page__main {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.menu-page .menu-page__main .menu-panel--actief {
    padding-top: 1.25rem;
}

/* Compactere menu-cat titels — sectie heeft hier geen sectie__titel boven */
.menu-page .menu-page__main .menu-cat--niveau-0 { margin-bottom: 2.25rem; }
.menu-page .menu-page__main .menu-cat__titel--hoofd {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
    margin-top: 0.5rem;
}

/* Footer: simpele link terug naar de hoofdsite */
.menu-page .menu-page__voet {
    border-top: 1px solid var(--grens);
    text-align: center;
    padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    font-size: 0.9rem;
}
.menu-page .menu-page__voet a {
    color: var(--bruin);
    text-decoration: none;
}
.menu-page .menu-page__voet a:hover { text-decoration: underline; }

/* Desktop: net iets ruimer, sticky blijft werken */
@media (min-width: 720px) {
    .menu-page { --menu-page-header-h: 68px; }
    .menu-page .menu-page__merk img { height: 40px; }
    .menu-page .menu-page__tabs {
        padding: 0 1.5rem;
    }
    .menu-page .menu-page__tabs .menu-tabs {
        justify-content: center;
    }
    .menu-page .menu-page__main {
        padding: 1.5rem 1.5rem 4rem;
    }
}