/*
  Opmaak voor de interactieve menukaart (kaart.js).
  Elk ontwerp zet de --tk-* kleuren en letters; onderdelen binnen de kaart volgen de tekstkleur van hun plek.
  De standaardwaarden hieronder wegen bewust minder (:where), zodat de waarden van het ontwerp altijd winnen.
*/
:where(:root) {
  --tk-vlak: #fbf7ef;
  --tk-vlak-2: #f1eadb;
  --tk-tekst: #1b1a17;
  --tk-zacht: rgba(27, 26, 23, .72);
  --tk-lijn: rgba(27, 26, 23, .16);
  --tk-accent: #1b2a22;
  --tk-op-accent: #fbf7ef;
  --tk-focus: #9b4524;
  --tk-font: inherit;
  --tk-kop: inherit;
  --tk-kop-letters: none;
  --tk-rond: 999px;
  --tk-in: cubic-bezier(.2, .8, .2, 1);
}

.tk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tk-zoek svg {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- zoeken ---------- */

.tk-zoek {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 26rem; min-height: 48px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--tk-zoek-rond, var(--tk-rond));
  background: color-mix(in srgb, currentColor 5%, transparent);
  cursor: text;
  transition: border-color .15s ease, background-color .15s ease;
}
.tk-zoek:focus-within { border-color: currentColor; background: color-mix(in srgb, currentColor 9%, transparent); }
.tk-zoek svg { width: 20px; height: 20px; flex: none; opacity: .75; }
.tk-zoek input {
  flex: 1; min-width: 0; height: 44px; border: 0; padding: 0; margin: 0;
  background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none;
}
.tk-zoek input::placeholder { color: inherit; opacity: .62; }
.tk-zoek input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- aantallen op de filters ---------- */

.tk-aantal {
  display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 1px 6px; box-sizing: border-box;
  border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: .8em; font-weight: 600; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- handgeschreven tip ---------- */

.tk-tip {
  position: relative; display: inline-flex; align-items: flex-end; gap: 6px; margin: 14px 0 0;
  font-family: var(--tk-hand, cursive); font-size: 1.3rem; line-height: 1.15; color: var(--tk-hand-kleur, currentColor);
  transform: rotate(-1.5deg); text-wrap: balance;
}
.tk-tip-pijl {
  order: 2; flex: none; width: 46px; height: 36px; margin-bottom: -14px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- niet beschikbaar en lege kaart ---------- */

.tk-uit h4, .tk-uit .g-naam { text-decoration: line-through; opacity: .6; }
.tk-uit-noot { margin: 4px 0 0; font-size: 1rem; font-style: italic; opacity: .8; }
.tk-link {
  display: inline; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- focus ---------- */

.tk-link:focus-visible {
  outline: 3px solid var(--tk-focus); outline-offset: 2px;
}
.tk-zoek:focus-within { outline: 3px solid var(--tk-focus); outline-offset: 2px; }

/* ---------- beweging ---------- */

@keyframes tk-verschijn { from { opacity: 0; transform: translateY(8px); } }
@keyframes tk-pijl { from { stroke-dashoffset: 90; } }

@media (prefers-reduced-motion: no-preference) {
  .tk-verschijn { animation: tk-verschijn .32s var(--tk-in) both; animation-delay: calc(var(--tk-i, 0) * 35ms); }
  .tk-tip-pijl path { stroke-dasharray: 90; animation: tk-pijl 1s ease-out .4s both; }
}

/* ---------- tijdelijke menu's (tijdelijk.js) ---------- */

/* Op de gsm alleen de namen van de gerechten; de uitleg komt erbij met de knop */
@media (max-width: 899px) {
  [data-tijdelijk-sjabloon]:not(.toon-uitleg) .gang-tekst,
  [data-tijdelijk-sjabloon]:not(.toon-uitleg) .gang-saus { display: none; }
}
@media (min-width: 900px) {
  [data-tijdelijk-sjabloon] [data-uitleg] { display: none; }
}

/* Keuzes binnen een gerecht die niet bij de gekozen filter passen (bv. ham bij vegetarisch) */
#menukaart [data-optie-tags][hidden] { display: none !important; }