/*
 * Header: logo · centred navigation · yellow CTA.
 * Transparent over the hero, solid once the page scrolls. Below 1000px the
 * navigation and CTA move into a full-screen panel behind a menu button.
 */
.pm-header {
	position: fixed;
	z-index: 100;
	top: var(--pm-admin-bar);
	right: 0;
	left: 0;
	transition:
		background-color 0.3s var(--pm-ease),
		border-color 0.3s var(--pm-ease),
		backdrop-filter 0.3s var(--pm-ease);
	border-bottom: 1px solid transparent;
}

.pm-header.is-scrolled,
.pm-header.is-open {
	border-bottom-color: var(--pm-border);
	background: rgb(7 8 7 / 86%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

.pm-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* Same width as the hero content, so the logo lines up with the hero text. */
	width: var(--pm-container);
	height: var(--pm-header-h);
	margin-inline: auto;
}

.pm-logo {
	display: inline-block;
	text-decoration: none;
}

/* Official logo (558×188 PNG, transparent): ~173px wide at 1440px, as in the reference. */
.pm-logo__img {
	width: clamp(124px, 12vw, 173px);
	height: auto;
}

.pm-header__toggle {
	display: none;
}

/* Desktop: nav and CTA become grid items of the header row. */
.pm-header__menu {
	display: contents;
}

.pm-nav__list {
	display: flex;
	gap: clamp(18px, 2.35vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-nav__list a {
	position: relative;
	display: block;
	padding-block: 10px;
	color: #e9e9e9;
	font-size: clamp(12.5px, 0.94vw, 14px);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.2s var(--pm-ease);
}

.pm-nav__list a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--pm-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--pm-ease);
}

.pm-nav__list a:hover,
.pm-nav__list .current-menu-item > a,
.pm-nav__list a[aria-current="page"] {
	color: var(--pm-accent);
}

.pm-nav__list a:hover::after,
.pm-nav__list .current-menu-item > a::after,
.pm-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

.pm-header__cta {
	justify-self: end;
	min-width: clamp(118px, 10.6vw, 153px);
}

/* Tablet and mobile: menu button + full-screen panel. */
@media (max-width: 999.98px) {
	.pm-header__inner {
		grid-template-columns: 1fr auto;
	}

	/* A backdrop filter would make the fixed panel size itself to the header bar. */
	.pm-header.is-open {
		background: var(--pm-bg);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.pm-header__toggle {
		position: relative;
		z-index: 2;
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--pm-border-strong);
		border-radius: 6px;
		background: rgb(255 255 255 / 4%);
		color: var(--pm-text);
		cursor: pointer;
	}

	.pm-header__toggle .pm-icon {
		grid-area: 1 / 1;
		width: 22px;
		height: 22px;
		transition:
			opacity 0.2s var(--pm-ease),
			transform 0.2s var(--pm-ease);
	}

	.pm-header__toggle-close,
	.is-open .pm-header__toggle-open {
		opacity: 0;
		transform: rotate(-45deg);
	}

	.is-open .pm-header__toggle-close {
		opacity: 1;
		transform: none;
	}

	.pm-header__menu {
		position: fixed;
		z-index: 1;
		top: calc(var(--pm-admin-bar) + var(--pm-header-h));
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 32px var(--pm-gutter) calc(32px + env(safe-area-inset-bottom));
		overflow-y: auto;
		background: var(--pm-bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 0.25s var(--pm-ease),
			transform 0.25s var(--pm-ease),
			visibility 0s linear 0.25s;
	}

	.is-open .pm-header__menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity 0.25s var(--pm-ease),
			transform 0.25s var(--pm-ease),
			visibility 0s;
	}

	.pm-nav__list {
		flex-direction: column;
		gap: 4px;
	}

	.pm-nav__list a {
		display: inline-block;
		padding-block: 10px;
		color: var(--pm-text);
		font-family: var(--pm-font-display);
		font-size: clamp(26px, 6.4vw, 36px);
		font-weight: 800;
		letter-spacing: 0.01em;
		text-transform: uppercase;
	}

	.pm-nav__list a::after {
		bottom: 4px;
		height: 3px;
	}

	.pm-header__cta {
		--pm-btn-h: 52px;
		align-self: stretch;
		justify-self: auto;
		font-size: 13px;
	}
}