/* Mobile / tablet header + overlay nav (loads after home.css). */
:root {
	--hs-header-bar-height: 78px;
}

.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 48px;
	max-width: 48px;
	height: 48px;
	padding: 10px;
	gap: 0;
}

.menu-toggle span:not(.screen-reader-text) {
	display: block;
	width: 24px;
	height: 2px;
	margin: 3px 0;
	flex-shrink: 0;
}

@media (max-width: 980px) {
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "brand lang toggle";
		align-items: center;
		gap: 10px 14px;
		height: var(--hs-header-bar-height);
	}

	.brand-mark {
		grid-area: brand;
		min-width: 0;
	}

	.language-switcher {
		grid-area: lang;
		margin-inline-start: 0;
		justify-self: end;
	}

	.menu-toggle {
		grid-area: toggle;
		justify-self: end;
		z-index: 2;
	}

	.header-cta {
		display: none;
	}

	.primary-menu {
		display: block;
	}

	.primary-menu li {
		margin: 0 0 6px;
	}

	.primary-menu a {
		display: block;
		font-size: clamp(1.2rem, 4vw, 1.45rem);
		font-weight: 600;
		line-height: 1.25;
		padding-block: 5px;
	}

	.primary-nav {
		position: fixed;
		z-index: 101;
		inset: var(--hs-header-bar-height) 0 0;
		padding: 18px 22px max(24px, env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: var(--dark);
		color: #fff;
	}

	.primary-nav.is-open {
		display: block;
	}

	body.menu-open .site-header {
		z-index: 102;
		background: var(--dark);
		color: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}

	body.menu-open .site-header__inner {
		background: transparent;
		border-bottom-color: rgba(255, 255, 255, 0.14);
	}

	body.menu-open .language-switcher {
		color: #fff;
	}

	body.menu-open .language-switcher ul {
		border-color: rgba(255, 255, 255, 0.35);
		background: rgba(255, 255, 255, 0.08);
	}

	body.menu-open .language-switcher a {
		color: #fff;
	}

	body.menu-open .language-switcher .is-active a {
		background: #fff;
		color: var(--dark);
	}

	body.menu-open .language-switcher a:hover {
		background: rgba(255, 255, 255, 0.14);
	}

	body.menu-open .language-switcher .is-active a:hover {
		background: #fff;
		color: var(--dark);
	}

	body.menu-open.home .site-header.is-scrolled {
		background: var(--dark);
		color: #fff;
	}

}