/* Header floats above the hero image (positioned over the banner, not
   pushing it down) but is NOT pinned to the viewport — position:absolute
   instead of fixed, so it scrolls away naturally with the rest of the page. */
.site-header {
	position: absolute;
	top: 24px;
	left: 16px;
	right: 16px;
	max-width: 1344px;
	margin-inline: auto;
	z-index: 100;
	background: var(--color-white);
	box-shadow: 0 16px 40px rgba(6, 10, 20, 0.22);
}

.site-header__inner {
	/* .mobile-nav is a DOM child of .site-header, not a sibling — its
	   z-index:90 only competes against other children of .site-header, not
	   against .site-header's own z-index:100. Without its own stacking
	   context here, this (unpositioned) content paints below the
	   positioned .mobile-nav overlay and the logo/close button disappear
	   behind it once the overlay opens. */
	position: relative;
	z-index: 91;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	height: 75px;
	padding-inline: var(--space-6);
}

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

.site-logo__img {
	height: 30px;
	width: auto;
}

.custom-logo-link img {
	max-height: 36px;
	width: auto;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.primary-nav__link {
	color: var(--color-text-dark);
	transition: color .2s var(--ease-out);
	font-weight: 400;
	font-size: 14px;
	line-height: 165%;
	letter-spacing: 0%;
}

.primary-nav__link:hover {
	color: var(--color-teal);
}

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

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-dark);
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	padding: 0;
	color: var(--color-navy);
}

/* Two separate SVGs swapped by visibility, not a single icon rotated via
   transform — thin (2px) lines rotated 45deg via CSS suffer visibly uneven
   anti-aliasing at this icon size, reading as a "crooked" X. Fixed shapes
   render crisp at any size/zoom. */
.nav-toggle__icon--close {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: block;
}

/* Full-screen overlay (not a dropdown under the header) — .site-header
   stays position:absolute/z-index:100 on top of it, so the logo + the
   hamburger-morphed-into-an-X toggle remain visible and clickable to
   close, matching the mockup's single persistent top bar. */
.mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--color-white);
	overflow-y: auto;
	padding: 110px var(--space-5) var(--space-6);
}

.mobile-nav.is-open {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

body.nav-open {
	overflow: hidden;
}

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.mobile-nav__list a {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 165%;
	letter-spacing: 0%;
}

.mobile-nav__lang {
	align-self: flex-start;
	font-weight: 400;
	font-size: 14px;
	line-height: 165%;
	letter-spacing: 0%;
}

@media (max-width: 1024px) {
	.primary-nav {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.site-header__inner {
		padding-inline: 16px;
	}

	/* Floats transparently over whatever hero photo sits at the top of the
	   page for the entire range where the hamburger nav is in play — same
	   position:absolute floating behavior as desktop, just without
	   desktop's opaque white bar + shadow underneath it. */
	.site-header {
		background: var(--color-white);;
		box-shadow: none;
	}

	/* nav-toggle needs to read against the dark hero photo (closed state)
	   but against .mobile-nav's own opaque white overlay once it's open —
	   gate the icon's own color on the same body.nav-open class
	   nav-toggle.js already toggles. */
	.nav-toggle {
		color: var(--color-black);
	}

	body.nav-open .nav-toggle {
		color: var(--color-navy);
	}
}

@media (max-width: 640px) {
	/* No left/right/top/max-width override here — the base .site-header
	   rule above (top:24px, left/right:32px, max-width:1344px) already
	   floats it inset to match .container's own width on any viewport
	   narrower than ~1408px, mobile included. */

	.site-header__inner {
		padding-inline: var(--space-4);
		gap: var(--space-3);
		height: 64px;
	}

	.site-logo__img {
		height: 24px;
	}

	.site-header__actions .lang-switch {
		display: none;
	}
}

/* Footer */
.site-footer {
	background: #151515;
	color: var(--color-white);
	padding-top: var(--space-8);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: clamp(var(--space-9), 12vw, 180px);
	padding-bottom: var(--space-7);
}

/* Footer uses logo-footer.svg (see template-parts/header/logo.php variant
   param) — same icon colors, wordmark pre-recolored white for the dark bg. */
.site-footer__columns {
	display: flex;
	gap: clamp(var(--space-9), 12vw, 180px);
}

.site-footer__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__column a {
	color: var(--color-text-white);
	transition: color .2s var(--ease-out);
	font-weight: 400;
	font-size: 12px;
	line-height: 165%;
	letter-spacing: 0%;
}

.site-footer__column a:hover {
	color: var(--color-white);
}


@media (max-width: 768px) {
	.site-footer__inner {
		flex-direction: column;
		gap: var(--space-6);
	}

	.site-footer__columns {
		gap: var(--space-7);
	}
}