/* =====================================================================
   Phartenaas — menu-page.css
   Menukaart: sticky sidebar nav, items met prijzen, drop-cap intro
   ===================================================================== */

.menu-page {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-48);
}

@media (min-width: 1024px) {
	.menu-page {
		grid-template-columns: 60% 40%;
		gap: var(--s-64);
	}

	.menu-page__main {
		order: 1;
	}

	.menu-page__sidebar {
		order: 2;
	}
}

/* ---------- Sidebar nav ---------- */
.menu-nav {
	position: relative;
}

@media (min-width: 1024px) {
	.menu-nav {
		position: sticky;
		top: calc(var(--header-h) + var(--s-32));
		align-self: start;
	}
}

.menu-nav__title {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-16);
}

.menu-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	list-style: none;
}

/* mobile: horizontal scroll so sidebar doesn't become a huge tower */
@media (max-width: 1023px) {
	.menu-nav__list {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		gap: 0;
		padding-bottom: var(--s-8);
		border-bottom: 1px solid var(--c-border);
		-webkit-overflow-scrolling: touch;
	}
	.menu-nav__list li {
		border: 0;
		flex-shrink: 0;
	}
	.menu-nav__list a {
		padding: var(--s-8) var(--s-16);
		border-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.menu-nav__list li {
		border-top: 1px solid var(--c-border);
	}
	.menu-nav__list li:last-child {
		border-bottom: 1px solid var(--c-border);
	}
}

.menu-nav__list a {
	display: block;
	padding: var(--s-12) 0;
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--c-text-dim);
	letter-spacing: 0.3px;
	transition: color var(--dur) var(--ease);
}

.menu-nav__list a:hover,
.menu-nav__list a.is-current {
	color: var(--c-accent);
}

/* ---------- Menu intro ---------- */
.menu-intro {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--c-text);
	margin-bottom: var(--s-48);
}

.menu-intro p:first-child::first-letter {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 3rem;
	float: left;
	line-height: 1;
	padding-right: var(--s-8);
	padding-top: var(--s-4);
	color: var(--c-accent);
}

/* ---------- Menu category ---------- */
.menu-category {
	margin-bottom: var(--s-64);
	scroll-margin-top: calc(var(--header-h) + var(--s-24));
}

.menu-category__header {
	margin-bottom: var(--s-24);
}

.menu-category__number {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1rem;
	color: var(--c-accent);
	display: block;
	letter-spacing: 1px;
}

.menu-category__title {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.75rem;
	color: var(--c-white);
	margin-top: var(--s-4);
}

.menu-category__subtitle {
	font-family: var(--f-heading);
	font-style: italic;
	color: var(--c-text-dim);
	font-size: 1.0625rem;
	margin-bottom: var(--s-16);
}

.menu-category__note {
	font-size: 0.875rem;
	color: var(--c-text-dim);
	font-style: italic;
	margin-top: var(--s-16);
}

/* ---------- Menu items (hairline separators) ---------- */
.menu-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-items__item {
	padding: var(--s-16) 0;
	border-top: 1px solid var(--c-border);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-16);
	align-items: baseline;
}

.menu-items__item:last-child {
	border-bottom: 1px solid var(--c-border);
}

.menu-items__name {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--c-white);
}

.menu-items__desc {
	display: block;
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--c-text-dim);
	font-style: normal;
	margin-top: var(--s-4);
	line-height: 1.6;
}

.menu-items__price {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--c-accent);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Sub-category (wine / beer subdivision) */
.menu-subcat {
	margin-bottom: var(--s-32);
}

.menu-subcat__title {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-12);
}

/* Allergenen / disclaimer block */
.menu-disclaimer {
	margin-top: var(--s-40);
	padding: var(--s-24);
	border: 1px dashed var(--c-border);
	border-radius: var(--r-md);
	color: var(--c-text-dim);
	font-size: 0.8125rem;
	line-height: 1.7;
}