/* Site header + navbar. Tokens: tokens.css. Shared utilities (skip-link, visually-hidden, focus-visible): base.css. */

.ppc-header {
	/* Sticky floating pill: stays pinned so the scrolled state is visible. Transparent because
	   the dark area in the Figma frame is a background layer behind the component, not the navbar. */
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--ppc-header-inset-y) var(--ppc-header-inset-x);
}

.ppc-navbar {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--ppc-navbar-padding);
	background: var(--ppc-color-navbar-surface);
	-webkit-backdrop-filter: blur(var(--ppc-navbar-blur));
	backdrop-filter: blur(var(--ppc-navbar-blur));
	border: 2px solid var(--ppc-color-navbar-border);
	border-radius: var(--ppc-navbar-radius);
	box-shadow: var(--ppc-navbar-shadow);
}

/* Logo (left, pushes the rest right) */
.ppc-navbar__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
	text-decoration: none;
	color: var(--ppc-color-nav-text);
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-navbar__logo-img {
	display: block;
	height: 2.25rem;
	width: auto;
}

/* Menu (shared list styling) */
.ppc-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppc-menu a {
	display: inline-flex;
	align-items: center;
	font-family: var(--ppc-font-nav);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-nav);
	line-height: var(--ppc-line-height-tight);
	color: var(--ppc-color-nav-text);
	text-decoration: none;
	white-space: nowrap;
}

/* Primary (desktop) */
.ppc-navbar__primary {
	flex-shrink: 0;
}

.ppc-navbar__primary .ppc-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ppc-navbar-gap);
}

.ppc-navbar__primary .ppc-menu > li {
	position: relative;
}

/* Main items: smooth animated underline that grows in from the left on hover/focus. */
.ppc-navbar__primary .ppc-menu > li:not(.menu-cta) > a {
	position: relative;
}

.ppc-navbar__primary .ppc-menu > li:not(.menu-cta) > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.15em;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease-in-out;
}

.ppc-navbar__primary .ppc-menu > li:not(.menu-cta) > a:hover::before,
.ppc-navbar__primary .ppc-menu > li:not(.menu-cta) > a:focus-visible::before {
	transform: scaleX(1);
}

/* Dropdown caret + submenu */
.ppc-menu .menu-item-has-children > a::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.ppc-navbar__primary .sub-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: var(--ppc-color-navbar-surface);
	-webkit-backdrop-filter: blur(var(--ppc-navbar-blur));
	backdrop-filter: blur(var(--ppc-navbar-blur));
	border: 1px solid var(--ppc-color-navbar-border);
	border-radius: var(--ppc-cta-radius);
	box-shadow: var(--ppc-navbar-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.375rem);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;
}

.ppc-navbar__primary .menu-item-has-children:hover > .sub-menu,
.ppc-navbar__primary .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ppc-navbar__primary .sub-menu a {
	padding: 0.375rem 0.5rem;
	border-radius: 0.5rem;
}

/* CTA button — menu item carrying the `menu-cta` class (set in Appearance > Menus) */
.ppc-menu .menu-cta > a {
	color: var(--ppc-color-cta-text);
	font-weight: var(--ppc-font-weight-medium);
	font-size: var(--ppc-font-size-cta);
	padding: var(--ppc-cta-pad-y) var(--ppc-cta-pad-x);
	border: 0.5px solid var(--ppc-color-cta-border);
	border-radius: var(--ppc-cta-radius);
	background-image:
		linear-gradient(173deg, rgba(255, 255, 255, 0.22) 12%, rgba(98, 171, 255, 0.22) 88%),
		linear-gradient(var(--ppc-color-cta-surface), var(--ppc-color-cta-surface));
	box-shadow:
		inset 2px 3px 3px rgba(255, 255, 255, 0.4),
		inset -2px -3px 2px rgba(0, 0, 0, 0.16),
		0 0 1px rgba(0, 0, 0, 0.32);
	transition: color 0.2s ease-in-out, background-image 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.ppc-menu .menu-cta > a:hover,
.ppc-menu .menu-cta > a:focus-visible {
	text-decoration: none;
	transform: scale(1.05);
}

/* Scrolled state: the CTA becomes a solid Picton Blue Dark fill with white text (Figma "scroll nav"). */
.ppc-header.is-scrolled .menu-cta > a {
	color: var(--ppc-color-cta-text-scrolled);
	background-image:
		linear-gradient(173deg, rgba(255, 255, 255, 0.22) 12%, rgba(98, 171, 255, 0.22) 88%),
		linear-gradient(var(--ppc-color-cta-surface-scrolled), var(--ppc-color-cta-surface-scrolled));
}

/* Hamburger toggle (mobile only) */
.ppc-navbar__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	color: var(--ppc-color-nav-text);
}

.ppc-navbar__toggle-bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
}

.ppc-navbar__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ppc-navbar__toggle[aria-expanded="true"] .ppc-navbar__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ppc-navbar__toggle[aria-expanded="true"] .ppc-navbar__bar:nth-child(2) {
	opacity: 0;
}

.ppc-navbar__toggle[aria-expanded="true"] .ppc-navbar__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel */
.ppc-mobile-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	padding: 0.75rem;
	background: var(--ppc-color-navbar-surface);
	-webkit-backdrop-filter: blur(var(--ppc-navbar-blur));
	backdrop-filter: blur(var(--ppc-navbar-blur));
	border: 2px solid var(--ppc-color-navbar-border);
	border-radius: var(--ppc-navbar-radius);
	box-shadow: var(--ppc-navbar-shadow);
	z-index: 20;
}

.ppc-mobile-menu[hidden] {
	display: none;
}

.ppc-mobile-menu .ppc-menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ppc-mobile-menu .ppc-menu a {
	display: block;
	padding: 0.75rem 0.5rem;
	border-radius: 0.5rem;
}

.ppc-mobile-menu .menu-cta > a {
	margin-top: 0.5rem;
	text-align: center;
	justify-content: center;
}

/* Parent rows with a subtoggle: link navigates, the arrow button opens the dropdown. */
.ppc-mobile-menu .menu-item-has-children.has-subtoggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ppc-mobile-menu .has-subtoggle > a {
	flex: 1 1 auto;
}

/* The shared desktop caret is redundant next to the arrow button. */
.ppc-mobile-menu .has-subtoggle > a::after {
	content: none;
}

.ppc-mobile-menu__subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--ppc-color-nav-text);
	cursor: pointer;
}

.ppc-mobile-menu__subtoggle svg {
	transition: transform 0.2s ease-in-out;
}

.ppc-mobile-menu .is-open > .ppc-mobile-menu__subtoggle svg {
	transform: rotate(180deg);
}

/* Nested items: indented, collapsed by default; JS animates the height in px. The visibility
   flip is delayed, never tweened. */
.ppc-mobile-menu .sub-menu {
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: height 0.25s ease, visibility 0s linear 0.25s;
}

.ppc-mobile-menu .is-open > .sub-menu {
	visibility: visible;
	transition: height 0.25s ease, visibility 0s;
}

.ppc-mobile-menu .sub-menu a {
	padding: 0.5rem;
	font-size: 0.9375rem;
	opacity: 0.9;
}

/* Desktop <-> mobile switch */
@media (max-width: 62.5rem) {
	/* Slimmer pill on mobile: 8px vertical padding (16px stays inline). The header inset
	   shrinks with it, and --ppc-header-h is re-derived for the new pill height
	   (logo 36 + 2*8 padding + 2*2 border = 56px) so the hero offset stays exact. */
	:root {
		--ppc-header-inset-y: 0.5rem;
		--ppc-header-h: calc(56px + 2 * var(--ppc-header-inset-y));
	}

	.ppc-navbar {
		padding-block: 0.5rem;
	}

	.ppc-navbar__primary {
		display: none;
	}

	.ppc-navbar__toggle {
		display: inline-flex;
	}
}

@media (min-width: 62.5625rem) {
	.ppc-mobile-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-navbar__bar,
	.ppc-navbar__primary .sub-menu,
	.ppc-navbar__primary .ppc-menu > li:not(.menu-cta) > a::before,
	.ppc-menu .menu-cta > a,
	.ppc-mobile-menu .sub-menu,
	.ppc-mobile-menu__subtoggle svg {
		transition: none;
	}
}