/* Z-Header */

.zw-header {
	background-color: var(--zw-header-bg);
	background-image: var(--zw-header-bg-image);
	background-size: cover;
	background-position: center;
	-webkit-backdrop-filter: blur(var(--zw-header-blur));
	backdrop-filter: blur(var(--zw-header-blur));
	border-bottom: var(--zw-header-divider-width) solid var(--zw-header-divider-color);
	position: relative;
	z-index: 100;
}

.zw-header--no-divider {
	border-bottom-width: 0;
}

.zw-header__corner-image {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--zw-header-corner-width);
	height: auto;
	pointer-events: none;
	z-index: 1;
}

.zw-header__corner-image--top-left {
	right: auto;
	left: 0;
}

.zw-header--sticky {
	position: sticky;
	top: 0;
}

/*
 * Overlay mode: the header is pulled out of normal document flow, so a
 * transparent/blurred background actually shows whatever is underneath
 * (the hero image) instead of blank page background. Without this, a
 * transparent header sitting in normal flow above the hero section has
 * nothing behind it but the page background.
 *
 * position:absolute (not fixed) here on purpose — it floats over the hero
 * at the top of the page but scrolls away with the rest of the content,
 * same as a Normal header would. Overlay is not sticky on its own; add
 * the Sticky switcher too if it should also stay pinned while scrolling.
 */
.zw-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-bottom-color: transparent;
}

/* Both switched on: float over the hero AND stay pinned while scrolling. */
.zw-header--overlay.zw-header--sticky {
	position: fixed;
}

/*
 * position:fixed is positioned relative to the viewport UNLESS an ancestor
 * has a transform/filter/perspective/will-change/contain, which makes that
 * ancestor the containing block instead — and if that ancestor also has no
 * other content, it collapses to zero height and clips the header right
 * out of view. Elementor's section/column/widget wrappers can pick up
 * these properties from motion-effect or performance settings, so reset
 * them specifically wherever they'd interfere with an overlay header.
 * Non-destructive (unlike moving the header in the DOM): every Elementor
 * per-instance style still targets the header in its original wrapper.
 */
.elementor-section:has(.zw-header--overlay),
.elementor-container:has(.zw-header--overlay),
.elementor-column:has(.zw-header--overlay),
.elementor-widget:has(.zw-header--overlay),
.elementor-widget-wrap:has(.zw-header--overlay),
.elementor-widget-container:has(.zw-header--overlay) {
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	will-change: auto !important;
	contain: none !important;
}

/*
 * Only the two viewport-fixed cases need pushing below the WP admin bar —
 * position:sticky and position:fixed both ignore <html>'s own admin-bar
 * margin-top. Plain overlay (position:absolute, no Sticky) already scrolls
 * with the page and inherits that margin naturally, so it's excluded here
 * to avoid double-offsetting it.
 */
body.admin-bar .zw-header--sticky,
body.admin-bar .zw-header--overlay.zw-header--sticky {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .zw-header--sticky,
	body.admin-bar .zw-header--overlay.zw-header--sticky {
		top: 46px;
	}
}

.zw-header__inner {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: var(--zw-header-pad-top) var(--zw-header-pad-right) var(--zw-header-pad-bottom) var(--zw-header-pad-left);
}

.zw-header__brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1;
}

.zw-header__logo-image {
	display: block;
	max-height: var(--zw-logo-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	flex-shrink: 0;
}

.zw-header__brand-name {
	font-family: var(--zw-font-display);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--zw-cream);
	text-transform: uppercase;
}

.zw-header__accent {
	color: var(--zw-orange);
}

.zw-header__tagline {
	font-family: var(--zw-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--zw-muted-text);
	text-transform: uppercase;
	margin-top: 4px;
}

.zw-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.zw-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Secondary pages (e.g. Work With Us) that should only live in the
 * hamburger dropdown, not the main desktop nav bar — marked with this
 * class via the menu item's own "CSS Classes" field in Appearance →
 * Menus. Only hidden here; .zw-header__mobile-list has no matching rule,
 * so it still shows there.
 */
.zw-header__menu .zw-burger-only {
	display: none;
}

.zw-header__menu a {
	font-family: var(--zw-font-body);
	font-weight: var(--zw-nav-font-weight);
	font-size: var(--zw-nav-font-size);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--zw-cream);
	text-decoration: none;
	transition: color 0.15s ease;
}

.zw-header__menu a:hover {
	color: var(--zw-orange);
}

.zw-header__menu .current-menu-item > a,
.zw-header__menu .current_page_item > a {
	color: var(--zw-orange);
}

.zw-header__nav-placeholder {
	font-family: var(--zw-font-body);
	font-size: 13px;
	color: var(--zw-muted-text);
	margin: 0;
}

.zw-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zw-header__actions .zw-btn {
	padding: var(--zw-header-cta-padding-v, 8px) var(--zw-header-cta-padding-h, 16px);
	font-size: var(--zw-header-cta-font-size, 12px);
	border-radius: var(--zw-header-cta-radius, 4px);
}

.zw-header__burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--zw-hamburger-line-gap);
	width: var(--zw-hamburger-size);
	height: var(--zw-hamburger-size);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.zw-header__burger span {
	display: block;
	width: var(--zw-hamburger-line-width);
	height: var(--zw-hamburger-line-height);
	background-color: var(--zw-hamburger-color);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/*
 * Morphs the icon into an X on open: first line rotates down-right, last
 * line rotates up-right to meet it, anything in between just fades out.
 * Works for any line count (2+) since it only targets first/last.
 */
.zw-header--animate-burger .zw-header__burger span:not(:first-child):not(:last-child) {
	transition: opacity 0.15s ease;
}

.zw-header--animate-burger.is-open .zw-header__burger span:not(:first-child):not(:last-child) {
	opacity: 0;
}

.zw-header--animate-burger.is-open .zw-header__burger span:first-child {
	transform: translateY(calc((var(--zw-hamburger-lines) - 1) / 2 * (var(--zw-hamburger-line-gap) + var(--zw-hamburger-line-height)))) rotate(45deg);
}

.zw-header--animate-burger.is-open .zw-header__burger span:last-child {
	transform: translateY(calc((var(--zw-hamburger-lines) - 1) / -2 * (var(--zw-hamburger-line-gap) + var(--zw-hamburger-line-height)))) rotate(-45deg);
}

.zw-header__mobile-menu {
	display: none;
	flex-direction: column;
	background-color: var(--zw-mobile-menu-bg);
	border-top: 1px solid var(--zw-border);
	padding: 20px 32px 28px;
}

.zw-header__mobile-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.zw-header__mobile-list li {
	padding: var(--zw-mobile-menu-item-padding) 0;
}

.zw-header__mobile-list--divider li:not(:last-child) {
	border-bottom: 1px solid var(--zw-mobile-menu-divider-color);
}

.zw-header__mobile-list a {
	font-family: var(--zw-font-body);
	font-weight: var(--zw-mobile-menu-font-weight);
	font-size: var(--zw-mobile-menu-font-size);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--zw-cream);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.zw-header__mobile-list--arrows a::after {
	content: "\2192";
	font-size: 0.7em;
	margin-left: 12px;
	flex-shrink: 0;
}

.zw-header__mobile-list .current-menu-item > a,
.zw-header__mobile-list .current_page_item > a {
	color: var(--zw-orange);
}

.zw-header__mobile-actions {
	display: flex;
	gap: 12px;
}

.zw-header__mobile-actions .zw-btn {
	flex: 1 1 50%;
	justify-content: center;
}

.zw-header.is-open .zw-header__mobile-menu {
	display: flex;
}

@media (max-width: 900px) {
	.zw-header__nav,
	.zw-header__actions .zw-btn--ghost {
		display: none;
	}

	/*
	 * The hamburger stays visible at every width (base rule above), and on
	 * mobile only the Reserve (primary) button stays beside it — Order
	 * (ghost) hides here along with the nav links.
	 */

	.zw-header__inner {
		padding: var(--zw-header-pad-mobile-top) var(--zw-header-pad-mobile-right) var(--zw-header-pad-mobile-bottom) var(--zw-header-pad-mobile-left);
	}
}