/**
 * Header Fixes
 *
 * Mega menu fixes for the Wardrobes Customiser site.
 *
 * @package WardrobesCustomiser
 * @version 1.0.0
 */


/* ==========================================================================
   1. Mega Menu Image Sizing
   ========================================================================== */

.mega-menu .menu-icon.menu-media img,
.mega-menu-inner .menu-icon.menu-media img {
	max-width: 120px !important;
	height: auto !important;
	width: auto !important;
}

.menu-icon.menu-media {
	display: block;
	margin-bottom: 8px;
}


/* ==========================================================================
   2. Mega Menu Clickable Links & Z-Index
   ========================================================================== */

.mega-menu .menu-item a,
.mega-menu-inner .menu-item a {
	position: relative;
	z-index: 2;
	pointer-events: auto !important;
}

.mega-menu .menu-icon.menu-media,
.mega-menu-inner .menu-icon.menu-media {
	position: relative;
	z-index: 1;
}

.mega-menu-inner {
	z-index: 1000 !important;
}

.dropdown-toggle {
	cursor: pointer !important;
	pointer-events: auto !important;
}


/* ==========================================================================
   3. Mega Menu Hover & Layout
   ========================================================================== */

.mega-menu .menu-item:hover > a,
.mega-menu-inner .menu-item:hover > a {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

.mega-menu-inner.open-animated {
	display: flex !important;
	background-color: #ecf5ff !important;
	padding-left: 100px !important;
}

.menu-horizontal .menu-smart > .mega-menu .mega-menu-inner.mega-menu-three > li {
	max-width: 200px;
}

.menu-horizontal .menu-smart .menu-item-has-children.depth-1 {
	max-width: 300px !important;
}


/* ==========================================================================
   4. "How To" Dropdown — Top Align Items
   ========================================================================== */

.mega-menu-three .drop-menu {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

.mega-menu-three .drop-menu .menu-item {
	align-self: flex-start !important;
	width: 100% !important;
}

.mega-menu-three .drop-menu .menu-item a {
	display: inline-block !important;
	vertical-align: top !important;
	text-align: left !important;
}

:not(.menu-sub-enhanced).menu-horizontal .menu-smart > .mega-menu .mega-menu-inner > li > ul > li > a {
	display: flex !important;
	flex-direction: row;
	align-items: center;
}


/* ==========================================================================
   5. Utility: Screen Reader Only
   ========================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   6. Menu Title Visibility Overrides
   ========================================================================== */

.hide-menu-title > a {
	visibility: hidden !important;
}