/* Michanic menu, desktop panel corrections.
 *
 * This is deliberately tiny. The site's menu is one burger overlay at every
 * width: a chevron accordion on phones, and the same markup laid out in two
 * columns above 992px. The child theme already styles both. Only one thing in
 * the new structure has no rule yet, and it is the third level.
 *
 * In the desktop panel each column's heading is the clone Enfold prepends
 * into a submenu, not the group's own row. The current menu has no second
 * level that carries text, so this never showed. The new menu does, and every
 * group name was printing twice: once as the clone heading and once as the
 * row above it. This hides the row and keeps the heading.
 *
 * It is loaded only while the new menu is actually assigned to a theme
 * location, so it cannot affect the menu that is live today.
 */

@media only screen and (min-width: 992px) {
	/* :not(:first-child) matters. Enfold clones a group into its own submenu
	 * as that submenu's first item, and the clone keeps the group's classes,
	 * so hiding every .mi-heading link hid the heading as well as the row and
	 * the two Car Servicing sub-groups lost their names entirely. The clone is
	 * always first; the row never is. */
	#top #wrap_all #av-burger-menu-ul li.mi-heading:not(:first-child) > a {
		display: none !important;
	}

	/* The third level is a list of pills under its heading, the same as the
	 * second. Without this it inherits the submenu indent twice and the
	 * Servicing specialists column steps away from the edge. */
	#top #wrap_all #av-burger-menu-ul li.mi-heading > ul.sub-menu {
		margin-left: 0;
		padding-left: 0;
	}

	/* Every item in this overlay is floated left, which is right for a row of
	 * pills inside a group and wrong for a top-level link that is on its own.
	 * Without this, Apply as a Mechanic and Help / Support ran together into
	 * one unreadable string, and so did the four links at the foot. */
	#top #wrap_all #av-burger-menu-ul > li.d-desktop {
		float: none !important;
		width: 100%;
		clear: both;
		text-align: left;
		/* Measured on the live page: these rows sat at exactly zero gap, so
		 * each pill's 2px border landed hard against the next one's, and the
		 * square top edge below cut across the rounded bottom of the orange
		 * quote button. The text itself never overflowed; the boxes simply
		 * touched. Group pills already carry a 10px gap, so this matches. */
		margin-bottom: 10px !important;
	}

	/* Those lone links used to live inside a group, where they picked up the
	 * pill treatment. Promoting them to the top level lost it, so restore it
	 * here, using the same border, radius and size the group pills already
	 * use. The two button items style themselves and are left alone. */
	#top #wrap_all #av-burger-menu-ul > li.d-desktop:not(.av-menu-button) > a {
		display: inline-block !important;
		border: 2px solid #7a93ac !important;
		border-radius: 10px !important;
		padding: 9px !important;
		font-size: 14px;
	}
	#top #wrap_all #av-burger-menu-ul > li.d-desktop:not(.av-menu-button) > a:hover {
		background-color: #7a93ac !important;
		color: #000 !important;
	}
}

/* There is deliberately no mobile rule here.
 *
 * A third level looked wrong in preview, sitting further left than the first,
 * so this file indented it by hand. That was the bug: Enfold already steps the
 * padding 50px, 70px, 90px by depth and positions the bullet to match, and the
 * hand-written rule was overriding the correct value with a smaller one. The
 * theme handles the accordion, including the third level, on its own. */