/*
 * Components — Bistro 't Leven
 * BEM naamgeving doorgeheel
 */

/* ----------------------------------------
 * BUTTONS
 * ---------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-5);
  height:           46px;
  padding:          var(--space-5) var(--space-6);
  font-family:      var(--font-heading);
  font-size:        var(--text-xl);     /* 22px */
  font-weight:      var(--font-semibold); /* 600 */
  letter-spacing:   var(--tracking-normal);
  border-radius:    var(--radius-sm);   /* 2px */
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color var(--transition-fast),
                    transform var(--transition-fast);
  white-space:      nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Primary button — rood */
.btn--primary {
  background-color: var(--color-accent);
  color:            var(--color-text-light);
}

.btn--primary:hover {
  background-color: var(--color-accent-dark);
  color:            var(--color-text-light);
}

/* Secondary button — outline goudbruin */
.btn--secondary {
  background-color: transparent;
  color:            var(--color-primary);
  border:           2px solid var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color:            var(--color-text-light);
}

/* Ghost button — voor op donkere achtergrond */
.btn--ghost {
  background-color: transparent;
  color:            var(--color-text-light);
  border:           2px solid var(--color-text-light);
}

.btn--ghost:hover {
  background-color: var(--color-text-light);
  color:            var(--color-primary);
}

/* Outline button — rode rand en rode tekst, vult bij hover */
.btn--outline {
  background-color: transparent;
  color:            var(--color-accent);
  border:           2px solid var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent);
  color:            var(--color-text-light);
}

/* ----------------------------------------
 * NAVIGATIE
 * ---------------------------------------- */

.header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          100;
  background-color: var(--color-bg-dark);
  padding:          var(--space-4) var(--space-6);
}

.nav {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  max-width:        var(--container-max);
  margin:           0 auto;
}

.nav__logo img {
  height: 60px;
  width:  auto;
}

.nav__collapse {
  display:      flex;
  align-items:  center;
  gap:          var(--space-8);
}

.nav__menu {
  display:      flex;
  align-items:  center;
  gap:          var(--space-8);
  list-style:   none;
  margin:       0;
  padding:      0;
}

/* WP voegt automatisch .menu-item class toe aan nav <li> — reset alle
   styling die voor de menukaart-items bedoeld is en hier doorlekt. */
.nav__menu .menu-item {
  display:         block;
  justify-content: initial;
  align-items:     initial;
  gap:             0;
  border:          none;
  padding:         0;
}

.nav__menu a {
  color:            var(--color-text-nav);
  font-family:      var(--font-heading);
  font-size:        var(--text-xl);     /* 22px */
  font-weight:      var(--font-semibold);
  text-decoration:  none;
  transition:       color var(--transition-fast);
}

.nav__menu a:hover,
.nav__menu .current-menu-item > a {
  color:                var(--color-accent);
  text-decoration:      underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Submenu (dropdown) */
.nav__menu .menu-item-has-children {
  position: relative;
}

/* Submenu-toggle (chevron-knop) — alleen zichtbaar op mobiel */
.nav__submenu-toggle {
  display: none;
}

.nav__menu .sub-menu::before {
  content:  '';
  position: absolute;
  bottom:   100%;
  left:     0;
  right:    0;
  height:   var(--space-8);
}

.nav__menu .sub-menu {
  position:         absolute;
  top:              100%;
  left:             0;
  transform:        translateY(-4px);
  min-width:        200px;
  padding:          var(--space-4) 0;
  margin:           var(--space-8) 0 0;
  background-color: rgba(0, 0, 0, 0.92);
  list-style:       none;
  z-index:          110;
  border-radius:    var(--radius-md);
  opacity:          0;
  pointer-events:   none;
  transition:       opacity var(--transition-fast),
                    transform var(--transition-fast);
}

@media (min-width: 769px) {
  .nav__menu .menu-item-has-children:hover > .sub-menu {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
  }
}

.nav__menu .sub-menu .menu-item {
  padding: 0;
  border:  none;
}

.nav__menu .sub-menu a {
  display:    block;
  padding:    var(--space-2) var(--space-6);
  font-size:  var(--text-lg);
  white-space: nowrap;
}

.nav__menu .sub-menu a:hover {
  color: var(--color-accent);
}

.nav__cta {
  margin-left: var(--space-4);
}

/* Skip link — alleen zichtbaar voor toetsenbord/screenreader */
.skip-link {
  position: absolute;
  left:     -9999px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.skip-link:focus {
  position:         fixed;
  top:              var(--space-2);
  left:             var(--space-2);
  width:            auto;
  height:           auto;
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-bg-white);
  color:            var(--color-primary);
  z-index:          200;
}

/* Hamburger toggle — alleen zichtbaar op mobiel */
.nav__toggle {
  display:          none;
  width:            44px;
  height:           44px;
  padding:          0;
  background:       transparent;
  border:           none;
  cursor:           pointer;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              5px;
}

.nav__toggle-bar {
  display:          block;
  width:            26px;
  height:           2px;
  background-color: var(--color-text-light);
  transition:       transform var(--transition-fast),
                    opacity var(--transition-fast);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) 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(-7px) rotate(-45deg);
}

/* ----------------------------------------
 * PAGE HEADER (subpagina titel direct onder de hero)
 * ---------------------------------------- */

.page-header {
  padding-top:    var(--space-12);
  padding-bottom: var(--space-4);
  padding-left:   var(--section-padding-x);
  padding-right:  var(--section-padding-x);
  text-align:     center;
  background:     var(--color-bg-white);
}

/* Sectie direct na de page-header — minder padding-top zodat de afstand
   tussen titel en eerste content kleiner is. */
.page-header + .section {
  padding-top: var(--space-12);
}

.page-header__title {
  font-family: var(--font-heading);
  font-size:   var(--text-5xl);
  font-weight: 800;
  color:       var(--color-primary);
  margin:      0;
}

/* Op subpagina's (menupagina, menukaart-detail, over ons, contact, reserveren)
   is de hero compacter en wordt de hero-titel onderdrukt ten gunste van de
   losse <h1> in .page-header. */
.page-template-page-menu .hero,
.page-template-page-menukaart .hero,
.page-template-page-over-ons .hero,
.page-template-page-contact .hero,
.page-template-page-reserveren .hero {
  min-height: 40vh;
}

.page-template-page-menu .hero__title,
.page-template-page-menukaart .hero__title,
.page-template-page-over-ons .hero__title,
.page-template-page-contact .hero__title,
.page-template-page-reserveren .hero__title {
  display: none;
}

/* ----------------------------------------
 * MENUKAART — TABS, ITEMS, ALLERGENEN
 * (gebruikt op page-menukaart.php)
 * ---------------------------------------- */

.menukaart-tabs-section {
  padding: var(--space-8) var(--section-padding-x) var(--space-12);
  background: var(--color-bg-white);
}

.menukaart-tabs {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-6);
  justify-content: center;
  align-items:     center;
}

.menukaart-tabs__separator {
  display:     block;
  width:       var(--space-12);
  height:      1px;
  background:  var(--color-border-light);
  flex-shrink: 0;
}

.menukaart-tab {
  display:          inline-block;
  padding:          var(--space-4) var(--space-8);
  background-color: var(--color-bg-creme);
  color:            var(--color-primary);
  font-family:      var(--font-heading);
  font-size:        var(--text-base);
  font-weight:      var(--font-bold);
  text-decoration:  none;
  transition:       transform var(--transition-fast),
                    background-color var(--transition-fast);
}

.menukaart-tab:hover {
  transform: translateY(-2px);
}

.menukaart-tab--actief {
  background-color: var(--color-primary);
  color:            var(--color-text-light);
}

.menukaart-items {
  padding: var(--space-12) var(--section-padding-x) var(--space-16);
  background: var(--color-bg-white);
}

/* 3-koloms masonry layout met CSS columns. Browser balanceert hoogtes
   automatisch en break-inside: avoid voorkomt dat secties op een
   kolom-grens worden afgebroken. */
.menukaart-items__columns {
  column-count: 3;
  column-gap:   var(--space-12);
}

/* Korte menukaart (één sectie): masonry uit, header en lijst naast elkaar
   in een 2-koloms grid zodat de pagina niet leeg oogt. */
.menukaart-items__columns--single {
  column-count: unset;
  column-gap:   0;
}

.menukaart-items__columns--single .menukaart-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-12);
  margin-bottom:         0;
}

/* Footnote hoort onder de items-lijst, niet onder de header. */
.menukaart-items__columns--single .menukaart-section__footnote {
  grid-column: 2;
}

.menukaart-section {
  margin-bottom: var(--space-12);
  display:       block;
}

/* Afbeelding + titel blijven als één blok bij elkaar; de items-lijst
   eronder mag wél over kolommen splitsen zodat lange categorieën
   natuurlijk doorlopen naar de volgende kolom. */
.menukaart-section__header {
  break-inside:      avoid;
  page-break-inside: avoid;
  break-after:       avoid;
  page-break-after:  avoid;
}

.menukaart-section__image {
  width:        100%;
  height:       280px;
  object-fit:   cover;
  display:      block;
  margin-bottom: var(--space-6);
}

.menukaart-section__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xl);
  font-weight:    var(--font-extrabold);
  color:          var(--color-primary);
  margin:         0 0 var(--space-6);
}

.menukaart-section__subtitle {
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: var(--font-regular);
  color:       var(--color-primary);
  margin:      calc(-1 * var(--space-4)) 0 var(--space-6);
}

.menukaart-section__subtitle p {
  margin: 0 0 var(--space-2);
  color:  inherit;
  font-family: inherit;
  font-weight: inherit;
}

.menukaart-section__subtitle p:last-child {
  margin-bottom: 0;
}

.menukaart-list {
  list-style: none;
  margin:     0;
  padding:    0;
}

.menukaart-list__item {
  padding-bottom: var(--space-4);
  margin-bottom:  var(--space-4);
  border-bottom:  1px solid var(--color-border-light);
  padding-left:   var(--space-4);
  padding-right:  var(--space-4);
  margin-left:    calc(-1 * var(--space-4));
  margin-right:   calc(-1 * var(--space-4));
  border-radius:  var(--radius-sm);
  transition:     background-color 0.3s ease;
  break-inside:      avoid;
  page-break-inside: avoid;
}

.menukaart-list__item:hover {
  background-color: var(--color-bg-creme);
}

.menukaart-list__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.menukaart-list__row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--space-4);
  margin-bottom:   var(--space-1);
}

.menukaart-list__name {
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: var(--font-bold);
  color:       var(--color-primary);
}

.menukaart-list__price {
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: var(--font-bold);
  color:       var(--color-primary);
  white-space: nowrap;
}

.menukaart-list__description {
  font-size: var(--text-sm);
  color:     var(--color-text-body);
  margin:    0;
}

.menukaart-allergenen {
  font-style: italic;
  text-align: center;
  color:      var(--color-accent);
  font-size:  var(--text-sm);
  max-width:  640px;
  margin:     var(--space-12) auto 0;
}

.menukaart-section__footnote {
  font-style: italic;
  font-size:  var(--text-sm);
  color:      var(--color-text-body);
  margin:     var(--space-4) 0 0;
}

.menukaart-section__footnote p {
  margin:      0 0 var(--space-2);
  color:       inherit;
  font-style:  inherit;
  font-size:   inherit;
  font-weight: var(--font-regular);
}

.menukaart-section__footnote p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * OVER ONS — content blokken (afwisselende foto links/rechts)
 * ---------------------------------------- */

.over-ons-blok {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-20);
  align-items:           center;
  margin-bottom:         var(--space-20);
}

.over-ons-blok:last-child {
  margin-bottom: 0;
}

/* Foto rechts: kolommen omdraaien zonder DOM-volgorde te wijzigen. */
.over-ons-blok--foto-rechts .over-ons-blok__image {
  grid-column: 2;
}

.over-ons-blok--foto-rechts .over-ons-blok__text {
  grid-column: 1;
  grid-row:    1;
}

.over-ons-blok__image img {
  width:        100%;
  height:       auto;
  display:      block;
  object-fit:   cover;
  box-shadow:   var(--shadow-md);
  aspect-ratio: 3 / 2;
}

.over-ons-blok__text {
  width:      100%;
  text-align: left;
}

/* Heading: titel + decoratief streepje. Streepje krijgt een vaste breedte
   gelijk aan de grid-gap, zodat het visueel de gap tussen tekstkolom en
   fotokolom overbrugt. */
.over-ons-blok__heading {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: var(--space-6);
  overflow:      visible;
  padding-left:  0;
}

.over-ons-blok__title {
  flex:        0 0 auto;
  margin:      0;
  white-space: nowrap;
}

.over-ons-blok__line {
  flex:       0 0 0px;
  height:     1px;
  background: var(--color-primary);
  transition: flex-basis 0.8s ease;
}

.over-ons-blok__heading.is-visible .over-ons-blok__line {
  flex-basis: 60px;
}

.over-ons-blok--foto-rechts .over-ons-blok__heading.is-visible .over-ons-blok__line {
  flex: 1;
}

.over-ons-blok--foto-links .over-ons-blok__line  { order: 1; }
.over-ons-blok--foto-links .over-ons-blok__title { order: 2; }

.over-ons-blok--foto-rechts .over-ons-blok__line  { order: 2; }
.over-ons-blok--foto-rechts .over-ons-blok__title { order: 1; }

.over-ons-blok__body {
  max-width: 520px;
}

.over-ons-blok__body p {
  margin-bottom: var(--space-4);
}

.over-ons-blok__body p:last-child {
  margin-bottom: 0;
}

.over-ons-blok__cta {
  margin-top: var(--space-6);
}

/* ----------------------------------------
 * SFEERIMPRESSIE SLIDER (horizontale carousel met dots)
 * ---------------------------------------- */

/* Sectie zelf zonder horizontale padding zodat de slider edge-to-edge loopt.
   !important nodig om de horizontale padding van .section te overschrijven
   die via shorthand padding op .section staat (en dus winnen via specificity). */
.sfeerimpressie-slider {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width:     100%;
  overflow:      hidden;
  margin-left:   0;
  margin-right:  0;
}

.sfeerimpressie-slider__title {
  text-align:    center;
  margin:        0 0 var(--space-12);
  color:         var(--color-text-heading);
  padding:       0 var(--section-padding-x);
}

.sfeerimpressie-slider__viewport {
  overflow: hidden;
  width:    100%;
}

.sfeerimpressie-slider__track {
  display:      flex;
  gap:          var(--space-4);
  margin:       0;
  padding:      0;
  list-style:   none;
  transition:   transform var(--transition-base);
  will-change:  transform;
}

/* "Half-vol-vol-half" peek layout: 3 slides in beeld, middelste 2 volledig
   en buitenste 2 half. Per slide = 33% van de viewport. De peek-offset wordt
   door JS via translateX afgehandeld zodat hij meeschaalt met clones in de
   infinite loop. */
.sfeerimpressie-slider__slide {
  flex:                 0 0 33%;
  aspect-ratio:         4 / 3;
  overflow:             hidden;
  -webkit-user-select:  none;
  -ms-user-select:      none;
  user-select:          none;
}

.sfeerimpressie-slider__slide img {
  -webkit-user-drag: none;
  pointer-events:    none;       /* drag op container, niet op img */
}

.sfeerimpressie-slider__track {
  cursor: grab;
}

.sfeerimpressie-slider__track.is-dragging {
  cursor: grabbing;
}

.sfeerimpressie-slider__slide img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.sfeerimpressie-slider__dots {
  display:         flex;
  justify-content: center;
  gap:             var(--space-3);
  margin:          var(--space-8) 0 0;
  padding:         0;
  list-style:      none;
}

.sfeerimpressie-slider__dot {
  width:            10px;
  height:           10px;
  padding:          0;
  border:           none;
  border-radius:    50%;
  /* Bewust hardcoded — primary kleur (#826239 = rgb 130,98,57) met 30% alpha.
     Geen alpha-token beschikbaar in tokens.css. */
  background-color: rgba(130, 98, 57, 0.3);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    transform var(--transition-fast);
}

.sfeerimpressie-slider__dot:hover {
  transform: scale(1.15);
}

.sfeerimpressie-slider__dot.is-active {
  background-color: var(--color-primary);
}

/* ----------------------------------------
 * HERO
 * ---------------------------------------- */

.hero {
  position:     relative;
  min-height:   80vh;
  display:      flex;
  align-items:  center;            /* terug naar center — asymmetrische padding trekt content omhoog */
  overflow:     hidden;             /* houdt de uitstekende vector binnen de hero */
}

.hero__bg {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
}

.hero__overlay {
  position:         absolute;
  inset:            0;
  /* Bewust hardcoded — zwart met 35% alpha als foto-overlay. Lichter dan de
     token --color-bg-dark (0.71) zodat de foto er goed doorheen komt. Geen
     alpha-token beschikbaar in tokens.css. */
  background-color: rgba(0, 0, 0, 0.35);
}

.hero__vector {
  position:        absolute;
  bottom:          -5%;
  left:            0;
  width:           100%;
  height:          auto;
  pointer-events:  none;
  opacity:         0;
  z-index:         1;
  transform:       translateY(30px);
  animation:       heroVectorIn 1.5s ease 0.3s forwards,
                   heroVectorFloat 8s ease-in-out 2s infinite;
}

.hero__content {
  position:     relative;
  z-index:      2;
  width:        100%;
  max-width:    var(--container-max);
  margin:       0 auto;
  /* Gelijke top- en bottom-padding → het blok wordt door flex (align-items:center)
     echt verticaal in het midden van de hero uitgelijnd. */
  padding:      var(--space-16) var(--space-6) var(--space-16) var(--space-16);
  text-align:   left;
}

.hero__title {
  color:          var(--color-text-light);
  font-family:    var(--font-heading);
  font-size:      var(--text-5xl);     /* 64px */
  font-weight:    var(--font-extrabold);
  line-height:    var(--leading-tight);
  margin:         0 0 var(--space-4);
}

.hero__subtitle {
  color:        var(--color-text-light);
  font-size:    var(--text-lg);
  margin-bottom: var(--space-8);
  opacity:      0.9;
  max-width:    540px;
}

.hero__cta {
  margin-top: var(--space-2);
}

/* ----------------------------------------
 * SECTIES
 * ---------------------------------------- */

.section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.section--white  { background-color: var(--color-bg-white); }
.section--creme  { background-color: var(--color-bg-creme); }
.section--goud   { background-color: var(--color-bg-goud); }

.section__inner {
  max-width: var(--container-max);
  margin:    0 auto;
}

.section__title {
  text-align:   center;
  margin-bottom: var(--space-12);
}

/* ----------------------------------------
 * TEKST + AFBEELDING BLOK
 * ---------------------------------------- */

.content-block {
  display:      grid;
  grid-template-columns: 1fr 1fr;
  gap:          var(--space-16);
  align-items:  center;
  margin-bottom: var(--space-16);
}

.content-block--reverse {
  direction: rtl;
}

.content-block--reverse > * {
  direction: ltr;
}

.content-block__image img {
  width:        100%;
  height:       400px;
  object-fit:   cover;
}

.content-block__text-label {
  display:      flex;
  align-items:  center;
  gap:          var(--space-4);
  margin-bottom: var(--space-4);
  color:        var(--color-primary);
}

.content-block__text-label::before {
  content:          '';
  display:          block;
  width:            0;
  height:           1px;
  background-color: var(--color-primary);
  transition:       width 0.8s ease;
}

.content-block__text-label.is-visible::before {
  width:            60px;
}

/* ----------------------------------------
 * OVER BLOK
 * ---------------------------------------- */

.over-blok__inner {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  var(--space-16);
  align-items:          center;
}

/* Links: twee overlappende foto's met vaste afmetingen (385x364) uit het Figma design.
   Container heeft een vaste hoogte zodat beide absoluut gepositioneerde foto's
   met overlap in beeld passen. */
.over-blok__images {
  position: relative;
  width:    100%;
  height:   550px;
}

.over-blok__image {
  position:    absolute;
  width:       385px;
  height:      364px;
  object-fit:  cover;
  box-shadow:  var(--shadow-md);
}

.over-blok__image--1 {
  top:        0;
  left:       0;
  z-index:    1;
  box-shadow: none;
}

.over-blok__image--2 {
  bottom:  0;
  right:   0;
  z-index: 2;                        /* ligt over de eerste foto heen */
}

/* Rechts: tekstkolom. Geen max-width meer op de wrapper zodat de heading-rij
   (met het lange streepje links van de titel) de hele tekstkolom kan vullen. */
.over-blok__text {
  width:      100%;
  text-align: left;
}

/* Titel met decoratieve lijn. De lijn wordt getekend als ::before pseudo-element
   dat met een negatieve offset uit de tekstkolom loopt, de grid-gap overbrugt
   en doorloopt tot in de afbeeldingen-kolom. De ancestors hebben geen
   overflow: hidden dus de lijn kan buiten de grid-cel tekenen. */
.over-blok__title {
  position:      relative;
  margin:        0 0 24px;
  text-align:    left;
}

.over-blok__title::before {
  content:          '';
  position:         absolute;
  top:              50%;
  right:            calc(100% + 16px);
  width:            0;
  height:           1px;
  background:       var(--color-primary);
  transform:        translateY(-50%);
  pointer-events:   none;
  transition:       width 1s ease;
}

.over-blok__title.is-visible::before {
  width:            max(0px, calc(100% + var(--space-16) - 451px));
}

.over-blok__body {
  max-width:     520px;
  margin-bottom: var(--space-8);
}

.over-blok__body p {
  margin-bottom: var(--space-4);
}

.over-blok__body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * MENU INTRO (witte sectie, foto links, tekst rechts met decoratieve lijn)
 * ---------------------------------------- */

.menu-intro__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-20);
  align-items:           center;
}

.menu-intro__image img {
  width:        100%;
  height:       auto;
  display:      block;
  object-fit:   cover;
  aspect-ratio: 3 / 2;
  box-shadow:   var(--shadow-md);
}

.menu-intro__text {
  width:      100%;
  text-align: left;
}

/* Heading: titel + decoratief streepje. Zelfde aanpak als .over-ons-blok__heading. */
.menu-intro__heading {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: var(--space-6);
}

.menu-intro__title {
  flex:        0 0 auto;
  margin:      0;
  white-space: nowrap;
  order:       2;
}

.menu-intro__line {
  flex:       0 0 0px;
  height:     1px;
  background: var(--color-primary);
  order:      1;
  transition: flex-basis 0.8s ease;
}

.menu-intro__heading.is-visible .menu-intro__line {
  flex-basis: 60px;
}

.menu-intro__body {
  max-width: 520px;
}

.menu-intro__body p {
  margin-bottom: var(--space-4);
}

.menu-intro__body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * MENU CATEGORIEËN (4 kaarten op crème achtergrond)
 * ---------------------------------------- */

.menu-categorieen__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-4);
}

/* .menu-card styling staat verderop. Hier alleen text-decoration resetten — GEEN
   display: block, want dat zou de display: flex op .menu-card met hogere
   specificity overschrijven en het flex-layout van de kaarten breken. */
a.menu-card {
  text-decoration: none;
  color:           inherit;
}

/* Sectie achtergrond expliciet wit zodat de crème kaarten zichtbaar contrast krijgen.
   Selector heeft gelijke specificity als .section--creme maar komt later in het
   bestand → wint via cascade order. */
.menu-categorieen {
  background-color: var(--color-bg-white);
}

/* ----------------------------------------
 * ONS MENU (goudbruine sectie met koe-illustratie)
 * ---------------------------------------- */

.ons-menu__inner {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  var(--space-16);
  align-items:          center;
}

.ons-menu__text {
  max-width: 520px;
  color:     var(--color-text-light);
}

/* Titel met decoratieve lijn RECHTS (spiegelbeeld van de over-blok lijn). */
.ons-menu__title {
  position:      relative;
  display:       inline-block;       /* zodat 100% = tekstbreedte van de titel zelf */
  margin:        0 0 var(--space-6);
  color:         var(--color-text-light);
  text-align:    left;
}

.ons-menu__title::after {
  content:          '';
  position:         absolute;
  top:              50%;
  left:             calc(100% + 16px);
  width:            0;
  height:           1px;
  background:       rgba(255, 255, 255, 0.5);
  transform:        translateY(-50%);
  pointer-events:   none;
  transition:       width 1s ease;
}

.ons-menu__title.is-visible::after {
  width:            calc(var(--container-max) / 2 - 221px);
}

.ons-menu__body {
  margin-bottom: var(--space-6);
  color:         var(--color-text-light);
}

/* typography.css forceert color op p — hier terug naar wit binnen deze sectie. */
.ons-menu__body p {
  color:         var(--color-text-light);
  font-size:     14px;
  line-height:   1.5;
  margin-bottom: var(--space-4);
}

.ons-menu__body p:last-child {
  margin-bottom: 0;
}

.ons-menu__subtitle {
  color:         var(--color-text-light);
  font-family:   var(--font-heading);
  font-size:     var(--text-xl);
  font-weight:   var(--font-bold);
  margin:        var(--space-6) 0 var(--space-4);
}

.ons-menu__cta {
  margin-top: var(--space-8);
}

.ons-menu__illustration {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ons-menu__illustration img {
  width:      100%;
  max-width:  600px;
  height:     auto;
  object-fit: contain;
  display:    block;
}

/* ----------------------------------------
 * SFEERIMPRESSIE (crème sectie met 2x2 fotogalerij)
 * ---------------------------------------- */

/* Achtergrond expliciet wit — overschrijft de section--creme class die in
   sfeerimpressie.php op de wrapper staat. Selector heeft gelijke specificity
   maar komt later in het bestand, dus wint via cascade order. */
.sfeerimpressie {
  background-color: var(--color-bg-white);
}

.sfeerimpressie__title {
  text-align:    center;
  margin:        0 0 var(--space-12);
  color:         var(--color-text-heading);
}

/* Asymmetrische 2x2 galerij: 5-koloms grid waarop items spans van 2 of 3 krijgen.
   Rij 1: 40% / 60%  (span 2 + span 3)
   Rij 2: 60% / 40%  (span 3 + span 2) */
.sfeerimpressie__grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows:    320px 320px;
  gap:                   var(--space-4);
}

.sfeerimpressie__item {
  margin:        0;
  overflow:      hidden;
  border-radius: var(--radius-none);
}

.sfeerimpressie__item--1 { grid-column: 1 / 3; grid-row: 1; }  /* 2/5 = 40% */
.sfeerimpressie__item--2 { grid-column: 3 / 6; grid-row: 1; }  /* 3/5 = 60% */
.sfeerimpressie__item--3 { grid-column: 1 / 4; grid-row: 2; }  /* 3/5 = 60% */
.sfeerimpressie__item--4 { grid-column: 4 / 6; grid-row: 2; }  /* 2/5 = 40% */

.sfeerimpressie__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-base);
}

.sfeerimpressie__item:hover img {
  transform: scale(1.03);
}

/* ----------------------------------------
 * KOM JE PROEVEN? (witte CTA-sectie met openingstijden en vector-overlay)
 * ---------------------------------------- */

.kom-proeven {
  position: relative;
  overflow: hidden;                 /* houdt de decoratieve vector netjes binnen */
}

.kom-proeven__vector {
  position:        absolute;
  top:             auto;
  bottom:          -20%;
  left:            0;
  right:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  pointer-events:  none;
  opacity:         0.5;
  z-index:         0;
}

.kom-proeven__inner {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-16);
  align-items:           start;
  max-width:             900px;
  margin:                0 auto;
}

/* Verticale scheidslijn tussen de twee kolommen. */
.kom-proeven__cta {
  padding-right: var(--space-16);
  border-right:  2px solid var(--color-accent);
}

.kom-proeven__title {
  color:         var(--color-accent);
  margin:        0 0 var(--space-6);
}

.kom-proeven__body {
  margin-bottom: var(--space-8);
  max-width:     420px;
}

.kom-proeven__body p {
  margin-bottom: var(--space-4);
}

.kom-proeven__body p:last-child {
  margin-bottom: 0;
}

.kom-proeven__buttons {
  display: flex;
  gap:     var(--space-4);
  flex-wrap: wrap;
}

/* Openingstijden kolom */
.kom-proeven__hours-list {
  list-style: none;
  margin:     0 0 var(--space-6);
  padding:    0;
}

.kom-proeven__hours-row {
  display:        grid;
  grid-template-columns: 140px 1fr;
  gap:            var(--space-4);
  padding:        var(--space-1) 0;
}

.kom-proeven__hours-day {
  color:       var(--color-text-body);
  font-weight: var(--font-regular);
}

.kom-proeven__hours-time {
  color:       var(--color-accent);
  font-weight: var(--font-semibold);
}

.kom-proeven__hours-closed {
  color:                 var(--color-text-body);
  margin:                0;
  grid-template-columns: auto auto;
  justify-content:       start;
}

/* ----------------------------------------
 * CONTACT INFO (drie kolommen: contact + maps + openingstijden)
 * ---------------------------------------- */

.contact-info__inner {
  display:               grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap:                   var(--space-12);
  align-items:           stretch;       /* alle kolommen even hoog → scheidslijnen even lang */
  max-width:             var(--container-max);
  margin:                0 auto;
}

/* Elke kolom is zelf een flex-column zodat de inhoud verticaal gecentreerd
   wordt op de hoogte van de grid-row (= map-hoogte). Grid heeft
   align-items: stretch, dus de cellen zijn even hoog en de borders zijn
   even lang; daarbinnen pakt flex de centering. */
.contact-info__col {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

/* Verticale scheidslijnen tussen de drie kolommen — zelfde patroon als
   .kom-proeven, maar twee scheidslijnen ipv één. Padding-right zorgt voor
   ruimte tussen content en lijn; border-right tekent de lijn zelf. */
.contact-info__col--details,
.contact-info__col--map {
  padding-right: var(--space-10);
  border-right:  2px solid var(--color-accent);
}

/* Centreer alle inhoud in de linker kolom (titels + telefoon + email + adres). */
.contact-info__col--details {
  text-align: center;
}

/* Titel: zelfde styling als .kom-proeven__title — globale h2 (Vollkorn 800
   text-3xl 36px) erft door, alleen kleur en spacing forceren. */
.contact-info__title {
  color:         var(--color-accent);
  font-size:     var(--text-2xl);
  margin:        0 0 var(--space-6);
}

/* Openingstijden-titel staat in een links-uitgelijnde kolom maar de titel
   zelf moet gecentreerd binnen de kolombreedte. */
.contact-info__col--hours .contact-info__title {
  text-align: center;
}

.contact-info__title--adres {
  margin-top: var(--space-10);
}

.contact-info__line {
  margin: 0 0 var(--space-2);
}

.contact-info__line a {
  color:           var(--color-text-body);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.contact-info__line a:hover {
  color: var(--color-primary);
}

.contact-info__adres {
  font-style:  normal;
  line-height: var(--leading-normal);
  color:       var(--color-text-body);
}

.contact-info__map {
  width:        100%;
  aspect-ratio: 4 / 3;
  overflow:     hidden;
}

.contact-info__map iframe {
  width:  100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Openingstijden kolom — zelfde structuur als kom-proeven. */
.contact-info__hours-list {
  list-style: none;
  margin:     0 0 var(--space-6);
  padding:    0;
}

.contact-info__hours-row {
  display:               grid;
  grid-template-columns: 100px 1fr;
  gap:                   var(--space-4);
  padding:               var(--space-1) 0;
}

.contact-info__hours-day {
  color:       var(--color-text-body);
  font-weight: var(--font-regular);
}

.contact-info__hours-time {
  color:       var(--color-accent);
  font-weight: var(--font-semibold);
}

.contact-info__hours-closed {
  color:                 var(--color-text-body);
  margin:                0;
  grid-template-columns: auto auto;
  justify-content:       start;
}

/* ----------------------------------------
 * RESERVEREN (formulier links + crème info-box rechts)
 * ---------------------------------------- */

.reserveren {
  position: relative;
  overflow: hidden;
}

.reserveren__vector {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  pointer-events:  none;
  opacity:         0.35;
  z-index:         0;
}

.reserveren__inner {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: 1.6fr 1fr;
  gap:                   var(--space-12);
  align-items:           start;
  max-width:             1100px;
  margin:                0 auto;
}

.reserveren__form {
  width: 100%;
}

.reserveren__placeholder {
  padding:          var(--space-10);
  background-color: var(--color-bg-creme);
  color:            var(--color-text-muted);
  font-style:       italic;
  text-align:       center;
}

/* Offline-melding wanneer reserveringen tijdelijk uit staan. */
.reserveren__offline {
  padding: var(--space-4) 0;
}

.reserveren__offline-title {
  font-family: var(--font-heading);
  font-size:   var(--text-3xl);
  font-weight: var(--font-extrabold);
  color:       var(--color-primary);
  margin:      0 0 var(--space-6);
}

.reserveren__offline-body p {
  margin-bottom: var(--space-4);
}

.reserveren__offline-body p:last-child {
  margin-bottom: 0;
}

/* Crème info-box rechts. */
.reserveren__info {
  background-color: var(--color-bg-creme);
  padding:          var(--space-10) var(--space-8);
}

.reserveren__info-title {
  color:       var(--color-accent);
  font-size:   var(--text-2xl);
  margin:      0 0 var(--space-5);
}

.reserveren__info-title--spaced {
  margin-top: var(--space-8);
}

.reserveren__hours-list {
  list-style: none;
  margin:     0 0 var(--space-3);
  padding:    0;
}

.reserveren__hours-row {
  display:               grid;
  grid-template-columns: 110px 1fr;
  gap:                   var(--space-4);
  padding:               var(--space-1) 0;
}

.reserveren__hours-day {
  color:       var(--color-text-body);
  font-weight: var(--font-regular);
}

.reserveren__hours-time {
  color:       var(--color-accent);
  font-weight: var(--font-semibold);
}

.reserveren__hours-closed {
  color:  var(--color-text-body);
  margin: 0;
}

.reserveren__line {
  margin: 0 0 var(--space-2);
}

.reserveren__line a {
  color:           var(--color-text-body);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.reserveren__line a:hover {
  color: var(--color-primary);
}

.reserveren__adres {
  font-style:  normal;
  line-height: var(--leading-normal);
  color:       var(--color-text-body);
}

/* ----------------------------------------
 * FOOTER FOTO (fullwidth sfeerfoto boven de footer)
 * ---------------------------------------- */

.footer-foto {
  width:      100%;
  min-height: 500px;
  overflow:   hidden;
}

.footer-foto__image {
  width:      100%;
  height:     500px;
  object-fit: cover;
  display:    block;
}

/* ----------------------------------------
 * MENU TABS
 * ---------------------------------------- */

.menu-tabs {
  display:        flex;
  gap:            var(--space-4);
  margin-bottom:  var(--space-12);
  flex-wrap:      wrap;
}

.menu-tab {
  padding:          var(--space-3) var(--space-6);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-none);  /* Geen border radius */
  background-color: transparent;
  color:            var(--color-primary);
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  cursor:           pointer;
  transition:       all var(--transition-fast);
  text-decoration:  none;
}

.menu-tab:hover,
.menu-tab--active {
  background-color: var(--color-primary);
  color:            var(--color-text-light);
}

/* ----------------------------------------
 * MENU ITEMS
 * ---------------------------------------- */

.menu-item {
  display:        flex;
  justify-content: space-between;
  align-items:    flex-start;
  gap:            var(--space-4);
  padding:        var(--space-4) 0;
  border-bottom:  1px solid var(--color-border-light);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item__info {
  flex: 1;
}

/* ----------------------------------------
 * FOTO GALERIJ
 * ---------------------------------------- */

.gallery {
  display:              grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                  var(--space-4);
}

.gallery--4col {
  grid-template-columns: repeat(4, 1fr);
}

.gallery__item img {
  width:        100%;
  height:       300px;
  object-fit:   cover;
  display:      block;
}

/* ----------------------------------------
 * MENU CATEGORIE KAARTEN
 * ---------------------------------------- */

.menu-card {
  background-color: var(--color-bg-creme);
  padding:          var(--space-8) var(--space-6);
  text-align:       center;
  border-radius:    var(--radius-none);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              var(--space-4);
  transition:       transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:       0 1px 3px rgba(0, 0, 0, 0.05);
}

.menu-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.menu-card__illustration {
  display:    block;
  width:      180px;
  height:     130px;
  margin:     0;            /* gap op .menu-card regelt nu de spacing */
  object-fit: contain;
  max-width:  100%;
}

.menu-card__title {
  font-family: var(--font-heading);
  font-size:   var(--text-lg);
  font-weight: var(--font-bold);
  color:       var(--color-primary);
}

/* ----------------------------------------
 * CTA SECTIE
 * ---------------------------------------- */

.cta {
  background-color: var(--color-bg-goud);
  padding:          var(--section-padding-y) var(--section-padding-x);
  text-align:       center;
  position:         relative;
  overflow:         hidden;
}

.cta__vector {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  pointer-events:  none;
  opacity:         0.35;
  z-index:         0;
}

.cta__inner {
  position:  relative;
  z-index:   1;
  max-width: 640px;
  margin:    0 auto;
}

.cta__title {
  color:         var(--color-text-light);
  margin-bottom: var(--space-4);
}

.cta__text {
  color:         rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-8);
}

.cta__button {
  display: inline-flex;
}

/* ----------------------------------------
 * OPENINGSTIJDEN KAART
 * ---------------------------------------- */

.hours-card {
  background-color: var(--color-bg-creme);
  padding:          var(--space-8);
}

.hours-card__title {
  color:          var(--color-primary);
  margin-bottom:  var(--space-4);
}

.hours-row {
  display:        flex;
  justify-content: space-between;
  gap:            var(--space-4);
  padding:        var(--space-2) 0;
}

.hours-row__time {
  color:          var(--color-accent);
  font-weight:    var(--font-semibold);
}

/* ----------------------------------------
 * PAGE CONTENT (standaard pagina's zoals privacy, voorwaarden)
 * ---------------------------------------- */

.page-content {
  max-width:   720px;
  margin:      0 auto;
  line-height: var(--leading-relaxed);
}

.page-content h2,
.page-content h3 {
  margin-top: var(--space-8);
}

.page-content ul,
.page-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style:    revert;
}

.page-content a {
  text-decoration: underline;
}

/* ----------------------------------------
 * FORMULIER VELDEN
 * ---------------------------------------- */

.form-field {
  margin-bottom: var(--space-5);
}

.form-field__label {
  display:        block;
  font-size:      var(--text-sm);
  font-weight:    var(--font-semibold);
  color:          var(--color-primary);
  margin-bottom:  var(--space-2);
}

.form-field__input,
.form-field__textarea,
.form-field__select {
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  border:           1px solid var(--color-border-light);
  border-radius:    var(--radius-sm);
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-text-body);
  background-color: var(--color-bg-white);
  transition:       border-color var(--transition-fast);
  outline:          none;
}

.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  border-color: var(--color-primary);
}

.form-field__textarea {
  min-height:   120px;
  resize:       vertical;
}

/* ----------------------------------------
 * FOOTER
 * ---------------------------------------- */

.footer {
  background-color: var(--color-bg-creme);
  padding:          var(--space-20) var(--section-padding-x) var(--space-8);
  color:            var(--color-text-body);
}

.footer__inner {
  max-width:  var(--container-max);
  margin:     0 auto;
  display:    grid;
  /* 1fr links zorgt dat het logo z'n natuurlijke breedte houdt en de drie
     kolommen rechts uitgelijnd worden tegen de container-rand. */
  grid-template-columns: 1fr 280px 280px 280px;
  gap:        var(--space-8);
  align-items: start;
}

.footer__logo {
  display: inline-block;
}

.footer__logo img {
  width:  200px;
  height: auto;
  display: block;
}

.footer__logo-text {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xl);
  font-weight:    var(--font-extrabold);
  color:          var(--color-primary);
  letter-spacing: 0.02em;
}

.footer__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-lg);
  font-weight:    var(--font-bold);
  color:          var(--color-primary);
  margin:         0 0 var(--space-5);
  text-transform: none;
}

.footer__menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

/* WP voegt automatisch .menu-item class toe — die heeft elders een border-bottom
   en padding voor de menukaart. Reset dat hier expliciet voor footer-items. */
.footer__menu li,
.footer__menu .menu-item {
  display:        block;
  margin-bottom:  var(--space-2);
  padding:        0;
  border:         none;
  gap:            0;
}

.footer__menu a,
.footer__contact a {
  color:            var(--color-text-body);
  text-decoration:  none;
  font-size:        var(--text-base);
  transition:       color var(--transition-fast);
}

.footer__menu a:hover,
.footer__contact a:hover {
  color: var(--color-primary);
}

.footer__contact {
  font-style:  normal;
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
}

.footer__contact p {
  margin: 0 0 var(--space-3);
}

.footer__contact-name {
  font-weight: var(--font-bold);
  color:       var(--color-primary);
}

.footer__hours {
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
}

.footer__hours p {
  margin: 0;
}

/* "Woensdag t/m zondag" en "Maandag & dinsdag" — bold in primary kleur. */
.footer__hours-days {
  font-weight: var(--font-bold);
  color:       var(--color-primary);
}

.footer__hours-days--closed {
  margin-top: var(--space-4) !important;
}

/* "open van 17:00 tot 00:00" en "gesloten" — normaal gewicht. */
.footer__hours-time {
  font-weight: var(--font-regular);
  color:       var(--color-text-body);
}

/* Onderste balk — alle items op één regel met | scheiding,
   gevolgd door een horizontale lijn die de rest van de breedte vult. */
.footer__bottom {
  max-width:    var(--container-max);
  margin:       var(--space-12) auto 0;
  padding-top:  var(--space-4);
  display:      flex;
  align-items:  center;
  gap:          var(--space-6);
}

/* De flex-grow lijn rechts van de tekst. */
.footer__bottom::after {
  content:    '';
  flex:       1 1 auto;
  height:     1px;
  background: var(--color-primary);
}

.footer__bottom-list {
  list-style:   none;
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          var(--space-3);
  margin:       0;
  padding:      0;
  font-size:    var(--text-xs);
  color:        var(--color-primary);
}

.footer__bottom-list li {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

/* Pipe-separator tussen items, behalve na de laatste. */
.footer__bottom-list li:not(:last-child)::after {
  content:     '|';
  color:       var(--color-primary);
  margin-left: var(--space-3);
}

.footer__bottom-list a {
  color:           var(--color-primary);
  text-decoration: none;
  transition:      opacity var(--transition-fast);
}

.footer__bottom-list a:hover {
  opacity: 0.75;
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 768px) {

  :root {
    --section-padding-y: 48px;
    --section-padding-x: 16px;
  }

  h1                  { font-size: var(--text-3xl); }
  h2                  { font-size: var(--text-2xl); }
  .hero               { min-height: 60vh; }
  .hero__title        { font-size: var(--text-3xl); }
  .page-header__title { font-size: var(--text-3xl); }

  .hero__content {
    padding-top: 120px;
    /* Gelijke links/rechts padding zodat de hero-tekst op mobiel horizontaal
       netjes uitlijnt (de basis heeft bewust een grotere linker-inspring). */
    padding-left:  var(--space-6);
    padding-right: var(--space-6);
  }

  .footer-foto__image {
    /* Smal scherm snijdt links/rechts weg → toon het linkerdeel van de foto. */
    object-position: left center;
  }

  .content-block {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .content-block--reverse {
    direction: ltr;
  }

  .over-blok__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Op mobiel tonen we alleen de foto (image 2). De decoratieve
     tekening (image 1) valt weg, dus container en image 2 hoeven niet
     meer absoluut te overlappen. */
  .over-blok__images {
    height: auto;
  }

  .over-blok__image--1 {
    display: none;
  }

  .over-blok__image--2 {
    position: static;
    width:    100%;
    height:   auto;
  }

  /* Lijn uit de tekstkolom zou op mobiel buiten de viewport lopen. */
  .over-blok__title::before {
    display: none;
  }

  .menu-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .menu-intro__line {
    display: none;
  }

  .menu-categorieen__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .menukaart-items__columns {
    column-count: 1;
    column-gap:   0;
  }

  .menukaart-items__columns--single .menukaart-section {
    grid-template-columns: 1fr;
    gap:                   var(--space-6);
  }

  .menukaart-items__columns--single .menukaart-section__footnote {
    grid-column: 1;
  }

  .menukaart-tabs {
    flex-direction: column;
    align-items:    stretch;
  }

  .menukaart-tab {
    text-align: center;
  }

  .menukaart-tabs__separator {
    display: none;
  }

  .over-ons-blok {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
  }

  /* Op mobiel altijd foto boven, tekst onder — kolom-overrides resetten. */
  .over-ons-blok--foto-rechts .over-ons-blok__image,
  .over-ons-blok--foto-rechts .over-ons-blok__text {
    grid-column: 1;
    grid-row:    auto;
  }

  /* Streepje verbergen op mobiel — geen visuele context naast een 1-koloms blok. */
  .over-ons-blok__line {
    display: none;
  }

  /* Slider: 1 slide tegelijk op mobiel. */
  .sfeerimpressie-slider__slide {
    flex: 0 0 100%;
  }

  .ons-menu__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .ons-menu__title::after {
    display: none;
  }

  .ons-menu__text {
    max-width: none;
  }

  /* Illustratie onder de tekst op mobiel, met een kleinere maximum. */
  .ons-menu__illustration img {
    max-width: 400px;
    margin:    0 auto;
  }

  .sfeerimpressie__grid {
    grid-template-columns: 1fr;
    grid-template-rows:    auto;
    gap:                   var(--space-4);
  }

  /* Op mobiel lopen alle foto's over de volle breedte, geen spans meer. */
  .sfeerimpressie__item--1,
  .sfeerimpressie__item--2,
  .sfeerimpressie__item--3,
  .sfeerimpressie__item--4 {
    grid-column: 1;
    grid-row:    auto;
  }

  .sfeerimpressie__item img {
    height: 240px;
  }

  .kom-proeven__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .kom-proeven__cta {
    padding-right: 0;
    padding-bottom: var(--space-10);
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .kom-proeven__hours-row {
    grid-template-columns: 120px 1fr;
  }

  .contact-info__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-info__col--details,
  .contact-info__col--map {
    padding-right:  0;
    padding-bottom: var(--space-10);
    border-right:   none;
    border-bottom:  2px solid var(--color-accent);
  }

  .contact-info__hours-row {
    grid-template-columns: 120px 1fr;
  }

  .reserveren__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .reserveren__info {
    padding: var(--space-6) var(--space-4);
  }

  .reserveren__info-title {
    font-size: var(--text-xl);
  }

  .reserveren__hours-row {
    grid-template-columns: 100px 1fr;
    gap: var(--space-2);
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .nav__toggle {
    display: flex;
  }

  .nav__collapse {
    position:         absolute;
    top:              100%;
    left:             0;
    right:            0;
    flex-direction:   column;
    align-items:      stretch;
    gap:              var(--space-4);
    padding:          var(--space-6);
    background-color: rgba(0, 0, 0, 0.92);
    transform:        translateY(-10px);
    opacity:          0;
    pointer-events:   none;
    transition:       opacity var(--transition-fast),
                      transform var(--transition-fast);
  }

  .nav__collapse.is-open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
  }

  .nav__menu {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-4);
  }

  .nav__cta {
    align-self: flex-start;
    margin-left: 0;
  }

  /* Aparte toggle-knop met chevron — link blijft klikbaar */
  .nav__submenu-toggle {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    padding:          0;
    margin-left:      var(--space-2);
    background:       transparent;
    border:           none;
    cursor:           pointer;
    color:            var(--color-text-nav);
    vertical-align:   middle;
  }

  .nav__submenu-toggle::before {
    content:       '';
    display:       block;
    width:         8px;
    height:        8px;
    border-right:  2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform:     rotate(45deg);
    transition:    transform var(--transition-fast);
    margin-top:    -3px;
  }

  .nav__menu .menu-item-has-children.is-open > .nav__submenu-toggle::before {
    transform: rotate(-135deg);
    margin-top: 3px;
  }

  .nav__menu .sub-menu {
    position:   static;
    transform:  none;
    min-width:  0;
    margin:                 var(--space-4) 0 0;
    padding:                0;
    padding-inline-start:   0;
    margin-inline-start:    0;
    list-style:             none;
    background:             transparent;
    display:                none;
    opacity:                1;
    pointer-events:         auto;
  }

  .nav__menu .sub-menu .menu-item {
    display:              block;
    margin:               0;
    padding:              0;
    margin-inline-start:  0;
    border:               none;
    gap:                  0;
  }

  .nav__menu .sub-menu a {
    font-family: var(--font-body);
    font-size:   var(--text-base);
    font-weight: var(--font-regular);
    opacity:     0.7;
    padding:     var(--space-1) 0;
  }

  .nav__menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {

  .menukaart-items__columns {
    column-count: 2;
  }

  .sfeerimpressie-slider__slide {
    flex: 0 0 calc((100% - var(--space-4)) / 2);
  }

}

@media (max-width: 480px) {

  .footer__inner {
    grid-template-columns: 1fr;
  }

  .gallery--4col {
    grid-template-columns: 1fr;
  }

  .menu-tabs {
    flex-direction: column;
  }

  .menu-categorieen__grid {
    grid-template-columns: 1fr;
  }

}

/* ----------------------------------------
 * SCROLL ANIMATIES
 * ---------------------------------------- */

.fade-in {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity:    1;
  transform:  translateY(0);
}

@keyframes heroVectorIn {
  to {
    opacity:   0.75;
    transform: translateY(0);
  }
}

@keyframes heroVectorFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Reduceer beweging voor gebruikers die dat hebben ingesteld */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  .content-block__text-label::before,
  .over-blok__title::before,
  .ons-menu__title::after {
    transition: none;
  }

  .hero__vector {
    animation:  none;
    opacity:    0.75;
    transform:  none;
  }
}