/**
 * Crawlable menus on the Menu page. Header nav colours match
 * Order Pickup; other pages are not restyled here.
 */

/* Desktop menu sits in the transparent below-header bar, on the page
   background, and Astra paints the links white (--ast-global-color-5).
   Charcoal is this page only, and only from Astra's desktop breakpoint up. */
@media (min-width: 922px) {
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item:hover > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item:focus > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item:focus-visible > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .current-menu-ancestor > .menu-link {
		color: #23252c;
	}

	body.bpc-menu-page .ast-below-header-bar .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
		box-shadow: inset 0 -3px 0 #f5893e;
	}
}

/* The phone menu button is the same white, on the white header bar. */
body.bpc-menu-page [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	color: #23252c;
}

body.bpc-menu-page [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
	fill: #23252c;
}

.bpc-menus {
	box-sizing: border-box;
	width: min(1120px, calc(100% - 48px));
	margin: 28px auto 88px;
	color: #23252c;
	font-family: Lato, sans-serif;
}

.bpc-menus *,
.bpc-menus *::before,
.bpc-menus *::after {
	box-sizing: border-box;
}

h1.bpc-menus__page-title,
.bpc-menus__page-title {
	margin: 0 0 12px;
	color: #23252c;
	font-family: Lato, sans-serif;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.bpc-menus__note {
	margin: 0 0 20px;
	color: #23252c;
	font-size: 1rem;
	line-height: 1.45;
}

.bpc-menus__switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.bpc-menus__tab,
.bpc-menus__tab:link,
.bpc-menus__tab:visited,
.bpc-menus__tab:hover,
.bpc-menus__tab:focus,
.bpc-menus__tab:focus-visible,
.bpc-menus__tab:active {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	background: #fff;
	background-image: none;
	color: #23252c;
	-webkit-text-fill-color: #23252c;
	border: 2px solid #f5893e;
	border-radius: 999px;
	font-family: Lato, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bpc-menus__tab[aria-selected="true"],
.bpc-menus__tab[aria-selected="true"]:link,
.bpc-menus__tab[aria-selected="true"]:visited {
	background: #f5893e;
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.bpc-menus__tab:focus,
.bpc-menus__tab:focus-visible {
	outline: 2px solid #c45e1a;
	outline-offset: 2px;
}

.bpc-menus__store {
	margin: 0;
}

.bpc-menus__title {
	margin: 0 0 8px;
	color: #23252c;
	font-family: Lato, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.bpc-menus__order-wrap {
	margin: 0 0 16px;
}

.bpc-menus__order {
	color: #f5893e;
	font-weight: 700;
	text-decoration: underline;
}

.bpc-menus__chips {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 12px 0;
	margin: 0 0 8px;
	background: #f8f5f4;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.bpc-menus__chip,
.bpc-menus__chip:link,
.bpc-menus__chip:visited,
.bpc-menus__chip:hover,
.bpc-menus__chip:focus,
.bpc-menus__chip:active {
	flex: 0 0 auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
	background: #fff;
	color: #23252c;
	-webkit-text-fill-color: #23252c;
	border: 2px solid #f5893e;
	border-radius: 999px;
	font-family: Lato, sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.bpc-menus__chip.is-active,
.bpc-menus__chip.is-active:link,
.bpc-menus__chip.is-active:visited {
	background: #f5893e;
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.bpc-menus__chip:focus,
.bpc-menus__chip:focus-visible {
	outline: 2px solid #c45e1a;
	outline-offset: 2px;
}

.bpc-menus__section {
	margin: 0 0 32px;
	scroll-margin-top: 72px;
}

.bpc-menus__section:last-child {
	margin-bottom: 0;
}

#palmerston-north,
#napier,
#menu-palmerston-north,
#menu-napier {
	scroll-margin-top: 16px;
}

.bpc-menus__cat-name {
	margin: 0 0 14px;
	color: #23252c;
	font-family: Lato, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.bpc-menus__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-menus__card,
.bpc-menus__card:link,
.bpc-menus__card:visited,
.bpc-menus__card:hover,
.bpc-menus__card:focus,
.bpc-menus__card:active {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background: #fff;
	background-image: none;
	color: #23252c;
	-webkit-text-fill-color: #23252c;
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
	text-decoration: none;
	overflow: hidden;
	min-height: 112px;
}

.bpc-menus__card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.bpc-menus__card:focus,
.bpc-menus__card:focus-visible {
	outline: 2px solid #c45e1a;
	outline-offset: 2px;
}

.bpc-menus__photo {
	flex: 0 0 112px;
	width: 112px;
	height: 112px;
	margin: 12px 12px 12px 0;
	object-fit: cover;
	border-radius: 12px;
	background: #eee;
}

.bpc-menus__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 4px 12px 14px;
}

.bpc-menus__name,
.bpc-menus__desc,
.bpc-menus__price {
	margin: 0;
}

.bpc-menus__name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

.bpc-menus__desc {
	margin-top: 4px;
	color: #3c3f46;
	font-size: 0.9rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bpc-menus__price {
	margin-top: 8px;
	font-weight: 700;
	color: #23252c;
}

@media (min-width: 640px) {
	.bpc-menus__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.bpc-menus__card,
	.bpc-menus__card:link,
	.bpc-menus__card:visited,
	.bpc-menus__card:hover,
	.bpc-menus__card:focus,
	.bpc-menus__card:active {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.bpc-menus__photo {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0;
		border-radius: 0;
	}

	.bpc-menus__text {
		padding: 14px 16px 16px;
		justify-content: flex-start;
	}

	.bpc-menus__desc {
		-webkit-line-clamp: 3;
	}
}

@media (min-width: 1024px) {
	.bpc-menus__grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}
}


/* Sticky Order pickup on this page, desktop and phone. Hide the generic site sticky. */
body.bpc-menu-page .bpc-sticky-order[data-bpc-menu-sticky] {
	display: flex;
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 9999;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #F68A3F;
	color: #fff !important;
	font-family: Lato, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 20px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

body.bpc-menu-page .bpc-sticky-order[data-bpc-menu-sticky]:active {
	background: #e0762c;
}

body.bpc-menu-page .bpc-sticky-order:not([data-bpc-menu-sticky]) {
	display: none;
}

body.bpc-menu-page {
	padding-bottom: 84px;
}

@media (max-width: 767px) {
	.bpc-menus {
		width: min(1120px, calc(100% - 32px));
		margin-bottom: 48px;
	}
}

/* Thai food and fried chicken guides (#thai-food, #fried-chicken). */
.bpc-menus__guides {
	margin: 48px 0 0;
	display: grid;
	gap: 24px;
}

.bpc-menus__guide {
	padding: 24px;
	border-radius: 16px;
	background: #fff7ef;
	scroll-margin-top: 80px;
}

.bpc-menus__guide-title {
	margin: 0 0 8px;
	color: #23252c;
	font-family: Lato, sans-serif;
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
}

.bpc-menus__guide-intro {
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.45;
}

.bpc-menus__guide-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px 24px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.bpc-menus__guide-item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	align-items: baseline;
	line-height: 1.4;
}

.bpc-menus__guide-name {
	font-weight: 700;
}

.bpc-menus__guide-where {
	color: #5b5e66;
	font-size: 0.9rem;
}

.bpc-menus__guide-price {
	margin-left: auto;
	color: #23252c;
	white-space: nowrap;
}

.bpc-menus__guide-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.bpc-menus__guide-cta {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	background: #f5893e;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.bpc-menus__guide-cta:hover,
.bpc-menus__guide-cta:focus {
	background: #e0742a;
	color: #fff;
}