/* ==========================================================================
   Sirtaki — Greek menu list.
   Fancy classic restaurant menu: dish name, leader dots, right-aligned price,
   optional italic description sub-line, grouped under section headings.
   Dark Aegean-Editorial system (tokens from theme.json).
   Markup is produced by inc/menu-render.php (.sirtaki-menu BEM tree).
   ========================================================================== */

.sirtaki-menu-wrap {
	--menu-rule: var(--wp--preset--color--secondary);
	--menu-panel: var(--wp--preset--color--primary);
	--menu-accent: var(--wp--preset--color--accent);
	--menu-text: var(--wp--preset--color--base);
	--menu-muted: var(--wp--preset--color--base-2);
	max-width: 760px;
	margin-inline: auto;
}

/* Sub-section heading (e.g. "Schotels voor meerdere Personen"). */
.sirtaki-menu__section {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	color: var(--menu-text);
	letter-spacing: -0.01em;
	margin: 3rem 0 1.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--menu-rule);
}
.sirtaki-menu__section:first-child {
	margin-top: 0;
}

/* A short lead-in note that appears before any dish. */
.sirtaki-menu__note {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	color: var(--menu-muted);
	margin: 0 0 1.5rem;
}

/* The dish list. */
.sirtaki-menu {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.sirtaki-menu__item {
	padding: 1.1rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--menu-rule) 55%, transparent);
}
.sirtaki-menu__item:last-child {
	border-bottom: 0;
}

/* Name + leader dots + price on one baseline. */
.sirtaki-menu__row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	width: 100%;
}

.sirtaki-menu__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
	color: var(--menu-text);
	letter-spacing: -0.005em;
	/* Allow the name to wrap; dots/price stay tied to the last line. */
	flex: 0 1 auto;
}

/* Leader dots: a flexible dotted rule that fills the gap. */
.sirtaki-menu__dots {
	flex: 1 1 auto;
	min-width: 1.5rem;
	align-self: flex-end;
	margin-bottom: 0.28em;
	border-bottom: 2px dotted color-mix(in srgb, var(--menu-muted) 50%, transparent);
}

.sirtaki-menu__price {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--menu-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

/* Per-person / qualifier suffix sits quietly beside the figure. */
.sirtaki-menu__price-note {
	display: inline-block;
	margin-left: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--menu-muted);
	vertical-align: 0.08em;
}

/* Italic description sub-line. */
.sirtaki-menu__desc {
	margin: 0.4rem 0 0;
	max-width: 56ch;
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--menu-muted);
}

/* Small screens: keep the dotted leader; price never crowds the name. */
@media (max-width: 600px) {
	.sirtaki-menu__name,
	.sirtaki-menu__price {
		font-size: var(--wp--preset--font-size--medium);
	}
	.sirtaki-menu__item {
		padding: 0.95rem 0;
	}
}