/* Menukaart en acties op de voorkant.
   Kleuren en typografie komen zo veel mogelijk van het thema of van Elementor,
   zodat de plugin zich voegt naar de site in plaats van andersom. */

.wtm-menukaart {
	--wtm-lijn: currentColor;
	display: grid;
	gap: 3rem;
}

.wtm-menu-categorie { scroll-margin-top: 100px; }

.wtm-menu-titel { margin: 0 0 .5rem; }

.wtm-menu-intro {
	margin: 0 0 1.5rem;
	max-width: 65ch;
	opacity: .8;
}

.wtm-menu-groepen { display: grid; gap: 2rem; }

/* Twee kolommen als echte tekstkolommen, niet als twee vakken naast elkaar.
   Zo lopen de gerechten door en worden de kolommen even lang, ook als de ene
   groep zeventien regels heeft en de andere twee. Een kop blijft bij zijn
   lijst en een gerecht wordt nooit halverwege afgebroken. */
.wtm-kolommen-2 .wtm-menu-groepen {
	display: block;
	columns: 2;
	column-gap: 3rem;
}
.wtm-kolommen-2 .wtm-menu-groep { margin: 0 0 2rem; }
.wtm-kolommen-2 .wtm-menu-groepkop { break-after: avoid; }
.wtm-kolommen-2 .wtm-menu-item { break-inside: avoid; }
.wtm-kolommen-2 .wtm-menu-lijst { display: block; }
.wtm-kolommen-2 .wtm-menu-lijst > li + li { margin-top: 1.15rem; }

@media (max-width: 767px) {
	.wtm-kolommen-2 .wtm-menu-groepen { columns: 1; }
}

.wtm-menu-groepkop {
	margin: 0 0 .75rem;
	font-size: .8em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wtm-menu-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.15rem;
}

.wtm-menu-item { display: flex; gap: 1rem; align-items: flex-start; }

.wtm-menu-foto {
	width: 72px;
	height: 72px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
	background: rgba(0, 0, 0, .04);
}

.wtm-menu-tekst { flex: 1 1 auto; min-width: 0; }

.wtm-menu-regel {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}

.wtm-menu-naam { font-weight: 600; }

.wtm-menu-stippel {
	flex: 1 1 auto;
	border-bottom: 1px dotted currentColor;
	opacity: .3;
	transform: translateY(-.2em);
	min-width: 1.5rem;
}

.wtm-menu-prijs {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wtm-menu-prijs del { opacity: .45; font-weight: 400; margin-right: .35em; }
.wtm-menu-prijs ins { text-decoration: none; }

.wtm-menu-omschrijving,
.wtm-menu-uitleg,
.wtm-menu-allergenen {
	margin: .2rem 0 0;
	font-size: .85em;
	line-height: 1.5;
	opacity: .75;
	max-width: 60ch;
}
.wtm-menu-uitleg { font-style: italic; }
.wtm-menu-allergenen { font-size: .78em; opacity: .6; }

.wtm-menu-varianten {
	list-style: none;
	margin: .3rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .9rem;
	font-size: .82em;
	opacity: .8;
}
.wtm-menu-variantprijs { font-variant-numeric: tabular-nums; font-weight: 600; }

.wtm-menu-vega {
	display: inline-grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: .62em;
	font-weight: 700;
	text-decoration: none;
	vertical-align: middle;
	opacity: .7;
}

.wtm-menu-voetnoot {
	margin: .9rem 0 0;
	font-size: .8em;
	font-style: italic;
	opacity: .65;
}

/* ---------------------------------------------------------------- acties */

/* Het aantal acties wisselt per maand. Met auto-fit vullen twee kaartjes de
   rij netjes op in plaats van dat er een gat blijft staan waar de derde hoort.
   In Elementor kun je het aantal kolommen alsnog vastzetten. */
.wtm-acties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.5rem;
	justify-content: center;
}

.wtm-actie {
	max-width: 560px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, .015);
}

/* De beeldverhouding hoort op de afbeelding zelf. Zet je hem op het omhullende
   vak en geef je de afbeelding height:100%, dan verwijzen de twee naar elkaar
   en valt de browser terug op de eigen hoogte van de foto. */
.wtm-actie-foto {
	background: rgba(0, 0, 0, .04);
	overflow: hidden;
}
.wtm-actie-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.wtm-actie-body {
	padding: 1.15rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 auto;
}

.wtm-actie-label {
	margin: 0;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.wtm-actie-naam { margin: 0; font-size: 1.15em; }

.wtm-actie-omschrijving {
	margin: 0;
	font-size: .9em;
	line-height: 1.55;
	opacity: .8;
}

.wtm-actie-prijs {
	margin: .2rem 0 0;
	font-weight: 700;
	font-size: 1.1em;
	font-variant-numeric: tabular-nums;
}
.wtm-actie-prijs del { opacity: .45; font-weight: 400; font-size: .85em; margin-right: .4em; }
.wtm-actie-prijs ins { text-decoration: none; }

.wtm-actie-tot { margin: 0; font-size: .8em; opacity: .65; }

.wtm-actie-link {
	margin-top: auto;
	padding-top: .6rem;
	font-size: .85em;
	font-weight: 600;
	align-self: flex-start;
}

.wtm-acties-leeg { opacity: .6; font-style: italic; }