/*
 * Services dropdown for the horizontal header.
 *
 * The theme's own submenu is a different mechanism: the ACF field add_sub on a
 * menu item makes leksa_wp_nav_menu_objects() echo an Elementor template into a
 * fixed, full-viewport .leksa-sub-menu-wrap, and leksaFullscreenSubmenu() opens
 * it from mouseenter — calling disableScroll() there while only calling
 * enableScroll() from the panel's own mouseleave. That asymmetry is what froze
 * the page for the rest of the visit, and it arms from 450px up, so a tablet
 * tap locks the scroll with no pointer path back out. add_sub stays 0; nothing
 * here goes near that code.
 *
 * What is used instead is the plain WordPress child-item markup the nav already
 * supports. pe-core's penavmenu handler injects a .st--wrap toggle into every
 * li.menu-item-has-children, but the horizontal nav carries st--only, so the
 * parent <a> keeps navigating and only that toggle would accordion. The toggle
 * is hidden below and the panel is opened with CSS alone: no script, no scroll
 * lock, and it degrades to a plain nested list if this file fails to load.
 *
 * Everything is scoped to ul.menu--horizontal and excludes .pll-parent-menu-item
 * so the language flyout keeps the sizing it gets in recent-works-hotfix.css and
 * the vertical menus keep the theme's Flip accordion.
 */

.main-navigation ul.menu--horizontal > li.menu-item-has-children:not(.pll-parent-menu-item) {
	position: relative;
}

/* The injected plus belongs to the accordion behaviour, which is not used here. */
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> .st--wrap {
	display: none !important;
}

/* A caret is the only hint that the item carries a panel. */
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> .menu--link::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	vertical-align: middle;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.28s ease;
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item):hover
	> .menu--link::after,
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item):focus-within
	> .menu--link::after {
	transform: translateY(1px) rotate(225deg);
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu {
	position: absolute !important;
	top: calc(100% + 14px) !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 120;
	display: block !important;
	box-sizing: border-box;
	width: max-content !important;
	min-width: 236px !important;
	max-width: 320px;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 0 !important;
	overflow: visible !important;
	list-style: none;
	background: #0e0e0e;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 14px;
	box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.85);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

/*
 * The 14px gap above the panel is dead space the pointer has to cross, and a
 * pointer that leaves the item closes it. This bridges the gap; it belongs to
 * the panel, so the parent stays hovered while crossing.
 */
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item):hover
	> ul.sub-menu,
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item):focus-within
	> ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.25;
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li
	> a {
	display: block;
	padding: 10px 22px;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li
	> a:hover,
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li
	> a:focus-visible {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.07);
}

.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li.current-menu-item
	> a {
	color: #fff;
}

/* The overview link opens the page the parent points at; the rule reads as a group. */
.main-navigation
	ul.menu--horizontal
	> li.menu-item-has-children:not(.pll-parent-menu-item)
	> ul.sub-menu
	> li:first-child {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/*
 * Below the theme's nav breakpoint the horizontal list is replaced by the popup
 * panel, which runs the Flip accordion. Nothing above should survive into a
 * layout where hover is not available.
 */
@media (hover: none), (max-width: 1024px) {
	.main-navigation
		ul.menu--horizontal
		> li.menu-item-has-children:not(.pll-parent-menu-item)
		> ul.sub-menu {
		display: none !important;
	}

	.main-navigation
		ul.menu--horizontal
		> li.menu-item-has-children:not(.pll-parent-menu-item)
		> .menu--link::after {
		display: none;
	}
}