/*
 * Mega panel navigation, built on the core navigation block.
 *
 * No plugin and no custom block. Three things make it work:
 *
 *  1. SPECIFICITY. Every rule that touches the submenu container is prefixed
 *     `.wg-navwrap .wp-block-navigation`. Core's own navigation CSS styles that
 *     element at the same specificity a bare `.wg-mega > ...` selector reaches,
 *     and core's stylesheet loads after the theme's - so source order decided it
 *     and core won. The panel rendered as a single-column flex dropdown with the
 *     grid silently inert: `grid-template-columns` was applied and `display`
 *     was still `flex`. Measured on staging, not assumed.
 *
 *  2. The wide panel escapes its menu item. Core puts `position: relative` on
 *     any item with children, so an absolutely positioned submenu is trapped at
 *     the width of the word above it. Setting the chain from .wg-navwrap down to
 *     the item to `position: static` moves the containing block up to the header
 *     row, so `left: 0; right: 0` spans it.
 *
 *     Every panel does this, and they all share one left edge - the header
 *     content column. Anchoring each panel under its own label meant the box
 *     jumped sideways as you moved along the menu. Industries additionally
 *     stretches to the full column width because it carries four sector lists;
 *     the rest size to their content from the same starting point.
 *
 *  3. The columns are second-level submenus, pinned open. Core renders a nested
 *     submenu as a hover flyout; here it is forced static and visible, so the
 *     parent link becomes the column heading and its children the list beneath
 *     it. That is what puts 28 industries in four labelled columns.
 *
 * Desktop only, from 1000px. Below that seven top-level items cannot share a
 * line with the logo and two buttons, so the panel rules stop applying and
 * core's own dropdown and mobile overlay behaviour takes over untouched.
 */

/* --- Header row ---------------------------------------------------------- */
/*
 * The row spans the padded viewport width up to 1680px (set on the header group
 * in parts/header.html). At the old 1200px cap the seven menu items and two
 * buttons were pushed into the right-hand half of the screen with the logo
 * stranded on the far left.
 */
.wg-navwrap { gap: var(--wp--preset--spacing--60); }

.wg-navright {
	gap: clamp(1rem, 2.2vw, 2.25rem);
	align-items: center;
}

/*
 * The menu sits between the logo and the buttons rather than jammed against them
 * on the right. Deliberately NOT using the navigation block's own
 * `justifyContent`, because that emits `items-justified-right` and core uses that
 * class to flip every submenu to `right: 0; left: auto`.
 */
.wg-navwrap .wp-block-navigation { flex: 0 1 auto; min-width: 0; }
.wg-navwrap .wp-block-navigation__container { justify-content: center; }
.wg-navwrap .wg-navright { flex: 0 0 auto; }

/* Wordmark shown when no logo image is set - see inc/navigation.php. */
.wg-wordmark a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}
.wg-wordmark a:hover { color: var(--wp--preset--color--accent-deep); }

/* --- Top-level row ------------------------------------------------------- */
/*
 * Tight on purpose. Seven labels, a 170px logo and two buttons come to roughly
 * 1200px at the default 16px with core's 2rem gap, which pushed Resources and
 * Company onto a second line at 1440.
 */
.wg-navwrap .wp-block-navigation__container {
	gap: clamp(.85rem, 1.9vw, 2rem);
	flex-wrap: nowrap;
}
.wg-navwrap .wp-block-navigation-item__content {
	font-size: .9375rem;          /* 15px */
	font-weight: 600;
	white-space: nowrap;
}
.wg-navwrap .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-deep);
}
.wg-navwrap .wp-block-navigation .wp-block-navigation__submenu-icon {
	padding-left: .1rem;
	padding-right: 0;
}

@media (min-width: 1000px) {

	/*
 * The bridge height: the header's own bottom padding plus the few pixels of
 * flex-centring slack between the label text and the row's bottom edge.
 * Measured at 19px, set to 20 so it reaches 1px into the label - the pointer
 * never crosses unowned space on its way down to the panel.
 */
	:root { --wg-mega-bridge: calc(var(--wp--preset--spacing--40) + 4px); }

	/* --- Shared panel shell --------------------------------------------- */
	.wg-navwrap .wp-block-navigation .wg-mega > .wp-block-navigation__submenu-container {
		top: 100%;
		/*
		 * Anchored to the header content column, not to the hovered item. With
		 * each panel opening under its own label the box jumped hundreds of
		 * pixels sideways between Features and Company, which reads as things
		 * moving about rather than one menu.
		 */
		left: var(--wp--style--root--padding-left, 1.5rem);
		right: var(--wp--style--root--padding-right, 1.5rem);
		/*
		 * The offset below the row is `top`, never `margin-top`. As a margin it
		 * is dead space: the pointer leaves the label, crosses a gap that belongs
		 * to no element, and the panel closes before you reach it. `::before`
		 * bridges the same distance so the hover survives the trip.
		 */
		top: 100%;
		margin-top: 0;
		padding: var(--wp--preset--spacing--60);
		background: var(--wp--preset--color--base);
		border: 2px solid var(--wp--preset--color--card-line);
		border-radius: 15px;
		box-shadow: 0 18px 50px rgba(9, 12, 76, .13);
		display: grid;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
		grid-template-columns: repeat(var(--wg-mega-cols, 1), minmax(10rem, 1fr));
		width: auto;
		max-width: 1680px;
		margin-inline: auto;
		min-width: 0;
		justify-content: start;
	}

	/*
	 * The hover bridge, attached to the LABEL rather than the panel.
	 *
	 * Sizing a bridge on the panel to a measured constant does not survive
	 * contact with reality: I measured 19px against a text wordmark, then the
	 * real logo made the header 75px tall and the gap 26px, and every wide panel
	 * closed on the way down again. A strip hanging off the label is generous
	 * enough not to care about the header's height.
	 *
	 * It only exists while that item is hovered or focused, so the other six
	 * labels keep their own hover, and nothing invisible sits over the hero the
	 * rest of the time. Inset negatively so it covers the chevron as well as the
	 * word.
	 */
	.wg-navwrap .wp-block-navigation .wg-mega > .wp-block-navigation-item__content {
		position: relative;
	}
	.wg-navwrap .wp-block-navigation .wg-mega:hover > .wp-block-navigation-item__content::after,
	.wg-navwrap .wp-block-navigation .wg-mega:focus-within > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: -1rem;
		right: -1.75rem;
		top: 100%;
		height: 4rem;
	}

	/* Second bridge along the panel's own top edge, for travel that starts wide
	   of the label. */
	.wg-navwrap .wp-block-navigation .wg-mega > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--wg-mega-bridge, 20px);
	}

	.wg-navwrap .wp-block-navigation .wg-mega--2 > .wp-block-navigation__submenu-container { --wg-mega-cols: 2; }
	.wg-navwrap .wp-block-navigation .wg-mega--3 > .wp-block-navigation__submenu-container { --wg-mega-cols: 3; }
	.wg-navwrap .wp-block-navigation .wg-mega--4 > .wp-block-navigation__submenu-container { --wg-mega-cols: 4; }
	.wg-navwrap .wp-block-navigation .wg-mega--5 > .wp-block-navigation__submenu-container { --wg-mega-cols: 5; }

	/*
	 * `--right` is now a no-op for positioning: every panel shares the same left
	 * edge, so nothing needs flipping and nothing can run off the screen. The
	 * class stays in the menu markup because it costs nothing and describes
	 * intent if the layout changes again.
	 */

	/* --- Industries: the full-width, grouped panel ----------------------- */
	/*
	 * The containing block is the header, not the header row, and every wrapper
	 * between them is explicitly neutralised.
	 *
	 * Core nests the menu nine levels deep: nav > __responsive-container >
	 * __responsive-close > __responsive-dialog > __responsive-container-content >
	 * __container > li > submenu. Two of those are positioned, and neutralising
	 * only the ones I had guessed at left the panel resolving against a 647px
	 * box - which is why the four sector headings were 102px wide and breaking
	 * mid-word. The list below is the measured chain from the live page, not a
	 * guess, and `__responsive-container` needs four classes to beat core.
	 *
	 * Insets come from WordPress's own root padding variables, so the panel lines
	 * up with the content column at every viewport without repeating the clamp().
	 */
	header.wp-block-group { position: relative; }

	.wg-navwrap,
	.wg-navwrap .wg-navright,
	.wg-navwrap .wp-block-navigation,
	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-container,
	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-close,
	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-dialog,
	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-container-content,
	.wg-navwrap .wp-block-navigation .wp-block-navigation__container,
	.wg-navwrap .wp-block-navigation .wp-block-navigation-item.wg-mega {
		position: static;
	}
	/*
	 * Short menus are compact and sit at the right-hand end of the row, under
	 * their own labels.
	 *
	 * Spanning the full column was right for the wide panels and wrong for these:
	 * a two-item list stranded at the far left of a 1296px box, a thousand pixels
	 * from the word you hovered. Resources and Company are the last two items in
	 * the row, so anchoring to the row's right edge puts the panel directly
	 * beneath them and it cannot run off screen.
	 */
	/*
	 * Anchored to their own item, so the panel opens directly under the word you
	 * hovered. Right-anchoring to the row put both of them under Company - fine
	 * for Company, a hundred pixels adrift for Resources.
	 *
	 * These are the last two items in the row and the panel is ~290px, so it
	 * cannot reach the right edge: Company at x=946 ends at 1234 inside a 1368
	 * column. The wide panels keep the shared full-column treatment.
	 */
	.wg-navwrap .wp-block-navigation .wp-block-navigation-item.wg-mega--1 {
		position: relative;
	}
	.wg-navwrap .wp-block-navigation .wg-mega--1 > .wp-block-navigation__submenu-container {
		/*
		 * Item-anchored, so `100%` is the item's height and the panel would
		 * otherwise touch the label. A small offset with a bridge to match: the
		 * shared 20px bridge would reach up over the labels and steal hover from
		 * the items either side.
		 */
		--wg-mega-bridge: 10px;
		top: calc(100% + var(--wg-mega-bridge));
		left: 0;
		right: auto;
		width: max-content;
		min-width: 14rem;
		max-width: 20rem;
		margin-inline: 0;
	}

	.wg-navwrap .wp-block-navigation .wg-mega--grouped > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(var(--wg-mega-cols, 4), minmax(0, 1fr));
	}

	/* --- Links inside a panel ------------------------------------------- */
	.wg-navwrap .wp-block-navigation .wg-mega .wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.wg-navwrap .wp-block-navigation .wg-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: .35rem .6rem;
		border-radius: 8px;
		font-size: .9375rem;
		font-weight: 500;
		white-space: normal;
		color: var(--wp--preset--color--text-strong);
	}
	.wg-navwrap .wp-block-navigation .wg-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wg-navwrap .wp-block-navigation .wg-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--accent-deep);
	}

	/* --- Second level pinned open as a labelled column ------------------ */
	.wg-navwrap .wp-block-navigation .wg-mega-col { position: static; }
	.wg-navwrap .wp-block-navigation .wg-mega-col > .wp-block-navigation__submenu-icon { display: none; }

	/*
	 * The column heading. Not a destination: every industry under it is one, and
	 * a heading that navigates makes the panel feel like a trap.
	 *
	 * min-height reserves two lines on every heading. Two of the four sector
	 * names wrap, which pushed those columns' first item down and broke the
	 * horizontal rhythm across the panel.
	 */
	.wg-navwrap .wp-block-navigation .wg-mega .wg-mega-col > .wp-block-navigation-item__content {
		padding: 0 .6rem var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--accent-deep);
		pointer-events: none;
		min-height: 2.6em;
		line-height: 1.3;
	}
	.wg-navwrap .wp-block-navigation .wg-mega .wg-mega-col > .wp-block-navigation-item__content:hover {
		background: none;
	}

	/*
	 * A column heading that IS a page. The industry sectors are groupings with no
	 * page of their own, so their headings are inert; a feature area hub is a real
	 * destination, so its heading stays clickable and says so on hover.
	 */
	.wg-navwrap .wp-block-navigation .wg-mega .wg-mega-col--link > .wp-block-navigation-item__content {
		pointer-events: auto;
		min-height: 0;
		margin-block-end: var(--wp--preset--spacing--20);
	}
	.wg-navwrap .wp-block-navigation .wg-mega .wg-mega-col--link > .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--contrast);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	/* Nine columns of six would be a sitemap; five columns wrap to two rows. */
	.wg-navwrap .wp-block-navigation .wg-mega--5 > .wp-block-navigation__submenu-container {
		row-gap: var(--wp--preset--spacing--60);
	}

	.wg-navwrap .wp-block-navigation .wg-mega-col > .wp-block-navigation__submenu-container {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		width: auto;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		display: block;
		/*
		 * `height: auto` and `overflow: visible` are the whole reason the sector
		 * lists were invisible until you hovered a heading.
		 *
		 * Core collapses a nested submenu with `height: 0; overflow: hidden`. The
		 * pinning rules set position, display, opacity and visibility - all of
		 * which computed correctly - and never touched height, so the list was
		 * static, visible, and clipped to nothing: seven items of 34px inside a
		 * 0px box. Measured on staging; the preview missed it because the stub of
		 * core's CSS did not collapse nested submenus at all.
		 */
		height: auto;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* --- "See all" ------------------------------------------------------ */
	.wg-navwrap .wp-block-navigation .wg-mega .wg-mega-all { grid-column: 1 / -1; }

	.wg-navwrap .wp-block-navigation .wg-mega .wp-block-navigation__submenu-container .wg-mega-all > .wp-block-navigation-item__content {
		margin-top: var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--card-line);
		border-radius: 0;
		font-weight: 700;
		color: var(--wp--preset--color--accent-deep);
	}
}

/* ======================================================================== *
 * Mobile and tablet
 * ======================================================================== *
 *
 * Core switches to its overlay below 600px. Seven top-level items, a wordmark
 * and two buttons do not fit on one line until about 1000px, so between 600 and
 * 999 core would render the inline menu and it would wrap into the hero. These
 * two rules move core's own breakpoint up to match the panel breakpoint, using
 * core's own classes so the overlay's open/close scripting is untouched.
 */
@media (max-width: 999px) {

	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wg-navwrap .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* The hamburger, sized as a real tap target. */
	.wg-navwrap .wp-block-navigation__responsive-container-open {
		padding: .5rem;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--contrast);
	}

	/* Two buttons plus a hamburger is too much at this width. The trial is the
	   primary action, so the demo link moves into the overlay's reach only. */
	.wg-navwrap .wg-navright .wp-block-buttons .wp-block-button.is-style-outline {
		display: none;
	}
	.wg-navwrap { gap: var(--wp--preset--spacing--40); }
	.wg-wordmark a { font-size: 1.25rem; }
}

/* --- Inside the overlay ------------------------------------------------- */
/*
 * THE OVERLAY IS AN ACCORDION. It was not, and that was the mobile bug.
 *
 * The previous version of this block set display/opacity/visibility on the mega
 * panels to undo the desktop pinning, which undid it in the wrong direction:
 * every panel ended up OPEN. Measured on staging with the real markup, the open
 * overlay was 9,123px tall with all 24 submenus expanded and 144 links on
 * screen at once - about eleven phone screens of menu with no way to collapse
 * anything.
 *
 * Worth being clear that this is core's own behaviour, not a mistake in it:
 * core expands every submenu in the overlay, which is right for a three-item
 * dropdown and hopeless for a nine-column mega panel. So the fix is to collapse
 * them and give each one a toggle.
 *
 * No JavaScript needed. Core already renders a `submenu__toggle` button as the
 * immediate previous sibling of every submenu container, and core's
 * interactivity API already flips its `aria-expanded` on tap. So the accordion
 * is one sibling selector keyed on that attribute.
 *
 * Measured after: 772px and 7 links closed, 1,643px and 17 links with Features
 * open, back to 772px when it is closed again. Every toggle is a 44px target.
 */

/* Plain nested list, and closed. */
.wp-block-navigation__responsive-container.is-menu-open .wg-mega > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wg-mega-col > .wp-block-navigation__submenu-container {
	position: static;
	width: auto;
	max-width: none;
	inset: auto;
	margin: 0;
	padding-left: var(--wp--preset--spacing--40);
	grid-template-columns: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	display: none;
}

/*
 * Open, when its own toggle says so. Five selector parts, which is what it takes
 * to beat the four-part closed rule above - the adjacent-sibling combinator is
 * doing the work, not the specificity, but the specificity still has to win.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	+ .wp-block-navigation__submenu-container {
	display: block;
}

/*
 * Core HIDES the toggle inside the overlay, because in core's version there is
 * nothing to toggle:
 *
 *   .wp-block-navigation__responsive-container.is-menu-open
 *   :where(:not(.disable-default-overlay))
 *   .wp-block-navigation__responsive-container-content
 *   .wp-block-navigation__submenu-icon { display: none }
 *
 * That is four class selectors (`:where()` contributes nothing), and it ships in
 * style.min.css, so an override needs five and cannot rely on load order. This
 * is why the accordion silently did nothing the first time it was tried: the
 * submenus collapsed correctly and there was no visible control to open them.
 */
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-left: auto;
	background: transparent;
	border: 0;
	color: currentColor;
}
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/*
 * The row itself: label on the left, toggle on the right, both reachable.
 *
 * This needed three overrides, not one, and getting only the first two is what
 * put the chevron on its own line under the label:
 *
 *   flex-direction   core's overlay sets `column` on nav items, so a label and
 *                    its toggle stack vertically instead of sitting side by side.
 *   align-items      core sets `flex-start` on the containers, which shrinks
 *                    every row to the width of its own text - the top-level list
 *                    measured 93px wide and the Features row 65px, so there was
 *                    no row for a right-aligned toggle to sit at the end of.
 *   width            with the containers shrunk, `margin-left: auto` on the
 *                    toggle has nothing to push against.
 *
 * Four selector parts, because core's own overlay rules are three.
 */
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch;
	width: 100%;
	max-width: none;
}
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex: 1 1 auto;
}
.wg-navwrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	flex: 1 0 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wg-mega-col > .wp-block-navigation-item__content {
	pointer-events: auto;
	min-height: 0;
	padding-bottom: .25rem;
}

/* Tap targets and readable type in the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: .45rem;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 1.0625rem;
	white-space: normal;
}
.wp-block-navigation__responsive-container.is-menu-open .wg-mega-all > .wp-block-navigation-item__content {
	font-weight: 700;
	color: var(--wp--preset--color--accent-deep);
}