/**
 * Mega menu for the primary navigation.
 *
 * Standalone override file — deliberately not part of the SCSS partials in
 * assets/css/global/, which have no build entry point in this theme. Enqueued
 * after 'custom-style' in functions.php so it wins on load order as well as
 * specificity.
 *
 * Desktop only. Below 1023.5px the primary nav is display:none and the
 * .toggled mobile panel in _header.scss takes over, so nothing here applies.
 *
 * Selectors carry the same html body header#masthead #site-navigation prefix
 * as _header.scss because those existing rules are highly specific; matching
 * that prefix and adding .primary-navigation + ul.nav-menu keeps us above them
 * without resorting to !important.
 */

@media screen and (min-width: 1023.5px) {

	/* ----------------------------------------------------------------------
	 * Panel shell
	 *
	 * Storefront parks every sub-menu at left:-9999px and only pulls it back
	 * on hover, so the closed state is inherited and not restated here.
	 * A definite width is required — width:fit-content from _header.scss
	 * leaves the column count unresolvable.
	 *
	 * Multi-column rather than grid: one child (Brands) is a tall block and
	 * the rest are single lines. Grid auto-placement is row-major, which
	 * pushed Brands to row 2 and left the first two columns half empty.
	 * Column flow balances the unequal heights instead.
	 * -------------------------------------------------------------------- */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu {
		display: block;
		columns: 3;
		column-gap: 24px;
		float: none;
		width: min(520px, calc(100vw - 48px));
		padding: 22px 28px 24px;
		overflow: visible;
		text-align: left;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 20px 44px -14px rgba(31, 61, 34, 0.28);
	}

	/* Menus with 5+ children (Shop) need the wider panel. Smaller menus keep
	   the 620px shell above so they don't read as mostly empty space. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu:has(> li:nth-child(5)) {
		width: min(880px, calc(100vw - 48px));
		column-gap: 32px;
	}

	/* Panels holding a nested block get two columns, not three: plain links on
	   the left, the block on the right.
	   Three columns balanced badly. The balancer minimises the tallest column,
	   and the 163px Brands block sets that budget, so it packed four links
	   into column one and stranded one in column two rather than splitting
	   them 3/2. Two columns sidesteps the budget entirely.
	   Grid was tried first and is worse: pinning the block with
	   grid-row: 1 / -1 makes it stretch the shared rows, spreading the links
	   apart vertically. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu:has(> li.menu-item-has-children) {
		columns: 3;
		column-gap: 20px;
		width: min(760px, calc(100vw - 48px));
	}

	/* Keep the block out of the link column regardless of how the links
	   balance, so added menu items never flow in beside it. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children {
		break-before: column;
	}

	/* Open state. Overrides the shared `ul li:hover > ul { left: 50% }` in
	   _header.scss:91 and adds :focus-within, which that rule lacks, so the
	   panel is reachable by keyboard. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
		left: 50%;
		transform: translateX(-50%);
	}

	/* ----------------------------------------------------------------------
	 * First-level items
	 * -------------------------------------------------------------------- */

	/* _header.scss dims every sub-menu li to 0.6 and restores it on hover.
	   That reads as "disabled" across a wide multi-column panel, so items are
	   full opacity and the hover affordance moves onto the link itself. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li {
		opacity: 1;
		width: auto;
		background-color: transparent;
		/* Keep a heading and its links together when the columns break. */
		break-inside: avoid;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li:hover {
		opacity: 1;
		background-color: transparent;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
		display: block;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 9px 12px;
		text-align: left;
		border-radius: 8px;
		white-space: normal;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:focus-visible {
		background-color: rgba(68, 133, 62, 0.14);
		color: #2C5029;
	}

	/* ----------------------------------------------------------------------
	 * Second level (Brands) — promoted from flyout to visible column
	 *
	 * Storefront pins deeper levels off-canvas even while the parent is
	 * hovered, via `.main-navigation ul li:hover > ul li > ul { left: -9999px }`.
	 * position:static is what actually lands it back in flow; left/top/float
	 * are reset alongside so no stale offset survives.
	 *
	 * This is also why the panel drops the `overflow: hidden` set in
	 * _header.scss:104 — it was clipping this list.
	 * -------------------------------------------------------------------- */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
		display: block;
		position: static;
		left: auto;
		top: auto;
		right: auto;
		float: none;
		width: auto;
		max-width: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		transform: none;
	}

	/* A parent inside the panel is now a column heading, not a link to hover
	   open. It stays clickable — Brands is a real page. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a {
		padding-bottom: 4px;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a:hover {
		background-color: transparent;
		opacity: 1;
	}

	/* Suppress the inherited flyout caret on in-panel parents — there is no
	   longer anything to expand. */
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a::after,
	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children::after {
		content: none;
		display: none;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li {
		opacity: 1;
		width: auto;
		background-color: transparent;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a {
		display: block;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 7px 12px;
		font-size: 14px;
		font-weight: 400;
		text-align: left;
		border-radius: 8px;
		white-space: normal;
	}

	html body header#masthead #site-navigation .center-content .primary-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover {
		background-color: rgba(68, 133, 62, 0.14);
		color: #2C5029;
	}
}