/* ==========================================================================
   Header menu (2026-09)
   Lines of Business (`eq-mega`): the nine industries in a rail, the hovered
   industry's pages in one column beside it, and its photo and jobs button on
   the right. Digital Infrastructure has its own panel. Services (`eq-drop`):
   a single-column dropdown. Everything keys on those two classes, so no other
   menu is touched. The markup and its reasoning are in inc/header-menu.php.
   ========================================================================== */

:root {
	--eq-rail: #f3eee9;
	--eq-line: rgba(31, 61, 71, .14);
	--eq-hover: #f1ebe4;
	--eq-ease: cubic-bezier(.2, 0, 0, 1);
}

/* The drawer's back link is the first row of the industry list, and only shows drilled in. */
.header__nav li.eq-mega > ul.sub-menu > li.eq-back-row { display: none; }

/* The photo and the partner panel belong to the desktop panel and the drawer's drill-in; with no
   script there is no way to reach them sensibly, so they stay out of the plain nested lists. */
.header__nav li.eq-mega:not(.eq-js) .eq-feature,
.header__nav li.eq-mega:not(.eq-js) .eq-di { display: none; }

/* A Services group's pages are always shown, so the theme's open/close arrow has nothing to do. */
.header__nav li.eq-drop li.eq-group > .submenu-icon { display: none; }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 960px) {

	.header__nav ul li.eq-drop { position: relative; }

	/* The theme opens every sub-menu on :hover. These two stay laid out and are shown by the
	   script instead, with a short close delay so the pointer can cross the gap between the
	   link and the panel. */
	.header__nav li.eq-mega > ul.sub-menu,
	.header__nav li.eq-drop > ul.sub-menu {
		display: block;
		visibility: hidden;
		opacity: 0;
		translate: 0 -4px;
		transition: opacity .16s var(--eq-ease), translate .16s var(--eq-ease), visibility 0s linear .16s;
	}

	.header__nav li.eq-mega.is-open > ul.sub-menu,
	.header__nav li.eq-drop.is-open > ul.sub-menu,
	.header__nav li.eq-mega:not(.eq-js):focus-within > ul.sub-menu,
	.header__nav li.eq-drop:not(.eq-js):focus-within > ul.sub-menu,
	.header__nav li.eq-mega:not(.eq-js):hover > ul.sub-menu,
	.header__nav li.eq-drop:not(.eq-js):hover > ul.sub-menu {
		visibility: visible;
		opacity: 1;
		translate: 0 0;
		transition: opacity .16s var(--eq-ease), translate .16s var(--eq-ease), visibility 0s;
	}

	/* the header's own orange for the section you are in */
	.header__nav ul li.eq-mega.current-menu-ancestor > a,
	.header__nav ul li.eq-drop.current-menu-ancestor > a,
	.header__nav ul li.eq-mega.is-open > a,
	.header__nav ul li.eq-drop.is-open > a { color: var(--orange); }

	/* The bridge across the gap between a link and its panel, sized by the script to exactly
	   that gap so it never covers the link. */
	.header__nav li.eq-mega > ul.sub-menu::before,
	.header__nav li.eq-drop > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--eq-bridge, 0px);
	}

	/* ---- Services: one column */
	.header__nav li.eq-drop > ul.sub-menu {
		left: -20px;
		top: 100%; /* the script moves it down to the header's bottom rule */
		min-width: 230px;
		padding: 10px 0;
		background: var(--beige);
		box-shadow: 0 18px 40px rgba(31, 61, 71, .14), 0 0 0 .5px var(--eq-line);
	}
	.header__nav li.eq-drop > ul.sub-menu > li { margin: 0; padding: 0; }
	.header__nav li.eq-drop > ul.sub-menu > li > a {
		display: block;
		padding: 9px 20px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		transition: background-color .15s ease-out, box-shadow .15s ease-out, color .15s ease-out;
	}
	.header__nav li.eq-drop > ul.sub-menu > li > a:hover,
	.header__nav li.eq-drop > ul.sub-menu > li > a:focus-visible {
		background: var(--eq-hover);
		color: var(--main-blue);
		box-shadow: inset 3px 0 0 var(--orange);
	}

	/* ---- Services groups (Steve, 2026-10-12): each heading is a link, and its pages are always
	   shown beneath it rather than opening on hover like the theme's other nested lists. */
	.header__nav li.eq-drop > ul.sub-menu { padding: 6px 0 10px; }
	.header__nav li.eq-drop > ul.sub-menu > li.eq-group + li.eq-group {
		margin-top: 6px;
		padding-top: 6px;
		border-top: .5px solid var(--eq-line);
	}
	.header__nav li.eq-drop > ul.sub-menu > li.eq-group > .eq-group__label {
		display: block;
		padding: 10px 20px 4px;
		font-size: 13px;
		font-weight: 700;
		color: var(--main-blue);
		white-space: nowrap;
	}
	.header__nav li.eq-drop li.eq-group > ul.sub-menu {
		display: block;
		position: static;
		padding: 0;
		margin: 0;
		background: none;
		box-shadow: none;
	}
	.header__nav li.eq-drop li.eq-group > ul.sub-menu > li { margin: 0; padding: 0; }
	.header__nav li.eq-drop li.eq-group > ul.sub-menu > li > a {
		display: block;
		padding: 7px 20px 7px 32px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		transition: background-color .15s ease-out, box-shadow .15s ease-out, color .15s ease-out;
	}
	.header__nav li.eq-drop li.eq-group > ul.sub-menu > li > a:hover,
	.header__nav li.eq-drop li.eq-group > ul.sub-menu > li > a:focus-visible {
		background: var(--eq-hover);
		color: var(--main-blue);
		box-shadow: inset 3px 0 0 var(--orange);
	}

	/* ---- Lines of Business: rail | pages | photo */
	.header__nav li.eq-mega > ul.sub-menu {
		top: 100%;
		width: min(880px, calc(100vw - 40px));
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr) 290px;
		grid-template-rows: repeat(var(--eq-groups, 9), min-content) 1fr;
		padding: 12px 0;
		background: linear-gradient(90deg, var(--eq-rail) 0 250px, var(--beige) 250px);
		box-shadow: 0 24px 60px rgba(31, 61, 71, .18), 0 0 0 .5px var(--eq-line);
	}

	.header__nav li.eq-mega > ul.sub-menu > li { display: contents; }

	/* the rail */
	.header__nav li.eq-mega > ul.sub-menu > li > a {
		grid-column: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 11px 22px 11px 24px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
		color: var(--main-blue);
		transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
	}

	.header__nav li.eq-mega > ul.sub-menu > li > a::after {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		rotate: -45deg;
		opacity: .45;
		flex: none;
		transition: translate .15s ease-out, opacity .15s ease-out;
	}

	.header__nav li.eq-mega > ul.sub-menu > li.is-active > a {
		background: var(--beige);
		color: var(--main-blue);
		font-weight: 700;
		box-shadow: inset 3px 0 0 var(--orange);
	}
	.header__nav li.eq-mega > ul.sub-menu > li.is-active > a::after { opacity: 1; }

	/* Hover reads on top of the active state, since hovering also activates: the name turns
	   orange and the chevron steps right. */
	.header__nav li.eq-mega > ul.sub-menu > li > a:hover {
		background: var(--beige);
		color: var(--orange);
		box-shadow: inset 3px 0 0 var(--orange);
	}
	.header__nav li.eq-mega > ul.sub-menu > li > a:hover::after { translate: 3px 0; opacity: 1; }

	/* The panes, photos and partner panel all share the space right of the rail; one industry's
	   are shown at a time. */
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu,
	.header__nav li.eq-mega > ul.sub-menu > li > .eq-feature,
	.header__nav li.eq-mega > ul.sub-menu > li > .eq-di { display: none; }

	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu {
		position: static;
		grid-column: 2;
		grid-row: 1 / -1;
		align-content: start;
		margin: 0;
		padding: 24px 20px 28px 28px;
		background: none;
		box-shadow: none;
		/* inherit the panel's hidden/visible state; the pane itself never animates */
		visibility: inherit;
		opacity: 1;
		translate: none;
		transition: none;
	}
	.header__nav li.eq-mega > ul.sub-menu > li.is-active > ul.sub-menu { display: grid; }

	/* Without the script: the first industry's pane, or whichever is hovered. */
	.header__nav li.eq-mega:not(.eq-js) > ul.sub-menu > li:first-child > ul.sub-menu,
	.header__nav li.eq-mega:not(.eq-js) > ul.sub-menu > li:hover > ul.sub-menu { display: grid; }
	.header__nav li.eq-mega:not(.eq-js) > ul.sub-menu:has(> li:hover) > li:first-child:not(:hover) > ul.sub-menu { display: none; }

	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li { margin: 0; padding: 0; }

	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li > a {
		display: block;
		padding: 9px 12px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
		color: var(--main-blue);
		transition: background-color .15s ease-out;
	}
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover,
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible {
		background: var(--eq-hover);
		color: var(--main-blue);
	}
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a { color: var(--orange); }

	/* The pane's heading row: the industry's own page. Added by the script. */
	.header__nav li.eq-mega li.eq-row { margin: 0; padding: 0; }
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.eq-row--head {
		margin: 0 0 10px;
		padding: 0 0 12px;
		border-bottom: .5px solid var(--eq-line);
	}
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.eq-row--head > a.eq-head {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 4px 12px;
		font-size: 16px;
		font-weight: 700;
		transition: color .15s ease-out;
	}
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.eq-row--head > a.eq-head::after {
		content: "→";
		color: var(--orange);
		transition: translate .15s ease-out;
	}
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.eq-row--head > a.eq-head:hover { background: none; color: var(--orange); }
	.header__nav li.eq-mega > ul.sub-menu > li > ul.sub-menu > li.eq-row--head > a.eq-head:hover::after { translate: 3px 0; }

	/* The photo and jobs button, right of the pages. */
	.header__nav li.eq-mega > ul.sub-menu > li.is-active > .eq-feature {
		grid-column: 3;
		grid-row: 1 / -1;
		align-self: start;
		display: grid;
		gap: 14px;
		padding: 24px 24px 24px 0;
	}
	.header__nav li.eq-mega .eq-photo {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 4;
		object-fit: cover;
		background: var(--eq-rail);
		outline: 1px solid rgba(0, 0, 0, .1);
		outline-offset: -1px;
	}
	.header__nav li.eq-mega .eq-jobs {
		display: flex;
		justify-content: center;
		padding: 11px 16px;
		border-radius: 999px;
		background: var(--orange);
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		text-wrap: balance;
		transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
	}
	.header__nav li.eq-mega .eq-jobs:hover,
	.header__nav li.eq-mega .eq-jobs:focus-visible {
		background: transparent;
		color: var(--orange);
		box-shadow: inset 0 0 0 1.5px var(--orange);
	}

	/* Digital Infrastructure: its partner panel takes both columns right of the rail. */
	.header__nav li.eq-mega > ul.sub-menu > li.is-active > .eq-di {
		grid-column: 2 / -1;
		grid-row: 1 / -1;
		align-self: start;
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 20px 24px 24px;
		background: #fff;
		box-shadow: 0 0 0 .5px var(--eq-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.header__nav li.eq-mega > ul.sub-menu,
	.header__nav li.eq-drop > ul.sub-menu { transition: none; translate: none; }
	.header__nav li.eq-mega a,
	.header__nav li.eq-mega a::after,
	.header__nav li.eq-drop a { transition: none; }
}

/* ------------------------------------------- Digital Infrastructure panel */
.header__nav li.eq-mega .eq-di__hero {
	position: relative;
	display: block;
	min-height: 150px;
	overflow: hidden;
	color: #fff;
}
.header__nav li.eq-mega .eq-di__hero .eq-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	outline: 0;
}
.header__nav li.eq-mega .eq-di__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 40, .05) 20%, rgba(0, 0, 40, .78));
}
.header__nav li.eq-mega .eq-di__hero span {
	position: absolute;
	z-index: 2;
	left: 20px;
	right: 20px;
	bottom: 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
	color: #fff;
}
.header__nav li.eq-mega .eq-di__hero span::after { content: " →"; color: var(--orange); }
.header__nav li.eq-mega .eq-di__hero:hover span { text-decoration: underline; text-underline-offset: 3px; }
.header__nav li.eq-mega .eq-di__body {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 24px 24px 26px;
}
.header__nav li.eq-mega .eq-di__lead { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--main-blue); }
.header__nav li.eq-mega .eq-di__mark { display: block; width: min(190px, 100%); padding: 0; }
.header__nav li.eq-mega .eq-di__logo { display: block; width: 100%; height: auto; }
.header__nav li.eq-mega .eq-di__copy { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(31, 61, 71, .8); }
.header__nav ul li.eq-mega a.eq-di__btn {
	justify-self: start;
	display: inline-flex;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--main-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color .15s ease-out;
}
.header__nav ul li.eq-mega a.eq-di__btn::after { content: "↗"; }
.header__nav ul li.eq-mega a.eq-di__btn:hover { background: #2c5563; color: #fff; }
.header__nav li.eq-mega .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------ the burger, up to 959px */
/* Seven top-level items do not fit beside the logo below 960px: the logo is squeezed and runs
   into About Us at 769-800px, and the gap stays under 20px until about 900px. The theme switches
   to its burger at 768px, so between 769 and 959px these rules reproduce its drawer. Scoped to a
   header that carries the new menu, so shipping this file changes nothing on a site whose menu
   has not been restructured yet. */
@media (min-width: 769px) and (max-width: 959px) {
	.header:has(li.eq-mega) .header__nav { display: none; }
	.header:has(li.eq-mega) .header__burger-box { display: block; }
	.header:has(li.eq-mega) .header__nav.active {
		display: block;
		position: absolute !important;
		top: 100% !important;
		left: 0;
		width: 100%;
		z-index: 102;
		background: var(--beige);
		margin: 0;
	}
	.header:has(li.eq-mega) .header__nav.active ul.menu { flex-direction: column; padding: 30px 40px 20px; }
	.header:has(li.eq-mega) .header__nav.active ul li { margin: 0 0 6px; }
	.header:has(li.eq-mega) .header__nav.active ul.menu > li > a { font-size: 22px; font-weight: 500; display: inline; padding: 0; }
	.header:has(li.eq-mega) .header__nav ul.sub-menu { position: relative; left: 0; }
	.header:has(li.eq-mega) .header__nav li:hover > ul.sub-menu { display: none; }
	.header:has(li.eq-mega) .header__nav ul li ul.sub-menu.active-sub-menu { display: block; }
	.header:has(li.eq-mega) .header__nav .submenu-icon {
		display: inline-block;
		width: 30px;
		height: 25px;
		margin: 0 0 4px 5px;
		vertical-align: bottom;
		cursor: pointer;
		background: url(../images/icons/arrow.svg) no-repeat bottom center;
		transition: transform 300ms ease-in;
	}
	.header:has(li.eq-mega) .header__nav ul li.active-parent-menu .submenu-icon {
		background-image: url(../images/icons/arrow-up.svg);
		transform: rotate(180deg);
		margin-bottom: 0;
	}
	.header:has(li.eq-mega) .header__nav ul li.active-parent-menu > a { color: var(--orange); }
}

/* ----------------------------------------------------------------- drawer */
/* Below 960px the header is the theme's drawer. Lines of Business opens the list of industries;
   tapping one replaces that list with its pages and a way back. */
@media (max-width: 959px) {
	/* The theme's style.css sets `.active { height: auto !important }`, so the drawer was only as
	   tall as its links and the page showed beneath it. With the industry lists in it, it has to
	   fill the screen and scroll. */
	.header:has(li.eq-mega) .header__nav.active { overflow-y: auto; height: calc(100dvh - 71px) !important; }

	.header__nav li.eq-mega > ul.sub-menu,
	.header__nav li.eq-drop > ul.sub-menu {
		left: 0;
		padding: 8px 0 6px;
		background: none;
	}
	.header__nav li.eq-mega > ul.sub-menu > li,
	.header__nav li.eq-drop > ul.sub-menu > li { padding: 0; margin: 0; }

	.header__nav ul.menu li.eq-mega > ul.sub-menu > li > a,
	.header__nav ul.menu li.eq-drop > ul.sub-menu > li > a,
	.header__nav ul.menu li.eq-mega > ul.sub-menu > li > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 44px;
		font-size: 17px;
		font-weight: 500;
		line-height: 1.3;
	}

	/* Services groups: the heading, then its pages, always open. */
	.header__nav li.eq-drop li.eq-group > ul.sub-menu {
		display: block;
		position: static;
		padding: 0 0 8px;
		margin: 0;
		background: none;
	}
	.header__nav ul.menu li.eq-drop > ul.sub-menu > li.eq-group > .eq-group__label {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--main-blue);
	}
	.header__nav ul.menu li.eq-drop li.eq-group > ul.sub-menu > li { margin: 0; padding: 0 0 0 14px; }
	.header__nav ul.menu li.eq-drop li.eq-group > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
	}

	.header__nav li.eq-mega.eq-js:not(.is-drill) > ul.sub-menu > li > a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		rotate: -45deg;
		opacity: .5;
		flex: none;
		margin-right: 4px;
	}

	.header__nav li.eq-mega.eq-js > ul.sub-menu > li > ul.sub-menu,
	.header__nav li.eq-mega > ul.sub-menu > li > .eq-feature,
	.header__nav li.eq-mega > ul.sub-menu > li > .eq-di { display: none; }
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li { display: none; }
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li.is-open { display: block; }
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li.is-open > a { display: none; }
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li.is-open > ul.sub-menu {
		display: block;
		position: static;
		padding: 0;
		margin: 0;
		background: none;
	}
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li.is-open > .eq-di {
		display: grid;
		margin: 8px 0 16px;
		background: #fff;
		box-shadow: 0 0 0 .5px var(--eq-line);
		max-width: 520px;
	}
	.header__nav li.eq-mega .eq-di__hero span { font-size: 17px; left: 16px; right: 16px; bottom: 14px; }
	.header__nav li.eq-mega .eq-di__body { padding: 16px 16px 18px; gap: 10px; }
	.header__nav li.eq-mega li.eq-row { margin: 0; }

	/* Drilled in: the back link, then the industry's own page as the list's heading. */
	.header__nav li.eq-mega.eq-js.is-drill > ul.sub-menu > li.eq-back-row { display: block; }
	.header__nav ul.menu li.eq-mega a.eq-back {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 15px;
		font-weight: 700;
		color: var(--orange);
	}
	.header__nav ul.menu li.eq-mega a.eq-head {
		display: block;
		font-size: 22px;
		font-weight: 700;
		padding-bottom: 6px;
		margin-bottom: 4px;
		border-bottom: .5px solid var(--eq-line);
	}
	.header__nav ul.menu li.eq-mega a.eq-head::after { content: " →"; color: var(--orange); }

	.header__nav ul li.eq-drop.active-parent-menu > a,
	.header__nav ul li.eq-mega.active-parent-menu > a { color: var(--orange); }
}
@media (min-width: 769px) and (max-width: 959px) {
	.header:has(li.eq-mega) .header__nav.active { height: calc(100dvh - 100px) !important; }
}