/* Menukaart (lunch, diner, drank): wissel tussen kaarten, springbalk per groep, groepen als witte kaarten op crème. */
.menukaart {
  --kop-onder: 0px;
  background-color: var(--secondary);
  color: var(--dark);
  padding: var(--space-l) 0 var(--space-2xl);
}

/* wissel tussen lunch / diner / drank / bierkaart */
.menukaart__kaarten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  width: var(--max-screen-width);
  max-width: calc(100% - 2 * var(--space-m));
  margin: 0 auto;
  padding: 0 0 var(--space-s);
}
.bierkaart .menukaart__kaarten { max-width: 100%; }
.menukaart__kaarten a {
  font-family: "Bearmen";
  font-size: var(--text-l);
  color: var(--dark-50);
  text-decoration: none;
  padding-bottom: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.menukaart__kaarten a:hover { color: var(--dark); }
.menukaart__kaarten a[aria-current="page"] { color: var(--dark); border-bottom-color: var(--primary); }

/* springbalk naar de groepen */
.menukaart__nav {
  position: sticky;
  top: var(--kop-onder);
  z-index: 20;
  background-color: rgba(238, 238, 228, .92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--dark-10);
  border-bottom: 1px solid var(--dark-10);
  transition: top .25s ease;
}
.menukaart__nav-binnen {
  width: var(--max-screen-width);
  max-width: calc(100% - 2 * var(--space-m));
  margin: 0 auto;
  display: flex;
  gap: var(--space-3xs);
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: none;
}
.menukaart__nav-binnen::-webkit-scrollbar { display: none; }
.menukaart__nav a {
  flex: 0 0 auto;
  font-size: var(--text-s);
  line-height: 1;
  color: var(--dark);
  background-color: #fff;
  text-decoration: none;
  border: 1px solid var(--dark-20);
  border-radius: var(--radius-full);
  padding: .8rem 1.4rem;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.menukaart__nav a:hover { border-color: var(--primary); }
.menukaart__nav a.is-actief { background-color: var(--primary); border-color: var(--primary); color: var(--dark); }

/* groepen */
.menukaart__groepen {
  width: var(--max-screen-width);
  max-width: calc(100% - 2 * var(--space-m));
  margin: 0 auto;
  padding: var(--space-l) 0 0;
  columns: 2 38rem;
  column-gap: var(--space-m);
}
.menukaart__groep {
  break-inside: avoid;
  background-color: #fff;
  border: 1px solid var(--dark-5);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
  scroll-margin-top: 16rem;
}
.menukaart__groepkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  border-bottom: 1px solid var(--primary);
  padding-bottom: var(--space-3xs);
  margin-bottom: var(--space-xs);
}
.menukaart__titel {
  font-family: "Bearmen";
  font-size: var(--text-xl);
  color: var(--dark);
  margin: 0;
}
.menukaart__kolommen { display: flex; gap: var(--space-s); }
.menukaart__kolommen span,
.gerecht__prijs { min-width: 5.5rem; text-align: right; }
.menukaart__kolommen span {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark-50);
}
.menukaart__toelichting {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-s);
  font-style: oblique;
  color: var(--primary-tekst);
}
.menukaart__lijst { list-style: none; margin: 0; padding: 0; }
.gerecht { padding: .9rem 0; }
.gerecht__regel { display: flex; align-items: baseline; gap: .8rem; }
.gerecht__naam {
  font-family: "VintageGlamour";
  font-weight: 800;
  font-size: var(--text-m);
  color: var(--dark);
  margin: 0;
}
.gerecht__inhoud { font-size: 1.3rem; color: var(--dark-50); white-space: nowrap; }
.gerecht__lijn { flex: 1; min-width: 2rem; border-bottom: 1px dotted var(--dark-20); transform: translateY(-.4rem); }
.gerecht__prijzen { display: flex; gap: var(--space-s); white-space: nowrap; }
.gerecht__prijs { font-weight: 800; color: var(--primary-tekst); }
.gerecht__omschrijving {
  margin: .3rem 0 0;
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--dark-70);
  max-width: 85%;
}
.menukaart__link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--primary-tekst);
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
}
.menukaart__link:hover { color: var(--dark); }

@media (max-width: 767px) {
  .menukaart__kaarten { gap: var(--space-xs); }
  .menukaart__kaarten a { font-size: var(--text-m); }
  .gerecht__omschrijving { max-width: 100%; }
}