/* Restaurant 366 · design tokens + componenten
   Laad dit na de theme/builder CSS. Alles is met "r366-" geprefixt. */

:root {
  --r366-ink: #0E0E0C;
  --r366-bone: #FAF9F6;
  --r366-olive: #4F6130;
  --r366-olive-hover: #5E7339;
  --r366-olive-light: #A9B583;
  --r366-olive-pale: #E6E9D9;
  --r366-olive-hero: #7E8F52;
  --r366-stone: #61615B;
  --r366-body: #4A4A45;
  --r366-line: rgba(14, 14, 12, .1);
  --r366-line-dark: rgba(250, 249, 246, .1);

  --r366-serif: 'Cormorant Garamond', Georgia, serif;
  --r366-sans: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --r366-arabic: 'Noto Naskh Arabic', serif;

  --r366-h2: clamp(40px, 5.4vw, 64px);
  --r366-h3: clamp(28px, 3vw, 34px);
  --r366-lead: clamp(16px, 1.9vw, 18px);

  --r366-gutter: 24px;
  --r366-container: 1200px;
  --r366-header-h: 60px;
  --r366-radius-card: 24px;
  --r366-radius-chip: 10px;
  --r366-shadow-fab: 0 12px 32px rgba(0, 0, 0, .35);
}

/* ---------- Basis ---------- */
.r366-kicker { margin: 0 0 18px; font: 600 12px/1.4 var(--r366-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--r366-olive); }
.r366-lead { margin: 0; font-size: var(--r366-lead); line-height: 1.65; color: var(--r366-body); text-wrap: pretty; }
.r366-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--r366-olive); color: var(--r366-bone); font: 600 15px var(--r366-sans); letter-spacing: .02em; text-decoration: none; transition: background .2s, border-color .2s; }
.r366-knop:hover, .r366-knop:focus-visible { background: var(--r366-olive-hover); color: var(--r366-bone); }

/* Sectie met olijftakken erachter: de shortcode als eerste kind, de rest komt er automatisch bovenop. */
.r366-sectie { position: relative; overflow: hidden; }
.r366-sectie > *:not(.r366-takken):not(.r366-blaadjes) { position: relative; z-index: 1; }

/* ---------- Menukaart ---------- */
.r366-tabs { position: sticky; top: var(--r366-header-h); z-index: 40; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; margin: 0 calc(-1 * var(--r366-gutter)); padding-left: var(--r366-gutter); padding-right: var(--r366-gutter); background: rgba(250, 249, 246, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(14, 14, 12, .08); border-bottom: 1px solid rgba(14, 14, 12, .08); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.r366-tabs::-webkit-scrollbar { display: none; }
.r366-tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(14, 14, 12, .18); background: transparent; color: var(--r366-ink); font: 600 14px var(--r366-sans); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.r366-tab[aria-selected="true"] { background: var(--r366-ink); color: var(--r366-bone); border-color: var(--r366-ink); }
.r366-tab:focus-visible { outline: 2px solid var(--r366-olive); outline-offset: 2px; }

.r366-paneel[hidden] { display: none; }
/* Tijdens het wisselen van categorie animeert r366.js de hoogte van de wrapper; zolang dat loopt mag de inhoud er niet buiten hangen. */
.r366-panelen.is-wisselen { overflow: hidden; }
.r366-paneel__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 32px; }
.r366-paneel__kop h3 { margin: 0; font: 500 clamp(34px, 4vw, 46px)/1 var(--r366-serif); }
.r366-paneel__aantal { font-size: 13px; color: var(--r366-stone); }
.r366-paneel__kop p { flex-basis: 100%; margin: 0; color: var(--r366-stone); font-size: 15px; }
.r366-groep { margin: 40px 0 4px; font: 600 13px var(--r366-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--r366-olive); }
.r366-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); column-gap: 56px; }
.r366-item { padding: 16px 0; border-bottom: 1px solid var(--r366-line); }
.r366-item__rij { display: flex; align-items: baseline; gap: 16px; }
.r366-item__tekst { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.r366-item__naam { font: 600 16px/1.35 var(--r366-sans); color: var(--r366-ink); }
.r366-item__ar { flex-basis: 100%; font: 400 14.5px/1.5 var(--r366-arabic); color: var(--r366-olive); text-align: left; }
.r366-item__oms { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--r366-stone); text-wrap: pretty; }
.r366-item__prijs { font: 600 21px/1 var(--r366-serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--r366-ink); }
.r366-label { font: 600 10.5px/1 var(--r366-sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--r366-olive-pale); color: var(--r366-olive); }
.r366-varianten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Foto bij een gerecht ---------- */
/* De thumbnail staat vlak links van de prijs, en niet aan het begin van de
   rij. Aan het begin leek elk gerecht met een foto ingesprongen ten opzichte
   van de gerechten zonder, en dat zijn de meeste. Hier raakt het niets: het
   tekstblok ertussen rekt mee, dus zowel de linkerkant van de namen als de
   rechterkant van de prijzen blijft een rechte lijn. Alleen de ruimte voor de
   naam wordt smaller, en dat valt niet op. */
.r366-item__foto { position: relative; flex: 0 0 auto; align-self: flex-start; margin-top: 1px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--r366-olive-pale); cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.r366-item__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Een randje over de foto heen, zodat een licht gerecht niet in de bone-achtergrond wegloopt. */
.r366-item__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(14, 14, 12, .1); }
.r366-item__foto:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(14, 14, 12, .18); }
.r366-item__foto:active { transform: scale(.98); }
.r366-item__foto:focus-visible { outline: 2px solid var(--r366-olive); outline-offset: 3px; }
@media (max-width: 599px) { .r366-item--foto .r366-item__rij { gap: 12px; } }
@media (min-width: 900px) { .r366-item__foto { width: 64px; height: 64px; border-radius: 16px; } }

/* ---------- De grote weergave ---------- */
/* Een <dialog> in de top layer: die trekt zich niets aan van de overflow:hidden
   van de sectie eromheen, houdt de focus vast en sluit op Escape. */
.r366-fotoweergave { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--r366-bone); overscroll-behavior: contain; }
.r366-fotoweergave::backdrop { background: rgba(14, 14, 12, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.r366-fotoweergave__binnen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.r366-fotoweergave__figuur { margin: 0; width: min(100%, 520px); }
.r366-fotoweergave__foto { display: block; width: 100%; height: auto; max-height: min(58svh, 520px); object-fit: contain; border-radius: 20px; background: rgba(250, 249, 246, .06); transition: filter .35s ease; }
/* De thumbnail staat er als eerste, uitgesmeerd, tot de grote binnen is. */
.r366-fotoweergave__foto.is-laden { filter: blur(12px); }
.r366-fotoweergave__tekst { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.r366-fotoweergave__naam { font: 500 clamp(22px, 5.4vw, 28px)/1.2 var(--r366-serif); }
.r366-fotoweergave__prijs { font: 600 17px/1.2 var(--r366-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--r366-olive-light); }
.r366-fotoweergave__oms { flex-basis: 100%; margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(250, 249, 246, .72); text-wrap: pretty; }
.r366-fotoweergave__oms:empty { display: none; }
/* De knoppen onderaan en niet in de hoeken: op een telefoon is dat de enige
   plek die je met een duim haalt zonder het toestel te verzetten. */
.r366-fotoweergave__balk { display: flex; align-items: center; gap: 14px; }
.r366-fotoweergave__knop { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(250, 249, 246, .22); border-radius: 999px; background: rgba(250, 249, 246, .08); color: var(--r366-bone); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s, transform .2s; }
.r366-fotoweergave__knop svg { width: 22px; height: 22px; }
.r366-fotoweergave__knop--sluit { width: 54px; height: 54px; }
.r366-fotoweergave__knop--sluit svg { width: 26px; height: 26px; }
.r366-fotoweergave__knop:hover { background: rgba(250, 249, 246, .18); border-color: rgba(250, 249, 246, .42); }
.r366-fotoweergave__knop:active { transform: scale(.94); }
.r366-fotoweergave__knop:focus-visible { outline: 2px solid var(--r366-olive-light); outline-offset: 3px; }
/* Zonder deze regel blijven de doorbladerknoppen staan bij een categorie met
   een enkele foto: het display:inline-flex hierboven wint van de [hidden]-regel
   uit de browser, en dan staat er een knop die niets doet. */
.r366-fotoweergave__knop[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .r366-fotoweergave[open] .r366-fotoweergave__figuur,
  .r366-fotoweergave[open] .r366-fotoweergave__balk { animation: r366-foto-op .34s cubic-bezier(.2, .8, .2, 1) both; }
  .r366-fotoweergave[open] .r366-fotoweergave__balk { animation-delay: .06s; }
  @keyframes r366-foto-op { from { opacity: 0; transform: translateY(10px) scale(.97); } }
}

/* Liggend op een telefoon is de hoogte de schaarse kant, dus dan naast elkaar. */
@media (max-width: 899px) and (max-height: 520px) {
  .r366-fotoweergave__binnen { flex-direction: row; gap: 16px; padding: 12px; }
  .r366-fotoweergave__figuur { display: flex; align-items: center; gap: 16px; width: auto; }
  .r366-fotoweergave__foto { max-height: 76svh; width: auto; }
  .r366-fotoweergave__tekst { margin-top: 0; max-width: 34ch; }
  .r366-fotoweergave__balk { flex-direction: column; }
}
.r366-variant { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border: 1px solid rgba(14, 14, 12, .14); border-radius: var(--r366-radius-chip); font: 400 13px var(--r366-sans); }
.r366-variant b { font: 600 16px/1 var(--r366-serif); font-variant-numeric: lining-nums; }

/* Accordeon-weergave: [r366_menu weergave="accordeon"] */
.r366-menu[data-weergave="accordeon"] .r366-tabs { display: none; }
.r366-menu[data-weergave="accordeon"] .r366-paneel[hidden] { display: block; }
.r366-menu[data-weergave="accordeon"] .r366-paneel__kop { cursor: pointer; padding: 22px 0; border-top: 1px solid rgba(14, 14, 12, .12); position: relative; padding-right: 56px; }
.r366-menu[data-weergave="accordeon"] .r366-paneel__kop::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--r366-ink); border-bottom: 1.6px solid var(--r366-ink); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.r366-menu[data-weergave="accordeon"] .r366-paneel.is-open .r366-paneel__kop::after { transform: translateY(-30%) rotate(-135deg); }
.r366-menu[data-weergave="accordeon"] .r366-paneel:not(.is-open) .r366-paneel__inhoud { display: none; }

/* ---------- Openingstijden (op donkere olijf-achtergrond) ---------- */
.r366-uren { background: rgba(250, 249, 246, .06); border: 1px solid rgba(250, 249, 246, .12); border-radius: var(--r366-radius-card); padding: clamp(24px, 3vw, 36px); color: var(--r366-bone); }
.r366-uren__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.r366-uren__kop h3 { margin: 0; font: 500 var(--r366-h3)/1 var(--r366-serif); }
.r366-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(250, 249, 246, .08); font: 500 13px var(--r366-sans); }
.r366-status[hidden] { display: none; }
.r366-status i { width: 8px; height: 8px; border-radius: 50%; background: rgba(250, 249, 246, .4); }
.r366-status.is-open i { background: var(--r366-olive-light); }
.r366-uren__lijst { margin: 0; }
.r366-uren__rij { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--r366-line-dark); font-size: 16px; color: rgba(250, 249, 246, .72); }
.r366-uren__rij.is-vandaag { color: var(--r366-bone); font-weight: 600; }
.r366-uren__rij dt, .r366-uren__rij dd { margin: 0; }
.r366-uren__rij dd { font-variant-numeric: tabular-nums; }

/* ---------- Zwevende WhatsApp-knop (alleen het icoon) ---------- */
.r366-wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--r366-olive); color: var(--r366-bone); text-decoration: none; box-shadow: var(--r366-shadow-fab); transition: background .2s, transform .2s; }
.r366-wa:hover, .r366-wa:focus-visible { background: var(--r366-olive-hover); color: var(--r366-bone); transform: translateY(-2px); }
.r366-wa svg { position: relative; width: 28px; height: 28px; display: block; }
.r366-wa__puls { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--r366-olive); animation: r366-pulse 2.6s ease-out infinite; pointer-events: none; }
.r366-wa__puls--2 { animation-delay: 1.3s; }
@keyframes r366-pulse { 0% { inset: 0; opacity: .75; } 100% { inset: -16px; opacity: 0; } }

/* ---------- Olijftakken: groeien, zweven, wapperen, parallax ---------- */
.r366-takken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --r366-play: paused; }
.r366-takken.is-zichtbaar { --r366-play: running; }
.r366-takken--hero { color: var(--r366-olive-hero); }
.r366-takken--licht { color: var(--r366-olive-light); }   /* op donkere olijf */
.r366-takken--donker { color: var(--r366-olive); }        /* op wit */
.r366-takken--donker .r366-tak { opacity: calc(var(--o) * .3); }
.r366-tak { position: absolute; left: var(--x); top: var(--y); width: var(--w); opacity: var(--o); will-change: transform; }
.r366-tak__diepte { will-change: transform; }
.r366-tak svg { display: block; width: 100%; height: auto; transform: rotate(var(--r)); overflow: visible; }
.r366-tak__zweef { animation: r366-float var(--d, 14s) ease-in-out var(--delay, 0s) infinite alternate; animation-play-state: var(--r366-play, running); }
.r366-steel { stroke-dasharray: 1; animation: r366-draw 1.6s ease-out both; animation-play-state: var(--r366-play, running); }
.r366-blad { animation: r366-grow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i, 0) * .13s); animation-play-state: var(--r366-play, running); }
.r366-blad__flutter { animation: r366-flutter calc(2.6s + var(--i, 0) * .3s) ease-in-out calc(var(--i, 0) * -.9s) infinite alternate; animation-play-state: var(--r366-play, running); }
.r366-olijven { animation: r366-grow .8s cubic-bezier(.2, .8, .2, 1) 1.5s both; animation-play-state: var(--r366-play, running); }
@keyframes r366-float { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(18px, -26px, 0) rotate(6deg); } }
@keyframes r366-flutter { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes r366-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes r366-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Vallende blaadjes (door r366.js in de hero gezet) */
.r366-blaadjes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.r366-blaadje { position: absolute; will-change: transform, opacity; animation: r366-fall var(--dur, 10s) cubic-bezier(.35, .1, .65, 1) both; }
.r366-blaadje__sway { animation: r366-sway var(--sway, 2s) ease-in-out var(--sway-delay, 0s) infinite alternate; }
.r366-blaadje svg { display: block; width: 100%; height: auto; overflow: visible; animation: r366-tumble var(--tumble, 7s) linear infinite; }
@keyframes r366-fall { 0% { transform: translateY(0); opacity: 0; } 7% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--fall, 600px)); opacity: 0; } }
@keyframes r366-sway { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes r366-tumble { from { transform: rotate(0deg) rotateY(0deg); } to { transform: rotate(360deg) rotateY(720deg); } }

/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
  .r366-tak__zweef, .r366-steel, .r366-blad, .r366-blad__flutter, .r366-olijven, .r366-wa__puls, .r366-blaadje, .r366-blaadje__sway, .r366-blaadje svg { animation: none; }
  .r366-tak, .r366-tak__diepte { transform: none !important; }
}