/*
 * Header — three-tier stack: utility bar (32px) + main (80px) + announcement (44px).
 * Total fixed height = 156px on desktop. Sticky on scroll.
 */

.liv-site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--liv-ink-900);
	color: var(--liv-paper);
	transition:
		background-color var(--liv-transition-slow),
		backdrop-filter var(--liv-transition-slow),
		-webkit-backdrop-filter var(--liv-transition-slow),
		box-shadow var(--liv-transition);
}
/* Neutralize the WP block-layout flow margin between sibling template
 * parts — the three bars are flush by design. */
.liv-site-header > * { margin-block: 0; }
.liv-site-header[data-scrolled="true"] {
	box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.35);
}

/* ─── Utility bar ─────────────────────────────────────────────────── */

.liv-utility {
	background: var(--liv-black);
	color: var(--liv-ink-300);
	height: var(--liv-utility-h);
	display: flex;
	align-items: center;
	font-size: 0.625rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.liv-utility__inner {
	width: 100%;
	max-width: var(--liv-container-wide);
	margin-inline: auto;
	padding-inline: var(--liv-gutter);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
}
.liv-utility__list {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.liv-utility__list li + li {
	position: relative;
	padding-left: 1rem;
}
.liv-utility__list li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 10px;
	width: 1px;
	background: var(--liv-ink-500);
	transform: translateY(-50%);
}
.liv-utility__list li { padding-right: 1rem; }
.liv-utility__list li:last-child { padding-right: 0; }
.liv-utility__list a {
	color: var(--liv-ink-300);
	font-size: 0.625rem;
	letter-spacing: 0.25em;
	transition: color var(--liv-transition);
}
.liv-utility__list a:hover { color: var(--liv-paper); }

.liv-utility__account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--liv-ink-300);
	width: 28px;
	height: 28px;
	border-radius: var(--r-pill);
	transition: color var(--liv-transition), background-color var(--liv-transition);
}
.liv-utility__account:hover { color: var(--liv-paper); background: rgba(255,255,255,0.06); }
.liv-utility__account svg { width: 14px; height: 14px; }

@media (max-width: 767px) {
	.liv-utility { display: none; }
}

/* ─── Main header ─────────────────────────────────────────────────── */

.liv-main-header {
	background: var(--liv-ink-900);
	height: var(--liv-main-h);
	display: flex;
	align-items: center;
}
.liv-main-header__inner {
	width: 100%;
	max-width: var(--liv-container-wide);
	margin-inline: auto;
	padding-inline: var(--liv-gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
}

.liv-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
}
.liv-logo svg { height: 60px; width: auto; }

@media (max-width: 767px) {
	.liv-main-header { height: var(--liv-main-h-mobile); }
	.liv-logo svg { height: 45px; }
	.liv-main-header__inner { gap: 0.75rem; grid-template-columns: auto 1fr auto; }
}

/* Primary nav. */
.liv-nav-primary {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2.5rem;
}
.liv-nav-primary__list {
	display: flex;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.liv-nav-primary__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--liv-paper);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1rem 0;
	transition: color var(--liv-transition);
}
.liv-nav-primary__link:hover,
.liv-nav-primary__link[aria-current="page"] {
	color: var(--liv-leaf-300);
}
.liv-nav-primary__link svg { width: 12px; height: 12px; }

/* Hide primary nav on mobile (replaced by hamburger drawer). */
@media (max-width: 1023px) {
	.liv-nav-primary { display: none; }
}

/* Right cluster: search + pill CTA (desktop), search + hamburger (mobile). */
.liv-header-cluster {
	display: inline-flex;
	align-items: center;
	justify-self: end;
	gap: 0.5rem;
}
@media (max-width: 1023px) {
	.liv-header-cluster .liv-pill { display: none; }
}

/* ─── Announcement bar ────────────────────────────────────────────── */

.liv-announce {
	position: relative;
	background: var(--liv-ink-700);
	color: var(--liv-paper);
	min-height: var(--liv-announce-h);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.liv-announce::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: var(--liv-leaf-500);
}
.liv-announce__inner {
	width: 100%;
	max-width: var(--liv-container-wide);
	margin-inline: auto;
	padding-inline: var(--liv-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	text-align: center;
}
.liv-announce__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--liv-leaf-500);
	flex: 0 0 auto;
}
.liv-announce__title {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--liv-paper);
}
.liv-announce__detail {
	font-size: 0.8125rem;
	color: var(--liv-ink-300);
}
.liv-announce__cta {
	color: var(--liv-leaf-300);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--liv-transition), transform var(--liv-transition);
}
.liv-announce__cta:hover { color: var(--liv-leaf-500); }
.liv-announce__cta svg { width: 14px; height: 10px; }
.liv-announce__cta:hover svg { transform: translateX(3px); transition: transform var(--liv-transition); }

.liv-announce__dismiss {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: transparent;
	border: 0;
	color: var(--liv-ink-300);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-pill);
	cursor: pointer;
}
.liv-announce__dismiss:hover { color: var(--liv-paper); background: rgba(255,255,255,0.06); }
.liv-announce__dismiss svg { width: 12px; height: 12px; }

.liv-announce[data-dismissed="true"] { display: none; }

@media (max-width: 767px) {
	.liv-announce { min-height: var(--liv-announce-h-mobile); padding-block: 0.5rem; }
	.liv-announce__inner { padding-inline-end: 2.5rem; gap: 0.5rem; }
	.liv-announce__detail { display: none; } /* keep mobile compact */
}

/* ─── Glassy overlay (homepage hero) ──────────────────────────────── *
 * JS sets data-overlay="true" when a .liv-hero exists on the page,
 * and toggles data-over-hero based on whether the hero is currently
 * under the header. When both are true, the three-tier stack becomes
 * a single frosted-glass plate; otherwise the header keeps its solid
 * dark fill (the original look for non-hero pages and post-scroll). */

.liv-site-header[data-overlay="true"][data-over-hero="true"] {
	background: rgba(10, 10, 10, 0.45);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.liv-site-header[data-overlay="true"][data-over-hero="true"] .liv-utility,
.liv-site-header[data-overlay="true"][data-over-hero="true"] .liv-main-header,
.liv-site-header[data-overlay="true"][data-over-hero="true"] .liv-announce {
	background: transparent;
}
/* Suppress the scroll drop-shadow while in glass state — looks muddy
 * through the blur. The inner hairline above is enough separation. */
.liv-site-header[data-overlay="true"][data-over-hero="true"][data-scrolled="true"] {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ─── Header accent stripe ────────────────────────────────────────── *
 * Decorative brand-green bar at the bottom of the sticky header stack.
 * Sits below the announcement bar; travels with the header on scroll. */

.liv-header-accent {
	display: block;
	height: 3px;
	margin: 0;
	padding: 0;
	background: var(--liv-leaf-500);
}