/* WoWForever – Desktop Menu. The mobile menu begins below 1024px. */
@media (min-width: 1024px) {
	:root {
		--wfdm-page: var(--wf-surface, #1c1f24);
		--wfdm-surface: #292f3a;
		--wfdm-surface-hover: #353d4b;
		--wfdm-surface-active: #3c4656;
		--wfdm-line: rgba(255, 255, 255, 0.13);
		--wfdm-text: #f5f7fa;
		--wfdm-accent: #00aeff;
		--wfdm-legendary: #ff8000;
	}

	/* The shell separates the navigation from the page without changing its gray palette. */
	.main-navigation {
		position: relative;
		z-index: 1000;
		background: var(--wfdm-page);
	}

	/* GeneratePress dark mode assigns its own navigation background. Match it to the header. */
	html.wf-dark-mode .main-navigation {
		background-color: var(--wf-surface) !important;
	}

	.main-navigation .inside-navigation {
		min-height: 50px;
		padding: 4px 14px;
		background: var(--wfdm-surface);
		border: 1px solid rgba(255, 255, 255, 0.07);
		border-radius: 14px;
		box-shadow: none;
	}

	html.wf-dark-mode .main-navigation .inside-navigation {
		background-color: var(--wfdm-surface) !important;
	}

	.main-navigation .main-nav > ul {
		display: flex;
		align-items: stretch;
		flex-wrap: nowrap;
	}

	.main-navigation .main-nav > ul > li {
		position: relative;
		display: flex;
		align-items: stretch;
		flex: 0 0 auto;
	}

	/* Thin separators make adjacent sections easy to scan. */
	.main-navigation .main-nav > ul > li + li::before {
		position: absolute;
		z-index: 2;
		top: 12px;
		bottom: 12px;
		left: 0;
		width: 1px;
		background: var(--wfdm-line);
		content: '';
		transition: opacity 180ms ease;
	}

	.main-navigation .main-nav > ul > li:hover::before,
	.main-navigation .main-nav > ul > li:focus-within::before,
	.main-navigation .main-nav > ul > li:has(+ li:hover)::before,
	.main-navigation .main-nav > ul > li:has(+ li:focus-within)::before {
		opacity: 0;
	}

	.main-navigation .main-nav > ul > li > a {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 42px;
		padding: 0 14px;
		border-radius: 9px;
		color: var(--wfdm-text);
		font-weight: 500;
		letter-spacing: 0.01em;
		text-decoration: none;
		white-space: nowrap;
		transform-origin: center center;
		transition: background-color 180ms ease, color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
	}

	.main-navigation .main-nav > ul > li > a::after {
		position: absolute;
		bottom: 4px;
		left: 50%;
		width: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--wfdm-accent);
		content: '';
		transform: translateX(-50%);
		transition: width 190ms ease;
	}

	.main-navigation .main-nav > ul > li:hover > a,
	.main-navigation .main-nav > ul > li:focus-within > a {
		background: transparent;
		color: #fff;
		text-shadow: 0 0 10px rgba(255, 128, 0, 0.52);
		transform: translateY(-2px) scale(1.025);
	}

	html.wf-dark-mode .main-navigation .main-nav > ul > li:hover > a,
	html.wf-dark-mode .main-navigation .main-nav > ul > li:focus-within > a {
		background-color: transparent !important;
	}

	/* A potential destination is legendary orange; the current page stays blue. */
	.main-navigation .main-nav > ul > li:not([class*='current-menu-']):hover > a::after,
	.main-navigation .main-nav > ul > li:not([class*='current-menu-']):focus-within > a::after {
		background: var(--wfdm-legendary);
		box-shadow: 0 0 8px rgba(255, 128, 0, 0.58);
	}

	.main-navigation .main-nav > ul > li:hover > a::after,
	.main-navigation .main-nav > ul > li:focus-within > a::after,
	.main-navigation .main-nav > ul > li[class*='current-menu-'] > a::after {
		width: calc(100% - 22px);
	}

	.main-navigation .main-nav > ul > li[class*='current-menu-'] > a {
		color: #fff;
		font-weight: 650;
	}

	/* Override the dark-mode current-item tile: the blue line is the active state. */
	html.wf-dark-mode .main-navigation .main-nav > ul > li[class*='current-menu-'] > a {
		background-color: transparent !important;
	}

	/* Icons are supplied by WoWForever – Menu Icons. */
	.main-navigation .wfmi-menu-label {
		gap: 0.48em;
	}

	.main-navigation .wfmi-menu-icon {
		height: 1.35em;
		max-width: 1.55em;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
		transition: transform 180ms ease, filter 180ms ease;
	}

	.main-navigation .main-nav > ul > li:hover .wfmi-menu-icon,
	.main-navigation .main-nav > ul > li:focus-within .wfmi-menu-icon {
		filter: drop-shadow(0 0 7px rgba(255, 128, 0, 0.60));
		transform: scale(1.14);
	}

	/* Dropdowns stay in the same family but receive a clear floating surface. */
	.main-navigation .main-nav ul ul {
		overflow: hidden;
		min-width: 238px;
		padding: 7px;
		border: 1px solid rgba(255, 255, 255, 0.10);
		border-radius: 0 0 12px 12px;
		background: #252b35;
		box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
	}

	/* First-level dropdowns open directly under their own top-level item. */
	.main-navigation .main-nav > ul > li > ul {
		top: 100%;
		right: auto;
		left: 0;
		margin-top: 0;
	}

	.main-navigation .main-nav ul ul li + li {
		border-top: 1px solid var(--wfdm-line);
	}

	.main-navigation .main-nav ul ul li a {
		padding: 11px 13px;
		border-radius: 7px;
		background: transparent;
		color: var(--wfdm-text);
		transition: background-color 160ms ease, padding-left 160ms ease, color 160ms ease;
	}

	.main-navigation .main-nav ul ul li:hover > a,
	.main-navigation .main-nav ul ul li:focus-within > a,
	.main-navigation .main-nav ul ul li[class*='current-menu-'] > a {
		padding-left: 18px;
		background: var(--wfdm-surface-hover);
		color: #fff;
	}

	.main-navigation .main-nav ul ul .wfmi-menu-icon {
		height: 1.22em;
		max-width: 1.42em;
		box-sizing: content-box;
		padding: 1px;
		border: 1px solid rgba(0, 174, 255, 0.14);
		border-radius: 4px;
		background-color: rgba(0, 174, 255, 0.09);
	}

	.main-navigation .main-nav ul ul ul {
		top: 0;
		right: auto;
		left: 100%;
		margin-top: -8px;
		border-radius: 12px;
	}

	.main-navigation .main-nav .menu-item-has-children > a .dropdown-menu-toggle {
		margin-left: 5px;
		opacity: 0.82;
		transition: transform 180ms ease;
	}

	.main-navigation .main-nav .menu-item-has-children:hover > a .dropdown-menu-toggle,
	.main-navigation .main-nav .menu-item-has-children:focus-within > a .dropdown-menu-toggle {
		transform: rotate(180deg);
	}

	.main-navigation .main-nav > ul > li > a:focus-visible,
	.main-navigation .main-nav ul ul li > a:focus-visible {
		outline: 2px solid var(--wfdm-accent);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation *,
	.main-navigation *::before,
	.main-navigation *::after {
		transition-duration: 0.01ms !important;
	}
}