/**
 * Header: the shell bar.
 *
 * One bar in the operator's header colour (ink by default), the name or
 * logo at the start, the menu in condensed caps, the cart count and the
 * order action at the end. A 2px rule closes it. On phones the menu drops
 * as a ruled list. Reads the plugin's tokens.
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-content {
	flex: 1 0 auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	padding: var(--fm-m) calc(var(--fm-m) * 2);
	background: var(--fm-black);
	color: var(--fm-paper);
	font-weight: 700;
}

.skip-link:focus {
	left: var(--fm-m);
	top: var(--fm-m);
	box-shadow: var(--fm-focus);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.modern-header {
	position: relative;
	z-index: 999;
	background: var(--foodmaster-header-bg, var(--fm-ink));
	color: var(--foodmaster-header-text, var(--fm-on-ink));
	border-bottom: var(--fm-rule-strong);
	transition: transform var(--fm-base) var(--fm-ease);
}

.modern-header.header-hidden {
	transform: translateY(-100%);
}

.modern-header.header-scrolled {
	box-shadow: none;
}

.header-content {
	display: flex;
	align-items: center;
	gap: calc(var(--fm-m) * 3);
	min-height: calc(var(--fm-m) * 8);
}

/* Logo / name */
.header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-width: 0;
}

.header-logo a {
	color: inherit;
	text-decoration: none;
}

.header-logo .logo-img,
.header-logo .custom-logo {
	display: block;
	max-width: var(--foodmaster-logo-width, 180px);
	height: auto;
	max-height: calc(var(--fm-m) * 6);
	width: auto;
}

.header-logo .custom-logo-link,
.header-logo .custom-logo-link:hover {
	display: block;
	text-decoration: none;
}

.header-logo .logo-text,
.header-logo .logo-text:hover {
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 28px;
	line-height: 1;
	letter-spacing: calc(0.01em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	color: inherit;
}

/* Menu */
.header-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.main-menu {
	display: flex;
	flex-wrap: wrap; /* a menu too long for the bar takes a second row rather than running under the actions */
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu li {
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

.main-menu li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: calc(var(--fm-m) * 8);
	padding: 0 calc(var(--fm-m) * 1.125);
	color: inherit;
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: calc(0.03em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -3px 0 transparent;
	transition: box-shadow var(--fm-fast) var(--fm-ease), opacity var(--fm-fast) var(--fm-ease);
}

.main-menu li a:hover {
	color: inherit;
	opacity: 0.8;
}

.main-menu li.current-menu-item > a,
.main-menu li.current-menu-ancestor > a {
	box-shadow: inset 0 -3px 0 currentColor;
}

.main-menu li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-inline-start: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.main-menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	display: none;
	min-width: 220px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--fm-paper);
	color: var(--fm-black);
	border: var(--fm-rule-strong);
	border-radius: var(--fm-radius);
}

.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu,
.main-menu li.menu-item-has-children.submenu-open > .sub-menu {
	display: block;
}

.main-menu .sub-menu li a {
	display: flex;
	width: 100%;
	min-height: calc(var(--fm-m) * 6);
	padding: 0 calc(var(--fm-m) * 2);
	border-bottom: var(--fm-rule);
	font-size: 15px;
	box-shadow: none;
}

.main-menu .sub-menu li:last-child a {
	border-bottom: 0;
}

.main-menu .sub-menu li a:hover {
	background: var(--fm-n1);
	opacity: 1;
}

/* Actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--fm-m);
	margin-inline-start: auto;
	flex-shrink: 0;
}

.search-toggle,
.mobile-menu-toggle {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fm-m) * 5);
	height: calc(var(--fm-m) * 5);
	padding: 0;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: var(--fm-radius);
	color: inherit;
	cursor: pointer;
	transition: opacity var(--fm-fast) var(--fm-ease);
}

.search-toggle:hover,
.mobile-menu-toggle:hover {
	opacity: 0.8;
}

.search-toggle svg {
	width: 18px;
	height: 18px;
}

.header-cart {
	display: flex;
}

.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: calc(var(--fm-m) * 5);
	padding: 0 calc(var(--fm-m) * 1.25);
	border: 1.5px solid currentColor;
	border-radius: var(--fm-radius);
	color: inherit;
	text-decoration: none;
	transition: opacity var(--fm-fast) var(--fm-ease);
}

.cart-link:hover {
	color: inherit;
	opacity: 0.8;
}

.cart-link svg {
	width: 18px;
	height: 18px;
}

.header-cart .cart-count {
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 16px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cart-count.cart-updated {
	animation: fm-stamp var(--fm-base) var(--fm-ease);
}

@keyframes fm-stamp {
	from { transform: translateY(6px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.order-now-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--fm-m);
	min-height: calc(var(--fm-m) * 5);
	padding: 0 calc(var(--fm-m) * 2);
	background: var(--fm-black);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	color: var(--fm-paper);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: calc(0.03em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	text-decoration: none;
	transition: background var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

.order-now-btn:hover {
	background: var(--fm-paper);
	color: var(--fm-black);
	text-decoration: none;
}

.order-now-btn svg {
	width: 14px;
	height: 14px;
	transition: transform var(--fm-fast) var(--fm-ease);
}

.order-now-btn:hover svg {
	transform: translateX(3px);
}

/* Mobile toggle */
.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.mobile-menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform var(--fm-fast) var(--fm-ease), opacity var(--fm-fast) var(--fm-ease);
}

.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Phones and tablets: the menu drops as a ruled list */
/* The Counter style's display face runs wide: seven labels need a size down and half the tracking */
.fm-style-counter .main-menu li a {
	padding: 0 var(--fm-m);
	font-size: 15px;
	letter-spacing: calc(0.015em * var(--fm-tracking));
}

/* Seven labels in the wider display fonts need a little less air before the menu collapses */
@media (min-width: 1101px) and (max-width: 1240px) {
	.header-content {
		gap: calc(var(--fm-m) * 2);
	}

	.main-menu li a {
		padding: 0 calc(var(--fm-m) * 0.75);
		font-size: 14px;
	}
}

@media (max-width: 1100px) {
	.header-content {
		gap: calc(var(--fm-m) * 2);
		min-height: calc(var(--fm-m) * 7);
	}

	.mobile-menu-toggle {
		display: inline-flex;
	}

	.header-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--fm-paper);
		color: var(--fm-black);
		border-bottom: var(--fm-rule-strong);
	}

	.header-nav.mobile-menu-open {
		display: block;
	}

	.main-menu {
		flex-direction: column;
		align-items: stretch;
		padding: 0 calc(var(--fm-m) * 2);
	}

	.main-menu li {
		width: 100%;
	}

	/* Each row spans the panel: the rule runs edge to edge and the whole row is the target */
	.main-menu li a {
		display: flex;
		width: 100%;
		min-height: calc(var(--fm-m) * 7);
		padding: 0;
		border-bottom: var(--fm-rule);
		font-size: 22px;
		box-shadow: none;
	}

	.main-menu li.current-menu-item > a {
		color: var(--fm-ink);
	}

	.main-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		border: 0;
		border-radius: 0;
		padding-inline-start: calc(var(--fm-m) * 2);
	}

	.main-menu li:hover > .sub-menu {
		display: none;
	}

	.main-menu li.menu-item-has-children.submenu-open > .sub-menu {
		display: block;
	}

	.main-menu .sub-menu li a {
		padding: 0;
		font-size: 17px;
	}

	.main-menu .sub-menu li:last-child a {
		border-bottom: var(--fm-rule);
	}

	.order-now-btn {
		padding: 0 calc(var(--fm-m) * 1.5);
	}
}

@media (max-width: 600px) {
	.order-now-btn {
		display: none;
	}

	.header-logo .logo-img,
	.header-logo .custom-logo {
		max-width: min(var(--foodmaster-logo-width, 180px), 140px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.modern-header,
	.main-menu li a,
	.search-toggle,
	.mobile-menu-toggle,
	.mobile-menu-toggle span,
	.cart-link,
	.order-now-btn,
	.order-now-btn svg {
		transition: none;
	}

	.cart-count.cart-updated {
		animation: none;
	}
}

/* Cart count pulse after an add */
.cart-count.cart-updated {
	animation: fm-cart-pulse var(--fm-base) var(--fm-ease);
}

@keyframes fm-cart-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* Header search: a ruled sheet over the page */
body.search-modal-open {
	overflow: hidden;
}

.foodmaster-search-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	padding: calc(var(--fm-m) * 2);
	background: color-mix(in oklab, var(--fm-black) 72%, transparent);
}

.foodmaster-search-modal.search-modal-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: clamp(64px, 16vh, 160px);
}

.foodmaster-search-modal-content {
	position: relative;
	width: 100%;
	max-width: 640px;
	padding: calc(var(--fm-m) * 3);
	background: var(--fm-paper);
	border: var(--fm-rule-strong);
	border-radius: var(--fm-radius);
}

.foodmaster-search-modal-content h2,
.foodmaster-search-modal-content h3 {
	margin: 0 0 calc(var(--fm-m) * 2);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 28px;
	line-height: 1;
	text-transform: var(--fm-caps);
}

.foodmaster-search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--fm-m);
}

.foodmaster-search-field {
	min-width: 0;
	min-height: calc(var(--fm-m) * 6);
	padding: 0 calc(var(--fm-m) * 1.5);
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	font-family: var(--fm-font-body);
	font-size: 16px;
	color: var(--fm-black);
}

.foodmaster-search-field:focus-visible {
	outline: none;
	box-shadow: var(--fm-focus);
}

.foodmaster-search-submit {
	appearance: none;
	min-height: calc(var(--fm-m) * 6);
	padding: 0 calc(var(--fm-m) * 2.5);
	background: var(--fm-ink);
	border: 1.5px solid var(--fm-ink);
	border-radius: var(--fm-radius);
	color: var(--fm-on-ink);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 17px;
	letter-spacing: calc(0.03em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	cursor: pointer;
}

.foodmaster-search-submit:hover {
	background: var(--fm-ink-hover);
	border-color: var(--fm-ink-hover);
}

.foodmaster-search-close {
	position: absolute;
	top: var(--fm-m);
	inset-inline-end: var(--fm-m);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fm-m) * 5);
	height: calc(var(--fm-m) * 5);
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	color: var(--fm-black);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.foodmaster-search-close:hover {
	background: var(--fm-black);
	color: var(--fm-paper);
}

.foodmaster-search-close:focus-visible,
.foodmaster-search-submit:focus-visible {
	outline: none;
	box-shadow: var(--fm-focus);
}

@media (max-width: 600px) {
	.foodmaster-search-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cart-count.cart-updated {
		animation: none;
	}
}