/*------------------------------------------------------------
Café menu — bare-bones public page styling, same philosophy as
faqs.css / lego-sets.css: plain CSS, no fixed 1920px stage, so a
designer can restyle it without fighting the homepage's layout.
------------------------------------------------------------*/

.menu-page {
	--menu-orange: #FF8200;
	--menu-ink: #111111;
	--menu-cream: #EADFCF;
	--menu-border: #E2DED6;
	font-family: 'DM Sans', sans-serif;
	color: var(--menu-ink);
	max-width: 760px;
	margin: 0 auto;
	padding: 160px 24px 96px;
}

.menu-page__title {
	font-family: 'F37Analogue', sans-serif;
	font-size: 40px;
	text-align: center;
	margin: 0 0 16px;
}

.menu-page__intro {
	max-width: 560px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.8;
}

/* Sections */

.menu-section {
	margin-bottom: 44px;
}

.menu-section:last-of-type {
	margin-bottom: 0;
}

.menu-section__heading {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--menu-orange);
	font-family: 'F37Analogue', sans-serif;
	font-size: 24px;
}

/* Time qualifiers like "after 7pm" — part of the heading, but
   deliberately quieter than the section name itself. */
.menu-section__note {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	opacity: 0.65;
}

/* Items */

.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px dotted var(--menu-border);
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.menu-item__name {
	font-size: 16px;
	font-weight: 600;
}

.menu-item__desc {
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.7;
}

.menu-item__price {
	flex: none;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Allergy notice */

.menu-page__allergy {
	margin: 56px 0 0;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--menu-cream);
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.menu-page {
		padding: 140px 16px 64px;
	}

	.menu-page__title {
		font-size: 28px;
	}

	.menu-section__heading {
		font-size: 21px;
	}
}