/*
 * Top bar, header, mega menu and the mobile menu.
 *
 * The header sticks to the top, slims as you scroll down and returns as you
 * scroll up, turns to frosted glass past the hero, fills its sky line with
 * reading progress and glows with the page's current light. Slimming only
 * changes the absolutely positioned bar inside a fixed-height sticky box, so
 * the page never moves.
 */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Top bar ---------- */

.pm-topbar {
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-default);
}

.pm-topbar__inner {
	min-height: 46px;
	gap: var(--space-5) var(--space-8);
	padding-block: var(--space-2);
}

.pm-topbar .pm-contact-link {
	margin: 0;
	font-size: var(--fs-caption);
}

.pm-topbar .pm-contact-link a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.pm-topbar .pm-contact-link a:hover {
	color: var(--white);
}

/* One line on phones: the email is in the footer and on Contact. */
@media (max-width: 480px) {

	.pm-topbar .pm-contact-link--email {
		display: none;
	}
}

/* ---------- Header ---------- */

.pm-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	pointer-events: none;
}

.admin-bar .pm-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.pm-header {
	position: absolute;
	inset: 0 0 auto;
	height: var(--header-h);
	pointer-events: auto;
	background: var(--surface-page);
	transition:
		height 420ms var(--ease-door),
		background-color 400ms var(--ease-out);
}

.pm-site-header.is-compact .pm-header {
	height: var(--header-h-compact);
}

.pm-site-header.is-glass .pm-header {
	background: rgba(0, 0, 0, 0.52);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
}

/* Touch screens: a near-solid bar instead of frosted glass. Blurring what
   scrolls beneath a fixed bar is redone every frame, which costs a phone's
   GPU (and battery) more than anything else on the page. */
@media (hover: none), (pointer: coarse) {

	.pm-site-header.is-glass .pm-header {
		background: rgba(0, 0, 0, 0.9);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* A backdrop filter makes the header the containing block of everything
   fixed inside it, which would shrink the open mobile menu to the header's
   box (and let the page show below it). */
.pm-site-header:has(.is-menu-open) .pm-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* The page's current light (dawn to dusk) glows behind the header. */
.pm-header__day {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(55% 180% at var(--day-x, 18%) 0%, rgba(var(--day, 4, 54, 84), 0.55), rgba(var(--day, 4, 54, 84), 0.14) 45%, transparent 75%);
}

/* The sky line under the header fills as you read down the page. */
.pm-header__line,
.pm-header__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.pm-header__line {
	height: 1px;
	background: rgba(189, 238, 255, 0.18);
}

.pm-header__progress {
	height: 3px;
	background: linear-gradient(90deg, var(--sky-400), var(--sky-200));
	box-shadow: 0 0 12px rgba(189, 238, 255, 0.6);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
}

.pm-header__bar {
	position: relative;
	height: 100%;
	max-width: var(--container-max);
	margin: 0 auto !important;
	padding-inline: var(--gutter);
	box-sizing: border-box;
	align-items: center !important;
	gap: var(--space-8);
	flex-wrap: nowrap;
}

.pm-header__bar > * {
	margin-block: 0;
}

.pm-header .wp-block-site-logo {
	display: flex;
	align-items: center;
	flex: none;
}

.pm-header .wp-block-site-logo img {
	width: auto;
	height: 42px;
	transition: height 420ms var(--ease-door);
}

.pm-site-header.is-compact .wp-block-site-logo img {
	height: 30px;
}

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

/* ---------- Desktop navigation ---------- */

.pm-header .pm-nav-desktop {
	margin-left: auto;
	min-width: 0;
	position: static;
	align-self: stretch;
	display: flex;
}

.pm-header__actions {
	align-self: center;
}

/* Below the desktop menu the quote button sits before the menu button, the
   same height. On the narrowest phones the logo and gaps give way so the
   three still fit on one line. */
@media (width <= 68.75rem) {

	.pm-header__actions {
		gap: var(--space-3);
	}

	.pm-header__actions .pm-btn-sm .wp-block-button__link {
		min-height: 44px;
	}
}

@media (max-width: 400px) {

	.pm-header__bar {
		gap: var(--space-2);
	}

	.pm-header .wp-block-site-logo img {
		height: 32px;
	}

	.pm-header__actions {
		gap: var(--space-2);
	}

	.pm-header__actions .pm-btn-sm .wp-block-button__link {
		padding-inline: 12px;
	}
}

.pm-nav-desktop .wp-block-navigation__container {
	height: 100%;
	align-items: stretch;
	gap: 0;
}

.pm-nav-desktop .wp-block-navigation-item {
	position: static;
	align-items: stretch;
}

.pm-nav-desktop .wp-block-navigation-item__content,
.pm-nav-desktop .pm-mega__toggle--label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0 var(--space-4);
	color: var(--text-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--dur-1) var(--ease-out);
}

/* A pool of sky light rises behind an item on hover, like a lamp coming on. */
.pm-nav-desktop .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	top: 8%;
	bottom: 0;
	pointer-events: none;
	background: radial-gradient(60% 90% at 50% 100%, rgba(189, 238, 255, 0.34), rgba(84, 189, 237, 0.12) 45%, transparent 75%);
	opacity: 0;
	transform: translateY(30%) scaleY(0.6);
	transform-origin: 50% 100%;
	transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}

/* The current page keeps its light on and a glowing rule beneath. */
.pm-nav-desktop .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: 0;
	height: 3px;
	background: var(--sky-200);
	box-shadow: 0 0 12px rgba(189, 238, 255, 0.8);
	transform: scaleX(0);
	transition: transform var(--dur-2) var(--ease-curtain);
}

.pm-nav-desktop .wp-block-navigation-item__content:hover,
.pm-nav-desktop .wp-block-navigation-item__content:focus-visible,
.pm-nav-desktop .pm-mega.is-open > .wp-block-navigation-item__content {
	color: var(--white);
}

.pm-nav-desktop .wp-block-navigation-item__content:hover::before,
.pm-nav-desktop .wp-block-navigation-item__content:focus-visible::before,
.pm-nav-desktop .pm-mega.is-open > .wp-block-navigation-item__content::before {
	opacity: 1;
	transform: none;
}

.pm-nav-desktop .current-menu-item > .wp-block-navigation-item__content,
.pm-nav-desktop .current-menu-ancestor > .wp-block-navigation-item__content,
.pm-nav-desktop .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--sky-200);
	font-weight: 700;
}

.pm-nav-desktop .current-menu-item > .wp-block-navigation-item__content::before,
.pm-nav-desktop .current-menu-ancestor > .wp-block-navigation-item__content::before,
.pm-nav-desktop .wp-block-navigation-item__content[aria-current="page"]::before {
	opacity: 0.85;
	transform: none;
}

.pm-nav-desktop .current-menu-item > .wp-block-navigation-item__content::after,
.pm-nav-desktop .current-menu-ancestor > .wp-block-navigation-item__content::after,
.pm-nav-desktop .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.pm-nav-desktop .wp-block-navigation-item__label {
	position: relative;
}

/* Current page: a small lit fanlight above the label, like a light on in
   that room. */
.pm-nav-desktop :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content .wp-block-navigation-item__label::before,
.pm-nav-desktop .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -24px;
	width: 22px;
	aspect-ratio: 313.6 / 154.8;
	transform: translateX(-50%);
	background: var(--sky-200);
	-webkit-mask: var(--fanlight-mask) center / 100% 100% no-repeat;
	mask: var(--fanlight-mask) center / 100% 100% no-repeat;
	filter: drop-shadow(0 0 6px rgba(189, 238, 255, 0.7));
}

.pm-site-header.is-compact .pm-nav-desktop .wp-block-navigation-item__label::before {
	top: -18px;
	width: 18px;
}

/* ---------- Mega menu ---------- */

.pm-mega {
	display: flex;
	align-items: stretch;
}

.pm-mega__link {
	padding-right: var(--space-2) !important;
}

.pm-mega__toggle {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-3) 0 2px;
	border: 0;
	background: none;
	color: var(--text-body);
	cursor: pointer;
}

/* On desktop the panel opens on hover; the chevron button that opens it from
   the keyboard stays out of sight until it has focus. */
@media (hover: hover) and (pointer: fine) {

	.pm-nav-desktop .pm-mega__toggle:not(.pm-mega__toggle--label):not(:focus-visible) {
		width: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
	}

	.pm-nav-desktop .pm-mega__link {
		padding-right: var(--space-4) !important;
	}

	.pm-nav-desktop .pm-mega__toggle--label .pm-mega__caret {
		display: none;
	}
}

.pm-mega__toggle--label {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
}

.pm-mega__caret {
	transition: transform var(--dur-2) var(--ease-out);
}

.pm-mega.is-open .pm-mega__caret {
	transform: rotate(180deg);
}

.pm-mega__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.82);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(189, 238, 255, 0.16);
}

.pm-mega__panel[hidden] {
	display: none;
}

.pm-mega__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(70% 120% at 50% 0%, rgba(6, 79, 114, 0.55), transparent 70%);
}

.pm-mega__inner {
	position: relative;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter);
}

/* The panel's links fade up as it opens. */
@media (prefers-reduced-motion: no-preference) {

	.pm-mega__panel > .pm-mega__inner {
		animation: pm-rise 320ms var(--ease-out) backwards;
	}
}

.pm-mega__inner .wp-block-columns {
	gap: var(--space-12);
	margin: 0;
}

.pm-mega__title {
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(189, 238, 255, 0.16);
	color: var(--sky-200);
	font-size: var(--fs-caption);
	font-weight: 600;
}

.pm-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-mega__links li {
	margin: 0;
}

.pm-mega__links a {
	display: block;
	padding: 7px 0;
	color: var(--text-body);
	font-size: var(--fs-small);
	line-height: 1.45;
	text-decoration: none;
	transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}

.pm-mega__links a:hover,
.pm-mega__links a:focus-visible {
	color: var(--white);
	padding-left: 8px;
}

.pm-mega__links a[aria-current="page"] {
	color: var(--sky-200);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* ---------- Mobile menu (below 1100px) ---------- */

.pm-nav-mobile .wp-block-navigation__responsive-container-open {
	position: relative;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--white);
	cursor: pointer;
}

.pm-nav-mobile .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}

.pm-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--black) !important;
	color: var(--white) !important;
	padding: 0 !important;
	animation: pm-fade-in 260ms var(--ease-out) backwards;
}

/* Light rising from the foot of the open menu. */
.pm-nav-mobile .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(90% 55% at 50% 100%, rgba(6, 79, 114, 0.8), transparent 70%);
}

.pm-nav-mobile .wp-block-navigation__responsive-dialog {
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.pm-nav-mobile .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 14px;
	right: var(--gutter);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sky-200);
	background: var(--sky-200);
	color: var(--black);
}

.pm-nav-mobile .wp-block-navigation__responsive-container-content {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column;
	align-items: stretch !important;
	gap: 0 !important;
	min-height: 100%;
	padding: 72px var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) !important;
}

/* The overlay part ("Mobile menu") adds the call-to-action buttons under the
   menu. Core hides a navigation's own items when an overlay part is set, on
   the basis that the part carries the menu; here the items stay, so the menu
   is edited once, in the header. */
.pm-nav-mobile .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: flex !important;
}

.pm-nav-mobile .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
	display: contents;
}

.pm-nav-mobile .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	flex: 1 0 auto;
	padding-block: var(--space-8);
}

.pm-nav-mobile .wp-block-navigation-item {
	display: block !important;
	padding-block: var(--space-5);
	border-bottom: 1px solid rgba(189, 238, 255, 0.12);
}

@media (prefers-reduced-motion: no-preference) {

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item {
		animation: pm-rise 520ms var(--ease-out) backwards;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 220ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 280ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(4) {
		animation-delay: 340ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(5) {
		animation-delay: 400ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(6) {
		animation-delay: 460ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:nth-child(7) {
		animation-delay: 520ms;
	}

	.pm-nav-mobile .is-menu-open .wp-block-navigation-item:first-child {
		animation-delay: 160ms;
	}
}

.pm-nav-mobile .wp-block-navigation-item__content,
.pm-nav-mobile .pm-mega__toggle--label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	border: 0;
	background: none;
	color: var(--white);
	font-family: inherit;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.pm-nav-mobile .current-menu-item > .wp-block-navigation-item__content,
.pm-nav-mobile .current-menu-ancestor > .wp-block-navigation-item__content,
.pm-nav-mobile [aria-current="page"] {
	color: var(--sky-200);
}

/* An item with a panel opens it as a flyover: the whole row is the toggle
   (the link beneath is still there for the keyboard), with a chevron. */
.pm-nav-mobile .pm-mega.has-child {
	position: relative;
}

.pm-nav-mobile .pm-mega__toggle:not(.pm-mega__toggle--label) {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	padding: 0;
	color: var(--sky-200);
}

.pm-nav-mobile .pm-mega__toggle--label {
	display: flex;
	justify-content: space-between;
	width: 100%;
	text-align: left;
}

.pm-nav-mobile .pm-mega__caret,
.pm-nav-mobile .pm-mega.is-open .pm-mega__caret {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--sky-200);
	transform: rotate(-90deg);
}

/* The flyover: the panel slides in over the whole menu, with Back and a link
   to the item's own page at the top, then its links in their groups. */
.pm-mega__head {
	display: none;
}

.pm-nav-mobile .pm-mega__panel,
.pm-nav-mobile .pm-mega__panel[hidden] {
	position: fixed;
	inset: 0;
	z-index: 3;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
	border: 0;
	background: radial-gradient(90% 55% at 50% 100%, rgba(6, 79, 114, 0.8), transparent 70%), var(--black);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	visibility: visible;
	transform: none;
	transition: transform 380ms var(--ease-door), visibility 0s;
}

.pm-nav-mobile .pm-mega__panel[hidden] {
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 300ms var(--ease-out), visibility 0s linear 300ms;
}

@media (prefers-reduced-motion: reduce) {

	.pm-nav-mobile .pm-mega__panel,
	.pm-nav-mobile .pm-mega__panel[hidden] {
		transition: none;
	}
}

/* An item still rising into place would carry its flyover with it. */
.pm-nav-mobile .pm-mega.is-open {
	animation: none !important;
}

.pm-nav-mobile .pm-mega__panel::before,
.pm-nav-mobile .pm-mega__panel::after {
	display: none;
}

.pm-nav-mobile .pm-mega__head {
	display: block;
}

.pm-nav-mobile .pm-mega__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 8px;
	border: 1px solid var(--line-2);
	background: none;
	color: var(--white);
	font-family: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
}

.pm-nav-mobile .pm-mega__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: var(--space-10) 0 0;
	padding-bottom: var(--space-5);
	border-bottom: 1px solid rgba(189, 238, 255, 0.24);
	color: var(--white);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.pm-nav-mobile .pm-mega__all[aria-current="page"] {
	color: var(--sky-200);
}

.pm-nav-mobile .pm-mega__all-icon {
	flex: none;
	color: var(--sky-200);
}

.pm-nav-mobile .pm-mega__inner {
	max-width: none;
	padding: 0;
	animation: none;
}

.pm-nav-mobile .pm-mega__inner .wp-block-columns {
	display: block;
	margin: 0;
}

.pm-nav-mobile .pm-mega__inner .wp-block-column {
	margin-top: var(--space-8);
}

.pm-nav-mobile .pm-mega__title {
	margin: 0 0 var(--space-2);
	padding: 0;
	border: 0;
}

.pm-nav-mobile .pm-mega__links li {
	margin: 0 !important;
	border-bottom: 1px solid rgba(189, 238, 255, 0.12);
	list-style: none;
}

.pm-nav-mobile .pm-mega__links a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 0;
	color: var(--text-body);
	font-size: 17px;
	line-height: 1.35;
}

.pm-nav-mobile .pm-mega__links a:hover,
.pm-nav-mobile .pm-mega__links a:focus-visible {
	padding-left: 0;
	color: var(--white);
}

.pm-nav-mobile .pm-mega__links a[aria-current="page"] {
	color: var(--sky-200);
}

/* The page's own bar of calls to action sits under the open menu, which
   has its own. */
:root:has(.pm-nav-mobile .is-menu-open) .pm-sticky {
	visibility: hidden;
}

/* The logo sits in the overlay's top bar, opposite the close button. */
.pm-mobile-menu__logo {
	position: absolute;
	top: 14px;
	left: var(--gutter);
	margin: 0 !important;
}

.pm-mobile-menu__logo img {
	width: 110px;
	height: auto;
}

.pm-mobile-menu__foot {
	order: 99;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: auto;
}

.pm-mobile-menu__foot .wp-block-button,
.pm-mobile-menu__foot .wp-block-button__link {
	width: 100%;
}

.pm-mobile-menu__foot .wp-block-button__link {
	min-height: 42px;
	padding: 0 12px;
}

@media (prefers-reduced-motion: no-preference) {

	.is-menu-open .pm-mobile-menu__foot {
		animation: pm-rise 520ms var(--ease-out) 640ms backwards;
	}
}