/**
 * Desktop navigation dropdowns (2026-10-16).
 *
 * Bug: on every page using the Houzez header, the Tenants / Owners submenus closed as the
 * pointer moved down into them. The submenu opened, but the desktop search bar below the
 * header was painted on top of it:
 *   - .header-main-wrap      position:relative; z-index:4   (Houzez main.css)
 *   - .advanced-search-nav   position:relative; z-index:90  (lvr-custom.css, a sibling)
 * The header is its own stacking context, so its z-index:1000 dropdown could not rise above
 * z-index:90. The pointer landed on the search bar, li:hover was lost, and the menu closed.
 *
 * Also: lvr-design-system.css offsets the submenu 8px below its parent item (margin-top), which
 * leaves a 9px strip that belongs to neither. It was only covered by chance because the parent
 * link's box overflows its <li>. The bridge below makes that strip part of the submenu.
 *
 * Desktop only (the Houzez header switches to its separate mobile menu below 992px).
 */
@media (min-width: 992px) {
	/* Header (and its dropdowns) above the search bar (z-index 90). The sticky search bar
	   only becomes fixed after the header has scrolled out of view, so they never compete. */
	.header-main-wrap {
		z-index: 95;
	}

	/* Hover bridge across the 8px visual offset. Transparent; part of the submenu, so moving
	   through it keeps li:hover. */
	.header-main-wrap .main-nav .navbar-nav li.menu-item-has-children > .dropdown-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	/* Keyboard: open while focus is inside the item (mirrors Houzez's :hover rule). */
	.header-main-wrap .on-hover-menu:not(.houzez-nav-menu-layout-dropdown) ul li.menu-item-has-children:focus-within > ul.dropdown-menu,
	.header-main-wrap .on-hover-menu:not(.houzez-nav-menu-layout-dropdown) ul li.lvr-sub-open > ul.dropdown-menu {
		opacity: 1;
		visibility: visible;
		top: calc(100% + 1px);
		position: absolute;
	}

	/* Escape closes the submenu even while the pointer or focus is still on the parent. */
	.header-main-wrap .on-hover-menu ul li.lvr-sub-closed > ul.dropdown-menu {
		opacity: 0 !important;
		visibility: hidden !important;
	}

	/* Homepage header (header-sphere.php): same keyboard and Escape behaviour. */
	.lvr-px-menu li.menu-item-has-children:focus-within > .sub-menu,
	.lvr-px-menu li.lvr-sub-open > .sub-menu {
		display: block;
	}
	.lvr-px-menu li.lvr-sub-closed > .sub-menu {
		display: none !important;
	}
}

/*
 * Homepage menu on phones/tablets (header-sphere.php), 2026-10-16.
 * Submenus opened only on :hover, which touch screens do not have, so tapping Tenants or
 * Owners went straight to the parent page and the sub-pages were unreachable. Each parent now
 * has a separate toggle button (rendered in inc/lvr-sphere.php); the parent link still opens
 * its own page.
 */
.lvr-px-sub-toggle {
	display: none;
}
@media (max-width: 991px) {
	.lvr-px-menu > li.menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr 44px;
		align-items: center;
	}
	.lvr-px-menu > li.menu-item-has-children > a {
		grid-column: 1;
	}
	.lvr-px-sub-toggle {
		display: inline-flex;
		grid-column: 2;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
		color: var(--px-text, #fff);
		cursor: pointer;
	}
	.lvr-px-sub-toggle svg {
		transition: transform 0.2s ease;
	}
	.lvr-px-sub-toggle[aria-expanded="true"] {
		color: var(--px-orange, #e85d04);
	}
	.lvr-px-sub-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
	.lvr-px-sub-toggle:focus-visible {
		outline: 2px solid var(--px-orange, #e85d04);
		outline-offset: -2px;
	}
	/* Submenus sit in the flow of the open menu and open only via their toggle (not :hover,
	   which sticks after a tap on touch screens). */
	.lvr-px-menu > li.menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
		display: none !important;
		position: static;
		min-width: 0;
		margin: 0 0 6px;
		padding: 4px 0;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 4px;
		box-shadow: none;
	}
	.lvr-px-menu > li.menu-item-has-children.lvr-sub-expanded > .sub-menu {
		display: block !important;
	}
	.lvr-px-menu .sub-menu a {
		display: block;
		padding: 10px 13px 10px 26px;
		color: var(--px-text, #fff);
		text-decoration: none;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.lvr-px-menu .sub-menu a:hover,
	.lvr-px-menu .sub-menu a:focus-visible {
		color: var(--px-orange, #e85d04);
	}
}