/* ==========================================================================
   pages/menu.css — gedeeld door la-carta/index.html én la-barra/index.html.
   Tabs + kaartpanelen voor een volledige kaart. De menukaart-onderdelen zelf
   (.menu/.item, .grouplabel) staan in components.css — die zijn ook
   herbruikbaar buiten een getabde kaart.
   ========================================================================== */

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(34px, 5vw, 52px); }
.tab {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sand-500); background: transparent;
  border: 1px solid var(--sand-dim); border-radius: 999px;
  padding: 11px 22px; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tab:hover { border-color: var(--sand-500); color: var(--cream-050); }
.tab[aria-selected="true"] { background: var(--sand-500); color: var(--wine-card-d); border-color: var(--sand-500); }

.panel[hidden] { display: none; }
.panel { animation: fade 0.45s var(--ease); }
@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}