/* ═══════════════════════════════════════════════════════════════════════════
   SHARED SITE MENU — one source of truth for the header / nav / Services
   dropdown, used by BOTH the main SPA (index.html) and the landing pages.
   The SPA drives it with pw.js (nav links call loadContent; menu state via
   body.lp-menu-open / body.lp-services-open); the landing pages drive it with
   nav.js. The SPA keeps its own <announce> and <legal> (the .lp-announce /
   .lp-footer rules below are used by the landing pages only). Breakpoint:
   hamburger ≤ 833px, full nav ≥ 834px, on both.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The landing pages' base stylesheets map PWPrimary's normal weight to
   Manrope ExtraLight (and Regular to `bold`), so a plain font-weight:400 here
   renders thinner than the main site. Load Manrope's variable font under our own
   family so the menu weights match the SPA exactly (which uses the same file). */
@font-face {
	font-family: "PWNav";
	font-style: normal;
	font-weight: 200 800;
	src: url("/css/font/Manrope/Manrope-VariableFont_wght.woff2") format("woff2");
	font-display: swap;
}

.lp-header {
	position: sticky;
	top: 0;
	z-index: 300;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 54px;
	box-sizing: border-box;
	padding: 0 max(5%, calc(50% - 600px));
	background: #fafafc;
	border-bottom: 1px solid #E3E3E8;
	font-family: "PWNav", "Arial", sans-serif;
}

.lp-logo {
	display: block;
	width: 96px;
	height: 48px;
	flex-shrink: 0;
	cursor: pointer;
	background: url("/img/logo/primary/Solid/Primary_Solid-Black.png") left center / auto 20px no-repeat;
}

/* display:contents lets logo + each nav link space out evenly across the bar.
   padding:0 / background:none neutralise the landing pages' old `nav {}` rule,
   which would otherwise leak its padding + dark background onto this <nav>. */
.lp-nav { display: contents; padding: 0; background: none; }

.lp-nav-link {
	display: inline-block;
	padding: 12px 14px;
	color: #222823;
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
}
/* SPA items are onclick <a> with no href, so set the pointer explicitly. */
.lp-nav-link, .lp-svc, .lp-quick, .lp-subback { cursor: pointer; }
/* Explicit line-height so items are identical on both sites: pw.css (SPA) sets
   body line-height 1.5, lp.css leaves it normal — that difference otherwise makes
   the SPA rows taller than the landing pages'. */
.lp-nav-link, .lp-svc, .lp-quick { line-height: normal; }

.lp-hamburger { display: none; }

/* ── Services dropdown (desktop, full-width light panel) ─────────────────── */
.lp-dropdown {
	position: fixed;
	top: 54px;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 90px;
	background: #fafafc;
	border-bottom: 1px solid #E3E3E8;
	box-shadow: 0 26px 40px rgba(0, 0, 0, 0.06);
	padding: 30px max(5%, calc(50% - 600px)) 42px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	z-index: 320;
}
/* Hover-reveal is desktop-only; on touch a tap fires :hover and would open the
   panel without a click, so scope it above the mobile breakpoint. */
@media screen and (min-width: 834px) {
	.lp-nav-item.has-dropdown:hover .lp-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
	}
}
.lp-subback { display: none; }
.lp-col { display: flex; flex-direction: column; }
.lp-col-head {
	color: #86868b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}
.lp-svc {
	display: block;
	padding: 5px 0;
	color: #222823;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.lp-quick {
	display: block;
	padding: 5px 0;
	color: #222823;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
}

/* ── Notification bar (slides in on load; space reserved so nothing shifts) ── */
.lp-announce {
	overflow: hidden;
	background: #fafafc;
}
.lp-announce-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	text-align: center;
	padding: 11px 24px;
	background: #F6FADF;
	border-bottom: 1px solid #E6EFC6;
	color: #222823;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	font-family: "PWNav", "Arial", sans-serif;
	transform: translateY(-100%);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-announce.in .lp-announce-inner { transform: translateY(0); }
.lp-announce-cta {
	display: inline-block;
	flex-shrink: 0;
	padding: 5px 16px;
	border: 1px solid #222823;
	border-radius: 999px;
	color: #222823;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.lp-announce-cta:hover { background: #222823; color: #F6FADF; }

/* ── Footer ── matches the main site's <legal> bar, and sticks to the page
   bottom: <content> is a min-height:100vh column, footer gets margin-top:auto. ── */
content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.lp-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	background: #fafafc;
	border-top: solid 1px #8F9672;
	padding: 2px 4px;
	font-size: 9pt;
	color: #222823;
	font-family: "PWNav", "Arial", sans-serif;
}
.lp-footer a { color: #222823; margin-left: 5px; text-decoration: none; cursor: pointer; }
.lp-footer a:hover { color: #8F9672; }
.lp-sharelink {
	margin-left: auto;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	color: #8F9672;
	display: flex;
	align-items: center;
	transition: color 0.2s ease;
}
.lp-sharelink:hover { color: #222823; }
.lp-sharelink.coppied { color: #D8F473; }

/* ── Mobile (≤ 833px): hamburger + slide-down menu + slide-in submenu ─────── */
@media screen and (max-width: 833px) {
	.lp-header { padding: 0 16px; min-height: 60px; }
	/* Match the main site's mobile logo (larger than the desktop mark). */
	.lp-logo { width: 150px; height: 40px; background-size: auto 30px; }

	.lp-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		background: none;
		border: none;
		padding: 8px 4px;
		cursor: pointer;
		z-index: 210;
	}
	.lp-hamburger span {
		display: block;
		width: 22px;
		height: 2px;
		background: #222823;
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	body.lp-menu-open .lp-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.lp-menu-open .lp-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
	body.lp-menu-open .lp-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.lp-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		position: fixed;
		top: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fafafc;
		overflow-y: auto;
		z-index: 190;
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.34s;
		pointer-events: none;
	}
	body.lp-menu-open .lp-nav {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		transition: clip-path 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
		pointer-events: auto;
	}

	.lp-nav-link {
		padding: 8px 20px;
		font-size: 28px;
		font-weight: 600;
	}
	/* Services row: text left, chevron pinned to the far right. */
	.lp-nav-item.has-dropdown > .lp-nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.lp-nav-item.has-dropdown > .lp-nav-link::after {
		content: "\203A";
		margin-left: auto;
		color: rgba(0, 0, 0, 0.4);
		font-size: 18pt;
		line-height: 1;
	}

	.lp-dropdown {
		position: fixed;
		inset: 60px 0 0 0;
		width: auto;
		flex-direction: column;
		/* stretch (not the desktop flex-start) so columns + their item dividers
		   span the full screen width, matching the SPA submenu */
		align-items: stretch;
		gap: 0;
		padding: 0;
		background: #fafafc;
		overflow-y: auto;
		border: none;
		box-shadow: none;
		transform: translateX(100%);
		opacity: 1;
		visibility: hidden;
		transition: transform 0.34s ease, visibility 0s linear 0.34s;
		z-index: 195;
		pointer-events: none;
	}
	body.lp-services-open .lp-nav-item.has-dropdown .lp-dropdown {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.34s ease, visibility 0s linear 0s;
		pointer-events: auto;
	}
	.lp-subback {
		display: block;
		padding: 12px 20px 4px;
		color: #222823;
		font-size: 24pt;
		line-height: 1;
		cursor: pointer;
	}
	.lp-col-head { padding: 0 20px; margin: 18px 0 4px; font-size: 10pt; }
	.lp-col--services .lp-col-head { display: none; }
	.lp-svc { padding: 8px 20px; font-size: 28px; font-weight: 600; }
	.lp-quick { padding: 9px 20px; font-size: 17px; font-weight: 600; }

	/* Every menu item flush-left: no inherited watermark, indent, or centring. */
	.lp-nav-link, .lp-svc, .lp-quick {
		text-align: left;
		text-indent: 0;
		background-image: none;
	}
	.lp-announce-inner { padding: 12px 18px; }
}

/* ── Main-site (SPA) integration — inert on the landing pages ──────────────────
   The SPA lays out with a CSS grid (<layoutControl>), so its header must claim
   the `banner` grid row. The blur mirrors the old Services-dropdown behaviour.
   `display`/`layoutControl` only exist in the SPA, so these do nothing on LPs. */
.lp-header { grid-area: banner; }
@media screen and (min-width: 834px) {
	/* Blur the page behind the open Services dropdown.
	   SPA: content lives in <display> (sibling of the header inside layoutControl).
	   Landing pages: content lives in <content>; blur its children except the
	   header (which holds the dropdown itself). */
	body:not(.svc-closed) layoutControl:has(.lp-nav-item.has-dropdown:hover) display,
	body:not(.svc-closed) content:has(.lp-nav-item.has-dropdown:hover) > :not(.lp-header) {
		filter: blur(5px);
		transition: filter 0.2s ease;
		pointer-events: none;
	}
	/* Clicking the Services link or a submenu item force-closes the dropdown even
	   while the pointer is still over it (svc-closed; pw.js clears it on mouseleave). */
	body.svc-closed .lp-nav-item.has-dropdown .lp-dropdown {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		pointer-events: none;
		transition: none;
	}
	/* "Services Overview" is a mobile-only submenu entry — on desktop the Services
	   nav item itself navigates to the overview, so hide it there. */
	.lp-svc--overview { display: none; }
}