/* Parade Menu Overlay — matches the approved dark/gold menu design. */

:root {
	--pmo-bg: #000000;
	--pmo-panel: #000000;
	--pmo-gold: #e09416;
	--pmo-text: #f5f3ee;
	--pmo-text-dim: #cfcbc4;
	--pmo-border: rgba(255, 255, 255, 0.18);
	--pmo-font-heading: 'Bebas Neue', sans-serif;
	--pmo-font-body: 'Poppins', sans-serif;
	--pmo-header-offset: 75px; /* height of the SITE's own header/nav on desktop/laptop */
	--pmo-header-offset-mobile: 100px; /* same idea, but the site's mobile nav bar is often a different height than its desktop one — adjust separately here */
}

.pmo-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30px 24px; /* 30px matches the site header's own left/right padding, so the panel's content aligns with the logo and Book a Table button above it */
	padding-top: var(--pmo-header-offset); /* no extra gap — the panel joins the header's bottom edge exactly */
}

.pmo-overlay[hidden] {
	display: none;
}

.pmo-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.pmo-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1250px;
	height: 80vh;
	max-height: calc(100vh - var(--pmo-header-offset) - 48px); /* keeps the panel (and its footer) from being pushed off-screen on short viewports */
	background: transparent;
	color: var(--pmo-text);
	font-family: var(--pmo-font-body);
	overflow: hidden;
	border-bottom: 2px solid var(--pmo-border);
}

/* Everything except the header sits on this — tabs, dish list, and footer share one solid fill. */
.pmo-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: var(--pmo-panel);
}

@media (prefers-reduced-motion: no-preference) {
	.pmo-panel {
		animation: pmo-fade-in 0.18s ease-out;
	}
}

@keyframes pmo-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

html.pmo-lock-scroll {
	overflow: hidden; /* without this, some browsers still show the root scrollbar track even though the body itself is pinned via position:fixed below */
}

body.pmo-lock-scroll {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
}

/* The site's own header goes solid black while any menu overlay is open, so it
   reads as one continuous black surface with the panel below it, per the
   client's design annotation. body.pmo-lock-scroll is already toggled by
   lockBodyScroll()/unlockBodyScroll() in overlay.js on every open/close, so
   this needs no JS changes of its own. */
body.pmo-lock-scroll #header-bg,
body.pmo-lock-scroll .header-bg {
	background-color: #000000 !important;
	background-image: none !important;
}

/* Header — background photo comes from the menu category's own Header Image field. */
.pmo-header {
	position: relative;
	background-color: #000000;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 36px 30px 16px;
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
}

.pmo-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.85) 100%);
}

.pmo-header-inner {
	/* No position:relative here — .pmo-header-actions (position:absolute below)
	   needs to anchor to .pmo-header itself, not this inner wrapper, so
	   bottom:0 lands at the header's real bottom padding edge instead of
	   wherever this wrapper's own content happens to end.
	   z-index (valid on flex items even without position) instead restores
	   this above .pmo-header::before's gradient overlay — without it, the
	   title/description silently lost their spot in the paint order and
	   rendered underneath the gradient instead of on top of it. */
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.pmo-header-text {
	max-width: 480px;
}

.pmo-eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pmo-text-dim);
}

.pmo-menu-title {
	margin: 4px 0 10px;
	font-family: var(--pmo-font-heading);
	font-size: 42px;
	line-height: 1;
	letter-spacing: 0.045em;
	color: var(--pmo-text);
}

.pmo-menu-divider {
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 12px;
	background: var(--pmo-gold);
}

.pmo-menu-desc {
	margin: 0;
	font-family: var(--pmo-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--pmo-text);
}

@media (max-width: 640px) {
	.pmo-menu-title {
		font-size: 24px;
	}
	.pmo-menu-desc {
		font-size: 14px;
	}
}

.pmo-header-actions {
	position: absolute;
	bottom: 16px;
	right: 30px; /* explicit, matching the same 30px used by the header/tabs/content/footer padding elsewhere — not left to right:0 + padding-box math */
	display: flex;
	gap: 10px;
	background: transparent;
}

/* Buttons */
.pmo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	font-family: var(--pmo-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--pmo-gold);
	border-radius: 2px;
	background: transparent;
	color: var(--pmo-gold);
	transition: background-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.pmo-btn-outline {
	background: rgba(0, 0, 0, 0.15);
}

.pmo-btn-outline:hover,
.pmo-btn-outline:focus-visible {
	background: var(--pmo-gold);
	color: #000000;
}

.pmo-btn-solid {
	background: var(--pmo-gold);
	color: #ffffff;
	border-color: var(--pmo-gold);
}

.pmo-btn-solid:hover,
.pmo-btn-solid:focus-visible {
	background: #f0a930;
	border-color: #f0a930;
}

.pmo-btn:focus-visible,
.pmo-tab:focus-visible {
	outline: 2px solid var(--pmo-gold);
	outline-offset: 2px;
}

/* Tabs */
.pmo-tabs {
	display: flex;
	justify-content: flex-start;
	gap: 32px;
	padding: 0 30px;
	background: var(--pmo-bg);
	border-top: 2px solid var(--pmo-border);
	border-bottom: 2px solid var(--pmo-border);
	overflow-x: auto;
	flex-shrink: 0;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

.pmo-tabs::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Edge — still scrolls (drag/swipe/keyboard), just no visible scrollbar chrome, matching a typical tab-bar look */
}

.pmo-tab {
	position: relative;
	display: flex;
	align-items: center;
	padding: 16px 2px 8px;
	background: none;
	border: none;
	white-space: nowrap;
	font-family: var(--pmo-font-heading);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pmo-text-dim);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* removes the grey flash WebKit mobile browsers show by default on tap, which otherwise lingers looking like a stuck hover/focus state */
}

.pmo-tab-chevron {
	display: none; /* shown only in the mobile accordion layout */
}

.pmo-header-photo {
	display: none; /* shown only in the mobile layout — desktop uses the header's background photo instead */
}

.pmo-tab[aria-selected="true"] {
	color: var(--pmo-gold);
}

.pmo-tab[aria-selected="true"]::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--pmo-gold);
}

/* Content */
.pmo-content-wrap {
	position: relative;
	flex: 1;
	min-height: 0; /* without this, flex children default to min-height:auto and refuse to shrink below their content size, so overflow-y:auto never actually scrolls */
	display: flex;
	flex-direction: column;
}

.pmo-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 30px;
	scrollbar-width: none; /* Firefox — still scrolls, just no visible scrollbar */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

.pmo-content::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Edge */
}

.pmo-fade-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--pmo-panel) 85%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.15s ease;
}

.pmo-fade-bottom.pmo-fade-hidden {
	opacity: 0;
}


.pmo-grid {
	columns: 2;
	column-gap: 48px;
}

@media (max-width: 720px) {
	.pmo-grid {
		columns: 1;
	}
}

.pmo-dish {
	break-inside: avoid;
	padding: 14px 0;
	border-bottom: 1px solid var(--pmo-border);
}

.pmo-dish-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.pmo-dish-name {
	margin: 0;
	font-family: var(--pmo-font-heading);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--pmo-text);
}

.pmo-dish-meta {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	padding-top: 3px; /* optical nudge so it lines up with the dish name's cap-height under align-items: flex-start */
}

.pmo-price {
	display: inline-block;
	width: 40px; /* fixed column, like the tag below — so "$8" and "$36" both start at the same X regardless of digit count */
	flex-shrink: 0;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	color: var(--pmo-gold);
}

.pmo-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--pmo-gold);
}

.pmo-dish-meta .pmo-tag {
	display: inline-block;
	width: 26px; /* reserved width, always present even when a dish has no tag (see class-render.php) — so a dish with no V/GF/VE doesn't pull its price to the right compared to one that has a tag */
	flex-shrink: 0;
	text-align: left;
}

.pmo-dish-desc {
	margin: 6px 0 0;
	padding-right: 80px; /* reserves the same space the price/tag occupies above, so a wrapped second line doesn't extend as far right as the price */
	font-size: 15px;
	line-height: 1.5;
	color: var(--pmo-text-dim);
}

/* Footer */
.pmo-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 30px;
	background: var(--pmo-bg);
	border-top: 2px solid var(--pmo-border);
	flex-shrink: 0;
}

.pmo-legend {
	margin: 0;
	font-size: 16px;
	color: var(--pmo-text-dim);
}

.pmo-legend .pmo-tag {
	font-size: 14px;
	margin-right: 2px;
}

.pmo-dot {
	margin: 0 8px;
	color: var(--pmo-border);
}

@media (max-width: 640px) {
	.pmo-overlay {
		padding: 0 10px; /* lets a sliver of the blurred background page show at the edges instead of true full-bleed */
	}
	/* The theme's own style.css puts a bright inset box-shadow glow on
	   button:hover — since .pmo-tab/.pmo-btn are real <button> elements they
	   inherit it, and on touch devices :hover often gets "stuck" after a tap,
	   which is what looked like a lingering grey highlight. !important since
	   this is overriding a rule from outside this stylesheet. */
	.pmo-tab,
	.pmo-tab:hover,
	.pmo-tab:focus,
	.pmo-btn,
	.pmo-btn:hover,
	.pmo-btn:focus {
		box-shadow: none !important;
		-webkit-box-shadow: none !important;
	}
	.pmo-panel {
		height: 98vh; /* fallback for browsers without dvh support */
		height: 98dvh; /* dvh tracks the browser's actual visible viewport consistently across Chrome/Safari, unlike vh — which is exactly the Chrome-vs-Safari mismatch this was causing (button cut off in one, extra gap in the other) */
		max-height: 98vh;
		max-height: 98dvh;
		border-radius: 0 0 12px 12px;
	}
	/* The header stays a normal flex-shrink:0 sibling here (not moved into
	   .pmo-content) — it's fixed in place above the scrollable tabs/dishes,
	   which live in .pmo-content-wrap (flex:1/min-height:0) + .pmo-content
	   (overflow-y:auto) exactly as on desktop. .pmo-footer is likewise a
	   normal flex-shrink:0 item after .pmo-content-wrap, always visible with
	   no fixed/sticky positioning needed. */
	.pmo-content {
		padding-left: 18px;
		padding-right: 18px;
	}
	.pmo-footer {
		padding: 0; /* Book a Table fills the bar edge-to-edge; its own button padding keeps the bar's height unchanged */
	}

	/* Header becomes: title/close row, divider, description, then the photo as a normal block image below — not a background photo behind the text. Stays fixed above the scrollable content (not moved into .pmo-content). padding-top clears the site's own mobile nav bar, which sits above this at a higher z-index — without it, the title/close row is hidden behind that nav instead of below it. */
	.pmo-header {
		background-image: none !important;
		padding-top: var(--pmo-header-offset-mobile);
		padding-bottom: 16px;
		padding-left: 18px;
		padding-right: 18px;
		display: flex;
		flex-direction: row;
	}
	.pmo-header::before {
		display: none;
	}
	.pmo-header-inner {
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	.pmo-header-text {
		flex: 1;
		min-width: 0;
		max-width: none;
	}
	.pmo-header-actions {
		position: absolute;
		top: calc(var(--pmo-header-offset-mobile) + 2px); /* aligns with the title row, which itself starts after that same offset — was a flat 16px from .pmo-header's own top edge, landing it up in the space reserved for the site header instead of next to the title */
		right: var(--pmo-close-right-offset, 12px); /* tune this to line up exactly under your site's hamburger icon — I can't measure that from here */
		flex-shrink: 0;
	}
	.pmo-header-scrollaway {
		padding-bottom: 16px; /* clearance before the photo/tabs that follow it in the scrollable area */
	}
	.pmo-header-photo {
		display: block;
		width: 100%;
		height: 200px;
		object-fit: cover;
		margin-bottom: 16px;
		border-radius: 6px;
	}

	/* Download PDF is hidden on mobile; Close becomes an icon-only circle button. */
	.pmo-header-actions .pmo-btn-outline:not(.pmo-btn-close) {
		display: none;
	}
	.pmo-btn-close {
		position: relative;
		width: 28px;
		height: 28px;
		padding: 0;
		border-radius: 50%;
		border-width: 1.5px; /* slightly heavier ring to match the reference design */
		justify-content: center;
	}
	/* The "✕" text glyph renders thin and font-dependent — drawing the X with
	   two crossed bars instead gives an exact, consistent stroke weight matching
	   the reference icon, regardless of font. */
	.pmo-btn-close > span[aria-hidden="true"] {
		display: none;
	}
	.pmo-btn-close::before,
	.pmo-btn-close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px;
		height: 1.5px;
		background: var(--pmo-gold);
		border-radius: 1px;
	}
	.pmo-btn-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.pmo-btn-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.pmo-btn-close-label {
		display: none;
	}

	/* Tabs become a stacked accordion: each is a full-width row with a chevron,
	   and (via JS) its content sits directly beneath it instead of in a
	   separate shared pane — see applyResponsiveLayout() in overlay.js. */
	.pmo-tabs {
		flex-direction: column;
		gap: 0;
		padding: 0; /* nested inside .pmo-content on mobile, which already has its own 18px — avoids double-padding that threw off alignment with the header */
		border-bottom: none;
		overflow-x: visible;
	}
	.pmo-tab {
		width: 100%;
		justify-content: space-between;
		padding: 14px 0;
		font-size: 18px;
		border-bottom: 1px solid var(--pmo-border);
	}
	.pmo-tab[aria-selected="true"]::after {
		display: none;
	}
	.pmo-tab-chevron {
		display: inline-block;
		width: 8px;
		height: 8px;
		flex-shrink: 0;
		margin-left: 12px;
		border-right: 2px solid var(--pmo-gold);
		border-bottom: 2px solid var(--pmo-gold);
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}
	.pmo-tab[aria-selected="true"] .pmo-tab-chevron {
		transform: rotate(-135deg);
	}
	.pmo-section {
		padding: 4px 0 16px 14px; /* left indent only — right padding removed so prices/tags reach the same right edge as everything else instead of sitting short of it */
	}
	.pmo-dish-name {
		font-size: 15px; /* matches .pmo-dish-desc's size */
	}
	.pmo-price {
		width: 34px; /* was 20px — too narrow for a 2-digit price like "$20", which overflowed the box and ate the gap before the tag ("$20GF" with no space) */
	}
	.pmo-dish-desc {
		padding-right: 40px; /* reverted from 0 — letting the description run full-width made it look cut off under the price/tag */
	}

	/* Footer becomes a full-width Book a Table bar. It's a normal (not fixed)
	   flex item, always visible below the scrollable content since only
	   .pmo-content-wrap grows/scrolls (flex:1) — the footer keeps its natural
	   flex-shrink:0 size and position at the bottom of the panel. */
	.pmo-legend {
		display: none;
	}
	.pmo-footer {
		justify-content: center;
	}
	.pmo-footer .pmo-btn-solid {
		width: 100%;
		justify-content: center;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 15px; /* +3px over the base 12px */
		border-radius: 0; /* panel's own bottom corner rounding clips this via overflow:hidden instead */
	}
}