/**
 * IEMA site header / primary navigation.
 *
 * Two visual states, driven by JS class toggles on `.iema-header`:
 *   (default)   transparent bar over a page hero  — white logo + links
 *   .is-solid   solid white bar (brand-green underline) once the hero
 *               scrolls past — colored logo + grey links
 *   .is-open    mobile full-screen menu is open   — forces the solid look
 *
 * All selectors are namespaced under `.iema-header` / `.iema-` so the header
 * cannot clash with styles introduced by other pages.
 */

.iema-header *,
.iema-header *::before,
.iema-header *::after {
	box-sizing: border-box;
}

.iema-header {
	--iema-navy: #002147;
	--iema-green: #c1d82a;
	--iema-ink: #121212;
	--iema-grey: #767676;
	--iema-white: #ffffff;
	--iema-menu-bg: #f6f6f6;
	--iema-menu-border: #e0e0e0;
	--iema-h: 112px;
	--iema-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0.5 0.9 7 7.1 13.5 0.9' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1000;
	box-sizing: border-box;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
	margin-top: var(--wp-admin--admin-bar--height, 0);
}

@media (width < 780px) {
	.iema-header.is-solid {
		margin-top: 0;
	}
}

.iema-header__bar {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 70px;
}

/* -------------------------------------------------------------- Logo --- */
.iema-header__logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.iema-header__logo-img {
	display: block;
	width: 270px;
	height: 64px;
	object-fit: contain;
	transition: opacity 0.35s ease;
}

/* Stack the two logo variants so we can cross-fade between states. */
.iema-header__logo-img--dark {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.iema-header.is-solid .iema-header__logo-img--light,
.iema-header.is-open .iema-header__logo-img--light {
	opacity: 0;
}

.iema-header.is-solid .iema-header__logo-img--dark,
.iema-header.is-open .iema-header__logo-img--dark {
	opacity: 1;
}

/* ------------------------------------------------------- Panel/links --- */
.iema-header__panel {
	display: flex;
	align-items: center;
	gap: 24px;
}

.iema-header__nav {
	display: flex;
}

.iema-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iema-menu li {
	margin: 0;
	padding: 0;
	position: relative;
}

.iema-menu a:empty,
.sub-menu a:empty {
	display: none;
}

.iema-menu > li {
	transition: color 0.35s ease, border-color 0.35s ease;
}

.iema-header.is-solid .iema-menu > li {
	color: var(--iema-grey);
}

.iema-menu a {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	color: var(--iema-white);
	transition: color 0.35s ease, border-color 0.35s ease;
}

.nav-caret {
	width: 16.5px;
	height: 16.5px;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.25s ease;
}

.iema-header.is-solid .nav-caret {
	color: var(--iema-grey);
}

.nav-caret svg {
	width: 100%;
}

@media (width > 1024px) {
	.iema-menu > li {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0 0 4px;
		border-bottom: 1px solid transparent;
		color: var(--iema-white);
	}

	.nav-caret {
		color: var(--iema-white);
	}
}

@media (width < 1025px) {
	.iema-menu > li {
		position: relative;
	}

	.iema-menu > li a[aria-expanded="true"] ~ .nav-caret {
		transform: rotate(180deg);
	}
	
	.iema-menu .sub-menu li:last-child {
		border-bottom-color: transparent;
	}

	.nav-caret {
		width: 48.5px;
		height: 48.5px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		cursor: pointer;
		color: var(--iema-grey);
	}

	.nav-caret svg {
		width: 24px;
		height: 24px;
	}
}

/* Dropdown caret — shown for items flagged in the admin (`iema-has-dropdown`)
   or that have real child items (`menu-item-has-children`). */

/* Active item — underline. */
@media (width > 1024px) {
	.iema-menu > .menu-item:hover,
	.iema-menu > .current-menu-item,
	.iema-menu > .current_page_item,
	.iema-menu > .current-menu-ancestor,
	.iema-menu > .current_page_ancestor {
		border-bottom-color: currentColor;
	}
}

.iema-menu .sub-menu .current_page_item > a {
	border-bottom-color: transparent;
}

.iema-menu .sub-menu .menu-item {
	cursor: pointer;
}

/* -------------------------------------------------------- CTA pill --- */
/* Shape, size and default (primary) colours come from the global
   `.iema-btn` component (assets/css/buttons.css). Only the header's
   state-driven colour changes live here. */
.iema-header__cta-icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------- Hamburger toggle --- */
.iema-header__toggle {
	display: none;
	width: 48px;
	height: 48px;
	padding: 8px;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--iema-white);
}

.iema-header__toggle-box {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
}

.iema-header__toggle-bar {
	position: absolute;
	left: 9px;
	right: 9px;
	height: 3.5px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.iema-header__toggle-bar:nth-child(1) { top: 15px; }
.iema-header__toggle-bar:nth-child(2) { top: 23px; }
.iema-header__toggle-bar:nth-child(3) { top: 31px; }

/* ================================================= Solid (scrolled) === */
.iema-header.is-solid {
	background-color: var(--iema-white);
	border-bottom-color: var(--iema-green);
	animation: iema-slide-down 0.35s ease;
	position: fixed;
}

/* On pages with no hero the solid bar is present from load — no slide. */
.iema-header.iema-no-anim.is-solid {
	animation: none;
}

@keyframes iema-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.iema-header.is-solid .iema-menu a {
	color: var(--iema-grey);
}

.iema-header.is-solid .iema-header__cta {
	background-color: var(--iema-navy);
	border-color: var(--iema-navy);
	color: var(--iema-white);
}

.iema-header.is-solid .iema-header__cta:hover,
.iema-header.is-solid .iema-header__cta:focus-visible {
	background-color: #00152D;
	border-color: #C1D82A;
	color: #FFFFFF;
	box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.15);
}

.iema-header.is-solid .iema-header__toggle {
	color: var(--iema-navy);
}

@media (min-width: 1025px) {
	/* Reveal a submenu at ANY depth when its own parent item is hovered or
	   holds focus. Using `> .sub-menu` keeps each level independent, so a
	   level-2 flyout only opens for the level-1 item actually pointed at. */
	.iema-menu .menu-item.menu-item-has-children:hover > .sub-menu,
	.iema-menu .menu-item.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		pointer-events: all;
		overflow: visible;
	}

	.iema-menu .menu-item a ~ .nav-caret {
		transition: transform 0.25s ease;
		transition-delay: 0.25s;
	}

	/* Top-level caret flips up while its dropdown is open. */
	.iema-menu > .menu-item.menu-item-has-children:hover > a ~ .nav-caret,
	.iema-menu > .menu-item.menu-item-has-children:focus-within > a ~ .nav-caret {
		transform: rotate(180deg);
	}

	.iema-menu .sub-menu {
		position: absolute;
		list-style-type: none;
		padding: 24px;
		min-width: 380px;
		border-radius: 12px;
		background: #FFF;
		box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		row-gap: 16px;
		top: 24px;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	.iema-menu .sub-menu > li.menu-item a {
		padding: 16px;
		color: var(--Neutral-Black-Steel, #121212);
		text-align: left;
		font-family: Helvetica;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.iema-menu .sub-menu {
		position: absolute;
		list-style-type: none;
		box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease, height 0.25s ease;
		transition-delay: 0.25s;
		top: calc(100% + 12px);
		right: 0;
		z-index: 20;
		width: 300px;
		max-width: 84vw;
		padding: 24px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.iema-menu .sub-menu::before {
		position: absolute;
		content: '';
		top: -12px;
		left: -12px;
		right: -12px;
		z-index: 0;
		bottom: -12px;
	}

	.iema-menu .sub-menu > li.menu-item a {
		color: var(--Neutral-Black-Steel, #121212);
		text-align: left;
		font-family: Helvetica;
		font-style: normal;
		font-weight: 700;
		transition: background-color 150ms ease, color 150ms ease;
		display: block;
		padding: 16px;
		border-radius: 8px;
		background: #f3f8fe;
		color: #121212;
		font-size: 16px;
		font-weight: 700;
		line-height: normal;
		text-decoration: none;
	}

	.iema-menu .sub-menu > li.menu-item:hover a {
		background-color: #e6eff9;
	}

	.iema-menu .sub-menu > li.menu-item.current-menu-item a {
		background-color: #002147;
		color: #fff;
	}

	.iema-menu .sub-menu > li.menu-item.current-menu-item a {
		color: #fff;
	}

	.iema-menu .sub-menu > li.menu-item a {
		color: #121212;
		text-wrap: wrap;
	}

	/* ---- Level 2+ : nested submenus fly out to the side ---- */
	/* A nested submenu is anchored to its parent <li> (which is
	   position:relative) and opens to the right of the panel rather than
	   dropping below the header bar. The parent's ::before bridge (±12px)
	   spans this gap so the pointer keeps the chain open. */
	.iema-menu .sub-menu .sub-menu {
		top: -24px;
		left: calc(100% + 12px);
		right: auto;
	}

	/* If a right-edge flyout would overflow the viewport it can be flipped
	   by adding `.iema-flyout-left` to the parent item (set by JS). */
	.iema-menu .sub-menu .menu-item.iema-flyout-left > .sub-menu {
		left: auto;
		right: calc(100% + 12px);
	}

	/* Caret on a nested (level 2+) parent points toward its flyout. */
	.iema-menu .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-90deg);
	}

	.iema-menu .sub-menu .menu-item.iema-flyout-left > a::after {
		transform: rotate(90deg);
	}
}

/* ===================================================== Mobile / menu === */
@media (max-width: 1024px) {

	.iema-header__bar {
		padding: 24px;
		gap: 24px;
	}

	.iema-header__toggle {
		display: block;
		position: relative;
		z-index: 2;
	}

	/* Full-screen slide-in panel. */
	.iema-header__panel {
		position: fixed;
		inset: var(--iema-h) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 40px;
		padding: 24px 24px 100px;
		background-color: var(--iema-menu-bg);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.iema-header.is-open .iema-header__panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.iema-header:not(.is-solid) .iema-header__panel {
		margin-top: var(--wp-admin--admin-bar--height, 0);
	}

	.iema-header__nav {
		display: block;
	}

	.iema-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 16px 0;
	}

	.iema-menu li {
		border-bottom: 1px solid var(--iema-menu-border);
	}

	.iema-menu a {
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		border-bottom: 0;
		font-size: 16px;
		color: var(--iema-navy);
		text-wrap: wrap;
	}

	/* Active underline is not used in the mobile list. */
	.iema-menu .current-menu-item > a,
	.iema-menu .current_page_item > a {
		border-bottom-color: transparent;
	}

	.iema-menu .iema-has-dropdown > a::after,
	.iema-menu .menu-item-has-children > a::after {
		width: 24px;
		height: 24px;
		margin-left: 0;
		-webkit-mask-size: 24px 10px;
		mask-size: 24px 10px;
	}

	/* CTA becomes a left-aligned navy pill at the foot of the menu. */
	.iema-header__cta {
		align-self: flex-start;
		background-color: var(--iema-navy);
		border-color: var(--iema-navy);
		color: var(--iema-white);
		font-size: 20px;
		line-height: 23px;
	}

	.iema-header__cta-icon {
		width: 18px;
		height: 18px;
	}

	/* When the menu is open the bar always reads as the solid state. */
	.iema-header.is-open {
		background-color: var(--iema-white);
		border-bottom-color: var(--iema-green);
	}

	.iema-header.is-open .iema-header__toggle {
		color: var(--iema-navy);
	}

	/* Hamburger → X. */
	.iema-header.is-open .iema-header__toggle-bar:nth-child(1) {
		top: 23px;
		transform: rotate(45deg);
	}

	.iema-header.is-open .iema-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.iema-header.is-open .iema-header__toggle-bar:nth-child(3) {
		top: 23px;
		transform: rotate(-45deg);
	}

	.iema-header__panel .iema-menu .menu-item > .sub-menu {
		padding-left: 14px;
	}

	.iema-header__panel .iema-menu .menu-item > .sub-menu .menu-item {
		list-style-type: none;
		margin-top: 0;
	}

	/* --- Mobile submenu toggle (functionality only) ---
	   Submenus (every level) are collapsed by default and revealed only when
	   JS adds `.is-expanded` to their parent item. Existing open-state styling
	   above is left untouched. */
	.iema-header__panel .iema-menu .menu-item-has-children > .sub-menu {
		display: none;
	}

	.iema-header__panel .iema-menu .menu-item-has-children.is-expanded > .sub-menu {
		display: block;
	}
}

@media (max-width: 480px) {
	.iema-header__logo-img {
		width: 270px;
		height: 64px;
	}
	
	.iema-header__toggle {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Front page: let the full-width hero sit flush beneath the fixed header. */
.home .site-inner,
.home .content-sidebar-wrap,
.home .content {
	margin-top: 0;
	padding-top: 0;
}

.home .content .entry {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Push page content below the fixed bar when there is no hero to sit under. */
body.iema-no-hero {
	padding-top: 112px;
}

/* Lock scroll while the mobile menu is open. */
body.iema-menu-open {
	overflow: hidden;
}

/* Interior hero pages: same flush treatment as the front page so a
   page-banner sits full-bleed beneath the fixed transparent header. */
.iema-has-hero .site-inner,
.iema-has-hero .content-sidebar-wrap,
.iema-has-hero .content {
	margin-top: 0;
	padding-top: 0;
}

.iema-has-hero .content .entry {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ============================================ Level-2 parent chevron === */
/* A submenu item that has its own flyout needs a chevron, and the shared
   `.nav-caret` span was already being rendered for it — but it was both
   invisible and disruptive there. Only `.iema-menu > li` is laid out as a
   flex row, so inside a dropdown the caret (itself `display: flex`) dropped
   onto its own line, adding an unexplained gap below the item; and it
   inherited the top-level white colour, so it disappeared against the white
   panel. Pinning it inside the pill fixes both. */
@media (width > 1024px) {
	.iema-menu .sub-menu > li.menu-item-has-children {
		position: relative;
	}

	/* Reserve room so a long label never runs under the chevron. */
	.iema-menu .sub-menu > li.menu-item-has-children > a {
		padding-right: 44px;
	}

	.iema-menu .sub-menu > li.menu-item-has-children > .nav-caret {
		position: absolute;
		top: 50%;
		right: 16px;
		/* Points sideways, because the flyout opens beside the panel
		   rather than below it. */
		transform: translateY(-50%) rotate(-90deg);
		color: #121212;
		/* Desktop opens on hover; the caret must not swallow the link. */
		pointer-events: none;
	}

	/* Mirrored when JS flips the flyout to avoid the viewport edge. */
	.iema-menu .sub-menu > li.menu-item-has-children.iema-flyout-left > .nav-caret {
		transform: translateY(-50%) rotate(90deg);
	}

	/* The active pill inverts to navy, so the chevron follows its text. */
	.iema-menu .sub-menu > li.menu-item-has-children.current-menu-item > .nav-caret {
		color: #ffffff;
	}
}

@media (width < 1025px) {
	/* Mobile carets are absolutely positioned, and without a positioning
	   context on the nested item the caret would anchor to the top-level
	   entry and land far from the row it belongs to. */
	.iema-menu .sub-menu > li.menu-item-has-children {
		position: relative;
	}

	/* Accordion state — the top-level rule only matches `.iema-menu > li`. */
	.iema-menu .sub-menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .nav-caret {
		transform: rotate(180deg);
	}
}

/* ========================================== Level-3 flyout item states === */
/* The level-2 rules above style `li:hover a` — a descendant selector. Since
   the flyout only opens while its parent is hovered, that painted every link
   inside the flyout at once, so the third tier appeared permanently hovered
   and had no state of its own. The same applies to `current-menu-item a`,
   which turned a whole flyout navy. Reset the nested links, then give them
   their own hover/focus/current states. */
@media (width > 1024px) {
	.iema-menu .sub-menu .sub-menu > li.menu-item > a {
		background: #f3f8fe;
		color: #121212;
	}

	.iema-menu .sub-menu .sub-menu > li.menu-item:hover > a,
	.iema-menu .sub-menu .sub-menu > li.menu-item:focus-within > a {
		background-color: #e6eff9;
		color: #121212;
	}

	/* Keyboard users get a visible ring, not just the background shift. */
	.iema-menu .sub-menu .sub-menu > li.menu-item > a:focus-visible {
		outline: 2px solid #002147;
		outline-offset: 2px;
	}

	.iema-menu .sub-menu .sub-menu > li.menu-item.current-menu-item > a {
		background-color: #002147;
		color: #ffffff;
	}
}

/* Mobile: the accordion has no hover, but a pressed state helps confirm the
   tap on a nested item. */
@media (width < 1025px) {
	.iema-menu .sub-menu .sub-menu > li.menu-item > a:active {
		background-color: #e6eff9;
	}
}