/**
 * ICpEP-Qatar site header & footer.
 *
 * Colors/fonts read Elementor's live Global Color/Font custom properties
 * (Site Settings > Global Colors/Fonts, wired up in
 * wp-content/migrations/apply-design-system.php) via var(), with this
 * project's documented hex/font values only as the fallback — never a
 * rogue hardcoded value fighting the Kit. See CLAUDE.md "Token Alignment".
 */

:root {
	--icpep-header-height: 84px;
	/* Floating pill's own top offset + a little breathing room — every
	   page that compensates for the header being taken out of flow
	   (position:fixed) adds this on top of its own padding, so this one
	   value has to cover the pill's full footprint: the top gap
	   (clamp(16px,2vw,24px), 24px at its max) plus the pill's own
	   min-height (60px, see .icpep-header__inner below) = 84px. */
	--icpep-header-top-gap: clamp( 16px, 2vw, 24px );
	--icpep-header-pill-max-width: 1100px;
	--icpep-content-max-width: 1200px;
	--icpep-border-light: #e2e8f0;
	--icpep-border-dark: #1c2b4a;
	/* Slate used for all secondary footer text (nav links, mission copy,
	   address, copyright bar). The footer's flat background (see
	   .icpep-footer) is rgba(0,163,224,0.45) over white, which flattens
	   to ~rgb(140,213,241) — a light tint the standard WCAG contrast
	   formula needs as an opaque RGB before checking. Slate-700 (#334155,
	   one step darker than the site's usual slate-600) only cleared
	   5.20:1 there — short of AAA's 7:1. This slate-800 clears ~8.97:1. */
	--icpep-footer-muted: #1e293b;
}

/* ==========================================================
   Header
   ========================================================== */

.icpep-header {
	/* Floating glass pill, sitewide — out of document flow (position:
	   fixed) and inset from the viewport edges on all sides, rather than
	   a full-width bar. Every template that opens with content tall
	   enough to sit behind it compensates with its own top padding equal
	   to --icpep-header-height (page.php's .icpep-page-header, single.
	   php's .icpep-article-header, the front page's already-generous
	   hero padding) — that variable's value already accounts for this
	   pill's top gap plus its own height, so those pages don't need to
	   know anything changed shape. */
	position: fixed;
	/* WP core sets this custom property on html.wp-toolbar when an admin
	   is logged in (32px desktop / 46px <783px) — without it, a header
	   pinned to a bare `top` sticks underneath the fixed (z-index 99999)
	   admin bar instead of below it. */
	top: calc( var( --wp-admin--admin-bar--height, 0px ) + var( --icpep-header-top-gap ) );
	left: 50%;
	transform: translateX( -50% );
	width: calc( 100% - 2rem );
	max-width: var( --icpep-header-pill-max-width );
	z-index: 100;
	border-radius: 9999px;
	/* Fully transparent at first paint — no fill, no blur, no border/
	   shadow — so only the logo/nav/CTA float over the hero with no
	   visible pill surface. `.is-scrolled` (assets/js/header-nav.js,
	   toggled past a scroll threshold) is what turns it into the actual
	   frosted glass pill; see that rule below for the visible state. */
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid transparent;
	box-shadow: none;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/*
 * The pill itself — only appears once scrolled. Values are what
 * `.icpep-header` used to carry unconditionally (frosted from first
 * paint); moved here so the transparent base state above has something
 * to transition *into* on scroll instead of just fading a fill in place.
 */
.icpep-header.is-scrolled {
	background-color: rgba( 255, 255, 255, 0.85 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border-color: rgba( 255, 255, 255, 0.75 );
	box-shadow: 0 12px 36px rgba( 11, 19, 43, 0.16 ), inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-header,
	.icpep-header.is-scrolled,
	#site-header .icpep-header__nav {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

#site-header .icpep-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 1rem, 3vw, 2rem );
	/* Generous horizontal, compact vertical — the pill silhouette's
	   defining proportion. min-height (not padding-block) sets the
	   vertical footprint so flex centering does the balancing instead of
	   fixed top/bottom padding fighting the logo's own height. */
	padding-inline: clamp( 1.5rem, 4vw, 2.25rem );
	min-height: 60px;
}

#site-header .icpep-header__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

#site-header .icpep-header__brand .custom-logo {
	/* Trimmed from clamp(48px,5vw,52px) — the pill's 60px min-height (was
	   the old bar's 76px) doesn't have room for a 52px mark plus its own
	   comfortable clear space above/below without the pill looking
	   cramped. */
	height: clamp( 38px, 4vw, 44px );
	max-height: 44px;
	width: auto;
	display: block;
}

#site-header .icpep-header__logo-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

#site-header .icpep-header__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
}

#site-header .icpep-header__wordmark-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var( --e-global-color-primary, #0b132b );
}

#site-header .icpep-header__wordmark-subtitle {
	margin-top: 2px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --e-global-color-accent, #8a1538 );
}

#site-header .icpep-header__site-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: var( --e-global-typography-primary-font-weight, 700 );
	font-size: 1.15rem;
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
}

#site-header .icpep-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

#site-header .icpep-header__nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: clamp( 1rem, 2vw, 2rem );
	margin: 0;
	padding: 0;
}

#site-header .icpep-header__nav a {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
	padding: 0.5rem 1.1rem;
	/* Set at rest, not just on the hover/active state below — the shape
	   is already "there" with no fill, so the glass pill's background
	   fades cleanly into a pre-formed slot on hover instead of the
	   corners visibly rounding off at the same time the fill appears. */
	border-radius: 9999px;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* One glass-pill treatment for hover, keyboard focus, AND the current
   page — not three different states with three different looks — and
   unguarded by any media query, so desktop's horizontal bar and
   mobile's drawer list get the exact same visual language rather than
   mobile settling for a plainer fallback. Same "Liquid Glass" material
   as the header pill and mobile drawer this sits inside (frosted white
   + blur/saturate), but with its own border/shadow so it still reads as
   a distinct raised chip rather than disappearing into an already-white
   background once the header/drawer has scrolled into its own glass
   state.

   The current-page selector is scoped to `> ul >` (direct children of
   the nav's own top-level list) rather than a bare descendant selector
   — WordPress's nav walker isn't shy about marking more than one
   .current-menu-item at once (a submenu item for the page actually
   being viewed AND, depending on the item's own URL, siblings that
   share its prefix), and a plain `.icpep-header__nav .current-menu-item`
   would have matched all of those anywhere in the tree, including
   inside .sub-menu. Submenu links deliberately don't get a "current"
   treatment at all below — see that rule's own comment. */
#site-header .icpep-header__nav a:hover,
#site-header .icpep-header__nav a:focus-visible,
#site-header .icpep-header__nav > ul > .current-menu-item > a {
	/* cyan-deep, not raw Secondary — text on the glass header only clears
	   2.87:1 with #00A3E0. */
	color: var( --icpep-cyan-deep );
	background-color: rgba( 255, 255, 255, 0.7 );
	backdrop-filter: blur( 12px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 180% );
	box-shadow: 0 2px 10px rgba( 11, 19, 43, 0.1 ), inset 0 1px 0 rgba( 255, 255, 255, 0.8 );
}

@media ( prefers-reduced-transparency: reduce ) {
	#site-header .icpep-header__nav a:hover,
	#site-header .icpep-header__nav a:focus-visible,
	#site-header .icpep-header__nav > ul > .current-menu-item > a {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* ==================================================================
   Dropdown / sub-menu (Leadership anchor links)
   ================================================================== */

/*
 * Desktop dropdown: slides down from the parent link with a subtle
 * translateY + fade. Revealed on :hover and :focus-within so both
 * mouse and keyboard users see it (keyboard moves focus into the list,
 * which keeps :focus-within true). No extra JS is needed.
 */
#site-header .icpep-header__nav .menu-item-has-children {
	position: relative;
}

/* Chevron indicator — pure CSS, no extra icon font needed. */
#site-header .icpep-header__nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.4em;
	vertical-align: middle;
	border-top: 4px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	transition: transform 0.2s ease;
}

#site-header .icpep-header__nav .menu-item-has-children:is( :hover, :focus-within, .is-open ) > a::after {
	transform: rotate( -180deg );
}

#site-header .icpep-header__nav .sub-menu {
	position: absolute;
	top: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% ) translateY( -4px );
	min-width: 220px;
	background-color: rgba( 255, 255, 255, 0.96 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid var( --icpep-border-light );
	border-radius: 14px;
	padding: 0.5rem 0;
	box-shadow:
		0 4px 12px rgba( 11, 19, 43, 0.08 ),
		0 16px 32px -8px rgba( 11, 19, 43, 0.14 );
	list-style: none;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 200;
	flex-direction: column;
	gap: 0;
}

#site-header .icpep-header__nav .menu-item-has-children:is( :hover, :focus-within ) > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX( -50% ) translateY( 0 );
}

#site-header .icpep-header__nav .sub-menu li {
	display: block;
}

#site-header .icpep-header__nav .sub-menu a {
	display: block;
	padding: 0.65rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	/* Same pill shape and radius as the top-level nav links above —
	   was a flat 8px card with a solid --icpep-mist hover fill; now the
	   same glass-pill system as the rest of the menu instead of a
	   second, plainer treatment one level down. */
	border-radius: 9999px;
	margin-inline: 0.35rem;
}

/* Hover/focus only — deliberately no .current-menu-item treatment here,
   unlike the top-level nav above. WordPress's nav walker marks a submenu
   item "current" fairly loosely (any item sharing the viewed page's URL
   prefix, not necessarily just one exact match), so with all of a
   dropdown's items able to end up flagged at once, a current-page pill
   at this level was rendering as every submenu row looking "active"
   simultaneously rather than picking out one. The top-level Leadership/
   News & Events parent still gets its own current-page pill from the
   scoped `> ul >` rule above, which is enough of a "you're in here"
   signal without this second, unreliable layer underneath it. */
#site-header .icpep-header__nav .sub-menu a:hover,
#site-header .icpep-header__nav .sub-menu a:focus-visible {
	color: var( --icpep-cyan-deep );
	background-color: rgba( 255, 255, 255, 0.7 );
	backdrop-filter: blur( 12px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 180% );
	box-shadow: 0 2px 10px rgba( 11, 19, 43, 0.1 ), inset 0 1px 0 rgba( 255, 255, 255, 0.8 );
}

#site-header .icpep-header__nav .sub-menu a:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: -2px;
}

@media ( prefers-reduced-transparency: reduce ) {
	#site-header .icpep-header__nav .sub-menu a:hover,
	#site-header .icpep-header__nav .sub-menu a:focus-visible {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Mobile: expand sub-menu inline inside the drawer — no absolute positioning. */
@media ( max-width: 767px ) {
	#site-header .icpep-header__nav .sub-menu {
		/* Explicit resets for every offset/sizing property the desktop
		   rule above sets — not just `position: static`. That alone
		   *should* be enough (position:static makes top/left/right/
		   bottom inert per spec), but this accordion was rendering with
		   its content shifted off the left edge of the drawer card
		   entirely, which is exactly what `left: 50%; transform:
		   translateX(-50%)` produces on a `min-width: 220px` box anchored
		   near the drawer's own left edge — centering it there pushes
		   most of a 220px-wide box past x:0. Resetting every one of
		   those properties explicitly removes any doubt about which of
		   them was still in effect, rather than trusting position:static
		   alone to neutralize all of them. */
		position: static;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		min-width: 0;
		width: 100%;
		/* translateZ(0), not `none` — visually identical (moves nothing)
		   but forces WebKit to promote this to its own compositing layer.
		   Nested inside .icpep-header__nav, which has its own
		   backdrop-filter + overflow:hidden + animated max-height (see
		   the mobile block below): without a layer of its own, iOS
		   Safari's blur compositing for the outer drawer would sometimes
		   fail to correctly re-composite THIS inner clipped+animating
		   region on every frame of the accordion transition, leaving
		   submenu text rendered blank/invisible or with stray leftover
		   glyph fragments bleeding outside the clip bounds mid-animation
		   — a known WebKit rendering bug with this exact combination. */
		transform: translateZ( 0 );
		-webkit-transform: translateZ( 0 );
		opacity: 1;
		pointer-events: auto;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-left: 2px solid var( --icpep-border-light );
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		margin-left: 0.5rem;
		max-height: 0;
		overflow: hidden;
		/* `visibility` (not just max-height) is the actual fix for a
		   documented iOS Safari bug: text inside content revealed purely
		   by a max-height transition can fail to ever paint — the row's
		   border/background still show (separate paint layers from
		   text), so the accordion looked like a stack of empty divider
		   lines. `visibility` changes are a much stronger repaint
		   trigger than max-height alone, forcing WebKit to lay the text
		   out fresh every time instead of assuming the previously-
		   collapsed content is still good. Delayed on the way OUT (only
		   hides once the collapse has actually finished, so it doesn't
		   cut the closing animation off mid-flight) but instant on the
		   way IN (text needs to be paintable from the first frame of
		   the expand, not just at the end of it). */
		visibility: hidden;
		transition: max-height 0.25s ease, visibility 0s linear 0.25s;
	}

	/* When parent link is focused/tapped, the sub-menu stays open via
	   :focus-within — this keeps it usable without JS on mobile too.
	   header-nav.js additionally sets an exact pixel max-height inline
	   once `.is-open` is toggled (see setSubMenuOpen()) — precise to
	   the submenu's real content height rather than this flat fallback
	   value, which only governs the JS-independent :focus-within path
	   (e.g. tabbing straight into a link with the keyboard) and is
	   deliberately generous so it never clips a longer list itself. */
	#site-header .icpep-header__nav .menu-item-has-children:is( :hover, :focus-within ) > .sub-menu,
	#site-header .icpep-header__nav .menu-item-has-children.is-open > .sub-menu {
		max-height: 600px;
		visibility: visible;
		transition: max-height 0.25s ease, visibility 0s linear 0s;
		/* The desktop `:is(:hover, :focus-within) > .sub-menu` rule
		   (unguarded by any media query, line ~259) sets `transform:
		   translateX(-50%) translateY(0)` and has *higher* specificity
		   than the plain `.sub-menu` mobile reset above (4 class-level
		   selectors vs. 2) — specificity beats source order regardless of
		   which one is inside a media query. A real tap on iOS Safari
		   puts the tapped link into :focus-within (unlike a synthetic
		   JS .click(), which doesn't), so that desktop transform was
		   firing on mobile too: translateX(-50%) on a now block-width
		   .sub-menu shifts it left by half *its own* width, pushing most
		   of the accordion — and its text — off the left edge of the
		   drawer card. This selector matches the desktop one's shape, so
		   it wins on specificity and source order alike; redeclaring
		   transform here is what actually neutralizes it on mobile. */
		transform: translateZ( 0 );
		-webkit-transform: translateZ( 0 );
	}

	/* border-radius/margin-inline intentionally NOT reset here (unlike
	   the old border-radius:0/margin-inline:0) — this lets the pill
	   shape and the default rules above continue in from the desktop
	   dropdown, so mobile's inline accordion uses the exact same glass
	   pill instead of a flatter, unrounded row. No border-bottom either:
	   each row's own hover/active pill is the separator now, matching
	   the top-level nav rows above it. */
	#site-header .icpep-header__nav .sub-menu a {
		padding: 0.6rem 1.1rem;
		margin-bottom: 0.15rem;
		font-size: 0.9rem;
		line-height: 1.4;
		/* Crisp glyphs over the drawer's backdrop-filter blur — without
		   this, WebKit's text antialiasing over a blurred/translucent
		   backdrop can render noticeably fainter than the same text does
		   elsewhere on the page, reading as "invisible" at this font size. */
		-webkit-font-smoothing: antialiased;
	}

	#site-header .icpep-header__nav .menu-item-has-children > a::after {
		float: right;
	}
}


#site-header .icpep-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Icon-only glass button — same footprint/material as .icpep-header__toggle
   next to it (44px circle, frosted-white "Liquid Glass" surface) rather
   than the filled cyan pill with a text label this used to be. Identical
   treatment on desktop and mobile: at header-pill size, a text CTA and an
   icon CTA read as two different weights of control sitting side by side
   with the hamburger; matching them to the toggle's own material makes the
   two header controls read as one consistent pair instead. */
#site-header .icpep-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var( --e-global-color-primary, #0b132b );
	background-color: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 9999px;
	box-shadow: 0 4px 14px rgba( 11, 19, 43, 0.1 ), inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#site-header .icpep-header__cta-icon {
	width: 20px;
	height: 20px;
}

/* Logged-in state: the person-outline icon above swaps for these 1-2
   letter initials (hello_elementor_child_current_user_initials(),
   inc/login-modal.php) inside the exact same glass circle — same
   control, same footprint, just a different fill once there's an
   actual account to represent. */
#site-header .icpep-header__cta-initials {
	font-family: var( --e-global-typography-accent-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.02em;
}

#site-header .icpep-header__cta:hover,
#site-header .icpep-header__cta:focus-visible {
	background-color: rgba( 255, 255, 255, 0.78 );
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 11, 19, 43, 0.14 ), inset 0 1px 0 rgba( 255, 255, 255, 0.8 );
}

#site-header .icpep-header__cta:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep, #007ead );
	outline-offset: 2px;
}

/* Mobile hamburger toggle — hidden on desktop. 44px, not 40px: below the
   WCAG/HIG minimum touch target on the one control every mobile visitor
   needs to reach the nav. */
/* Same frosted "Liquid Glass" material as .icpep-header__cta next to it —
   previously plain transparent with just a hairline border, which is why
   the open (X) state read as having "no background" at all: there was
   genuinely none, only the three bars redrawn as an X with nothing behind
   them. One glass surface now covers both the closed (hamburger) and open
   (X) states rather than treating them differently, so the button doesn't
   visually change material the moment it's tapped. */
#site-header .icpep-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 9999px;
	box-shadow: 0 4px 14px rgba( 11, 19, 43, 0.1 ), inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#site-header .icpep-header__toggle:hover,
#site-header .icpep-header__toggle:focus-visible {
	background-color: rgba( 255, 255, 255, 0.78 );
	box-shadow: 0 6px 18px rgba( 11, 19, 43, 0.14 ), inset 0 1px 0 rgba( 255, 255, 255, 0.8 );
}

#site-header .icpep-header__toggle:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep, #007ead );
	outline-offset: 2px;
}

@media ( prefers-reduced-transparency: reduce ) {
	#site-header .icpep-header__cta,
	#site-header .icpep-header__toggle {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

#site-header .icpep-header__toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var( --e-global-color-primary, #0b132b );
	transition: transform 0.2s ease, opacity 0.2s ease;
}

#site-header .icpep-header__toggle[ aria-expanded='true' ] .icpep-header__toggle-bar:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

#site-header .icpep-header__toggle[ aria-expanded='true' ] .icpep-header__toggle-bar:nth-child( 2 ) {
	opacity: 0;
}

#site-header .icpep-header__toggle[ aria-expanded='true' ] .icpep-header__toggle-bar:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ---------- Mobile header (<768px) ---------- */
@media ( max-width: 767px ) {
	#site-header .icpep-header__toggle {
		display: flex;
	}

	/* A separate floating glass card below the pill, not a panel flush
	   against its bottom edge — the pill's own footprint (rounded,
	   inset from the viewport, its own shadow) stays intact and
	   untouched by the menu opening; this is a second, independent
	   surface that happens to sit just underneath it. */
	#site-header .icpep-header__nav {
		position: absolute;
		top: calc( 100% + 10px );
		left: 0;
		right: 0;
		flex-direction: column;
		background-color: rgba( 255, 255, 255, 0.9 );
		backdrop-filter: blur( 16px ) saturate( 180% );
		-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
		border: 1px solid rgba( 255, 255, 255, 0.7 );
		border-radius: 24px;
		box-shadow: 0 12px 32px rgba( 11, 19, 43, 0.14 ), inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.2s ease;
		/* Own compositing layer — see the matching comment on the nested
		   .sub-menu rule above for why this specific combination
		   (backdrop-filter + overflow:hidden + an animated max-height)
		   needs it on iOS Safari. */
		transform: translateZ( 0 );
		-webkit-transform: translateZ( 0 );
	}

	#site-header .icpep-header__nav.is-open {
		max-height: 480px;
		opacity: 1;
	}

	/* background-color/backdrop-filter for this state are already handled
	   by the sitewide prefers-reduced-transparency block above (same
	   selector) — this just adds the solid border this file's mobile
	   glass-card rule introduces, which that earlier block predates. */
	@media ( prefers-reduced-transparency: reduce ) {
		#site-header .icpep-header__nav {
			border-color: var( --icpep-border-light );
		}
	}

	#site-header .icpep-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		/* Divider lines used to be what separated rows; now that each row
		   is its own glass pill on hover/active instead, a small gap
		   between rows is what keeps the (unfilled, invisible-at-rest)
		   pills from reading as one solid stack. */
		gap: 0.2rem;
		padding: 0.5rem clamp( 1rem, 4vw, 2rem ) 1rem;
	}

	#site-header .icpep-header__nav a {
		display: block;
		padding: 0.75rem 1.1rem;
	}

}

/* ---------- Very small phones: drop the subline, keep the wordmark tight ---------- */
@media ( max-width: 400px ) {
	#site-header .icpep-header__wordmark-subtitle {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-header,
	#site-header .icpep-header__nav,
	#site-header .icpep-header__toggle-bar,
	#site-header .icpep-header__cta {
		transition: none;
	}
}

/* ==========================================================
   Footer
   ========================================================== */

.icpep-footer {
	position: relative;
	overflow: hidden;
	/* Flat cyan tint — replaces the previous cyan → white → maroon → white
	   panning gradient with a single solid wash. This is the same
	   rgba(0,163,224,0.45)-over-white color the old gradient peaked at on
	   its left edge, which is why --icpep-footer-muted (below) still
	   clears AAA here without any change. A plain repeating dot-matrix
	   (no mask/radial falloff, unlike the old .icpep-footer__mesh) sits
	   directly on the tint via background-image — subtle enough at 12%
	   opacity not to touch that same contrast math. */
	background-color: rgba( 0, 163, 224, 0.45 );
	background-image: radial-gradient( rgba( 11, 19, 43, 0.12 ) 1.2px, transparent 1.2px );
	background-size: 20px 20px;
	color: var( --e-global-color-text, #1f2937 );
}

.icpep-footer__inner {
	position: relative;
	z-index: 2;
	max-width: var( --icpep-content-max-width );
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1.5rem, 4vw, 3rem );
	padding: clamp( 2.5rem, 6vw, 4rem ) clamp( 1rem, 4vw, 2rem );
}

@media ( max-width: 767px ) {
	.icpep-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.icpep-footer__col {
	min-width: 0;
}

.icpep-footer__logo {
	display: inline-flex;
	background-color: transparent;
	margin-bottom: 1.25rem;
}

.icpep-footer__logo .custom-logo {
	width: 80px;
	height: 80px;
	object-fit: contain;
	/* Deeper/darker than the hero's shadow — a light drop-shadow would
	   barely separate the seal's own white/silver ring from this light
	   background, so this needs more weight to read as elevation. */
	filter: drop-shadow( 0 4px 14px rgba( 11, 19, 43, 0.18 ) );
}

.icpep-footer__chapter-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var( --e-global-color-primary, #0b132b );
	margin: 0 0 0.75rem;
	line-height: 1.4;
}

.icpep-footer__mission {
	color: var( --icpep-footer-muted );
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

.icpep-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.icpep-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --icpep-border-light );
	background-color: #ffffff;
	color: #334155;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.icpep-footer__social-link svg {
	width: 16px;
	height: 16px;
}

.icpep-footer__social-link:hover,
.icpep-footer__social-link:focus-visible {
	color: var( --e-global-color-secondary, #00a3e0 );
	border-color: var( --e-global-color-secondary, #00a3e0 );
	transform: translateY( -2px );
	box-shadow: 0 4px 10px rgba( 0, 163, 224, 0.18 );
}

.icpep-footer__social-link:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-footer__social-link {
		transition: none;
	}

	.icpep-footer__social-link:hover {
		transform: none;
	}
}

.icpep-footer__heading {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --e-global-color-primary, #0b132b );
	margin: 0 0 1rem;
}

.icpep-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.icpep-footer__links a,
.icpep-footer__link-pending {
	color: var( --icpep-footer-muted );
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s ease;
}

.icpep-footer__links a:hover,
.icpep-footer__links a:focus-visible {
	color: var( --e-global-color-accent, #8a1538 );
}

.icpep-footer__link-pending {
	/* Distinguished from an active link by italics, not by fading the
	   text — `opacity` blends the already-AAA --icpep-footer-muted color
	   toward the background, undoing that work. Italic reads as
	   "different" just as clearly without touching contrast. */
	font-style: italic;
	cursor: default;
}

.icpep-footer__address {
	font-style: normal;
	color: var( --icpep-footer-muted );
	font-size: 0.9rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.icpep-footer__address a {
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
	font-weight: 600;
}

.icpep-footer__address a:hover,
.icpep-footer__address a:focus-visible {
	color: var( --e-global-color-accent, #8a1538 );
}

.icpep-footer__affiliation {
	color: var( --icpep-footer-muted );
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
}

.icpep-footer__sub {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba( 11, 19, 43, 0.08 );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
	max-width: var( --icpep-content-max-width );
	margin: 0 auto;
	padding: 1.25rem clamp( 1rem, 4vw, 2rem );
}

.icpep-footer__copyright,
.icpep-footer__credit {
	margin: 0;
	font-size: 0.8rem;
	color: var( --icpep-footer-muted );
}

/* Agency credit — muted like the copyright line it sits beside, with a
   cyan hover on the link only (matches the sitewide link-hover pattern:
   --icpep-cyan-deep, not raw Secondary, for the same contrast reason
   documented on this file's other footer link rules). */
.icpep-footer__credit a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.icpep-footer__credit a:hover,
.icpep-footer__credit a:focus-visible {
	color: var( --icpep-cyan-deep );
}

@media ( max-width: 640px ) {
	.icpep-footer__sub {
		flex-direction: column;
		text-align: center;
		gap: 0.35rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-footer__credit a {
		transition: none;
	}
}