/* ==========================================================================
   Announcement bar, site header, primary nav, mobile drawer
   ========================================================================== */

/* --- Announcement bar ---------------------------------------------------- */

.topbar {
	background: var(--c-green-deep);
	color: var(--c-white);
	font-size: var(--fs-xs);
}

.topbar-hidden .topbar {
	display: none;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--topbar-h);
}

/* The promo line is one run of text, not a row of flex items: as a flex
   container the Dismiss link became its own flex item and dropped to a line of
   its own as soon as the promos wrapped. Live flows it inline at the end of the
   copy, so this does too. */
.topbar__text {
	display: block;
	margin: 0;
	padding-block: var(--s-2);
	text-align: center;
}

.topbar__track {
	display: inline;
}

.topbar__item {
	white-space: nowrap;
}

.topbar__sep {
	margin-inline: var(--s-2);
	color: rgba(255, 255, 255, 0.45);
}

/* Below the desktop breakpoint live tightens the promo line so it keeps its
   line count: one row at 768, two at 390. Ours ran a row longer at both. */
@media (max-width: 1024px) {
	.topbar__sep {
		margin-inline: 5px;
	}

	.topbar__text {
		font-size: 13px;
	}

	/* The promo line is not band content: it runs the full width of the screen,
	   as live's does. Holding it inside the tablet container (600px of content)
	   is what wrapped it onto a second row. */
	/* Out-ranks the tablet container cap in layout.css, which is band width. */
	.topbar .topbar__inner {
		max-width: none;
		padding-inline: 12px;
	}

	.topbar__text {
		padding-block: 4px;
		line-height: 1.4;
	}

	/* Smaller type here, so the dismiss needs a touch more padding to keep its
	   44px target. */
	.topbar__dismiss {
		padding-block: 14px;
	}
}

/* No smaller step on a phone: live keeps the promo at the same size there and
   simply wraps to a second line, and matching that keeps the header's height
   the same as live's. */

.topbar__dismiss {
	/* The hit area is grown by a pseudo-element rather than by padding: padding
	   here made the link a taller line box, which pushed it onto a line of its
	   own and gave the bar an extra row that live does not have. */
	position: relative;
	margin-left: var(--s-3);
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.75;
}

/* Padding on an *inline* element grows the box it is clicked through without
   changing the line it sits on — which is what the earlier inline-block version
   got wrong, giving the link a taller line box and its own row. */
.topbar__dismiss {
	padding-block: 13px;
	padding-inline: 4px;
}

.topbar__dismiss:hover {
	color: var(--c-white);
	opacity: 1;
}

.topbar__text,
.topbar__track {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.topbar__text {
		/* Keeps the promo line to a single row on tablet, as on live. */
		font-size: var(--fs-2xs);
		line-height: 1.5;
		gap: 6px;
	}

	.topbar__track {
		gap: 6px;
	}
	/* The bar wraps to two lines on phones, as the original does. */
}

/* --- Site header --------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	/* The live header is a translucent dark overlay: it reads near-black over
	   the hero photo and mid-grey over white pages. Never a solid bar. */
	background: var(--c-header-overlay);
	color: var(--c-white);
	transition: background var(--t-base), box-shadow var(--t-base);
}

.site-header.is-stuck {
	background: rgba(12, 12, 12, 0.82);
	box-shadow: var(--shadow-sm);
}

/* The header overlays the page, so content must start underneath it. */
.site-main {
	margin-top: calc(var(--header-h) * -1);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 54px;
}

@media (min-width: 1025px) {
	.site-header__inner {
		min-height: var(--header-h);
		gap: var(--s-7);
	}
}

.site-header__brand {
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	/* The burger sits beside the logo below the desktop breakpoint, as live has
	   it, so the gap that pushes the cart right belongs to the burger, not to
	   the brand. */
	.site-header__brand {
		margin-right: 0;
	}
}

.site-logo {
	display: inline-flex;
	align-items: center;
}

.site-logo__img {
	width: auto;
	max-height: 38px;
	object-fit: contain;
}

@media (min-width: 1025px) {
	.site-logo__img {
		max-height: 44px;
	}
}

.site-logo--text {
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
}

.site-header__burger {
	/* Live shows a light rounded square beside the cart, not a bare glyph. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The visible square stays live's 38px; the control itself is 44 so the tap
	   target clears the accessible minimum. */
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--c-white);
	background-clip: content-box;
	border: 3px solid transparent;
	border: 0;
	border-radius: 9px;
	color: var(--c-green-cart);
}

.site-header__burger .icon {
	width: 20px;
	height: 20px;
}

@media (min-width: 1025px) {
	.site-header__burger {
		display: none;
	}
}

/* --- Primary nav --------------------------------------------------------- */

.site-header__nav {
	display: none;
}

@media (min-width: 1025px) {
	/* One rule: a separate `display:block` later in the file was overriding the
	   flex centring and pinning the nav next to the logo. */
	.site-header__nav {
		flex: 1;
		display: flex;
		justify-content: center;
	}
}

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__item {
	position: relative;
	margin: 0;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding-block: var(--s-3);
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	white-space: nowrap;
	/* 44px target inside a 54px header bar. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.nav__link:hover,
.nav__item.is-current > .nav__link {
	color: var(--c-green);
}

.nav__chevron {
	width: 16px;
	height: 16px;
	transition: transform var(--t-fast);
}

.nav__item--has-children:hover .nav__chevron,
.nav__item--has-children:focus-within .nav__chevron {
	transform: rotate(180deg);
}

.nav__submenu {
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 20;
	min-width: 208px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Square-cornered solid dark panel flush under the header, as on live. */
	background: rgba(40, 45, 40, 0.97);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	transform: translateY(4px);
	visibility: hidden;
	transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.nav__submenu .nav__item {
	margin: 0;
}

.nav__submenu .nav__link {
	display: block;
	padding: var(--s-4) 30px;
	border-radius: 0;
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	white-space: nowrap;
	transition: background var(--t-fast), color var(--t-fast);
}

/* Hover fills the whole row with the brand green. */
.nav__submenu .nav__link:hover,
.nav__submenu .nav__link:focus-visible {
	background: var(--c-green);
	color: var(--c-white);
}

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

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.account-link {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-white);
}

@media (min-width: 768px) {
	.account-link {
		display: inline-flex;
	}
}

.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding: var(--s-2) var(--s-6);
	background: var(--c-green-cart);
	border-radius: var(--r-pill);
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.cart-link:hover {
	background: #1f3624;
	color: var(--c-white);
}

.cart-link__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}

.cart-link__total {
	display: none;
}

@media (min-width: 768px) {
	.cart-link__total {
		display: inline;
	}
}

.cart-link__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Live's header cart glyph measures 27x29. */
.cart-link__icon .icon {
	width: 27px;
	height: 29px;
}

/* Measured on live: an 18px white disc with a blue numeral, overlapping the
   icon's top-right corner — not a chip sitting beside it. */
.cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	background: var(--c-white);
	color: var(--c-cart-badge);
	border-radius: var(--r-pill);
	font-size: 0.625rem;
	font-weight: var(--fw-bold);
	line-height: 1;
}

.cart-link__label,
.cart-link__total {
	/* The live header shows the cart glyph and count only. */
	display: none;
}

/* --- Mobile drawer ------------------------------------------------------- */

.drawer[hidden] {
	display: none;
}

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--c-overlay);
	opacity: 0;
	transition: opacity var(--t-base);
}

.drawer.is-open .drawer__backdrop {
	opacity: 1;
}

.drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, 380px);
	padding: var(--s-5);
	overflow-y: auto;
	background: var(--c-white);
	transform: translateX(-100%);
	transition: transform var(--t-slow);
}

.drawer.is-open .drawer__panel {
	transform: none;
}

/* The logo ships with a white wordmark for the site's dark header, so on the
   drawer's white panel only the frog showed. The head keeps the header's dark
   strip and the logo reads on it, whole. It bleeds to the panel's edges over
   the panel padding. */
.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
	padding: var(--s-3) var(--s-5);
	background: var(--c-dark);
}

.drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: var(--c-white);
	transition: color var(--t-base);
}

.drawer__close:hover,
.drawer__close:focus-visible {
	color: var(--c-green);
}

.drawer__nav {
	padding-block: var(--s-5);
}

.nav--stacked .nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.nav--stacked .nav__link {
	justify-content: space-between;
	min-height: 48px;
	padding: var(--s-3) 0;
	font-size: 1.0625rem;
}

.nav--stacked .nav__submenu {
	position: static;
	min-width: 0;
	margin: 0 0 var(--s-3) var(--s-4);
	padding: 0;
	border: 0;
	border-left: 2px solid var(--c-line-soft);
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	transform: none;
	visibility: visible;
	display: none;
}

.nav--stacked .nav__item--has-children.is-open > .nav__submenu {
	display: block;
}

.nav--stacked .nav__item--has-children.is-open > .nav__link .nav__chevron {
	transform: rotate(180deg);
}

.nav--stacked .nav__submenu .nav__link {
	padding-left: var(--s-4);
}

.drawer__foot {
	margin-top: auto;
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line-soft);
}

.drawer__account {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	margin-top: var(--s-3);
	color: var(--c-body);
	font-size: var(--fs-sm);
}

body.drawer-open {
	overflow: hidden;
}

/* The drawer panel is light, so its nav must not inherit the header's white. */

.drawer .nav__link {
	color: var(--c-ink);
}

.drawer .nav__link:hover {
	color: var(--c-green-deep);
}

.drawer__account {
	color: var(--c-ink);
}

.drawer .site-logo__img {
	filter: none;
}

/* Content starts under the overlay header, so the first block on a page that
   has no image hero needs to clear it. */

.site-main > *:first-child:not(.hero):not(.section--band-top):not(.section--archive):not(.page-article--hero) {
	padding-top: calc(var(--header-h) + var(--s-6));
}

@media (min-width: 1025px) {
	/* Measured: the first heading sits 78px below the header on live. */
	.site-main > *:first-child:not(.hero):not(.section--band-top):not(.section--archive):not(.page-article--hero) {
		padding-top: calc(var(--header-h) + 73px);
	}
}

/* Below the desktop breakpoint live sets the burger beside the logo and leaves
   the cart alone on the right; ours had both bunched on the right. Letting the
   actions box dissolve into the header row puts each control where live has
   it, without touching the markup. */
@media (max-width: 1024px) {
	.site-header__actions {
		display: contents;
	}

	.site-header__brand {
		order: 1;
	}

	.site-header__inner {
		justify-content: flex-start;
		gap: var(--s-4);
	}

	.site-header__burger {
		order: 2;
		margin-right: auto;
	}

	.cart-link {
		order: 3;
	}
}