/**
 * Header Styles — NISA Investment Advisors
 *
 * Two-row header: utility bar + main nav bar.
 * Desktop: single-container mega menu with crossfade between panels.
 * Mobile: right-side drawer, hamburger toggle, accordion submenus.
 * All colors via CSS custom properties from theme.json.
 */

/* -----------------------------------------------
   Variables
   ----------------------------------------------- */

.nisa-header {
	--nisa-header-height: 4.5rem;
	--nisa-header-height-scrolled: 3.5rem;
	--nisa-header-utility-height: 2.5rem;
	--nisa-header-bg: var(--wp--preset--color--secondary);
	--nisa-header-text: var(--wp--preset--color--primary);
	--nisa-header-accent: var(--wp--preset--color--accent);
	--nisa-header-muted: var(--wp--preset--color--muted);
	--nisa-header-tan: var(--wp--preset--color--tan);
	--nisa-header-light-blue: var(--wp--preset--color--light-blue);
	--nisa-header-pale-blue: var(--wp--preset--color--pale-blue);
	--nisa-header-transition: 0.25s ease;
	--nisa-header-scroll-transition: 0.35s ease;
	--nisa-header-padding-x: clamp(1rem, 4vw, 4rem);
}

/* Fixed header. (position:sticky was tried but breaks when an overlay locks the page:
   lenis.stop() sets overflow:hidden on <html>, which strips a sticky element of its
   scrollport, so the header vanished when opening the mobile menu mid-page. A fixed
   header is viewport-relative and immune to that.) Content clears it via a static
   offset below — with Lenis there's no wrapper, so it's just a padding-top. */
.wp-block-template-part:has(.nisa-header) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* Reveal-on-scroll-up: custom.js toggles .nisa-header-hidden. Literal timing
	   (not --nisa-header-scroll-transition) — that var is scoped to .nisa-header,
	   this wrapper is its PARENT and can't inherit a child's custom property, so
	   the var would resolve to nothing and the slide would snap instantly. */
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	/* Deliberately NO will-change here: will-change:transform would make this a
	   containing block for position:fixed descendants, confining the mobile
	   drawer + search modal (both fixed, full-viewport) to the header box. The
	   reveal transform is applied only via .nisa-header-hidden, so at rest there
	   is no transform and fixed descendants stay viewport-relative. */
}

/* Hidden state — slid up out of view while scrolling DOWN past the top zone;
   removed (revealed) on scroll up or near the top. Driven by custom.js. */
.wp-block-template-part.nisa-header-hidden:has(.nisa-header) {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-template-part:has(.nisa-header) {
		transition: none;
	}
}

/* Clear the WP admin bar (fixed) when logged in so the header sits below it. */
.admin-bar .wp-block-template-part:has(.nisa-header) {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-block-template-part:has(.nisa-header) {
		top: 46px;
	}
}

/* Offset content below the fixed header. JS sets --nisa-header-h to the header's full
   height; the fallback covers pre-JS / reduced-motion. Static (does NOT track the
   scroll-shrink) — once scrolled, content simply passes under the shorter header. */
.wp-site-blocks {
	padding-top: var( --nisa-header-h, 7rem );
}

/* White header everywhere by default — interior pages sit on white. */
.nisa-header {
	position: relative;
	background-color: var(--wp--preset--color--secondary);
	transition: background-color var(--nisa-header-scroll-transition);
}

/* Homepage only: header rests on the page's off-white wash. The scrolled
   state below still wins (same specificity, later in file), so the homepage
   keeps its muted -> white scroll transition. */
.home .nisa-header {
	background-color: var(--wp--preset--color--muted);
}

/* -----------------------------------------------
   Scrolled state — white bg, collapsed utility, shorter bar
   ----------------------------------------------- */

.nisa-header.is-scrolled {
	background-color: var(--nisa-header-bg);
}

.nisa-header.is-scrolled .nisa-header__utility-bar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
}

.nisa-header.is-scrolled .nisa-header__bar {
	height: var(--nisa-header-height-scrolled);
	border-bottom-color: transparent;
}

/* -----------------------------------------------
   Skip Link
   ----------------------------------------------- */

.nisa-skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.5rem;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-100%);
	transition: transform 0.25s ease;
}

.nisa-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Utility Bar (top row)
   ----------------------------------------------- */

.nisa-header__utility-bar {
	position: relative;
	z-index: 2;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	max-height: var(--nisa-header-utility-height);
	transition:
		max-height var(--nisa-header-scroll-transition),
		padding var(--nisa-header-scroll-transition),
		opacity var(--nisa-header-scroll-transition);
}

.nisa-header__utility-nav {
	display: none;
	align-items: center;
	gap: 0.25rem;
}

@media (min-width: 1024px) {
	.nisa-header__utility-nav {
		display: flex;
	}
}

.nisa-header__utility-menu {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nisa-header__utility-link {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500; /* Figma: utility links are Inter Medium */
	color: var(--nisa-header-text);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__utility-link:hover {
	color: var(--nisa-header-accent);
}

.nisa-header__utility-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}



/* -----------------------------------------------
   Bar (main nav row)
   ----------------------------------------------- */

.nisa-header__bar {
	position: relative;
	z-index: 2;
	height: var(--nisa-header-height);
	border-bottom: 1px solid rgba(130, 168, 184, 0.3);
	align-items: stretch !important;
	transition: height var(--nisa-header-scroll-transition), border-bottom-color var(--nisa-header-transition);
}

/* Keep the header/mega divider visible while a panel is open — including when
   scrolled (this rule follows .is-scrolled, so it wins and restores the border
   that .is-scrolled otherwise hides). */
.nisa-header.has-mega-open .nisa-header__bar {
	border-bottom-color: rgba(130, 168, 184, 0.3);
}

/* Nav row: wraps desktop nav + search, fills remaining space */
.nisa-header__nav-row {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}


/* -----------------------------------------------
   Logo
   ----------------------------------------------- */

.nisa-header__logo {
	display: flex;
	align-items: center;
}

.nisa-header__logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.nisa-header__logo a:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	transition: max-width var(--nisa-header-scroll-transition);
}

.nisa-header.is-scrolled .nisa-header__logo img {
	max-width: 100px;
}

.nisa-header__bar .nisa-header__logo {
	margin-right: 3rem;
}

/* -----------------------------------------------
   Desktop Nav
   ----------------------------------------------- */

.nisa-header__nav-desktop {
	display: none;
}

@media (min-width: 1024px) {
	.nisa-header__nav-desktop {
		display: flex;
		align-items: stretch;
		height: 100%;
	}
}

.nisa-header__menu {
	display: flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.nisa-header__menu-item {
	display: flex;
	align-items: stretch;
}

.nisa-header__menu-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 1rem;
	border: none;
	background: none;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px; /* Figma nav spec — no fluid token maps to 15px */
	font-weight: 500;
	line-height: 1;
	color: var(--nisa-header-accent);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--nisa-header-transition), opacity 0.2s ease;
}

/* Active/hover underline — overlaps bar bottom border, text-width only.
   Uses ::after so the line spans the text, not the padding. */
.nisa-header__menu-link::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 1rem;
	right: 1rem;
	height: 3px;
	background-color: transparent;
	transition: background-color var(--nisa-header-transition);
}

.nisa-header__menu-link:hover::after,
.nisa-header__menu-link:focus-visible::after {
	background-color: var(--wp--preset--color--bright-blue);
}

.nisa-header__menu-link:hover,
.nisa-header__menu-link:focus-visible {
	color: var(--nisa-header-accent);
}

.nisa-header__menu-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* Active state: blue underline when the panel is open, and the same underline
   (the hover treatment) on the item for the page being viewed — including a
   trigger whose dropdown holds that page, since the trigger is a <button> and
   never carries aria-current itself. `is-current` is set in
   inc/header-tokens.php. */
.nisa-header__menu-link--trigger[aria-expanded="true"]::after,
.nisa-header__menu-link.is-current::after {
	background-color: var(--wp--preset--color--bright-blue);
}

/* Dim non-active nav items when mega menu is open. A colour shift, not opacity:
   the items stay live controls, so they keep WCAG AA text contrast — 80% accent
   on the header's white/off-white is ~5.0–5.3:1 (opacity 0.45 measured 2.29:1). */
.nisa-header.has-mega-open .nisa-header__menu-link:not([aria-expanded="true"]):not(:hover):not(:focus-visible) {
	color: color-mix(in srgb, var(--nisa-header-accent) 80%, var(--wp--preset--color--secondary));
}

.nisa-header__chevron {
	width: 0.7em;
	height: 0.7em;
	transition: transform var(--nisa-header-transition);
}

.nisa-header__menu-link--trigger[aria-expanded="true"] .nisa-header__chevron {
	transform: rotate(180deg);
}

/* Search toggle button — shown at all breakpoints (kept in the mobile bar too) */
.nisa-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--nisa-header-light-blue);
	background-color: var(--nisa-header-light-blue);
	border-radius: 50%;
	/* background: none; */
	color: var(--nisa-header-accent);
	cursor: pointer;
	transition: background-color var(--nisa-header-transition), border-color var(--nisa-header-transition);
}

.nisa-header__search-toggle:hover {
	background-color: var(--nisa-header-light-blue);
	border-color: var(--nisa-header-accent);
}

.nisa-header__search-toggle:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__search-toggle svg {
	width: 16px;
	height: 16px;
}

/* Icon swaps to a close (X) when the search panel is open */
.nisa-header__search-icon--close {
	display: none;
}

.nisa-header__search-toggle[aria-expanded="true"] .nisa-header__search-icon--search {
	display: none;
}

.nisa-header__search-toggle[aria-expanded="true"] .nisa-header__search-icon--close {
	display: block;
}

/* -----------------------------------------------
   Mega Backdrop — slides down from behind header
   ----------------------------------------------- */

.nisa-header__mega-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: none !important;
	height: 0;
	background-color: var(--nisa-header-bg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	z-index: 0;
	pointer-events: none;
}

/* -----------------------------------------------
   Mega Panels — absolutely positioned below .nisa-header
   ----------------------------------------------- */

.nisa-header__mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-width: none !important;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	/* Opaque in its own right — the panel must never depend on the JS-measured
	   backdrop for coverage. If the backdrop mis-measures or its animation is
	   interrupted (fast hover-switching between menus, an interrupted open), a
	   transparent panel let page content bleed through. This guarantees it can't. */
	background-color: var(--nisa-header-bg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	pointer-events: none;
}

.nisa-header__mega-panel-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 2rem clamp(1rem, 4vw, 4rem) 2.5rem;
}

/* -----------------------------------------------
   Mega Content — Overview link, groups, links
   ----------------------------------------------- */

.nisa-header__mega-overview-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1.75rem;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: 36px; /* Figma: "All Capabilities" overview */
	font-weight: 400;
	line-height: 1.09;
	color: var(--nisa-header-text);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__mega-overview-link:hover {
	color: var(--nisa-header-accent);
}

.nisa-header__mega-overview-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__mega-overview-link svg {
	width: 0.55em;
	height: 0.55em;
	flex-shrink: 0;
}

/* Extra top-level links beside the overview (childless panel items after the
   first) share its row. */
.nisa-header__mega-overview-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 2.5rem;
}

.nisa-header__mega-overview-link + .nisa-header__mega-groups {
	padding-top: 0.75rem;
}

/* Groups container — multi-column layout */
.nisa-header__mega-groups {
	display: flex;
	gap: 3rem;
}

.nisa-header__mega-group {
	flex: 1;
	min-width: 0;
}

/* Group label — uppercase header with blue underline */
.nisa-header__mega-group-label {
	display: block;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--lighter-blue);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em; /* Figma: 1.2px @ 12px */
	text-transform: uppercase;
	/* Figma group-label blue (#2579BD) darkened one step to #2476B8 for AA:
	   4.82:1 on white, 4.56:1 on pale-blue (12px semibold needs 4.5). */
	color: var(--wp--preset--color--label-blue);
}

/* Mega panel link list */
.nisa-header__mega-panel-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.nisa-header__mega-link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--inter);
	color: var(--nisa-header-text);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__mega-link:hover,
.nisa-header__mega-link:focus-visible {
	color: var(--nisa-header-accent);
}

.nisa-header__mega-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__mega-link--standalone {
	padding: 0.625rem 0;
}

.nisa-header__mega-link-text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.nisa-header__mega-link-label {
	font-size: 16px; /* Figma: mega link label */
	font-weight: 600;
	line-height: 1.4;
	color: var(--nisa-header-accent);
}

.nisa-header__mega-link-label::after {
	content: "\00A0\203A"; /* › — escaped so it can't mojibake under Latin-1; leading non-breaking space keeps the arrow bound to the last word so it never orphans on its own line */
	font-weight: 400;
}

/* Label darkens to navy on hover (accent #004C88 is the resting color, per Figma). */
.nisa-header__mega-link:hover .nisa-header__mega-link-label,
.nisa-header__mega-link:focus-visible .nisa-header__mega-link-label {
	color: var(--nisa-header-text);
}

/* Active state: the dropdown item for the page being viewed. aria-current is
   already emitted on it by nisa_render_mega_link_list() / the standalone links,
   so no extra class is needed. */
.nisa-header__mega-link[aria-current="page"] .nisa-header__mega-link-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nisa-header__mega-link-desc {
	font-size: 14px; /* Figma: mega link description */
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--gray); /* ≈ Figma rgba(0,0,0,.6); AA-safe on white + pale-blue */
}

/* -----------------------------------------------
   Mega Content — Deep groups (Capabilities-style)
   ----------------------------------------------- */

.nisa-header__mega-sections {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.nisa-header__mega-section {
	flex: 1;
	min-width: 0;
}

/* Two-tone: when a panel has 2+ sections, the LAST one ("Investment Solutions")
   sits on light blue that bleeds to the viewport edge; the panel's own background
   stays white for the rest. The fill hangs off the last section itself — from its
   left edge to far past the right edge, far above, and down to the inner's bottom
   padding (so the panel's bottom border still shows) — and the panel's clip-path
   trims the overshoot to the panel box. So the colour edge follows the real section
   boundary for any section count. (With two sections the right one's left edge is
   exactly the 50% line: flex:1 sections, a 2rem gap, and the 2rem padding below
   cancel out — the same edge the old 50%-of-panel fill drew.) clip-path rather than overflow: GSAP writes
   an inline overflow:visible on the open panel. A single section has no fill. */
.nisa-header__mega-panel--deep {
	clip-path: inset(0 0 -2px 0); /* bottom left open: clipping there re-antialiased the border */
}
.nisa-header__mega-panel--deep .nisa-header__mega-panel-inner {
	position: relative;
	z-index: 1;
}
.nisa-header__mega-panel--deep .nisa-header__mega-section:last-child:not(:first-child) {
	position: relative;
	/* Interior breathing room so its text clears the color edge. */
	padding-left: 2rem;
}
.nisa-header__mega-panel--deep .nisa-header__mega-section:last-child:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -100vh;
	bottom: -2.5rem; /* .nisa-header__mega-panel-inner padding-bottom */
	left: 0;
	right: -100vw;
	z-index: -1;
	background-color: var(--nisa-header-pale-blue);
	pointer-events: none;
}

.nisa-header__mega-col-grid {
	columns: 3;
	column-gap: 2rem;
	padding-top: 0.75rem;
}

/* The right group ("Investment Solutions") has four short columns and no
   callout since 2026-09-23 — three CSS columns balanced it into two, leaving
   the third empty and each too narrow for "Exposure Management ›" on one
   line. Two columns use the whole half. Compound selector beats the base
   .nisa-header__mega-col-grid rule. Only when it IS a right group (2+ sections). */
.nisa-header__mega-panel--deep .nisa-header__mega-section:last-child:not(:first-child) .nisa-header__mega-col-grid {
	columns: 2;
}

/* Editor-placed columns ("Start a new column" on a column header, Appearance →
   Menus): each .nisa-header__mega-col-stack is one column, on the same tracks the
   balanced layout uses (3, or 2 in the right group). Extra stacks wrap. */
.nisa-header__mega-col-grid--manual {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2rem;
	columns: auto;
}
.nisa-header__mega-panel--deep .nisa-header__mega-section:last-child:not(:first-child) .nisa-header__mega-col-grid--manual {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	columns: auto;
}

.nisa-header__mega-col {
	break-inside: avoid;
	margin-bottom: 1.25rem;
}

.nisa-header__mega-col-header {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px; /* Figma: column headers (Fixed Income, etc.) */
	font-weight: 700;
	color: var(--nisa-header-accent);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__mega-col-header::after {
	content: "\00A0\203A"; /* › — escaped so it can't mojibake under Latin-1; leading non-breaking space keeps the arrow bound to the last word so it never orphans on its own line */
	font-weight: 400;
}

.nisa-header__mega-col-header:hover,
.nisa-header__mega-col-header:focus-visible {
	color: var(--nisa-header-text);
}

.nisa-header__mega-col-header:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__mega-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.nisa-header__mega-col-link {
	display: block;
	padding: 0.25rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	/* Figma: gray leaf links. Verified AA on both panel backgrounds —
	   #6F6F6F on white 5.02:1, on pale-blue #F2FAFD 4.75:1. */
	color: var(--wp--preset--color--gray);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__mega-col-link:hover,
.nisa-header__mega-col-link:focus-visible {
	color: var(--nisa-header-accent);
}

.nisa-header__mega-col-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Mega Content — Flat panel (About Us-style)
   ----------------------------------------------- */

.nisa-header__mega-panel--flat .nisa-header__mega-overview-link + .nisa-header__mega-groups {
	border-top: 1px solid var(--wp--preset--color--lighter-blue);
	padding-top: 1.25rem;
	margin-top: 0.25rem;
}

/* -----------------------------------------------
   Mega Content — Insights & About (two-tone)
   ----------------------------------------------- */

/* Pale-blue right half bleeds to the viewport edge, like the deep panel. The
   inner is centered, so a 50% split aligns with the color edge at any width. */
.nisa-header__mega-panel--insights::before {
	content: "";
	position: absolute;
	inset: 0 0 0 50%;
	background-color: var(--nisa-header-pale-blue);
	pointer-events: none;
}

/* About: pale-blue lives on the aside and bleeds to the right edge (clipped by
   the panel), so it aligns with the ~2/3 content split at any viewport width. */
.nisa-header__mega-panel--about {
	overflow: hidden;
}

.nisa-header__mega-panel--insights .nisa-header__mega-panel-inner,
.nisa-header__mega-panel--about .nisa-header__mega-panel-inner {
	position: relative;
	z-index: 1;
}

.nisa-header__mega-insights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 3rem;
}

/* Flatten the left wrapper into the panel grid so the overview takes row 1 (left
   only) and the two left columns share row 2 with the aside — this lines
   "Thought Leadership" up with "Market and Economy" / "Pension Risk Pulse"
   instead of floating at the top of the pale-blue column. */
.nisa-header__mega-insights-main {
	display: contents;
}

.nisa-header__mega-insights-main > .nisa-header__mega-overview-link,
.nisa-header__mega-insights-main > .nisa-header__mega-overview-row {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

.nisa-header__mega-insights-cols {
	grid-column: 1;
	grid-row: 2;
}

.nisa-header__mega-insights-aside {
	grid-column: 2;
	grid-row: 2;
}

.nisa-header__mega-about {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
}

/* Insights right column starts just past the 50% color edge. */
.nisa-header__mega-insights-aside {
	padding-left: 1rem;
}

/* About aside — full-height pale-blue block that bleeds to the right edge. The
   vertical negative margins cancel the inner's padding so the color spans the
   full panel height; the ::after paints the bleed (clipped by the panel's
   overflow). Anchored to the aside, so it aligns with the split at any width. */
.nisa-header__mega-about-aside {
	position: relative;
	margin: -2rem 0 -2.5rem;
	padding: 2rem 0 2.5rem 2.5rem;
	background-color: var(--nisa-header-pale-blue);
}

.nisa-header__mega-about-aside::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 100vw;
	background-color: var(--nisa-header-pale-blue);
}

/* Insights left: two link columns. No top padding (nor on the aside group
   below): the group labels then sit the same distance under the overview link
   as the Capabilities section labels (2026-10-06 — they were 12px lower). */
.nisa-header__mega-insights-cols {
	display: flex;
	gap: 3rem;
}

.nisa-header__mega-insights-cols .nisa-header__mega-group {
	flex: 1;
	min-width: 0;
}

/* Desktop: 1rem between items (tightened 2026-10-06 — was 2rem to match the About grid), and the
   two link columns share row tracks via subgrid, so each row is as tall as its
   tallest item across BOTH columns. As the viewport narrows and a label or
   description wraps, its neighbour grows with it and the rows stay level —
   a min-height that tracks the content instead of a guessed fixed value.
   The generous spans (label + up to 11 items) leave unused tracks at 0 height;
   spacing is li padding, not row-gap, so those empty tracks add nothing. */
@media (min-width: 1024px) {
	.nisa-header__mega-panel--insights .nisa-header__mega-panel-links li + li {
		padding-top: 1rem;
	}

	/* One column per left group (two today), as equal tracks — auto-flow
	   instead of a fixed repeat(2) so a third group gets its own column rather
	   than wrapping under the first. */
	.nisa-header__mega-insights-cols {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		/* Pack the rows at the top. This grid is stretched to the (taller) aside's
		   height, and the default align-content spread that slack over all 12
		   tracks — +10px on the label row (divider sat lower than Thought
		   Leadership's) and on every item row. */
		align-content: start;
		column-gap: 3rem;
		row-gap: 0;
	}

	.nisa-header__mega-insights-cols .nisa-header__mega-group {
		display: grid;
		grid-row: span 12;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.nisa-header__mega-insights-cols .nisa-header__mega-panel-links {
		display: grid;
		grid-row: span 11;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}

/* Insights right: stacked group + featured card + resources */
.nisa-header__mega-insights-aside {
	display: flex;
	flex-direction: column;
}



/* Featured post card (Insights) — white card on the pale-blue column */
.nisa-header__mega-feature-card {
	display: flex;
	align-items: stretch;
	margin: 1.5rem 0;
	background-color: var(--nisa-header-bg);
	border: 1px solid var(--wp--preset--color--lighter-blue);
	text-decoration: none;
	color: var(--nisa-header-text);
	transition: box-shadow var(--nisa-header-transition);
}

.nisa-header__mega-feature-card:hover,
.nisa-header__mega-feature-card:focus-visible {
	box-shadow: 0 4px 16px rgba(1, 46, 82, 0.12);
}

.nisa-header__mega-feature-card:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__mega-feature-card-media {
	flex: 0 0 42%;
	min-height: 96px;
	overflow: hidden;
	background-color: var(--nisa-header-light-blue);
}

.nisa-header__mega-feature-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nisa-header__mega-feature-card-title {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 1rem 1.25rem;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.2;
}

/* Resources strip (Insights) — sits at the foot of the pale-blue column */
.nisa-header__mega-resources {
	margin-top: auto;
	padding-top: 1.25rem;
	/* border-top: 1px solid var(--wp--preset--color--lighter-blue); */
}

.nisa-header__mega-resources-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.nisa-header__mega-resource-link {
	/* 24px minimum target (WCAG 2.5.8) without moving anything: the padding grows
	   the hit area, the matching negative margin keeps the layout. */
	padding-block: 0.125rem;
	margin-block: -0.125rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--nisa-header-accent);
	text-decoration: none;
	transition: color var(--nisa-header-transition);
}

.nisa-header__mega-resource-link::after {
	content: "\00A0\203A";
	font-weight: 400;
}

.nisa-header__mega-resource-link:hover,
.nisa-header__mega-resource-link:focus-visible {
	color: var(--nisa-header-text);
}

.nisa-header__mega-resource-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* About left: three-column item grid, divided from the overview by a rule. */
.nisa-header__mega-about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 2.5rem;
	margin-top: 0.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--lighter-blue);
}

/* About right: editable featured block. Notched top-right corner (NISA motif). */
.nisa-header__mega-feature-media {
	display: block;
	min-height: 200px;
	overflow: hidden;
	background-color: var(--nisa-header-light-blue);
	border-top-right-radius: 50px; /* Figma */
}

.nisa-header__mega-feature-media img {
	display: block;
	width: 100%;
	height: auto;
}

.nisa-header__mega-feature-heading {
	margin: 1.25rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: 16px; /* Figma */
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.16px;
	color: var(--nisa-header-accent);
}

.nisa-header__mega-feature-link {
	/* Inline link: vertical padding grows the hit area to 24px+ (WCAG 2.5.8)
	   without changing the line box. */
	padding-block: 0.125rem;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-style: italic;
	font-weight: 300;
	font-size: 16px; /* Figma */
	line-height: 1.3;
	color: var(--nisa-header-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nisa-header__mega-feature-link:hover,
.nisa-header__mega-feature-link:focus-visible {
	color: var(--nisa-header-accent);
}

.nisa-header__mega-feature-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Search Panel
   ----------------------------------------------- */

/* Inline expand-from-icon search: collapsed by default; grows leftward from the
   toggle across the nav row when .nisa-header.is-search-open is set (header.js).
   Absolute so it overlays the nav links (which fade) instead of pushing them. */
.nisa-header__search {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 3rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 0;
	max-width: none;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: width var(--nisa-header-scroll-transition), opacity var(--nisa-header-transition), visibility var(--nisa-header-transition);
	z-index: 2;
}

.nisa-header.is-search-open .nisa-header__search {
	/* Modest field that lives in the gap between the nav links and the toggle
	   (the toggle is pushed right by margin-left:auto), so it doesn't cover the
	   menu. Capped so it never runs past the available space. */
	width: min(20rem, calc(100% - 3rem));
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* The in-form close button is only used by the mobile modal; hidden otherwise
   (on desktop the search icon is the close). */
.nisa-header__search .nisa-header__search-close {
	display: none;
}

/* Mobile: the inline field is too narrow on phones, so the search opens as a
   centered modal over a dim backdrop (not a bar takeover). */
@media (max-width: 1023.98px) {
	/* Dim backdrop — fades with the header's is-search-open state. */
	.nisa-header::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 3;
		background: rgba(1, 15, 26, 0.5);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--nisa-header-transition), visibility var(--nisa-header-transition);
	}

	.nisa-header.is-search-open::after {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* The search form becomes a centered card above the backdrop. */
	.nisa-header__search {
		position: fixed;
		top: 14vh;
		left: 50%;
		right: auto;
		bottom: auto;
		width: min(90vw, 30rem);
		max-width: none;
		padding: 1rem 1.25rem;
		border-radius: 0.75rem;
		background: var(--nisa-header-bg);
		box-shadow: 0 12px 40px rgba(1, 15, 26, 0.35);
		overflow: visible;
		z-index: 4;
		transform: translate(-50%, -0.5rem);
		transition: opacity var(--nisa-header-transition), visibility var(--nisa-header-transition), transform var(--nisa-header-transition);
	}

	.nisa-header.is-search-open .nisa-header__search {
		width: min(90vw, 30rem);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	.nisa-header.is-search-open .nisa-header__search-close {
		display: inline-flex;
	}

	/* The search modal lives inside .nisa-header__bar, which is its own stacking
	   context (position:relative; z-index:2), so the modal's z-index is capped at
	   the bar's level. The dim backdrop (.nisa-header::after, z-3) sits in the
	   header's outer context, ABOVE the bar — so the modal would render BEHIND
	   the backdrop. Lift the bar above the backdrop while search is open. */
	.nisa-header.is-search-open .nisa-header__bar {
		z-index: 4;
	}
}

.nisa-header__search-panel-inner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 1440px;
	min-height: 200px;
	margin: 0 auto;
	padding: 3rem var(--nisa-header-padding-x) 2rem;
}

.nisa-header__search-form {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 0.75rem;
	border-bottom: 1px solid var(--nisa-header-accent);
	padding-bottom: 0.5rem;
}

.nisa-header__search-form::before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: currentColor;
	color: var(--nisa-header-accent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.nisa-header__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	border-bottom: 1px solid var(--nisa-header-accent);
	background: transparent;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--nisa-header-text);
	padding: 0.35rem 0;
	outline: none;
}

/* The field drops the UA outline for its underline look; keyboard focus
   thickens that underline 1px -> 3px instead (WCAG 2.4.7; accent on white
   ~8:1). Inset shadow, not an outline: the form is overflow:hidden for its
   slide-open width animation, which clipped an outside ring's left edge.
   No layout shift (box-shadow takes no space). */
.nisa-header__search-input:focus-visible {
	box-shadow: inset 0 -2px 0 var(--nisa-header-accent);
}

.nisa-header__search-input::placeholder {
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-weight: 300;
	color: var(--nisa-header-text);
	opacity: 0.4;
}

.nisa-header__search-submit,
.nisa-header__search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--nisa-header-accent);
	cursor: pointer;
	transition: background-color var(--nisa-header-transition), color var(--nisa-header-transition);
}

.nisa-header__search-submit:hover,
.nisa-header__search-close:hover {
	background-color: var(--nisa-header-light-blue);
}

.nisa-header__search-submit:focus-visible,
.nisa-header__search-close:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__search-submit svg,
.nisa-header__search-close svg {
	width: 20px;
	height: 20px;
}

/* -----------------------------------------------
   Mobile header adjustments (< 1024px)
   ----------------------------------------------- */

@media (max-width: 1023.98px) {
	/* Space the search toggle off the hamburger. */
	.nisa-header__search-toggle {
		margin-right: 0.5rem;
	}

	/* Search opens as a compact panel below the header (like the drawer). The
	   header's search icon becomes the close control, so the in-panel close and
	   the tall desktop sizing aren't needed. */
	.nisa-header__search-panel-inner {
		min-height: 0;
		padding-top: 1.25rem;
		padding-bottom: 1.5rem;
	}

	.nisa-header__search-close {
		display: none;
	}
}

/* -----------------------------------------------
   Hamburger Toggle (mobile only)
   ----------------------------------------------- */

.nisa-header__drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center; /* bar is align-items:stretch; center the 44px control with the logo */
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.nisa-header__drawer-toggle:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.nisa-header__drawer-toggle {
		display: none;
	}
}

.nisa-header__hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
	height: 24px;
}

.nisa-header__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--nisa-header-text);
	border-radius: 1px;
	transition: transform var(--nisa-header-transition), opacity var(--nisa-header-transition);
}

.nisa-header__drawer-toggle[aria-expanded="true"] .nisa-header__hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nisa-header__drawer-toggle[aria-expanded="true"] .nisa-header__hamburger span:nth-child(2) {
	opacity: 0;
}

.nisa-header__drawer-toggle[aria-expanded="true"] .nisa-header__hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -----------------------------------------------
   Mobile Drawer
   ----------------------------------------------- */

/* Mobile menu — full-width panel UNDER the header bar (not a modal / off-canvas).
   JS measures the header's bottom edge into --nisa-drawer-top and locks scroll while
   open, so the panel spans from just below the header to the viewport bottom. The
   header stays visible above it and the hamburger is the close control. */
.nisa-header__drawer {
	position: fixed;
	top: var(--nisa-drawer-top, 7rem);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: var(--nisa-header-bg);
	opacity: 0;
	transform: translateY(-10px);
	visibility: hidden;
	transition: opacity var(--nisa-header-transition), transform var(--nisa-header-transition), visibility var(--nisa-header-transition);
	overflow: hidden; /* panels scroll internally */
}

.nisa-header__drawer.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* Landmark wrapper — generates no box, so the absolutely-positioned panels
   resolve to the fixed drawer as their containing block. */
.nisa-header__drawer-nav {
	display: contents;
}

/* Drill-down panels
   Each nav level is a full-size panel stacked on the drawer. The active panel
   sits at x:0; parked panels sit off-screen right (unvisited) or left (drilled
   past). header.js toggles is-active / is-left and inert. */
.nisa-header__drawer-panel {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--nisa-header-bg);
	transform: translateX(100%);
	transition: transform var(--nisa-header-transition);
}

.nisa-header__drawer-panel.is-active {
	transform: translateX(0);
}

.nisa-header__drawer-panel.is-left {
	transform: translateX(-100%);
}

/* Sticky back bar on drilled panels */
/* The whole sticky header row IS the back control — clicking anywhere returns to
   the previous level. Serif + xxl to match the top-level parent items; the chevron
   scales from the row's font-size (0.7em) so it matches the title, and the row is
   underlined with the tan divider. */
.nisa-header__drawer-panel-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1rem var(--nisa-header-padding-x);
	border: none;
	border-bottom: 1px solid var(--nisa-header-tan);
	background-color: var(--nisa-header-bg);
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--nisa-header-text);
	text-align: left;
	cursor: pointer;
}

.nisa-header__drawer-panel-head:hover {
	color: var(--nisa-header-accent);
}

.nisa-header__drawer-panel-head:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

.nisa-header__chevron--back {
	flex: none;
}

/* Section title — serif + xxl, matching the top-level parent items. */
.nisa-header__drawer-panel-title {
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.1;
	color: inherit;
}

.nisa-header__drawer-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--nisa-header-padding-x) 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.nisa-header__drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.75rem 0;
	border: none;
	border-bottom: 1px solid rgba(130, 168, 184, 0.3); /* matches the header bar hairline */
	background: none;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--nisa-header-text);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.nisa-header__drawer-link:hover,
.nisa-header__drawer-link:focus-visible {
	color: var(--nisa-header-accent);
}

.nisa-header__drawer-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* Top-level "parent pages" (root panel only) — serif, xxl, extra padding. */
.nisa-header__drawer-panel[data-level="0"] .nisa-header__drawer-link {
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.1;
	padding: 1.1rem 0;
}

/* Flattened bucket groups inside a section panel: the bucket label is an
   eyebrow, its links sit inline beneath it (no extra drill level). */
.nisa-header__drawer-group-label {
	margin: 0;
	padding: 1.25rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nisa-header-accent);
}

.nisa-header__drawer-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* Menu items carrying the `webinar-nav` CSS class (Appearance → Menus) are
   hidden in the mobile drawer. The PPA webinar item is a callout CARD in the
   desktop mega menu; in the drawer it became a second text link to the same
   Quarterly Market Webinar page (BugHerd #922). The drawer only exists below
   1024px, so this is mobile/tablet only. Class name is the editor-facing one
   Landon chose, hence no nisa- prefix. */
.nisa-header__drawer .webinar-nav {
	display: none;
}

/* Forward "drill" chevron */
.nisa-header__chevron--drill {
	flex: none;
	color: var(--nisa-header-accent);
}

/* Drawer utility links (Careers, Subscribe) */
.nisa-header__drawer-utility {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 1.5rem var(--nisa-header-padding-x) 0;
	border-top: 1px solid var(--nisa-header-muted);
}

.nisa-header__drawer-utility-link {
	display: block;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--nisa-header-accent);
	text-decoration: none;
}

.nisa-header__drawer-utility-link:hover {
	color: var(--nisa-header-text);
}

.nisa-header__drawer-utility-link:focus-visible {
	outline: 2px solid var(--nisa-header-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Overlay
   ----------------------------------------------- */

.nisa-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: var(--nisa-header-text);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--nisa-header-transition), visibility var(--nisa-header-transition);
}

.nisa-header__overlay.is-active {
	opacity: 0.5;
	visibility: visible;
}

/* -----------------------------------------------
   Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nisa-header,
	.nisa-header__utility-bar,
	.nisa-header__bar,
	.nisa-header__mega-panel,
	.nisa-header__search-panel,
	.nisa-header__drawer,
	.nisa-header__drawer-panel,
	.nisa-header__overlay,
	.nisa-header__hamburger span,
	.nisa-header__chevron,
	.nisa-header__menu-link,
	.nisa-header__mega-link,
	.nisa-header__mega-col-header,
	.nisa-header__mega-col-link,
	.nisa-header__mega-overview-link,
	.nisa-header__drawer-link,
	.nisa-header__search-toggle,
	.nisa-header__search-submit,
	.nisa-header__search-close,
	.nisa-header__utility-link {
		transition: none;
	}
}

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

/* None needed. The header is position:sticky (see top of file), so it takes its
   space in normal flow and content follows below it — with or without JS/Lenis. */