/* ============================================================
   BALOCH HOTEL — SITE HEADER
   ------------------------------------------------------------
   Markup: template-parts/bh-header.php
   Behaviour: assets/js/header.js

   Mobile  (<1025px):  [ burger ]   [ logo ]   [ cart ]
   Desktop (>=1025px): [ logo ]  [ nav ]  [ cart ]

   The announcement strip has a FIXED height, so the sticky offset is
   a constant (--bh-announce-h) and nothing needs measuring at runtime.
   The previous Elementor header needed JavaScript for this because its
   strip grew when the text wrapped. Here the height is pinned and the
   text is allowed to use two lines on mobile.

   PREREQUISITE: html/body must not be a scroll container or
   `position: sticky` silently stops working. The Customizer's
   Additional CSS uses `overflow-x: clip` (not `hidden`) for exactly
   this reason — do not change it back.
   ============================================================ */

:root {
	/* Two lines' worth on mobile: the strapline is ~452px of text and the
	   viewport is 390px, so it cannot fit on one line. The height stays a
	   fixed constant either way, which is what keeps the sticky offset
	   exact without measuring anything at runtime. */
	--bh-announce-h: 46px;
	--bh-bar-h: 64px;
	--bh-header-z: 999;
}

@media (min-width: 1025px) {
	:root {
		--bh-announce-h: 42px;
		--bh-bar-h: 82px;
	}
}


/* ------------------------------------------------------------
   1. STICKY SHELL
   The whole header sticks, pulled up by exactly the strip's height,
   so the strip scrolls away and the bar lands flush at y=0.
   ------------------------------------------------------------ */

.bh-header {
	position: sticky;
	top: calc(var(--bh-announce-h) * -1);
	z-index: var(--bh-header-z);
	background-color: var(--bh-cream);
}

body.admin-bar .bh-header {
	top: calc(32px - var(--bh-announce-h));
}

@media screen and (max-width: 782px) {
	body.admin-bar .bh-header {
		top: calc(46px - var(--bh-announce-h));
	}
}


/* ------------------------------------------------------------
   2. ANNOUNCEMENT STRIP
   ------------------------------------------------------------ */

.bh-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bh-announce-h);
	padding: 0 12px;
	overflow: hidden;
	background: var(--bh-red);
	color: var(--bh-white);
	text-align: center;
}

.bh-announce p {
	margin: 0;
	font-family: var(--bh-font-body);
	/* The message is short enough to hold one line on any phone, so this
	   no longer has to shrink to fit — the old strapline was ~450px of
	   text and needed a clamp down to 9.5px. Keep an eye on this if the
	   copy ever gets longer again: the strip's height is fixed, and the
	   sticky offset is derived from it. */
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-wrap: balance;
}

@media (min-width: 1025px) {
	.bh-announce p {
		font-size: 13px;
		white-space: nowrap;
	}
}

.bh-announce span {
	color: var(--bh-gold);
	margin: 0 2px;
}


/* ------------------------------------------------------------
   3. BAR
   ------------------------------------------------------------ */

.bh-bar {
	background: var(--bh-cream);
	border-bottom: 1px solid var(--bh-line-soft);
}

.bh-bar__inner {
	display: grid;
	/* Equal outer columns keep the logo optically centred no matter
	   how wide the burger or cart get. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	width: min(1200px, 100%);
	height: var(--bh-bar-h);
	margin: 0 auto;
	padding: 0 14px;
}


/* ------------------------------------------------------------
   4. BURGER  (mobile/tablet only)
   ------------------------------------------------------------ */

/* Elementor Kit 5 styles bare `button` elements with the brand red and
   white text, which turned this toggle into a solid red box. These rules
   are scoped through .bh-header so they out-specify that global rule
   without needing !important. */
.bh-header button.bh-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--bh-dark);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.bh-header button.bh-burger:hover {
	background: var(--bh-line-soft);
}

.bh-header button.bh-burger:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: 2px;
}

.bh-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 22px;
	height: 15px;
}

/* Three real bars. The old ElementsKit toggle rendered as a solid red
   square with a single line; this is drawn from scratch instead. */
.bh-burger__line {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.22s ease, opacity 0.18s ease;
}

/* Morph to an X while the drawer is open. */
.bh-burger[aria-expanded="true"] .bh-burger__line:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.bh-burger[aria-expanded="true"] .bh-burger__line:nth-child(2) {
	opacity: 0;
}

.bh-burger[aria-expanded="true"] .bh-burger__line:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}


/* ------------------------------------------------------------
   5. LOGO
   ------------------------------------------------------------ */

.bh-brand {
	justify-self: center;
	display: flex;
	align-items: center;
	min-width: 0;
}

.bh-brand a {
	display: block;
	line-height: 0;
}

.bh-brand__img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--bh-bar-h) - 18px);
	max-width: 150px;
}


/* ------------------------------------------------------------
   6. CART
   ------------------------------------------------------------ */

.bh-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	color: var(--bh-dark);
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.bh-cart:hover {
	color: var(--bh-red);
	background: var(--bh-line-soft);
}

.bh-cart:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: 2px;
}

/* Visually hidden, but read aloud — carries the live item count so the
   numeric badge itself can stay aria-hidden. */
.bh-cart__sr,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bh-cart__icon {
	width: 24px;
	height: 24px;
}

.bh-cart__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--bh-green);
	color: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.bh-cart__count.is-empty {
	display: none;
}


/* ------------------------------------------------------------
   7. DESKTOP NAV
   ------------------------------------------------------------ */

.bh-nav {
	display: none;
}

@media (min-width: 1025px) {
	/* Desktop drops the burger and re-orders to logo | nav | cart.
	   Matches the specificity of the base rule above (.bh-header
	   button.bh-burger), otherwise this loses and the burger shows. */
	.bh-header button.bh-burger {
		display: none;
	}

	.bh-bar__inner {
		grid-template-columns: auto 1fr auto;
	}

	.bh-brand {
		justify-self: start;
	}

	.bh-nav {
		display: block;
		justify-self: center;
	}

	.bh-menu {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bh-menu li {
		position: relative;
	}

	.bh-menu a {
		display: block;
		padding: 10px 16px;
		border-radius: 6px;
		font-family: var(--bh-font-body);
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.2px;
		color: var(--bh-dark);
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.18s ease;
	}

	.bh-menu a:hover,
	.bh-menu .current-menu-item > a,
	.bh-menu .current_page_item > a {
		color: var(--bh-red);
	}

	.bh-menu a:focus-visible {
		outline: 2px solid var(--bh-red);
		outline-offset: 2px;
	}

	/* --- dropdown --- */
	.bh-menu .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 7px;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	/* `top: 100%` and not `calc(100% + 6px)`: a gap between the trigger
	   and the panel sits outside the <li>, so the pointer leaves the
	   hover target while crossing it and the menu closes under the
	   cursor. The 6px of breathing room is the panel's own padding. */
	.bh-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 274px;
		margin: 0;
		padding: 6px;
		list-style: none;
		border: 1px solid var(--bh-line);
		border-radius: 14px;
		background: var(--bh-cream);
		box-shadow: 0 18px 40px -22px rgba(62, 42, 29, 0.55);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	}

	.bh-menu li:hover > .sub-menu,
	.bh-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.bh-menu .sub-menu a {
		padding: 7px 8px;
		border-radius: 10px;
		white-space: normal;
	}

	.bh-menu .sub-menu a:hover,
	.bh-menu .sub-menu a:focus {
		background: var(--bh-white);
		color: var(--bh-dark);
	}
}


/* ------------------------------------------------------------
   7b. PRODUCT ITEMS INSIDE A MENU
   Markup comes from inc/nav-menu.php, which renders product
   sub-items as thumbnail + name + price. Shared by the desktop
   dropdown and the mobile drawer.
   ------------------------------------------------------------ */

.bh-menu-card {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.bh-menu-card__thumb {
	display: block;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--bh-line-soft);
}

.bh-menu-card__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bh-menu-card__name {
	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--bh-dark);
}

.bh-menu-card__price {
	font-family: var(--bh-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--bh-muted);
}

.bh-menu-card__price del {
	display: none;
}

.bh-menu-card__price bdi {
	white-space: nowrap;
}


/* ------------------------------------------------------------
   8. MOBILE DRAWER
   ------------------------------------------------------------ */

.bh-drawer[hidden] {
	display: none;
}

.bh-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.bh-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(29, 23, 18, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bh-drawer.is-open .bh-drawer__scrim {
	opacity: 1;
}

.bh-drawer__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(320px, 86vw);
	height: 100%;
	padding: 18px 0 28px;
	background: var(--bh-cream);
	box-shadow: 6px 0 28px -14px rgba(29, 23, 18, 0.5);
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bh-drawer.is-open .bh-drawer__panel {
	transform: translateX(0);
}

.bh-header button.bh-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 12px 16px;
	padding: 0;
	border: 1px solid var(--bh-line);
	border-radius: 50%;
	background: transparent;
	color: var(--bh-dark);
	cursor: pointer;
}

.bh-drawer__close svg {
	width: 18px;
	height: 18px;
}

.bh-drawer__close:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: 2px;
}

.bh-drawer__menu,
.bh-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-drawer__menu li {
	position: relative;
}

.bh-drawer__menu a {
	display: block;
	padding: 14px 22px;
	font-family: var(--bh-font-body);
	font-size: 17px;
	font-weight: 500;
	color: var(--bh-dark);
	text-decoration: none;
}

.bh-drawer__menu a:hover,
.bh-drawer__menu .current-menu-item > a {
	color: var(--bh-red);
	/* A tint, not `--bh-white`: on the cream panel a white fill reads as
	   a separate card rather than a highlighted row. */
	background: var(--bh-line-soft);
}

/* --- expandable parent --- */

/* The toggle is injected by header.js, and the collapse only applies
   once it exists (`--js`). Without JavaScript the sub-menu stays open,
   so the products are always reachable. */
.bh-drawer__menu--js .sub-menu {
	display: none;
}

.bh-drawer__menu--js .bh-has-sub.is-open > .sub-menu {
	display: block;
}

/* Leave room for the toggle so a long label never runs under it. */
.bh-drawer__menu--js .bh-has-sub > a {
	padding-right: 60px;
}

.bh-header button.bh-drawer__toggle {
	position: absolute;
	top: 4px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bh-dark);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bh-header button.bh-drawer__toggle:hover {
	background: var(--bh-line-soft);
}

.bh-drawer__toggle:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: 2px;
}

/* Chevron drawn from two borders — no icon font, no extra request. */
.bh-drawer__toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.bh-drawer__toggle[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}

.bh-drawer__menu .sub-menu {
	padding: 2px 12px 10px;
}

.bh-drawer__menu .sub-menu a {
	padding: 8px 10px;
	border-radius: 12px;
	font-size: 15px;
}

/* Stop the page behind the drawer from scrolling. */
body.bh-drawer-open {
	overflow: hidden;
}


/* ------------------------------------------------------------
   9. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bh-burger__line,
	.bh-cart,
	.bh-drawer__panel,
	.bh-drawer__scrim,
	.bh-menu a,
	.bh-menu .sub-menu {
		transition: none;
	}
}