/* =========================================================================
   Be Kind Tattooing — header.css
   Cream bar · logo left · nav centre · booking + cart right · hamburger < md
   ========================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bk-cream);
	border-bottom: 1px solid var(--bk-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--bk-space-2);
	min-height: var(--bk-header-h);
}

/* Three zones so the nav sits centred. The actions zone is content-sized and
   never shrinks (flex: 0 0 auto) so the "Make a booking" pill + cart always
   stay on one line; branding + nav share the remaining space. */
.site-branding { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.bk-primary-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; }
.site-header__actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

/* Logo */
.site-branding .custom-logo,
.site-branding img {
	height: 52px;
	width: auto;
	max-width: none;
}
.custom-logo-link { display: inline-flex; align-items: center; }

/* Primary nav */
.bk-primary-nav .bk-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
}
.bk-primary-nav .bk-menu a {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--bk-charcoal);
	font-weight: 500;
	font-size: 1rem;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.bk-primary-nav .bk-menu a:hover { text-decoration: none; color: var(--bk-green); }
.bk-primary-nav .bk-menu .current-menu-item > a,
.bk-primary-nav .bk-menu .current_page_item > a,
.bk-primary-nav .bk-menu .current-menu-ancestor > a {
	border-bottom-color: var(--bk-mustard);
	color: var(--bk-charcoal);
}

/* Booking button in the bar (desktop) */
.site-header__book { padding: 0.7em 1.3em; }

/* The in-menu booking button only exists for the mobile panel */
.bk-primary-nav__book { display: none; }

/* Cart */
.bk-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--bk-charcoal);
	border-radius: 50%;
}
.bk-cart:hover { color: var(--bk-green); }
.bk-cart__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bk-mustard);
	color: var(--bk-charcoal);
	border-radius: var(--bk-radius-pill);
	font-family: var(--bk-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
}
.bk-cart__count.is-empty { display: none; }

/* Hamburger — hidden on desktop/tablet, shown on mobile */
.bk-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bk-charcoal);
	border-radius: var(--bk-radius-sm);
}
.bk-nav-toggle__close { display: none; }
.bk-nav-toggle[aria-expanded="true"] .bk-nav-toggle__open { display: none; }
.bk-nav-toggle[aria-expanded="true"] .bk-nav-toggle__close { display: block; }

/* ---------- Mobile (< 768px): nav collapses to a dropdown panel -------- */
@media (max-width: 767px) {
	.bk-nav-toggle { display: inline-flex; }

	/* Desktop booking pill hides; cart + burger stay in the bar */
	.site-header__book { display: none; }
	.site-header__actions { flex: 0 0 auto; }
	.site-branding { flex: 1 1 auto; }

	.bk-primary-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bk-cream);
		border-bottom: 1px solid var(--bk-line);
		box-shadow: var(--bk-shadow-sm);
		padding: var(--bk-space-2) var(--bk-gutter) var(--bk-space-3);
	}
	.bk-primary-nav:not(.is-open) { display: none; }

	.bk-primary-nav .bk-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.bk-primary-nav .bk-menu li { border-bottom: 1px solid var(--bk-line); }
	.bk-primary-nav .bk-menu a {
		display: block;
		padding: 0.9rem 0;
		font-size: 1.05rem;
		border-bottom: 0;
	}
	.bk-primary-nav .bk-menu .current-menu-item > a { color: var(--bk-green); }

	.bk-primary-nav__book {
		display: inline-flex;
		width: 100%;
		margin-top: var(--bk-space-3);
	}

	/* Anchor the dropdown to the header */
	.site-header { position: sticky; }
	.site-header__inner { position: relative; }
}

/* Keep the nav visible/inline on desktop even if a stale class lingers */
@media (min-width: 768px) {
	.bk-primary-nav.is-open { position: static; }
}