/*
 * Second-level flyout support for the "Aerospace Manufacturers" submenu.
 *
 * The Callsign theme's nav CSS only styles ONE level of dropdown flyout
 * (Aircraft Encyclopedia -> its children). It has no rules for a nested
 * .sub-menu inside another .sub-menu, which is what "Aerospace
 * Manufacturers -> Boeing, Airbus, etc." requires. This adds that.
 *
 * Deploy via WPCode: Code Snippets -> Add Snippet -> CSS Snippet type,
 * location "Site Wide Header" (or any frontend location), Activate.
 */

/* The nested submenu itself: hidden by default, flies out to the right
   of its parent item when hovered. */
.desktop-nav .sub-menu .sub-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 220px;
	background: #0a0e1a;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 8px 0;
	margin: 0;
	list-style: none;
	z-index: 100;
}

/* Show the nested submenu when hovering its parent <li> */
.desktop-nav .sub-menu li.menu-item-has-children:hover > .sub-menu {
	display: block;
}

/* Give parent items with a nested submenu a visual cue (small arrow) */
.desktop-nav .sub-menu li.menu-item-has-children > a {
	position: relative;
	padding-right: 20px;
}
.desktop-nav .sub-menu li.menu-item-has-children > a::after {
	content: "\203A"; /* small right-pointing chevron */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
}

/* Nested submenu items: consistent spacing/typography with the rest of the nav */
.desktop-nav .sub-menu .sub-menu li a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}
.desktop-nav .sub-menu .sub-menu li a:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* Safety: if the flyout would run off the right edge of the viewport on
   smaller desktop widths, flip it to open leftward instead. Adjust the
   max-width threshold if your nav sits in a narrower container. */
@media (max-width: 1400px) {
	.desktop-nav .sub-menu .sub-menu {
		left: auto;
		right: 100%;
	}
}