/**
 * BrewHub H3 — site chrome.
 *
 * Two jobs live here.
 *
 * First the header's action group. Below 900px the Book a Table button steps
 * aside, and below 416px the phone control follows it: the sticky bar at the
 * foot of the screen already carries both actions, and a rigid phone number in
 * a 320px row leaves the lockup so little space that the wordmark — held at a
 * fixed 58px height — is squeezed to under half its drawn width.
 *
 * Then the sticky bar the footer prints — full width with the two actions
 * splitting the screen on a phone, a centred floating pill on desktop. Because
 * it is fixed, everything else that lives at the bottom of the viewport is
 * given clearance from here: the to-top disc rises above it, the footer's
 * copyright row gains breathing room, and the page itself ends on enough
 * empty ground that the bar never covers the last line of content.
 */

:root {
	/* The bar's own height, and the clearance the rest of the page keeps
	   below it. iOS reports the home-indicator strip through env(); on every
	   other device the fallback resolves to zero and nothing moves. */
	--bh-sticky-h: 2.13rem;
	--bh-sticky-safe: env(safe-area-inset-bottom, 0px);
	--bh-sticky-space: calc(var(--bh-sticky-h) + var(--bh-sticky-safe));
}

/* Header actions ---------------------------------------------------------- */

/*
 * The control prints the number itself, and a phone number that breaks after
 * the area code is not a phone number, so it is held on one line. That also
 * makes it rigid, which is what the two widths below have to answer for.
 */
body.bh .bh-header__cta--call {
	white-space: nowrap;
}

/* Under 900px the sticky bar owns "Book a Table", so the header drops it. */
@media (max-width: 56.25em) {
	body.bh .bh-header__cta:not(.bh-header__cta--call) {
		display: none;
	}
}

/*
 * Under 416px the phone control goes with it. Measured at 320px: lockup 151 +
 * gap 24 + number 115 + gap 11 + burger 39 = 340px asking for 272px of row.
 * Nothing in that line can give way except the logo, and its height is pinned
 * at 58px, so it absorbs the whole shortfall in width alone and the wordmark
 * draws 45% narrower than it was made. The sticky bar's left half is the same
 * tel: link on the same screen, so the header keeps the lockup and the burger
 * and loses nothing.
 */
@media (max-width: 26em) {
	body.bh .bh-header__cta--call {
		display: none;
	}
}

/* The sticky quick-action bar --------------------------------------------- */

.bh-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95;
	display: flex;
	align-items: stretch;
	background: var(--bh-ink);
	border-top: 1px solid var(--bh-border);
	padding-bottom: var(--bh-sticky-safe);
	box-shadow: 0 -18px 38px -22px rgba(0, 0, 0, 0.95);
}

/* The theme's global guard already wins, but a class that owns a display
   value carries its own so it can never outlive the attribute. */
.bh-sticky[hidden] {
	display: none;
}

.bh-sticky__btn {
	flex: 1 1 50%;
	min-width: 0;
	min-height: var(--bh-sticky-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.51rem 0.7rem;
	font-family: var(--bh-body);
	/* Two words at 0.16em tracking still have to clear a 320px screen. */
	font-size: clamp(0.63rem, 2.5vw, 0.72rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bh-sticky__btn svg {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	fill: currentColor;
	translate: 0 -0.04em;
}

.bh-sticky__btn span {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Call is the loud half: the deep red field with a cream label. The link
   colours are stated on both states because the theme's global link hover
   would otherwise pull the label to gold on a terracotta ground. */
body.bh .bh-sticky__btn--call {
	background: var(--bh-terracotta);
	color: var(--bh-cream);
}

body.bh .bh-sticky__btn--call:hover,
body.bh .bh-sticky__btn--call:focus {
	/* The evening register the theme already uses for an oxblood hover. */
	background: #5a2224;
	color: var(--bh-cream);
}

/* Book is the quiet half: ink, a cream label, and a gold hairline dividing
   it from the call. */
body.bh .bh-sticky__btn--book {
	background: var(--bh-ink);
	color: var(--bh-cream);
	border-left: 1px solid var(--bh-gold-soft);
}

body.bh .bh-sticky__btn--book:hover,
body.bh .bh-sticky__btn--book:focus {
	background: var(--bh-field);
	color: var(--bh-gold);
}

/*
 * The desktop pill clips to its own border-radius and the buttons fill it edge
 * to edge, so the luxury layer's focus ring — drawn 2px clear of the control —
 * is cut away in full and the bar reads as having no focus state at all. These
 * two draw their ring inside the button instead. The selector carries one class
 * more than the global rule so it wins whatever order the parts load in.
 */
body.bh .bh-sticky .bh-sticky__btn:focus-visible {
	outline-offset: -3px;
	box-shadow: none;
}

/* Desktop: the bar lifts off the edge and becomes a pill, sized to its own
   labels and floated over the page on a deep shadow. */
@media (min-width: 61.25em) {
	:root {
		--bh-sticky-h: 1.89rem;
		--bh-sticky-space: calc(var(--bh-sticky-h) + 1.6rem + var(--bh-sticky-safe));
	}

	.bh-sticky {
		right: auto;
		left: 50%;
		bottom: calc(1.6rem + var(--bh-sticky-safe));
		translate: -50% 0;
		width: auto;
		max-width: calc(100% - 3rem);
		padding-bottom: 0;
		border: 1px solid var(--bh-border);
		border-radius: 999px;
		overflow: hidden;
		box-shadow:
			0 28px 60px -24px rgba(0, 0, 0, 0.95),
			0 10px 24px -14px rgba(0, 0, 0, 0.7);
	}

	.bh-sticky__btn {
		flex: 0 0 auto;
		padding-inline: 1.7rem;
		font-size: 0.72rem;
		letter-spacing: 0.18em;
	}
}

/* Clearance for everything the bar would otherwise cover ------------------- */

/* The page ends on enough ground that the last line of content is never
   under the bar. The footer and the body share the ink ground, so this
   reads as part of the footer rather than as a gap below it. */
body.bh {
	padding-bottom: var(--bh-sticky-space);
}

/* A little extra air on the copyright row, which is the last thing a reader
   scrolls past before the bar. */
body.bh .bh-footer__bottom {
	padding-bottom: 1.8rem;
}

/* The to-top disc is fixed bottom-right and would land on the bar; it rises
   above it instead. */
body.bh .bh-totop {
	bottom: calc(5.5rem + var(--bh-sticky-safe));
}

/* In-page anchors land above the bar too. */
html {
	scroll-padding-bottom: var(--bh-sticky-space);
}

/* -------------------------------------------------------------------------
 * Header: keep the row on one line, and keep the logo its own shape.
 *
 * The bar carries eight menu items, a Book a Table button and the phone
 * number. Flex was allowed to solve the overflow by squeezing children, so
 * "Book a Table" broke across three lines, "Group Dining" across two, and the
 * logo — a flex item like any other — was squashed narrower than its artwork.
 * Nothing here wraps any more: the spacing and type tighten with the viewport
 * instead, and the inline nav stands down to the burger before it ever gets
 * that cramped.
 * ---------------------------------------------------------------------- */

body.bh .bh-header__row {
	flex-wrap: nowrap;
	gap: clamp(0.7rem, 1.6vw, 1.5rem);
}

/* The logo is artwork, not a flex accordion. */
body.bh .bh-logo {
	flex: 0 0 auto;
}

body.bh .bh-logo img {
	display: block;
	width: auto;
	height: clamp(2.5rem, 3.6vw, 3.75rem);
	max-width: none;
	object-fit: contain;
}

/* The links close ranks rather than breaking a label in half. */
body.bh .bh-nav {
	min-width: 0;
}

body.bh .bh-nav__list {
	flex-wrap: nowrap;
	gap: clamp(0.65rem, 1.5vw, 2rem);
}

body.bh .bh-nav__list > li {
	flex: 0 0 auto;
}

body.bh .bh-nav__list > li > a {
	white-space: nowrap;
	font-size: clamp(0.72rem, 0.85vw, 0.86rem);
	letter-spacing: 0.06em;
}

/*
 * The burger drawer repeats this same list, and the rule above only reaches
 * the top level — `> li > a` never matches a child, which left sub-items
 * rendering half again as large as the parents they hang under. Children read
 * at the size of their own parent, on both the drawer and the desktop panel.
 */
body.bh .bh-nav__list .sub-menu a {
	font-size: clamp(0.72rem, 0.85vw, 0.86rem);
	letter-spacing: 0.06em;
}

/* The two actions hold their size and their line. */
body.bh .bh-header__actions {
	flex: 0 0 auto;
}

body.bh .bh-header__actions .bh-btn {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-inline: clamp(0.85rem, 1.5vw, 1.7rem);
	font-size: clamp(0.7rem, 0.9vw, 0.82rem);
}

/*
 * Stand the inline nav down earlier. Below this width the eight items, the
 * button and the number cannot share a line at a readable size, and the
 * burger — which already holds the same menu — is the honest answer.
 */
@media (max-width: 71.25em) {
	body.bh .bh-nav {
		display: none;
	}

	body.bh .bh-burger {
		display: block;
	}
}

/* Menu mega-panel ---------------------------------------------------------- */

/*
 * The Menus item opens a full-width band of photograph cards — one per
 * course, led by the whole board. The panel anchors to the header, not the
 * list item, so it can run edge to edge; the item itself therefore stands
 * down from the positioning context it normally provides.
 */
/*
 * The header is already the panel's positioned ancestor in both of its
 * states — absolute while transparent over the hero, sticky once scrolled —
 * so it needs no positioning of its own here. Repositioning it (an earlier
 * revision used relative) pulls it out of the overlay and paints an opaque
 * band above the hero.
 */
@media (min-width: 71.26em) {
	body.bh .bh-nav__list > li.bh-mega-host {
		position: static;
	}
}

.bh-mega {
	position: absolute;
	inset: 100% 0 auto 0;
	z-index: 80;
	background: var(--bh-ink);
	border-block: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
	padding: 1.5rem 0 1.7rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--bh-ease);
}

body.bh .bh-nav__list > li.bh-mega-host:hover .bh-mega,
body.bh .bh-nav__list > li.bh-mega-host:focus-within .bh-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bh-mega__grid {
	list-style: none;
	/* Block margins only: .bh-shell centres itself with margin-inline auto,
	   and zeroing that pinned the whole card row to the left edge. */
	margin-block: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1rem;
}

.bh-mega__card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.bh-mega__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

/* The label needs its own ground on any photograph. */
.bh-mega__card::after {
	content: '';
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(180deg, rgba(22, 17, 15, 0) 0%, rgba(22, 17, 15, 0.85) 100%);
}

.bh-mega__label {
	position: absolute;
	inset: auto 0.9rem 0.9rem;
	z-index: 1;
	color: var(--bh-cream);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.35;
}

.bh-mega__card:hover,
.bh-mega__card:focus-visible {
	border-color: var(--bh-gold);
}

.bh-mega__card:hover img,
.bh-mega__card:focus-visible img {
	transform: scale(1.06);
}

/* Hero actions: the board leads, the reservation follows it. */
.bh-slide__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.9rem;
}

body.bh .bh-slide__actions .bh-btn--ghost {
	border-color: var(--bh-gold-soft);
	color: var(--bh-cream);
}

body.bh .bh-slide__actions .bh-btn--ghost:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

/* A dish still waiting for its photograph: the house plate, not a borrowed
   picture of something else. Same circle as a real shot, so the grid keeps
   its rhythm. The card's own `img` rule would otherwise blow the lotus up to
   full plate size, so both sides are stated here. */
body.bh .bh-product__photo {
	/* A grid item shrink-wraps, which leaves the plate's percentage width with
	   nothing to resolve against — it collapsed to the width of its border. */
	display: block;
	width: 100%;
}

body.bh .bh-product__await {
	display: grid;
	place-items: center;
	width: min(13rem, 70%);
	aspect-ratio: 1;
	margin: 0 auto 0.8rem;
	border-radius: 50%;
	background: var(--bh-ink);
	border: 1px solid var(--bh-gold-soft);
}

body.bh .bh-product__await .bh-lotus {
	width: 34%;
	height: auto;
	/* The mark is square artwork; stating it keeps the row from collapsing
	   while the lazy image is still on its way. */
	aspect-ratio: 1;
	margin: 0;
	border-radius: 0;
	opacity: 0.9;
}

/*
 * Narrow screens: the hours strip is pinned to the hero's bottom edge, so a
 * hero carrying two actions and a full sentence of copy runs straight into
 * it. Below this width the hero is allowed to be as tall as its content and
 * the strip simply follows the text instead of sitting on top of it.
 */
@media (max-width: 43.75em) {
	body.bh .bh-hero {
		min-height: 0;
		padding-top: 6.5rem;
	}

	body.bh .bh-hero__strip {
		position: static;
		background: rgba(22, 17, 15, 0.85);
	}

	body.bh .bh-hero__stage {
		padding-block: 2rem 1.5rem;
	}

	/* Two full-width actions read better than two half-width ones that wrap
	   their labels. */
	body.bh .bh-slide__actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.bh .bh-slide__actions .bh-btn {
		justify-content: center;
	}
}/* A comfortable touch target without a visible size change. *//* Specials board: the Everyday Thali card and the Buy 1 Get 1 Free featured
   menu, side by side on the oxblood band that used to hold the chefs. */
body.bh .bh-specials {
	background: var(--bh-oxblood, #6e2b2e);
	padding-block: clamp(4rem, 8vw, 6.5rem);
}

body.bh .bh-specials .bh-eyebrow,
body.bh .bh-specials .bh-display {
	color: var(--bh-cream);
}

body.bh .bh-specials__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	align-items: stretch;
}

body.bh .bh-specials__card {
	border-radius: 14px;
	padding: clamp(1.8rem, 3.5vw, 2.8rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

body.bh .bh-specials__card--thali {
	background: var(--bh-cream);
	color: var(--bh-ink);
}

body.bh .bh-specials__card--bogo {
	background: var(--bh-ink);
	color: var(--bh-cream);
	border: 1px solid rgba(200, 138, 54, 0.4);
}

body.bh .bh-specials__tag {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-terracotta, #dd644c);
}

body.bh .bh-specials__card--bogo .bh-specials__tag {
	color: var(--bh-gold);
}

body.bh .bh-specials__name {
	margin: 0;
	font-family: var(--bh-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 500;
}

body.bh .bh-specials__note {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
	opacity: 0.85;
}

body.bh .bh-specials__thalis {
	list-style: none;
	margin: 0.4rem 0 0.6rem;
	padding: 0;
	width: 100%;
}

body.bh .bh-specials__thalis > li {
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(22, 17, 15, 0.14);
}

body.bh .bh-specials__thalis > li:last-child {
	border-bottom: 0;
}

body.bh .bh-specials__row {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
}

body.bh .bh-specials__row h4 {
	margin: 0;
	font-family: var(--bh-display);
	font-size: 1.15rem;
	font-weight: 600;
	white-space: nowrap;
}

body.bh .bh-specials__dots {
	flex: 1;
	border-bottom: 2px dotted rgba(22, 17, 15, 0.3);
	transform: translateY(-4px);
}

body.bh .bh-specials__row .bh-price {
	color: var(--bh-oxblood, #6e2b2e);
	font-weight: 700;
	white-space: nowrap;
}

body.bh .bh-specials__thalis p {
	margin: 0.35rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
	opacity: 0.72;
}

/* The stacked Buy 1 / Get 1 / Free lockup, set like the printed card. */
body.bh .bh-specials__stack {
	margin: 0.2rem 0 0;
	font-family: var(--bh-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: 0.02em;
	display: flex;
	flex-direction: column;
}

body.bh .bh-specials__stack span {
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	color: var(--bh-cream);
}

body.bh .bh-specials__stack em {
	font-style: normal;
	font-size: clamp(2.6rem, 6vw, 3.9rem);
	color: var(--bh-gold);
}

body.bh .bh-specials__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.bh .bh-specials__picks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem 1.2rem;
	width: 100%;
}

body.bh .bh-specials__picks li {
	position: relative;
	padding-left: 1.1rem;
	font-size: 0.95rem;
}

body.bh .bh-specials__picks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bh-gold);
}

body.bh .bh-specials__fine {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.6;
}

body.bh .bh-specials__card .bh-btn {
	margin-top: auto;
}

@media (max-width: 860px) {
	body.bh .bh-specials__grid {
		grid-template-columns: 1fr;
	}

	body.bh .bh-specials__picks {
		grid-template-columns: 1fr;
	}
}

/* Buy-1-Get-1 badge on menu rows, and the specials ribbon on the menu page. */
body.bh .bh-b1g1 {
	display: inline-block;
	margin-left: 0.55rem;
	padding: 0.14rem 0.5rem;
	border-radius: 999px;
	background: var(--bh-gold);
	color: var(--bh-ink);
	font-family: var(--bh-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

body.bh .bh-menuribbon {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border: 1px solid rgba(200, 138, 54, 0.45);
	border-radius: 12px;
	padding: 1rem 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: center;
	text-align: center;
}

body.bh .bh-menuribbon p {
	margin: 0;
	font-size: 0.92rem;
}

body.bh .bh-menuribbon strong {
	color: var(--bh-gold);
	font-weight: 700;
}

/* The middle pin on the quick-action bar: directions, icon-only, a gold
   square key between the two labelled halves. Both states carry their own
   colours so the global link hover cannot pull the icon to gold-on-gold. */
body.bh .bh-sticky__btn--map {
	flex: 0 0 auto;
	padding-inline: 1.1rem;
	/* The brand gold, taken down to bronze: the bright key read louder than
	   the call half. Cream pin for contrast on the darker ground. */
	background: #8a5e20;
	color: var(--bh-cream);
}

body.bh .bh-sticky__btn--map svg {
	width: 1.3em;
	height: 1.3em;
}

body.bh .bh-sticky__btn--map:hover,
body.bh .bh-sticky__btn--map:focus {
	background: #6d4a19;
	color: var(--bh-cream);
}