/**

 * Menu page styles

 */



body.madira-menu-page {

	max-width: 100%;

}



.site-main--menu {

	background-color:rgba(255, 255, 255, 0.55);

	min-height: 100vh;

	--menu-gutter: var(--site-gutter);

	--menu-toolbar-height: 56px;

	--menu-sticky-top: var(--site-header-offset, var(--header-height, 80px));

	width: 100%;

	max-width: 100%;

	box-sizing: border-box;

}



.menu-page-inner {

	max-width: min(var(--container-max), 100%);

	width: 100%;

	margin: 0 auto;

	box-sizing: border-box;

}



.menu-sticky-head {

	background-color: var(--color-cream);

}



.menu-toolbar {

	background-color: var(--color-cream);

	border-bottom: 1px solid rgba(28, 44, 34, 0.08);

	padding: 20px var(--menu-gutter);

	width: 100%;

	max-width: 100%;

	box-sizing: border-box;

}



.menu-toolbar__inner {

	display: flex;

	align-items: center;

	gap: 16px;

	max-width: var(--container-max);

	margin: 0 auto;

	width: 100%;

	min-width: 0;

}



.menu-toolbar__search {

	position: relative;

	flex: 1;

	min-width: 0;

}



.menu-toolbar__search-icon {

	position: absolute;

	left: 16px;

	top: 50%;

	transform: translateY(-50%);

	color: var(--color-text-muted);

	pointer-events: none;

}



.menu-toolbar__input {

	width: 100%;

	max-width: 100%;

	padding: 14px 16px 14px 44px;

	font-family: var(--font-body);

	font-size: 15px;

	color: var(--color-text-dark);

	background-color: var(--color-white);

	border: 1px solid rgba(28, 44, 34, 0.1);

	border-radius: 999px;

	outline: none;

	transition: border-color var(--transition);

	box-sizing: border-box;

}



.menu-toolbar__input:focus {

	border-color: var(--color-red);

}



.menu-sidebar {

	width: 100%;

	min-width: 0;

	max-width: 100%;

}



.menu-sidebar__heading {

	margin: 0 0 16px;

	font-family: var(--font-heading);

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: var(--color-red);

}



.menu-sidebar__nav {

	width: 100%;

	max-width: 100%;

	min-width: 0;

}



.menu-sidebar__list {

	display: flex;

	flex-direction: column;

	gap: 4px;

	margin: 0;

	padding: 0;

	list-style: none;

}



.menu-sidebar__link {

	display: block;

	padding: 10px 14px;

	font-family: var(--font-body);

	font-size: 14px;

	font-weight: 500;

	color: var(--color-text-dark);

	border-radius: var(--radius-sm);

	transition: background-color var(--transition), color var(--transition);

}



.menu-sidebar__link:hover,

.menu-sidebar__link:focus-visible {

	color: var(--color-red);

}



.menu-sidebar__link.is-active {

	background-color: var(--color-red);

	color: var(--color-white);

}



.menu-layout {

	width: 100%;

	box-sizing: border-box;

}



.menu-layout__main {

	min-width: 0;

	max-width: 100%;

	width: 100%;

}



.menu-layout__empty {

	padding: 48px 0;

	text-align: center;

	color: var(--color-text-muted);

}



.menu-category {

	margin-bottom: 0;

	padding: 48px 0;

	scroll-margin-top: calc(var(--menu-sticky-top) + var(--menu-sticky-head-height, 120px) + 16px);

	max-width: 100%;

	min-width: 0;

	width: 100%;

	background-color: transparent;

}

.menu-category:last-child {

	padding-bottom: 64px;

}



.menu-category.is-hidden {

	display: none;

}



.menu-category__header {

	margin-bottom: 24px;

	max-width: 100%;

}



.menu-category__title {

	margin: 0 0 8px;

	font-family: var(--font-heading);

	font-size: clamp(1.75rem, 3vw, 2.25rem);

	font-weight: 700;

	color: var(--color-text-dark);

	overflow-wrap: anywhere;

	word-break: break-word;

}



.menu-category__subtitle {

	margin: 0;

	font-family: var(--font-body);

	font-size: 15px;

	color: var(--color-text-muted);

	overflow-wrap: anywhere;

	word-break: break-word;

}



.menu-category__grid {

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 24px;

	width: 100%;

	min-width: 0;

}



.menu-category__empty {

	color: var(--color-text-muted);

	font-size: 15px;

}



.menu-card {

	background-color: var(--color-white);

	border-radius: var(--radius-md);

	overflow: hidden;

	box-shadow: 0 4px 16px rgba(28, 44, 34, 0.06);

	transition: opacity var(--transition), transform var(--transition);

	min-width: 0;

	max-width: 100%;

	width: 100%;

}



.menu-card.is-hidden {

	display: none;

}



.menu-card__media {

	position: relative;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	width: 100%;

	max-width: 100%;

}



.menu-card__image {

	display: block;

	width: 100%;

	height: 100%;

	max-width: 100%;

	object-fit: cover;

}



.menu-card__placeholder {

	width: 100%;

	height: 100%;

	background-color: rgba(28, 44, 34, 0.08);

}



.menu-card__badge {

	position: absolute;

	top: 12px;

	left: 12px;

	padding: 4px 10px;

	font-family: var(--font-body);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: var(--color-white);

	background-color: var(--color-red);

	border-radius: 999px;

	max-width: calc(100% - 24px);

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}



.menu-card__price-tag {

	position: absolute;

	bottom: 12px;

	left: 12px;

	padding: 6px 12px;

	font-family: var(--font-body);

	font-size: 13px;

	font-weight: 700;

	color: var(--color-text-dark);

	background-color: var(--color-white);

	border-radius: 999px;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

	max-width: calc(100% - 24px);

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}



.menu-card__body {

	padding: 20px;

	min-width: 0;

}



.menu-card__title {

	margin: 0 0 8px;

	font-family: var(--font-heading);

	font-size: 1.25rem;

	font-weight: 700;

	color: var(--color-text-dark);

	overflow-wrap: anywhere;

	word-break: break-word;

}



.menu-card__description {

	margin: 0 0 16px;

	font-family: var(--font-body);

	font-size: 14px;

	line-height: 1.55;

	color: var(--color-text-muted);

	overflow-wrap: anywhere;

	word-break: break-word;

}



.menu-card__actions {

	display: flex;

	gap: 10px;

	min-width: 0;

}



.menu-card__btn {

	flex: 1;

	padding: 12px 16px;

	font-size: 12px;

	min-width: 0;

	width: 100%;

	max-width: 100%;

	text-align: center;

	box-sizing: border-box;

}



.menu-card__btn--order {

	display: inline-flex;

	justify-content: center;

}



/* Desktop: toolbar spans top, sidebar + content in two columns */

@media (min-width: 992px) {

	.menu-page-inner {

		display: grid;

		grid-template-columns: 220px minmax(0, 1fr);

		grid-template-areas:

			"toolbar toolbar"

			"sidebar main";

		gap: 0 40px;

		padding: 32px var(--menu-gutter) 80px;

		align-items: start;

	}



	.menu-sticky-head {

		display: contents;

	}



	.menu-toolbar {

		grid-area: toolbar;

		position: sticky;

		top: var(--menu-sticky-top);

		z-index: 60;

		padding: 0 0 24px;

		margin-bottom: 8px;

	}



	.menu-sidebar {

		grid-area: sidebar;

		position: sticky;

		top: calc(var(--menu-sticky-top) + var(--menu-toolbar-height) + 32px);

		z-index: 59;

		align-self: start;

	}



	.menu-layout {

		grid-area: main;

		min-width: 0;

	}

}



/* Mobile: search + category pills stick together below site header */

@media (max-width: 991px) {

	.menu-page-inner {

		padding: 0;

	}



	.menu-sticky-head {

		position: sticky;

		top: var(--menu-sticky-top);

		z-index: 60;

		border-bottom: 1px solid rgba(28, 44, 34, 0.08);

		box-shadow: 0 4px 12px rgba(28, 44, 34, 0.04);

	}



	.menu-toolbar {

		padding: 16px var(--menu-gutter);

		border-bottom: none;

	}



	.menu-sidebar {

		padding: 0 0 12px;

	}



	.menu-sidebar__heading {

		display: none;

	}



	.menu-sidebar__nav {

		overflow-x: auto;

		overflow-y: hidden;

		-webkit-overflow-scrolling: touch;

		overscroll-behavior-x: contain;

		scrollbar-width: none;

		padding: 0 var(--menu-gutter) 4px;

		touch-action: pan-x;

	}



	.menu-sidebar__nav::-webkit-scrollbar {

		display: none;

	}



	.menu-sidebar__list {

		display: inline-flex;

		flex-direction: row;

		flex-wrap: nowrap;

		align-items: center;

		gap: 8px;

		width: auto;

	}



	.menu-sidebar__item {

		flex: 0 0 auto;

	}



	.menu-sidebar__link {

		display: inline-block;

		flex-shrink: 0;

		padding: 10px 18px;

		border-radius: 999px;

		border: 1px solid rgba(28, 44, 34, 0.12);

		background-color: var(--color-white);

		font-size: 13px;

		white-space: nowrap;

		touch-action: manipulation;

		cursor: pointer;

		-webkit-tap-highlight-color: transparent;

	}



	.menu-sidebar__link.is-active {

		background-color: var(--color-red);

		border-color: var(--color-red);

		color: var(--color-white);

	}



	.menu-layout {

		padding: 24px 0 0;

	}



	.menu-category__grid {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 16px;

	}

}



@media (max-width: 767px) {

	.menu-category {

		padding: 40px var(--menu-gutter);

	}

	.menu-category:last-child {

		padding-bottom: 64px;

	}



	.menu-category__grid {

		grid-template-columns: minmax(0, 1fr);

		gap: 20px;

	}



	.menu-card__body {

		padding: 16px;

	}



	.menu-card__title {

		font-size: 1.125rem;

	}

}