/* ===== Site header =====
   The header IS the menu. The .menu-panel is absolutely positioned
   inside the header and slides down from height 0 → 100vh when open.
   Masthead sits on z-index 2 and never moves — same elements in both
   states, only colors change (via currentColor on borders + a color
   swap on the header). The toggle button morphs hamburger ↔ X via
   aria-expanded, sized so the masthead never reflows.

   State is driven by body[data-menu='open']. GSAP runs the open/close
   timelines in scripts/header-menu.js. */

.site-header {
	background-color: var(--fill-primary);
	color: var(--ink-primary);
	transition: color 200ms ease, background-color 200ms ease;

	/* Soft separator under the header — densest at center, fading to
	   nothing at the edges. Reads as a subtle shelf without the hard
	   ledger line a bottom border would draw. */
	&::after {
		content: '';
		position: absolute;
		inset: 100% 0 auto 0;
		height: 8px;
		pointer-events: none;
		background: radial-gradient(
			ellipse 60% 100% at center top,
			rgb(0 0 0 / 0.03),
			transparent 70%
		);
	}

	inner-column {
		padding-block: 0;
		position: relative;
		z-index: 2;
		/* masthead column sits above the menu panel */
	}

	mast-head {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	a {
		padding: 1em;
	}

	.logo {
		margin-right: auto;
		/* logo absorbs all space to its right — everything after it
		   (primary-nav, utility-nav) clusters at the right edge as one
		   group. Works whether primary-nav is visible or hidden. */
		transform: translateX(-1em);
		/* counters the anchor's 1em padding-left so the wordmark visually
		   aligns with the inner-column edge. */
		flex-shrink: 0;
		/* the wordmark has its own intrinsic size — never let neighbors
		   squish it. */

		svg {
			width: 110px;
			/* path fill is currentColor — logo inherits header color and
			   inverts automatically across hero / past-splash / menu-open. */
		}
	}

	.primary-nav {
		ul {
			display: flex;
			flex-direction: row;
		}

		li:last-of-type {
			a {
				padding-right: 0.8em;
			}
		}

		a {
			padding-inline: 1em;
			letter-spacing: 0.025em;
		}

		a:hover {
			text-decoration: underline;
			text-underline-offset: 4px;
		}
	}

	utility-nav {
		display: flex;
		align-items: center;
	}

	.ctaa {
		display: inline-block;
		border: 1px solid currentColor;
		border-radius: 50px;
		padding: 0.2em 0.8em;
		white-space: nowrap;
		/* don't let "Start Convo" / "Book a call" wrap when the masthead
		   is tight — when there's no room, the whole CTA hides instead
		   (see the breakpoint rule below). */
	}

	/* Hamburger ↔ X icon. Three <span class='line'> elements absolutely
	   positioned. Closed state: three horizontals. Open state: top + bottom
	   rotate into an X, middle fades. Button itself stays the same size so
	   the masthead doesn't reflow. */
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: inherit;
		font: inherit;
		padding: 0.5rem;
		cursor: pointer;
		margin-left: 0.5rem;

		.icon {
			display: block;
			position: relative;
			width: 22px;
			height: 16px;
		}

		.line {
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			height: 2px;
			background: currentColor;
			transition:
				transform 250ms ease,
				top 250ms ease,
				opacity 150ms ease;
		}
	}

	.menu-toggle .line:nth-child(1) { top: 0; }
	.menu-toggle .line:nth-child(2) { top: calc(50% - 1px); }
	.menu-toggle .line:nth-child(3) { top: calc(100% - 2px); }

	/* Icon morph is keyed to data-icon-x (set by JS at the end of the open
	   timeline, removed at the start of close), separate from aria-expanded
	   (which flips immediately so a11y stays correct during the animation). */
	.menu-toggle[data-icon-x] .line:nth-child(1) {
		top: calc(50% - 1px);
		transform: rotate(45deg);
	}
	.menu-toggle[data-icon-x] .line:nth-child(2) {
		opacity: 0;
	}
	.menu-toggle[data-icon-x] .line:nth-child(3) {
		top: calc(50% - 1px);
		transform: rotate(-45deg);
	}

	/* ===== The cover / menu panel =====
	   Absolutely positioned inside the header; slides down behind the
	   masthead by tweening its height. Items inside are invisible until
	   GSAP fades them in after the height tween completes. */
	.menu-panel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		overflow: hidden;
		background-color: var(--fill-primary);
		color: var(--ink-primary);
		z-index: 1;

		inner-column {
			/* override the masthead inner-column rules above */
			z-index: auto;
			/* dvh, not vh: on iOS, 100vh is the *tall* viewport (toolbar
			   hidden), so the bottom of this column — the legal block — ends
			   up behind Safari's bottom search/URL bar. dvh tracks the
			   actually-visible height, and the safe-area inset clears the
			   home indicator. */
			height: 100dvh;
			display: flex;
			flex-direction: column;
			padding-block: var(--header-height, 76px) calc(4rem + env(safe-area-inset-bottom));
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			margin-block: auto;
			/* absorbs space above and below, centering the nav vertically while
			   leaving the legal block to sit at the bottom of the column. */
		}

		.menu-item {
			overflow: auto;
			a {
				display: inline-block;
				/* Fluid size: scales with whichever is tighter — viewport
				   width or height — so the longest label ("Why Our Partners
				   Win") always fits on one line, from short landscape phones
				   up to large screens. Floor keeps it legible; cap is the
				   original large size. Replaces the old width/height
				   breakpoints, which stair-stepped and left 320px phones at a
				   size that wrapped. */
				font-size: clamp(1.25rem, min(6vw, 6vh), var(--step-up-4));
				font-weight: 400;
				letter-spacing: 0.02em;
				line-height: 1.1;
				padding: 0.2em 0;
				text-decoration: none;
				white-space: nowrap;
				opacity: 0;
				/* GSAP fades these to 1 after the panel finishes opening */
				&:hover, &:focus-visible {
					opacity: 0.7;
				}
			}
		}

		.menu-legal {
			font-size: var(--step-down-1);
			/*color: rgba(255, 255, 255, 0.5);*/
			opacity: 0;
			/* GSAP fades to 1 alongside the menu items */

			a {
				display: inline;
				padding: 0;
				/*color: inherit;*/
				text-decoration: underline;
				text-underline-offset: 3px;
			}

			a:hover,
			a:focus-visible {
				/*color: #fff;*/
			}
		}
	}
}

/* ===== Header modes =====
   Two states, and only two. body[data-header-mode] is the single source
   of truth. PHP sets the initial value for first-paint correctness;
   header-menu.js flips it based on one thing — whether the splash still
   covers the header line.

     hero   — transparent, white text (only while over the splash video)
     light  — solid light, dark text (everywhere else — the default)

   CTA pill border + hamburger lines use currentColor, so they invert
   automatically with the color swap. */

body[data-header-mode='hero'] .site-header {
	background-color: transparent;
	color: #fff;
}

/* 'light' matches the .site-header default — no rule needed. */

/* ===== Menu open state =====
   Menu open is authoritative — when true, the masthead goes transparent
   with dark ink to sit legibly over the light menu panel, regardless of
   the underlying section mode. Declared last so it wins on source order
   over the data-header-mode rules above (which share the same
   specificity). */
body[data-menu='open'] {
	overflow: hidden;
	/* lock page scroll while the panel is open */
}

body[data-menu='open'] .site-header {
	background-color: transparent;
	color: var(--ink-primary);
}

/* ===== Mobile / mid: inline nav collapses into the menu panel.
   The desktop primary-nav only shows at ≥ 1120px — below that the
   hamburger + menu panel handle navigation. */
@media (max-width: 1119px) {
	.site-header .primary-nav {
		display: none;
	}
}

/* CTA hides at narrower widths — logo + menu icon only until there's
   room to read the pill without it crowding the masthead. */
@media (max-width: 599px) {
	.site-header .cta-link {
		display: none;
	}
}

/* Reduced-motion: the GSAP timelines short-circuit in footer.php (no
   tweens, just state changes), so we only need to silence the CSS
   transitions still in play — the header color swap and the hamburger
   line transforms. */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header .menu-toggle .line {
		transition: none !important;
	}
}