/**
 * TBH Kitchen — menu ordering interface.
 *
 * Mobile-first. The ordering rows are the most important thing on the site at
 * 375-430px, so they are designed at that width first and allowed to relax on
 * larger screens.
 */

/* Brand palette — maroon #4B1612 and gold #C7891E, taken from the logo.
 *
 * The --tbh-green* variable names are kept deliberately. They are used in
 * 79 places across twelve files, and renaming every one risks leaving a
 * stale reference that silently falls back to an unstyled default.
 * Repointing the values is a single change that cannot half-apply. Read
 * "green" as "primary" throughout.
 *
 * Supporting tones are derived from the two brand colours rather than
 * picked by eye, and every text pairing meets WCAG AA:
 *   charcoal on cream 16.5 · gray on cream 4.9 · maroon on cream 14.2
 *   gold on maroon 4.9 · goldLight on maroon 7.7 · goldDeep on cream 4.7
 */
:root {
	--tbh-green: #4B1612;        /* primary — brand maroon */
	--tbh-green-deep: #310E0C;   /* darkest, for footers and deep fills */
	--tbh-green-mid: #6E2A21;    /* hover and raised states */
	--tbh-gold: #C7891E;
	--tbh-gold-light: #DCB674;
	--tbh-gold-deep: #976817;    /* AA-safe gold for text on cream */
	--tbh-cream: #FCFAF5;
	--tbh-cream-warm: #F9F3E9;
	--tbh-white: #FFFFFF;
	--tbh-charcoal: #2D1411;
	--tbh-gray: #826863;
	--tbh-line: #EFDEC0;
	--tbh-chilli: #B23A22;       /* spice marker — warmer, sits with maroon */
	--tbh-veg: #4A7C39;          /* the one green that stays: veg convention */

	--tbh-radius: 10px;
	--tbh-radius-lg: 16px;
	--tbh-shadow: 0 2px 8px rgba(75, 22, 18, .07);
	--tbh-shadow-lg: 0 12px 40px rgba(49, 14, 12, .18);

	--tbh-serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
	--tbh-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------
 * Hidden attribute
 *
 * Any `display` declaration outranks the browser's default
 * `[hidden] { display: none }`, so elements toggled via the hidden
 * property stayed visible. This broke menu search (filtered rows kept
 * showing) and left the Add button rendered alongside the quantity
 * stepper. One authoritative rule for the whole component avoids having
 * to remember a guard beside every future display declaration.
 * ------------------------------------------------------------- */

.tbh-menu [hidden],
.tbh-drawer [hidden],
[hidden].tbh-item,
[hidden].tbh-cat,
[hidden].tbh-add__btn,
[hidden].tbh-stepper {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Menu shell
 * ------------------------------------------------------------- */

/* Shares --tbh-gutter with the theme so the menu, cart and checkout all
   sit on the same measure at every width. A hardcoded value here drifted
   from the cart by 4px on mobile. The fallback keeps the plugin correct if
   the theme is ever swapped for one that does not define the token. */
.tbh-menu {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 var(--tbh-gutter, 24px);
	font-family: var(--tbh-sans);
	color: var(--tbh-charcoal);
}

.tbh-menu-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--tbh-gray);
}

/* ---------------------------------------------------------------
 * Sticky category navigation
 * ------------------------------------------------------------- */

/* The sticky bar previously bled outside its container with a negative
   margin so its background met the container edge. Between roughly 1040
   and 1088px the container is already as wide as the viewport, so there
   is nothing to bleed into and the overhang became a horizontal
   scrollbar. Keeping the bar inside its container removes the failure
   mode entirely; the background still spans the full measure because the
   container is what defines that measure. */
.tbh-menu__bar {
	position: sticky;
	top: var(--tbh-header-h, 64px);
	z-index: 40;
	background: var(--tbh-cream);
	padding-block: 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--tbh-line);
}

/* Fade the trailing edge so a cut-off pill reads as "scroll for more"
   rather than as a broken layout. */
.tbh-catnav {
	position: relative;
}

.tbh-catnav::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 2px;
	width: 44px;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--tbh-cream) 78%);
}

.tbh-catnav__list {
	display: flex;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0 0 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 20px;
}

@media (min-width: 768px) {
	.tbh-catnav__list {
		justify-content: center;
		flex-wrap: wrap;
		row-gap: 9px;
	}

	/* With pills wrapped onto multiple centred rows there is no overflow
	   edge left to fade. */
	.tbh-catnav::after {
		display: none;
	}
}

.tbh-catnav__list::-webkit-scrollbar {
	display: none;
}

.tbh-catnav__link {
	display: block;
	white-space: nowrap;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--tbh-white);
	border: 1px solid var(--tbh-line);
	color: var(--tbh-green);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.tbh-catnav__link:hover,
.tbh-catnav__link:focus-visible {
	background: var(--tbh-green);
	border-color: var(--tbh-green);
	color: var(--tbh-gold-light);
}

.tbh-catnav__link.is-active {
	background: var(--tbh-green);
	border-color: var(--tbh-green);
	color: var(--tbh-gold-light);
}

/* Search — a positioning context for its icon, clear button and dropdown. */

.tbh-menu__search {
	position: relative;
	margin-top: 10px;
}

.tbh-menu__search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tbh-gray);
	pointer-events: none;
}

/* !important on the padding: the parent theme and WooCommerce both style
   form inputs with higher specificity, which reset the left padding to
   16px and let the magnifier icon sit on top of the placeholder text. */
.tbh-menu__search .tbh-menu__search-input {
	width: 100%;
	padding: 11px 40px 11px 42px !important;
	border: 1px solid var(--tbh-line);
	border-radius: 999px;
	background: var(--tbh-white);
	font-family: inherit;
	font-size: .9rem;
	color: var(--tbh-charcoal);
}

.tbh-menu__search-input:focus {
	outline: 2px solid var(--tbh-gold);
	outline-offset: 1px;
	border-color: transparent;
}

/* type="search" renders a native magnifier and a clear "x" in some
   browsers, which stacked on top of the SVG icon and the custom clear
   button — hence two search icons in the same field. */
.tbh-menu__search-input::-webkit-search-decoration,
.tbh-menu__search-input::-webkit-search-results-button,
.tbh-menu__search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.tbh-menu__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.tbh-menu__search-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	border-radius: 50%;
	color: var(--tbh-gray);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.tbh-menu__search-clear[hidden] {
	display: none;
}

.tbh-menu__search-clear:hover,
.tbh-menu__search-clear:focus-visible {
	background: var(--tbh-cream-warm);
	color: var(--tbh-charcoal);
}

/* Dropdown panel */

.tbh-search-drop {
	position: absolute;
	z-index: 60;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--tbh-white);
	border: 1px solid var(--tbh-line);
	border-radius: var(--tbh-radius-lg);
	box-shadow: var(--tbh-shadow-lg);
	max-height: min(420px, 60vh);
	overflow-y: auto;
	padding: 6px;
}

.tbh-search-drop[hidden] {
	display: none;
}

.tbh-search-drop__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 11px 12px;
	border: none;
	background: transparent;
	border-radius: 10px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.tbh-search-drop__item:hover,
.tbh-search-drop__item.is-active {
	background: var(--tbh-cream-warm);
}

.tbh-search-drop__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tbh-search-drop__name {
	font-size: .9rem;
	font-weight: 600;
	color: var(--tbh-charcoal);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tbh-search-drop__cat {
	font-size: .74rem;
	color: var(--tbh-gray);
}

.tbh-search-drop__price {
	flex-shrink: 0;
	font-weight: 700;
	font-size: .88rem;
	color: var(--tbh-green);
}

.tbh-search-drop__empty {
	margin: 0;
	padding: 22px 16px;
	text-align: center;
	color: var(--tbh-gray);
	font-style: italic;
	font-size: .88rem;
}

/* Momentary highlight when a search result is jumped to in the list. */
.tbh-item.is-highlighted {
	background: var(--tbh-cream-warm);
	box-shadow: inset 3px 0 0 var(--tbh-gold);
	transition: background 1.4s ease, box-shadow 1.4s ease;
}

/* ---------------------------------------------------------------
 * Category sections
 * ------------------------------------------------------------- */

.tbh-cat {
	padding-top: 34px;
	scroll-margin-top: 120px;
}

.tbh-cat__head {
	margin-bottom: 18px;
}

.tbh-cat__title {
	font-family: var(--tbh-serif);
	font-size: clamp(1.7rem, 5vw, 2.35rem);
	font-weight: 600;
	line-height: 1.12;
	color: var(--tbh-green);
	margin: 0;
	letter-spacing: .012em;
}

/* Tapered gold rule beneath each category heading — a printed-menu
   convention, and a cheaper signal of quality than any extra ornament. */
.tbh-cat__title::after {
	content: "";
	display: block;
	width: 58px;
	height: 2px;
	margin-top: 12px;
	background: linear-gradient(90deg, var(--tbh-gold), rgba(199, 137, 30, .15));
	border-radius: 2px;
}

.tbh-cat__desc {
	margin: 12px 0 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--tbh-gray);
	max-width: 62ch;
}

.tbh-cat__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
 * Menu row
 *
 * Mobile: name/description stacked, price and control on a second line.
 * Desktop: classic menu line with a dotted leader.
 * ------------------------------------------------------------- */

.tbh-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--tbh-line);
	border-radius: 10px;
	transition: background .18s ease;
}

/* Subtle row highlight makes long menus easier to track across, and gives
   the list a more finished feel than bare rules. */
@media (hover: hover) {
	.tbh-item:hover {
		background: rgba(255, 255, 255, .68);
	}
}

.tbh-item:last-child {
	border-bottom: none;
}

.tbh-item__main {
	flex: 1 1 100%;
	min-width: 0;
}

.tbh-item__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.tbh-item__name {
	font-family: var(--tbh-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--tbh-charcoal);
}

.tbh-item__desc {
	margin: 5px 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--tbh-gray);
	max-width: 54ch;
}

/* The dotted leader is desktop-only. */
.tbh-item__leader {
	display: none;
}

.tbh-item__buy {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 100%;
	margin-top: 10px;
}

.tbh-item__price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tbh-green);
	white-space: nowrap;
}

/* WooCommerce wraps prices in its own markup — normalise it. */
.tbh-item__price .woocommerce-Price-amount {
	font-weight: 700;
}

.tbh-item__price del {
	opacity: .5;
	font-weight: 400;
	margin-right: 5px;
}

.tbh-item__unavailable {
	font-size: .8rem;
	color: var(--tbh-gray);
	font-style: italic;
}

/* ---------------------------------------------------------------
 * Indicators
 * ------------------------------------------------------------- */

/* A word, not a row of dots. Kept quiet — it is a caution, not a feature,
   so it sits at caption size and never competes with the dish name. */
.tbh-spice {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	background: rgba(178, 58, 34, .1);
	color: var(--tbh-chilli);
	line-height: 1.5;
}

/* Level 3+ earns a solid fill: at that point it is a genuine warning. */
.tbh-spice--3,
.tbh-spice--4 {
	background: var(--tbh-chilli);
	color: #fff;
}

.tbh-badge--veg {
	width: 13px;
	height: 13px;
	border: 1.5px solid var(--tbh-veg);
	border-radius: 2px;
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}

.tbh-badge--veg::after {
	content: "";
	position: absolute;
	inset: 2.5px;
	background: var(--tbh-veg);
	border-radius: 50%;
}

/* ---------------------------------------------------------------
 * Add / stepper control
 *
 * 44px minimum touch target throughout — these are the primary
 * interaction on mobile.
 * ------------------------------------------------------------- */

.tbh-add {
	margin-left: auto;
	position: relative;
}

.tbh-add.is-busy {
	opacity: .55;
	pointer-events: none;
}

.tbh-add__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 84px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--tbh-green);
	border-radius: 999px;
	background: var(--tbh-white);
	color: var(--tbh-green);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}

.tbh-add__btn:hover,
.tbh-add__btn:focus-visible {
	background: var(--tbh-green);
	color: var(--tbh-gold-light);
}

.tbh-add__btn:active {
	transform: scale(.96);
}

.tbh-add__plus {
	font-size: 1.05rem;
	line-height: 1;
	font-weight: 500;
}

/* Stepper */

.tbh-stepper {
	display: inline-flex;
	align-items: center;
	background: var(--tbh-green);
	border-radius: 999px;
	min-height: 44px;
	padding: 0 4px;
}

.tbh-stepper[hidden] {
	display: none;
}

.tbh-stepper__btn {
	width: 38px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--tbh-gold-light);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
	transition: background .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.tbh-stepper__btn:hover,
.tbh-stepper__btn:focus-visible {
	background: rgba(255, 255, 255, .12);
}

.tbh-stepper__qty {
	min-width: 26px;
	text-align: center;
	color: var(--tbh-white);
	font-size: .95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Variants (e.g. Lamb Chops 2pc / 4pc) */

.tbh-variants {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.tbh-variant {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 12px;
	background: var(--tbh-cream-warm);
	border-radius: var(--tbh-radius);
}

.tbh-variant__label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--tbh-green);
}

.tbh-item--has-variants .tbh-item__buy {
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------- */

@media (min-width: 768px) {

	.tbh-menu {
		padding: 0 24px;
	}

	.tbh-item {
		flex-wrap: nowrap;
		align-items: baseline;
		gap: 0;
		padding: 18px 0;
	}

	.tbh-item__main {
		flex: 0 1 auto;
		max-width: 62%;
	}

	/* Dotted leader connecting dish to price, as on a printed menu. */
	.tbh-item__leader {
		display: block;
		flex: 1 1 auto;
		min-width: 24px;
		margin: 0 12px;
		border-bottom: 1px dotted var(--tbh-line);
		transform: translateY(-4px);
	}

	.tbh-item__buy {
		flex: 0 0 auto;
		margin-top: 0;
		gap: 18px;
	}

	.tbh-item--has-variants {
		flex-wrap: wrap;
	}

	.tbh-item--has-variants .tbh-variants {
		flex-direction: row;
		width: auto;
	}

	.tbh-variant {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.tbh-cat {
		padding-top: 48px;
	}

	/* Search first in the source order would be wrong for keyboards, so the
	   bar stays a two-row grid: pills scroll on their own line, search sits
	   beneath. Overlapping the two in a single flex row was what pushed the
	   pills underneath the search box. */
	.tbh-menu__bar {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		padding-block: 16px;
	}

	.tbh-catnav {
		min-width: 0;
	}

	.tbh-menu__search {
		margin-top: 0;
		max-width: 380px;
		width: 100%;
		justify-self: center;
	}
}

@media (min-width: 1024px) {
	.tbh-menu {
		padding: 0;
	}
}

/* ---------------------------------------------------------------
 * Motion preferences
 * ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tbh-add__btn,
	.tbh-stepper__btn,
	.tbh-catnav__link {
		transition: none;
	}

	.tbh-add__btn:active {
		transform: none;
	}
}