/**
 * Site header: logo, nav, language switcher, CTA, mobile toggle.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
}

/* Homepage only, JS only (see header-loader-fade.js) — fades/slides the
   header in from the top once the page loader disappears, instead of it
   just sitting there the whole time the loader covers the screen. Gated
   behind .js so a no-JS visitor (who'll never get .is-loader-done added)
   still sees the header normally rather than permanently invisible. */
.js .home .site-header {
	opacity: 0;
	transform: translateY(-24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .home .site-header.is-loader-done {
	opacity: 1;
	/* Must be the literal keyword "none", not translateY(0) — any non-none
	   transform value (even a zero one) makes .site-header a containing
	   block for its position:fixed descendants (the mobile off-canvas
	   .site-header__nav panel + .site-header__backdrop), trapping them
	   inside the header's own small box instead of the viewport. That was
	   the actual cause of the mobile menu rendering behind everything. */
	transform: none;
}

/* On the homepage the hero fills the viewport, so the header floats over it
   transparently instead of sitting in normal flow above it. Once the hero
   has scrolled past (header-scroll-bg.js toggles .is-scrolled), it gets a
   solid background like every other page. */
.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	transition: background 0.2s ease;
}

.home .site-header.is-scrolled {
	background: var(--color-white);
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	/* Intentionally tighter than --container-padding (used by the hero/
	   section content below) — the header sits closer to the edge on purpose. */
	padding: var(--space-5) 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

@media (max-width: 900px) {
	.site-header__inner {
		padding-inline: 24px;
	}
}

@media (max-width: 560px) {
	.site-header__inner {
		padding-inline: 16px;
	}
}

.site-header__logo {
	display: block;
	flex-shrink: 0;
}

.site-header__logo img {
	height: 21px;
	width: auto;
}

.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--text-body);
	color: var(--color-black);
}

.site-header__nav-list a {
	position: relative;
	display: inline-block;
	padding-bottom: var(--space-2);
	transition: color 0.2s ease;
}

.site-header__nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.site-header__nav-list a:hover {
	color: var(--color-primary-text);
}

.site-header__nav-list a:hover::after {
	transform: scaleX(1);
}

.site-header__nav-list .current-menu-item > a,
.site-header__nav-list .current_page_item > a {
	color: var(--color-primary-text);
}

.site-header__nav-list .current-menu-item > a::after,
.site-header__nav-list .current_page_item > a::after {
	transform: scaleX(1);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	flex-shrink: 0;
}

.site-header__toggle {
	display: none;
	position: relative;
	/* Sits above the off-canvas panel (z-index 200) and its backdrop (150)
	   so it stays visible/clickable in the same spot while the menu is
	   open, doubling as the close control (nav-toggle.js's click handler
	   already toggles either way — no JS change needed for that part). */
	z-index: 300;
	width: 20px;
	height: 9px;
	padding: var(--space-2);
}

.site-header__toggle-bar {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 2px;
	background: var(--color-black);
	transition: top 0.3s ease, transform 0.3s ease;
}

/* Adjacent-sibling selector, not :nth-child — the button's first child is
   actually the screen-reader-text span, which would throw off nth-child
   counting. */
.site-header__toggle-bar + .site-header__toggle-bar {
	top: 7px;
}

/* Morphs the two bars into an X, timed with the panel's own 0.3s slide-in
   (see .site-header__nav) — driven by the real aria-expanded state
   nav-toggle.js already sets, so no extra JS/class is needed. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
	top: 3.5px;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar + .site-header__toggle-bar {
	transform: rotate(-45deg);
}

/* Panel content — hidden on desktop, only exists for the mobile off-canvas
   menu below (lang switcher row, footer with CTA + phone). */
.site-header__nav-top,
.site-header__nav-footer {
	display: none;
}

.site-header__backdrop {
	display: none;
}

@media (max-width: 900px) {
	/* Slides in from the right edge; the header toggle (now stays visible
	   above the panel)/backdrop/Escape key (nav-toggle.js) all close it
	   back to translateX(100%). */
	.site-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(85vw, 360px);
		background: var(--color-white);
		padding: var(--space-6) var(--space-5);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 200;
	}

	.site-header__nav.is-open {
		transform: translateX(0);
	}

	.site-header__nav-top {
		display: block;
		margin-bottom: var(--space-8);
	}

	.site-header__nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
		font-size: var(--text-h3);
	}

	.site-header__nav-footer {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		margin-top: auto;
		padding-top: var(--space-5);
		border-top: 1px solid var(--color-border);
	}

	.site-header__nav-footer .btn {
		width: 100%;
	}

	.site-header__phone {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--color-black);
	}

	.site-header__phone svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.site-header__phone-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.site-header__phone-label {
		font-family: var(--font-heading);
		font-size: var(--text-paragraph);
		color: var(--color-gray-500);
	}

	.site-header__phone-number {
		font-family: var(--font-heading);
		font-weight: var(--weight-medium);
		font-size: var(--text-body);
		color: var(--color-black);
	}

	.site-header__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 150;
	}

	.site-header__backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.site-header__actions .btn--outline {
		display: none;
	}

	.site-header__toggle {
		display: block;
	}
}

body.nav-open {
	overflow: hidden;
}