/**
 * Vehicles drawer — MAKE > MODEL > GENERATION > CATEGORY.
 *
 * The drawer was two levels deep and needed no help. At four, the parent
 * theme's flyout CSS breaks in a way that hides whole branches, and it is fixed
 * here rather than in ignavo/assets/css/base.css, which a theme update would
 * overwrite.
 *
 * THE BUG THIS EXISTS FOR. base.css gives every submenu of an expandable item
 * `overflow: hidden`, for the mobile accordion's max-height transition:
 *
 *     .navigation-dropdown > ul .menu-item-has-children > .sub-menu {
 *         max-height: 0; overflow: hidden; transition: max-height ...;
 *     }
 *
 * On desktop the hover rules override max-height but never overflow, so each
 * panel stays a clipping box. A flyout sits at `inset-inline-start: 100%`, i.e.
 * entirely outside its parent panel, so the moment there were three levels the
 * third one was clipped away completely: hovering BMW listed the models,
 * hovering 3-SERIES showed nothing at all. With two levels nothing ever hung
 * off a clipping panel, which is why it never showed up before.
 *
 * THE FIX. Each flyout becomes a fixed column in its own right rather than a
 * box nested inside the one before it. `position: fixed` resolves against
 * .site-drawer-inner, which carries a transform and is therefore the containing
 * block; the panels in between are not in that chain, so their overflow cannot
 * clip it. Every column then gets its own scrollbar, which is the other thing
 * four levels need: MERCEDES-BENZ has 29 models and BMW's 3-SERIES has 18
 * generations, both taller than a laptop screen.
 *
 * Columns are 260px, not the 380px drawer width every nested list inherited
 * from base.css. Four of those reach 1,520px and the category column fell off
 * the right of anything under a 1600px screen; at 260px the last one lands at
 * 1,160px, which fits a 1280px laptop.
 *
 * Desktop only. Below 1024.02px the theme switches to an accordion that expands
 * in place, where none of this applies.
 */
@media screen and (min-width: 1024.02px) {

	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu ul.sub-menu {
		--vmenu-col: 260px;

		position: fixed;
		/* A starting value only. The script overrides `top` per column so each
		   one opens beside the row that opened it — TESLA is the last make on
		   the list and its four models used to draw at the top of the screen,
		   out of reach of the pointer. */
		top: 0;
		height: 100%;
		width: var(--vmenu-col);

		/* Each column scrolls on its own. overscroll-behavior stops a flick at
		   the end of one column from scrolling the page behind the drawer. */
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	/* Held open by the script, which owns open/close on desktop so a column
	   survives the pointer crossing a scrollbar or the corner beside a short
	   list. The theme's own `:hover` rule is left in place underneath as the
	   no-JS fallback; this one simply keeps a column up after the row it
	   belongs to has stopped being hovered. See PART 2 of vehicle-menu.js. */
	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu li.altawazun-vopen > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* One column per level, measured from the drawer's own leading edge. Logical
	   properties throughout, so the RTL stylesheet needs no counterpart. */
	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu > ul > li > ul.sub-menu {
		inset-inline-start: var(--drawer-inner-width-desktop, 380px);
	}

	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu ul.sub-menu > li > ul.sub-menu {
		inset-inline-start: calc(var(--drawer-inner-width-desktop, 380px) + var(--vmenu-col));
	}

	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu ul.sub-menu ul.sub-menu > li > ul.sub-menu {
		inset-inline-start: calc(var(--drawer-inner-width-desktop, 380px) + (2 * var(--vmenu-col)));
	}

	/* A column is only as tall as its contents when they fit, so a short list
	   does not paint a full-height panel down an otherwise empty screen.
	   The cap is 100dvh and NOT 100%: a percentage resolves against
	   .site-drawer-inner, which is `overflow-y: visible` on desktop and so grows
	   to whatever is inside it — MERCEDES-BENZ's 29 models made the container
	   1,055px tall on a 900px screen, and the column obligingly matched it
	   instead of scrolling. The viewport is the real limit here. */
	.category-drawer .site-drawer-inner .site-navigation.navigation-dropdown.categories-menu ul.sub-menu {
		height: auto;
		/* !important is unavoidable: base.css's hover block sets
		   `max-height: none !important` to undo the accordion's collapsed
		   height, and !important beats any specificity we can write. */
		max-height: 100vh !important;
		max-height: 100dvh !important;
		padding-bottom: var(--drawer-inner-padding, 26px);
	}
}

/* "View all parts" sits at the top of every category list, for buyers who do
   not want to narrow by category at all. Set apart from the categories under
   it so it does not read as one of them. */
.category-drawer .altawazun-vmenu-all > a,
.category-drawer .altawazun-vmenu-all > .menu-item-wrapper > a {
	font-weight: 600;
}

.category-drawer .altawazun-vmenu-all {
	border-bottom: 1px solid rgb(var(--colors-drawer-inline-border));
	margin-bottom: 4px;
	padding-bottom: 4px;
}

/* Transient rows: "Loading…" while the categories are on their way, and the
   answer when a vehicle genuinely has none. Not links, so they are styled to
   match the submenu text rather than inheriting nothing. */
.category-drawer .altawazun-vmenu-note {
	display: block;
	width: 100%;
	padding: 6px 0;
	font-size: var(--theme-drawer-submenu-font-size, 13px);
	opacity: 0.6;
	pointer-events: none;
}