/**
 * Primary navigation — mega-menu dropdown panel, two panes.
 *
 * Restyles GeneratePress desktop dropdowns into one full-width "big block"
 * panel under the nav bar: a warm-grey rail on the left lists the dropdown's
 * items, and hovering/focusing an item with children opens its sub-pages in
 * the white area on the right of the same panel.
 *
 * GP hides submenus with `left:-99999px; opacity:0; height:0` on
 * .main-navigation ul ul and reveals them on li:hover / li.sfHover; we keep
 * that mechanism and only change the geometry: the top-level <li> becomes
 * position:static so the panel spans .inside-navigation, and third-level
 * submenus are re-positioned to fill the panel's right pane instead of
 * flying out.
 *
 * Desktop only — below GP's 769px breakpoint the toggled mobile accordion
 * keeps its default behaviour.
 */

@media (min-width: 769px) {

	/* The panel spans this container. */
	.main-navigation .inside-navigation {
		position: relative;
	}

	.main-navigation .main-nav > ul > li {
		position: static;
	}

	/* ---- The big panel (first-level .sub-menu) -------------------------- */

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu {
		right: 0;
		width: auto;
		min-height: 320px;
		padding: var(--vk-space-2) 0;
		/* Left rail in warm grey, right pane white, 1px border between —
		   drawn on the panel so the divider runs full height. */
		background: linear-gradient(
			90deg,
			var(--vk-bg-muted) 0 280px,
			var(--vk-border) 280px calc(280px + 1px),
			var(--vk-bg) calc(280px + 1px)
		);
		border: 1px solid var(--vk-border);
		/* Red is punctuation: a single accent rule on the panel's top edge. */
		border-top: 2px solid var(--vk-accent);
		box-shadow: var(--vk-shadow-lift);
	}

	/* GP's reveal sets left:auto, which misplaces a static-parented panel;
	   pin it to the container's left edge instead. */
	.main-navigation:not(.toggled) .main-nav > ul > li:hover > ul.sub-menu,
	.main-navigation:not(.toggled) .main-nav > ul > li.sfHover > ul.sub-menu {
		left: 0;
	}

	/* ---- Left rail: the dropdown's items ------------------------------- */

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li {
		float: none;
		width: 280px;
		/* GP makes every menu li a containing block (position:relative);
		   neutralise that so the right pane anchors to the panel, not to
		   this 280px row. */
		position: static;
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		padding: 12px 18px;
		background: transparent !important; /* beat GP customizer item colors */
		color: var(--vk-ink) !important;
		font-size: var(--vk-text-base);
		font-weight: 600;
		border-left: 3px solid transparent;
		transition: color var(--vk-anim-fast), background-color var(--vk-anim-fast), border-color var(--vk-anim-fast);
	}

	/* The row stays lit while the pointer is anywhere in its right pane,
	   because the pane is a child of the row's <li>. */
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li:hover > a,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li.sfHover > a,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li > a:focus-visible {
		background: var(--vk-bg) !important;
		color: var(--vk-accent) !important;
		border-left-color: var(--vk-accent);
	}

	/* GP's right-arrow marks rows that open a pane; park it at the row's
	   right edge, quiet until the row is active. */
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li > a .dropdown-menu-toggle {
		margin-left: auto;
		padding: 0;
		color: var(--vk-ink-faint);
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li:hover > a .dropdown-menu-toggle,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li.sfHover > a .dropdown-menu-toggle {
		color: var(--vk-accent);
	}

	/* ---- Right pane: the hovered item's sub-pages ----------------------- */

	/* Geometry is set here (harmless while GP keeps the list off-screen);
	   the reveal below only swaps GP's left:100% fly-out for the pane slot. */
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu {
		top: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
		float: none;
		overflow-y: auto;
		padding: var(--vk-space-3) var(--vk-space-5);
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li:hover > ul.sub-menu,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu > li.sfHover > ul.sub-menu {
		left: calc(280px + 1px);
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu li {
		float: none;
		width: auto;
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu a {
		display: block;
		padding: 8px 0;
		background: transparent !important; /* beat GP customizer item colors */
		color: var(--vk-ink-soft) !important;
		font-size: var(--vk-text-base);
		line-height: 1.4;
		transition: color var(--vk-anim-fast), padding-left var(--vk-anim);
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu a:hover,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu a:focus-visible {
		color: var(--vk-accent) !important;
		padding-left: 6px;
	}

	/* Arrows deeper than the rail have no meaning — nothing flies out. */
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu .dropdown-menu-toggle {
		display: none;
	}

	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu a:focus-visible {
		outline: 2px solid var(--vk-accent);
		outline-offset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav a {
		transition: none;
	}
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu a:hover,
	.main-navigation:not(.toggled) .main-nav > ul > li > ul.sub-menu ul.sub-menu a:focus-visible {
		padding-left: 0;
	}
}