/**
 * Menu - MES Styles
 *
 * @package Supreme_Starter
 * @since 1.0.0
 * @snippet_id 23453
 */

/* ============================================
   BASE LAYOUT & GLOBAL SETTINGS
   ============================================ */

/* Desktop menu container */
.mmega-menu-desktop,
.mmega-menu-desktop * {
	height: 100%;
}

.empty-link {
	pointer-events: none;
}

/* Body scroll lock */
body.no-scroll {
	overflow: hidden;
}

/* Menu wrapper */
.mes-nav-menu {
	flex-wrap: nowrap !important;
}

.mes-mobile-toggle {
	height:50px;
}

.mes-nav-menu .mes-title-only.menu-top-level > .mes-title-wrapper {
	font-weight: 400 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mes-nav-menu .mes-title-only > .mes-title-wrapper > .mes-title-text {
	height: auto;
}

/* Current menu item states */
.mes-nav-menu .current-menu-item > a,
.mes-nav-menu .current-menu-ancestor > a {
	color: inherit !important;
	font-weight: 700 !important;
}

/* Mobile CTA */
.mobile-cta {
	display: none;
}

/* Width utilities */
#menu-menu-expansion .width-185 {
	width: 185px;
}

/* ============================================
   SEARCH STYLES
   ============================================ */

.swp-search-results .entry-summary,
.swp-search-results .excerpt,
.swp-search-results p {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.searchwp-live-search-results {
	min-width: 0; /* QA: the results box is as wide as the search box (SearchWP sets that width inline); it was forced to 400px */
}

/* ============================================
   MAIN MENU ITEMS (Top Level)
   ============================================ */

#menu-menu-expansion .main-menu-item,
#menu-menu-expansion .menu-top-level {
	position: relative;
	color: #000;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
	transition: all ease-in-out 0.3s;
	border-bottom: 4px solid transparent;
}

#menu-menu-expansion li.main-menu-item > a,
#menu-menu-expansion li.menu-top-level > a,
#menu-menu-expansion li.menu-top-level > a > span {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#menu-menu-expansion li.menu-top-level .sub-menu {
	height: auto;
}

#menu-menu-expansion .main-menu-item.mes-hover-active > a,
#menu-menu-expansion li.menu-top-level.mes-hover-active > a {
	position: relative;
	transition: all ease-in-out 0.3s;
}

/* Orange bar under a top-level item: always present but collapsed; it grows from left to right while the item is open */
#menu-menu-expansion .main-menu-item:before,
#menu-menu-expansion .menu-top-level:before {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	height: 4px;
	width: 100%;
	background: #fd7521;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s ease-in-out;
	pointer-events: none;
}

#menu-menu-expansion .main-menu-item.mes-hover-active:before,
#menu-menu-expansion .menu-top-level.mes-hover-active:before {
	transform: scaleX(1);
}
}

/* ============================================
   MENU ITEMS - BASE STYLES
   ============================================ */

#menu-menu-expansion .menu-item {
	box-shadow: none;
}

#menu-menu-expansion .menu-item a {
	padding: 0 20px;
	background: transparent;
	border-bottom: none;
	font-family: inherit; /* the Elementor kit sets a { font-family: Lato } on every link: the row font comes from the item */
}

#menu-menu-expansion .menu-item .mes-sub-menu a {
	padding: 0 40px 0 0;
}

/* Hide default arrows */
#menu-menu-expansion .menu-item .mes-arrow {
	display: none;
}

/* ============================================
   MENU ARROWS & INDICATORS
   ============================================ */

/* Top level arrows */
#menu-menu-expansion.mes-nav-menu .menu-item-has-children > a::after,
#menu-menu-expansion.mes-nav-menu
	.menu-item-has-children.menu-top-level
	> .mes-title-wrapper::after {
	/* arrow icon: ../images/chevron-down.svg as a mask, so it takes the text colour */
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 0;
	background-color: currentColor;
	-webkit-mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
	mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
	transform: none;
	margin-left: 8px;
	margin-bottom: 0;
}

#menu-menu-expansion.mes-nav-menu .menu-item-has-children.menu-item-1 > span {
	display: flex;
	align-items: center;
	font-weight: 400;
}

/* Level 1-3 arrows - consolidated */
#menu-menu-expansion.mes-nav-menu
	.menu-item-has-children.menu-item-1
	> a::after,
#menu-menu-expansion.mes-nav-menu
	.menu-item-has-children.menu-item-1
	> span::after,
#menu-menu-expansion.mes-nav-menu
	.menu-item-has-children.menu-item-2
	> a::after,
#menu-menu-expansion.mes-nav-menu
	.menu-item-has-children.menu-item-3
	> a::after {
	/* dropdown arrow: ../images/chevron-right.svg (the template's .mm__chev, 20px) as a mask; a fixed black, it does not change on hover */
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: auto;
	transform: none;
	margin-bottom: 0;
	float: right;
	margin-top: 3px;
	border: 0;
	background-color: #000;
	-webkit-mask: url("../images/chevron-right.svg") center / 20px 20px no-repeat;
	mask: url("../images/chevron-right.svg") center / 20px 20px no-repeat;
}

/* ============================================
   MENU ITEMS - LEVEL SPECIFIC STYLES
   ============================================ */

/* Level 1 menu items */
#menu-menu-expansion .menu-item.menu-item-1 {
	padding: 0;
	margin: 0; /* the panel padding (15px) is the only left inset, as in the reference .mm__list */
	border-right: 2px solid transparent; /* normal state: invisible (width kept so the arrow does not shift on hover) */
	color: #000000;
	font-family: var(--dls-menu-font, Lato); /* reference dropdown font (Lato has no 500 weight) */
	font-size: var(--dls-row-fs, 16px); /* reference .mm__a: 15px up to 1500px, 16px from 1501px */
	font-style: normal;
	font-weight: 400;
	line-height: var(--dls-row-lh, 26px);
	text-transform: none;
}

#menu-menu-expansion .menu-item.menu-item-1 a {
	padding: var(--dls-row-py, 9px) var(--dls-row-px, 13px);
	display: flex;
	align-items: center;
}

#menu-menu-expansion .menu-item.menu-item-1 > a > span {
	max-width: 95%;
	display: block;
}

#menu-menu-expansion .menu-item.menu-item-1 a[data-submenu-trigger='hover'] {
	position: relative;
}

#menu-menu-expansion .menu-item.menu-item-1:hover {
	border-right: 2px solid #fd7521;
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item.menu-item-1:hover > a {
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item-has-children.menu-item-1:hover {
	border-right: 2px solid #fd7521;
	color: #000 !important;
}

/* Level 2 menu items */
#menu-menu-expansion .menu-item.menu-item-2 {
	color: #000000;
	font-family: var(--dls-menu-font, Lato);
	font-size: var(--dls-row-fs, 15px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--dls-row-lh, 24px);
	border-right: 2px solid transparent; /* normal state: invisible (width kept so nothing shifts on hover) */
	border-left: 4px solid transparent; /* reference .mm2 .mm__a */
	border-bottom-color: transparent; /* the grey section-title rows also draw a bottom line */
	background: transparent;
}

#menu-menu-expansion .menu-item.menu-item-2:hover {
	border-right: 2px solid #fd7521;
	border-left: 4px solid #fd7521;
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item.menu-item-2:hover > a {
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item-has-children.menu-item-2:hover {
	color: #000 !important;
}

/* Level 3 menu items */
#menu-menu-expansion .menu-item.menu-item-3 {
	margin: 0;
	color: #000000;
	font-family: var(--dls-menu-font, Lato);
	font-size: var(--dls-row-fs, 15px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--dls-row-lh, 24px);
	border-right: 2px solid transparent; /* normal state: invisible (width kept so nothing shifts on hover) */
	border-left: 4px solid transparent; /* reference .mm2 .mm__a */
	background: transparent;
}

#menu-menu-expansion .menu-item.menu-item-3:hover {
	border-right: 2px solid #fd7521;
	border-left: 4px solid #fd7521;
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item.menu-item-3:hover > a {
	color: #fd7521 !important;
}

#menu-menu-expansion .menu-item-has-children.menu-item-3:hover {
	color: #000 !important;
}

#menu-menu-expansion .menu-item-has-children.menu-item-3:hover > a {
	color: #000 !important;
}

/* ============================================
   SUBMENUS - BASE STYLES
   ============================================ */

#menu-menu-expansion .menu-item .sub-menu {
	min-width: var(--dls-mm-w, 380px); /* reference .mm: 380px up to 1500px, 447px from 1501px (see the desktop variables below) */
	top: 102px;
	background: #ffffff;
	padding: 15px 0 15px 15px;
	border-top: 1px solid var(--Border, #dadada);
}

#menu-menu-expansion .menu-item.mes-hover-active > .sub-menu { /* the open item's OWN panel only: with a descendant selector every nested panel of an open item was "visible" (fully transparent), so keyboard Tab walked through invisible rows */
	visibility: visible;
}

/* Submenu width modifiers */
#menu-menu-expansion .menu-item.width-260 .sub-menu {
	min-width: 260px;
}

/* QA: the "Markets We Serve" dropdown is 260px wide */
#menu-menu-expansion .menu-item.width-185 > .sub-menu {
	width: 260px;
	min-width: 260px;
	max-width: 260px;
}

#menu-menu-expansion .menu-item.width-290 .sub-menu {
	min-width: 290px;
}

/* ============================================
   SUBMENUS - NESTED LEVELS
   ============================================ */

/* Level 2 submenus */
#menu-menu-expansion .sub-menu .sub-menu {
	padding: 15px 0px 15px 15px; /* reference .mm__list */
	background: #ffffff;
	backdrop-filter: none;
	top: -16px; /* the first row of a child menu lines up with its parent row: 1px border + 15px padding above it */
}

/* Level 3 submenus */
#menu-menu-expansion .sub-menu .sub-menu .sub-menu {
	background: #ffffff;
	backdrop-filter: none;
	padding: 15px 0 15px 15px;
}

/* Level 4 submenus */
#menu-menu-expansion .sub-menu .sub-menu .sub-menu .sub-menu {
	background: transparent;
	backdrop-filter: none;
	padding: 0;
}

/* Level 5 submenus */
#menu-menu-expansion .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu {
	background: rgba(249, 249, 249, 1);
	backdrop-filter: blur(15px);
	padding: 10px 0 15px 10px;
}

/* Level 6 submenus */
#menu-menu-expansion
	.sub-menu
	.sub-menu
	.sub-menu
	.sub-menu
	.sub-menu
	.sub-menu {
	background: transparent;
	backdrop-filter: none;
	padding: 0;
}

/* ============================================
   SUBMENU TRIGGERS & POSITIONING
   ============================================ */

body
	#menu-menu-expansion
	li.mes-trigger-hover.mes-display-columns
	> .mes-sub-menu,
body
	#menu-menu-expansion
	.mes-trigger-hover.mes-display-columns
	> .mes-sub-menu,
body
	#menu-menu-expansion
	li.mes-trigger-click.mes-display-columns
	> .mes-sub-menu,
body
	#menu-menu-expansion
	.mes-trigger-click.mes-display-columns
	> .mes-sub-menu {
	left: 100%;
	right: auto;
	top: 0;
	border-top: 1px solid #dadada;
	border-right: 1px solid #dadada;
	background: rgba(249, 249, 249, 0.7);
	backdrop-filter: blur(15px);
	padding: 0;
	gap: 0;
}

/* ============================================
   MENU TITLES & DESCRIPTIONS
   ============================================ */

/* Title with description container */
.title-with-description {
	background: #f7f5f2; /* reference .mm__intro */
	border-bottom: 1px solid #dadada;
	margin-bottom: 15px;
}

#menu-menu-expansion li.title-with-description a {
	padding: 20px 20px 20px 30px !important;
	background: #f7f5f2;
}

.sub-menu.mes-sub-menu:first-child {
	margin-top: 15px;
}

/* Desktop: the grey intro block runs edge to edge inside the panel (reference .mm__intro); only the list below it is inset by the panel padding (15px 0 15px 15px = reference .mm__list) */
@media (min-width: 1025px) {
	/* dropdown sizes as in the reference (Homepage.html): panels 380px, rows 15px/24px (9px 13px), title 21px/30px up to 1500px; wide screens below */
	#menu-menu-expansion {
		--dls-mm-w: 380px;
		--dls-row-fs: 15px;
		--dls-row-lh: 24px;
		--dls-row-py: 9px;
		--dls-row-px: 13px;
		--dls-ttl-fs: 21px;
		--dls-ttl-lh: 30px;
	}
	#menu-menu-expansion > li.menu-top-level > .sub-menu > li.title-with-description:first-child {
		margin: -15px 0 15px -15px;
	}

	/* second and third level panels (reference .mm2 / .mm3): 1px hairline border and the template's shadow (the 380px width comes from the base panel rule) */
	#menu-menu-expansion .sub-menu .sub-menu {
		border: 1px solid rgba(42, 37, 48, 0.08);
		box-shadow: rgba(42, 37, 48, 0.16) 8px 12px 28px -10px, rgba(0, 0, 0, 0.18) 12px 32px 56px -18px;
	}

	/* keyboard focus (ss-menu-keyboard.js): a visible ring on the labels (in the label colour: white over the homepage hero) and on the rows */
	#menu-menu-expansion > li.menu-top-level > .mes-title-wrapper:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
	#menu-menu-expansion .sub-menu a:focus-visible {
		outline: 2px solid #32126E;
		outline-offset: -2px;
	}

	/* Client request: L1 / L2 colours and hover states as on production (white L1 panel, grey L2 panel as tall as the L1
	   panel, light orange row tint, orange chevrons). Colours were sampled from the production screenshot (BugHerd). */
	#menu-menu-expansion {
		--dls-mm-tint: #fff7f1;
		--dls-mm-l2-bg: #f9f9f9;
		--dls-mm-grey: #dadada;
	}

	/* grey intro block */
	#menu-menu-expansion li.title-with-description,
	#menu-menu-expansion li.title-with-description a {
		background: #f8f8f8;
	}

	/* L1 rows: the row of the open child (or under the pointer) gets the tint, black text and the orange right edge */
	#menu-menu-expansion .menu-item.menu-item-1:hover,
	#menu-menu-expansion .menu-item.menu-item-1.mes-hover-active {
		background: var(--dls-mm-tint);
		border-right: 2px solid #fd7521;
	}
	#menu-menu-expansion .menu-item-has-children.menu-item-1:hover > a,
	#menu-menu-expansion .menu-item-has-children.menu-item-1.mes-hover-active > a {
		color: #000 !important;
	}

	/* chevrons are orange (they were black) */
	#menu-menu-expansion.mes-nav-menu .menu-item-has-children.menu-item-1 > a::after,
	#menu-menu-expansion.mes-nav-menu .menu-item-has-children.menu-item-2 > a::after,
	#menu-menu-expansion.mes-nav-menu .menu-item-has-children.menu-item-3 > a::after {
		background-color: #fd7521;
	}

	/* L2 panel: grey, and as tall as the L1 panel. The L1 row stops being the positioning parent so the panel is placed
	   against the L1 panel (top edge to bottom edge) instead of against the row; it grows past that if it has more rows. */
	/* L3 is the same as L2 on dls.com (grey panel, same padding, as tall as the panel it opens from), so the L2 row is not the
	   positioning parent either. */
	#menu-menu-expansion .menu-item-1.menu-item-has-children,
	#menu-menu-expansion .menu-item-2.menu-item-has-children {
		position: static;
	}
	#menu-menu-expansion .menu-item.menu-item-1 > .sub-menu,
	#menu-menu-expansion .menu-item.menu-item-2 > .sub-menu {
		top: -1px; /* over the parent panel's 1px top border */
		min-height: calc(100% + 1px);
		padding: 10px 0 15px 10px; /* as measured on dls.com */
		background: var(--dls-mm-l2-bg);
	}

	/* L2 / L3 rows: grey 5px left edge (dls.com), light grey section title row, tinted hover row with orange edges */
	#menu-menu-expansion .menu-item.menu-item-2,
	#menu-menu-expansion .menu-item.menu-item-3,
	#menu-menu-expansion .menu-item.menu-item-2:hover,
	#menu-menu-expansion .menu-item.menu-item-3:hover {
		border-left-width: 5px;
	}
	#menu-menu-expansion .menu-item.menu-item-2,
	#menu-menu-expansion .menu-item.menu-item-3 {
		border-left-color: var(--dls-mm-grey);
	}
	#menu-menu-expansion .menu-item.menu-item-2.submenu-title,
	#menu-menu-expansion .menu-item.menu-item-3.submenu-title {
		background: var(--dls-mm-grey);
	}
	/* a row that opens a panel keeps black text while it is open (only the chevron and the edges are orange) */
	#menu-menu-expansion .menu-item-has-children.menu-item-2:hover > a,
	#menu-menu-expansion .menu-item-has-children.menu-item-2.mes-hover-active > a,
	#menu-menu-expansion .menu-item-has-children.menu-item-3:hover > a,
	#menu-menu-expansion .menu-item-has-children.menu-item-3.mes-hover-active > a {
		color: #000 !important;
	}
	#menu-menu-expansion .menu-item.menu-item-2.mes-hover-active,
	#menu-menu-expansion .menu-item.menu-item-3.mes-hover-active {
		background: var(--dls-mm-tint);
		border-left-color: #fd7521;
		border-right-color: #fd7521;
	}
	#menu-menu-expansion .menu-item.menu-item-2:hover,
	#menu-menu-expansion .menu-item.menu-item-3:hover {
		background: var(--dls-mm-tint);
		border-left-color: #fd7521;
	}
	/* Client request: the actual clickable L1 / L2 / L3 links (rows without a flyout) have a white background on hover; the #fff7f1
	   tint is only for the rows that open a flyout. They keep the orange edges and text. */
	#menu-menu-expansion .menu-item.menu-item-1:not(.menu-item-has-children):hover,
	#menu-menu-expansion .menu-item.menu-item-2:not(.menu-item-has-children):hover,
	#menu-menu-expansion .menu-item.menu-item-3:not(.menu-item-has-children):hover {
		background: #fff;
	}
}

/* Title text */
.sub-menu.mes-sub-menu .title-with-description a .mes-title-with-arrow,
.mes-title-with-link .mes-title-text {
	color: #000000;
	font-family: var(--dls-menu-font, Lato);
	font-size: var(--dls-ttl-fs, 21px); /* reference .mm__ttl: 21px up to 1500px, 24px from 1501px */
	font-style: normal;
	font-weight: 400;
	line-height: var(--dls-ttl-lh, 30px);
	margin: 0;
	text-transform: none;
	transition: all ease-in-out 0.3s;
}

/* Nested submenu title text */
.sub-menu
	.sub-menu
	.sub-menu.mes-sub-menu
	.mes-title-only
	.mes-title-wrapper
	.mes-title-text,
.sub-menu
	.sub-menu
	.sub-menu.mes-sub-menu
	.mes-title-only
	.mes-title-wrapper
	.mes-title-with-arrow {
	font-size: 16px;
	font-weight: 600;
}

/* Subtitle text */
.sub-menu.mes-sub-menu .mes-title-only .mes-title-wrapper .mes-menu-subtitle,
.sub-menu.mes-sub-menu .title-with-description a .mes-menu-subtitle {
	color: #000000;
	opacity: 1; /* reference .mm__desc (the menu plugin sets .8) */
	font-family: var(--dls-menu-font, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	margin-top: 5px; /* reference .mm__desc */
	text-transform: none;
}

/* Title hover states */
li.submenu-title a {
	transition: all ease-in-out 0.3s;
}

li.submenu-title a:hover,
.sub-menu.mes-sub-menu .title-with-description a:hover .mes-title-with-arrow,
.sub-menu.mes-sub-menu .title-with-description a:hover .mes-title-text {
	color: #fd7521;
	transition: all ease-in-out 0.3s;
}

/* ============================================
   SUBMENU TITLES
   ============================================ */

li.submenu-title {
	width: 100%;
	border-bottom: 0 solid transparent; /* was 2px: it made the first row of a panel 2px taller than the rest */
	background: #dadada;
	font-weight: 700;
}

.submenu-title .mes-title-wrapper {
	padding: 0 4px 0 0 !important;
}

.submenu-title .mes-title-wrapper .mes-title-text {
	color: #000000;
	font-family: var(--dls-menu-font, Lato);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 26px;
}

/* ============================================
   ACCORDION & MOBILE MENU BASE
   ============================================ */

body.mes-mobile-accordion-mode
	.mes-display-accordion.mes-accordion-open
	> .mes-sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* Ensure all nested sub-menus are visible and interactive in accordion mode */
body.mes-mobile-accordion-mode
	.mes-display-accordion.mes-accordion-open
	.mes-sub-menu,
body.mes-mobile-accordion-mode
	.mes-display-accordion.mes-accordion-open
	.mes-sub-menu
	.mes-sub-menu,
body.mes-mobile-accordion-mode
	.mes-display-accordion.mes-accordion-open
	.mes-sub-menu
	.mes-sub-menu
	.mes-sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

#menu-mobile-menu-expansion {
	display: flex;
	flex-direction: column;
	box-shadow: none;
	padding: 0 0 100px 0;
}

/* ============================================
   MENU ITEM POSITIONING
   ============================================ */

.mes-nav-menu li li.menu-item-has-children,
.mes-nav-menu li .menu-item-has-children {
	position: relative; /* was static, which pinned every child menu to the top of its parent PANEL: a child now opens beside the row it belongs to */
}

.mes-nav-menu li.mes-group-parent.menu-item-has-children {
	position: relative;
}

.mes-nav-menu li.mes-group-parent.menu-item-has-children .mes-sub-menu {
	top: -2px !important;
	height: 100% !important;
}

/* ============================================
   BLUR OVERLAY
   ============================================ */

.menu-blur-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(188, 188, 188, 0.5);
	backdrop-filter: blur(5px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 9;
}

.menu-blur-overlay.active {
	opacity: 1;
	pointer-events: all;
}

/* ============================================
   DEEPLY NESTED SUBMENU DISPLAY CONTROL
   ============================================ */

/* Hide deeply nested submenus by default */
#menu-menu-expansion
	.menu-item
	.sub-menu
	.mes-hover-active
	.mes-sub-menu
	.sub-menu
	.sub-menu {
	display: none !important;
}

/* Show deeply nested submenus when parent is hovered */
#menu-menu-expansion
	.menu-item
	.sub-menu
	.mes-hover-active
	.mes-sub-menu
	.sub-menu
	.mes-hover-active
	.sub-menu {
	display: block !important;
}

/* ============================================
   HEADER ANIMATION
   ============================================ */

.hide-haederr {
	transition: background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), border 0.3s, border-radius 0.3s, box-shadow 0.3s,
		transform 0.3s !important;
}

/* ============================================
   MOBILE MENU STYLES (1024px and below)
   ============================================ */

@media screen and (max-width: 1024px) {
	/* Container & Layout */
	body.mes-mobile-accordion-mode
		.mmega-menu-desktop
		.mes-menu-container
		.mes-layout-horizontal
		.mes-nav-container {
		display: flex;
		flex: 1;
	}

	.mmega-menu-desktop,
	.mmega-menu-desktop * {
		height: auto;
	}

	.mes-nav-container {
		display: flex;
		align-items: center;
	}

	.header-menu {
		order: 3;
	}

	/* mobile header padding as in the reference (.site-header: 18px 22px up to 560px, 18px 40px up to 900px, 30px 48px
	   above); the 40px row is the burger button's height. The bar height is padding + row (76px / 100px), and the opened
	   menu starts under it through --dls-mob-hdr-h. (The class name .hide-haederr is spelled that way in the Elementor
	   header template, the scripts and the CSS: it is not renamed.) */
	.hide-haederr {
		--dls-mob-pad-y: 18px;
		--dls-mob-pad-x: 22px;
		--dls-mob-hdr-h: calc(var(--dls-mob-pad-y) * 2 + 40px);
		max-height: var(--dls-mob-hdr-h);
		height: var(--dls-mob-hdr-h);
		padding: var(--dls-mob-pad-y) var(--dls-mob-pad-x) !important;
		box-sizing: border-box;
	}

	/* the header sits at z-index 100 on the homepage (ss-header-home.css) and has none on inner pages; while the mobile menu is open
	   it is lifted above the hero and every other section, so the open menu is always the topmost item (the search results panel
	   keeps its own, higher, z-index). The leading html makes this win over the homepage rule (same selector otherwise). */
	html body.mes-mobile-menu-active .elementor-location-header {
		z-index: 99999;
	}

	.hide-haederr > .elementor-container {
		max-height: 40px;
		height: 40px;
	}

	/* Elementor pads the header column wrappers 10px top and bottom; inside the 40px row they are centred instead */
	.hide-haederr .elementor-widget-wrap,
	.hide-haederr .elementor-widget-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.hide-haederr > .elementor-container > .elementor-column > .elementor-widget-wrap {
		align-items: center;
	}

	#menu-menu-expansion.mes-nav-menu .menu-item-has-children a span {
		pointer-events: none;
	}

	/* ============================================
	   MOBILE MENU ARROWS
	   ============================================ */

	#menu-menu-expansion.mes-nav-menu .menu-item-has-children > a::after,
	#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children
		> .mes-title-wrapper::after {
		content: '';
		display: inline-block;
		width: 12px;
		height: 12px;
		border: 0;
		background-color: #000;
		-webkit-mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		transform: none;
		float: right;
		margin-top: 6px;
		margin-left: auto;
		transition: transform 0.3s ease;
	}

	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children
		> a::after,
	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children
		> .mes-title-wrapper::after {
		width: 12px !important;
		height: 12px !important;
		right: 0;
		position: relative;
	}

	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children.menu-item-1
		> a::after,
	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children.menu-item-1
		> .mes-title-wrapper::after {
		width: 12px !important;
		height: 12px !important;
	}

	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children.menu-item-2
		> a::after,
	body.mes-mobile-accordion-mode.mes-mobile-menu-active
		.mes-nav-menu
		.menu-item-has-children.menu-item-2
		> .mes-title-wrapper::after {
		width: 12px !important;
		height: 12px !important;
		margin-right: 0 !important;
	}

	#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.mes-accordion-open
		> a::after,
	#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.mes-accordion-open
		> .mes-title-wrapper::after {
		opacity: 1;
		background-color: #fd7521;
	}

	body.mes-mobile-accordion-mode
		.mes-nav-menu
		.menu-item-has-children.mes-accordion-open
		> a::after,
	body.mes-mobile-accordion-mode
		.mes-nav-menu
		.menu-item-has-children.mes-accordion-open
		> .mes-title-wrapper::after {
		transform: rotate(180deg) !important;
	}

	body.mes-mobile-accordion-mode
		.mes-nav-menu
		.menu-item-has-children
		> .mes-title-wrapper::after {
		margin-left: auto;
	}

	/* every level uses the same small down chevron in the opened menu (the dropdown's right chevron is desktop only) */
	body
		#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.menu-item-1
		> a::after,
	body
		#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.menu-item-1
		> span::after,
	body
		#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.menu-item-2
		> a::after,
	body
		#menu-menu-expansion.mes-nav-menu
		.menu-item-has-children.menu-item-3
		> a::after {
		background-color: #000;
		-webkit-mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		transform: none;
		margin-top: 6px;
		right: 0;
	}

	/* ============================================
	   MOBILE MENU CONTAINER
	   ============================================ */

	#menu-menu-expansion {
		top: var(--dls-mob-hdr-h, 55px); /* the opened menu starts under the mobile header (its height follows the header padding) */
		bottom: 0;
		overflow-y: auto; /* was scroll: an empty scrollbar track showed on tablets even when nothing overflowed */
		scrollbar-width: none; /* QA: no visible scrollbar on the mobile menu (it still scrolls) */
		max-width: 100vw;
		min-height: 100vh;
		/* DLS-202: on iOS Safari 100vh is the tall viewport (toolbar retracted), so with top offset the menu box ended below the
		   visible area and the last row (Contact Us) could not be scrolled into view. dvh follows the visible viewport. */
		min-height: calc(100dvh - var(--dls-mob-hdr-h, 55px));
		max-height: calc(100dvh - var(--dls-mob-hdr-h, 55px));
		height: auto;
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
		padding-top: 0px;
		overscroll-behavior: contain; /* a scroll over the menu never passes to the page behind it */
	}

	#menu-menu-expansion::-webkit-scrollbar {
		display: none;
	}

	/* While the menu is open the page behind it must not scroll. html has overflow-x: clip (ss-global-custom-styles.css), so the
	   body's own overflow: hidden is not passed on to the window and the page kept scrolling: on the homepage the menu is
	   anchored to the header, which scrolls away with the page, and the homepage showed through. DLS-189: an overflow: hidden on
	   html is not honoured by iOS Safari for touch scrolling, so the lock is now the fixed-body technique, switched by
	   ss-menu-mobile-search-in-menu.js (it sets body.dls-scroll-locked and the inline top = -scrollY, and scrolls back on close). */
	body.dls-scroll-locked {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	.mes-accordion-open {
		z-index: 1001;
	}

	#menu-menu-expansion .mes-accordion-open li,
	#menu-menu-expansion .mes-accordion-open a {
		height: auto;
	}

	#menu-menu-expansion > li > span,
	#menu-menu-expansion > li > a {
		max-height: 57px;
	}

	/* ============================================
	   MOBILE TOGGLE BUTTON
	   ============================================ */

	body.mes-mobile-accordion-mode .mmega-menu-desktop .mes-mobile-toggle {
		display: block;
		position: relative !important;
		top: 0;
		right: 0;
		margin-left: auto;
		z-index: 100000;
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		width: auto;
		height: 40px; /* the reference burger is 40px high; it sets the header row */
		padding: 0 0 0 10px;
	}

	/* ============================================
	   MOBILE MENU ITEMS
	   ============================================ */

	.menu-item {
		border-top: 1px solid #d1d3d4; /* first-level dividers only: see below */
	}

	/* QA: second and third level rows have no borders (only the first-level items are divided) */
	#menu-menu-expansion .sub-menu .menu-item,
	#menu-menu-expansion .sub-menu li.submenu-title {
		border-top: none;
		border-bottom: none;
	}

	/* reference drawer: the menu rows (and their dividers) sit in from both sides by the header padding (22px, 40px from 561px), like the search box above them */
	#menu-menu-expansion > li.menu-top-level:not(.dls-menu-search):not(.mobile-cta) {
		margin-left: var(--dls-mob-pad-x, 22px);
		margin-right: var(--dls-mob-pad-x, 22px);
		width: auto;
		border-bottom: 0; /* the 4px transparent bar border is for the desktop hover bar */
	}

	/* the last row is closed with a divider too (top and bottom, as in the reference drawer) */
	#menu-menu-expansion > li.menu-top-level:not(.dls-menu-search):not(.mobile-cta):is(:last-child, :has(+ .mobile-cta)) {
		border-bottom: 1px solid #d1d3d4;
	}

	.mes-sub-menu.sub-menu li a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}

	.mes-sub-menu.sub-menu li a span {
		display: block;
		max-width: 85%;
	}

	/* Items below the first level keep the original mobile label style (the Contact Us pill is styled by its own rule below) */
	#menu-menu-expansion .menu-top-level:not(.mobile-cta) .mes-title-with-arrow {
		text-align: left;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px;
	}

	/* FIRST LEVEL ONLY (reference drawer: 18px / 600 / uppercase / purple). The old rule asked for
	   .mes-title-text.menu-top-level, a class combination that never exists, so none of it applied. */
	#menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > .mes-title-wrapper > .mes-title-text,
	#menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > a > .mes-title-with-arrow {
		text-align: left;
		font-family: var(--dls-menu-font, Lato); /* reference drawer font, same as the rows below */
		font-size: 18px;
		font-style: normal;
		font-weight: 600;
		line-height: 27px;
		text-transform: uppercase;
		color: #32126E;
	}
	/* first-level row: 16px above and below, 2px at the right (reference .dr__t) */
	#menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > .mes-title-wrapper {
		padding-top: 16px;
		padding-right: 2px;
		padding-bottom: 16px;
		line-height: 27px;
		height: auto !important;
		min-height: 59px; /* 16 + 27 + 16: the reference first-level row */
	}

	/* hover colours as in the reference drawer: second-level plain links turn purple (#32126E), groups (with a sub-menu)
	   stay black, third level stays grey, first level stays purple. The base rules (orange, desktop) use !important. */
	#menu-menu-expansion .menu-item.menu-item-1:not(.menu-item-has-children):hover > a {
		color: #32126E !important;
	}
	#menu-menu-expansion .menu-item.menu-item-1.menu-item-has-children:hover > a {
		color: #000 !important;
	}
	#menu-menu-expansion .menu-item.menu-item-2:hover > a {
		color: #808285 !important;
	}
	/* the overview link (first row of a panel) is a plain second-level link in the reference */
	#menu-menu-expansion li.title-with-description a:hover,
	#menu-menu-expansion li.title-with-description a:hover .mes-title-text,
	#menu-menu-expansion li.title-with-description a:hover .mes-title-with-arrow {
		color: #32126E !important;
	}

	#menu-menu-expansion .menu-top-level:not(.mobile-cta) > a {
		padding-left: 0;
		height: 100%;
	}

	#menu-menu-expansion .menu-top-level:not(.mobile-cta) > a > span {
		padding: 16px 2px; /* reference drawer: first-level rows 16px 2px */
	}

	#menu-menu-expansion .mes-title-wrapper,
	#menu-menu-expansion .menu-top-level:not(.mobile-cta) .mes-title-with-arrow {
		justify-content: flex-start !important;
		padding-left: 2px;
	}

	#menu-menu-expansion .menu-top-level.mes-hover-active:before {
		display: none;
	}

	/* ============================================
	   MOBILE MENU - LEVEL 1 ITEMS
	   ============================================ */

	#menu-menu-expansion .menu-item.menu-item-1 {
		margin: 0;
		padding: 0;
		border-bottom: none;
		border-right: none;
	}

	#menu-menu-expansion .menu-item.menu-item-1 > a,
	#menu-menu-expansion .menu-item.menu-item-1 > span {
		padding: 11px 2px 11px 14px; /* reference second level: 11px 2px 11px 14px (12px for groups, below) */
	}

	/* groups (with a sub-menu) are 1px taller, as in the reference */
	#menu-menu-expansion .menu-item.menu-item-1.menu-item-has-children > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	#menu-menu-expansion .menu-item.menu-item-1.menu-item-has-children > a .mes-title-with-arrow {
		line-height: 27px;
	}

	#menu-menu-expansion .menu-item.menu-item-1:hover {
		border-right: none;
		background: unset;
	}

	#menu-menu-expansion .menu-item.menu-item-1 a .mes-title-with-arrow {
		font-size: 16px;
	}

	/* reference: second-level links without a sub-menu are regular weight, groups (with a sub-menu) stay 500 */
	#menu-menu-expansion .menu-item.menu-item-1:not(.menu-item-has-children) a .mes-title-with-arrow {
		font-weight: 400;
	}

	/* ============================================
	   MOBILE MENU - LEVEL 2 ITEMS
	   ============================================ */

	#menu-menu-expansion .menu-item.menu-item-2 {
		border-bottom: none;
		border-left: none;
		border-right: none;
		padding: 0;
		width: 100%;
		background: transparent; /* QA: no tinted background on these items */
	}

	#menu-menu-expansion .menu-item.menu-item-2 a {
		padding: 11px 2px 11px 28px; /* reference third level */
	}

	#menu-menu-expansion .menu-item.menu-item-2 a .mes-title-with-arrow {
		/* reference drawer, third level: 16px / 400 / grey #808285 */
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px;
		color: #808285;
	}

	#menu-menu-expansion .menu-item.menu-item-2:hover {
		border-right: none;
		border-left: none;
		background: none;
	}

	#menu-menu-expansion .menu-item.menu-item-2 .sub-menu.mes-sub-menu {
		border-top: none;
		border-bottom: none;
		border-right: none;
	}

	/* ============================================
	   MOBILE MENU - LEVEL 3 ITEMS
	   ============================================ */

	#menu-menu-expansion .menu-item.menu-item-3 {
		padding: 0;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}

	#menu-menu-expansion .menu-item.menu-item-3 a {
		padding: 11px 2px 11px 42px !important;
	}

	#menu-menu-expansion .menu-item.menu-item-3:hover {
		border-right: none;
		border-left: none;
	}

	/* ============================================
	   MOBILE MENU - TITLE WITH DESCRIPTION
	   ============================================ */

	#menu-menu-expansion .main-menu-item:after,
	#menu-menu-expansion .main-menu-item.mes-hover-active:before,
	#menu-menu-expansion li.title-with-description a .mes-menu-subtitle {
		display: none;
	}

	#menu-menu-expansion li.title-with-description {
		color: #000000;
		font-family: var(--dls-menu-font, Lato);
		font-size: 16px;
		font-style: normal;
		font-weight: 400; /* the "Overview" row is a plain link: reference plain second-level links are 16px/26px/400 */
		line-height: 26px;
		text-transform: none;
		margin: 0;
		background: unset;
		box-shadow: none;
		border-top: none; /* QA: no dividers inside the menu levels */
		border-bottom: none;
	}

	#menu-menu-expansion li.title-with-description .mes-title-wrapper {
		border-top: none !important;
	}

	#menu-menu-expansion li.title-with-description .mes-title-text {
		margin: 0;
		font-size: 16px;
		font-weight: 400; /* plain-link weight (reference second-level links) */
		line-height: 26px; /* the desktop panel title is 21px/30px; here it is a normal row */
	}

	#menu-menu-expansion li.title-with-description a {
		background: transparent;
		border-bottom: none;
		height: auto;
		padding: 11px 2px 11px 14px !important;
	}

	#menu-menu-expansion li.title-with-description a > span > span,
	#menu-menu-expansion li.title-with-description a > span.mes-title-with-arrow {
		max-width: 95% !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		padding-left: 0 !important;
		margin: 0;
	}

	#menu-menu-expansion li.title-with-description a .mes-title-wrapper,
	.title-with-description {
		padding: 0;
		background: none;
	}

	#menu-menu-expansion li.mes-title-only .mes-title-wrapper {
		color: #000000;
		font-family: var(--dls-menu-font, Lato);
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px;
		text-transform: none;
		margin: 0;
		background: unset;
		box-shadow: none;
		border-top: none; /* QA: no dividers inside the menu levels */
		border-bottom: none;
		display: block !important;
	}

	#menu-menu-expansion li.mes-title-only .mes-title-wrapper .mest-title-text {
		display: block !important;
		padding-left: 0 !important;
	}

	/* ============================================
	   MOBILE MENU - SUBMENUS
	   ============================================ */

	#menu-menu-expansion .menu-item .sub-menu {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		border-top: none;
		border-left: none;
		max-width: 100%;
		min-width: 100%;
		background: #fff;
	}

	#menu-menu-expansion .sub-menu .sub-menu {
		padding: 0;
		background: unset;
		backdrop-filter: none;
		top: -1px;
		height: 100%;
		border-top: none;
		border-right: none;
	}

	#menu-menu-expansion .sub-menu .sub-menu .mes-accordion-open {
		background: #fff7f1;
	}

	#menu-menu-expansion .sub-menu .sub-menu .sub-menu {
		padding: 0;
		background: unset;
		backdrop-filter: none;
		top: 0;
		height: 100%;
		border-top: 1px solid var(--Border, #dadada);
		border-right: none;
	}

	.mes-sub-menu .mes-sub-menu {
		background: transparent;
		border-bottom: none;
		padding-left: 0 !important;
		font-weight: 400;
	}

	.mes-sub-menu .mes-sub-menu li {
		padding-left: 0 !important; /* the indent comes from the link padding (reference third level) */
	}

	.mes-sub-menu .mes-sub-menu li a {
		padding-left: 28px !important; /* reference third level (14px more than the second) */
	}

	#menu-menu-expansion .mes-title-only > .sub-menu {
		padding-top: 0 !important;
	}

	/* ============================================
	   MOBILE MENU - SUBMENU TITLES
	   ============================================ */

	li.submenu-title {
		background: transparent;
		border-bottom: none;
		padding-left: 0;
		font-weight: 400;
	}

	/* ============================================
	   MOBILE MENU - TRIGGER BEHAVIOR
	   ============================================ */

	.mes-nav-menu li.mes-trigger-hover > .mes-sub-menu,
	.mes-nav-menu .mes-trigger-hover > .mes-sub-menu {
		pointer-events: auto !important;
	}

	/* ============================================
	   MOBILE MENU - CTA & UTILITIES
	   ============================================ */

	#menu-menu-expansion .mobile-cta {
		display: block;
		border-top: none;
		border-bottom: none;
		margin: 0 auto;
		text-align: center;
	}

	#menu-menu-expansion li.menu-top-level.mobile-cta > a {
		border-radius: 9999px;
		height: auto; /* the first-level rules give every top-level link height:100% and max-height:57px: the reference pill is 49px (10 + 27 + 10 + borders) */
		max-height: none;
		font-family: var(--dls-menu-font, Lato);
		border: 1px solid #32126E;
		background: #32126E;
		padding: 10px 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		color: #fff;
		text-align: center;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 27px;
		margin: 25px var(--dls-mob-pad-x, 22px) 22px; /* reference: a full-width pill, 25px under the last row, inset like the rows */
		text-transform: uppercase;
	}

	#menu-menu-expansion .width-185 {
		width: auto;
	}
}

/* ============================================
   LARGE DESKTOP STYLES (from 1501px, the reference breakpoint): panels 447px, rows 16px/26px (10px 15px), title 24px/34px
   ============================================ */

@media (min-width: 1501px) {
	#menu-menu-expansion {
		--dls-mm-w: 447px;
		--dls-row-fs: 16px;
		--dls-row-lh: 26px;
		--dls-row-py: 10px;
		--dls-row-px: 15px;
		--dls-ttl-fs: 24px;
		--dls-ttl-lh: 34px;
	}
}

/* mobile header padding steps (reference .site-header), same variables as the block above */
@media (min-width: 561px) and (max-width: 1024px) {
	.hide-haederr {
		--dls-mob-pad-x: 40px;
	}
}
@media (min-width: 901px) and (max-width: 1024px) {
	.hide-haederr {
		--dls-mob-pad-y: 30px;
		--dls-mob-pad-x: 48px;
	}
}


/* ============================================
   DESKTOP DROPDOWN MOTION (reference .mm: fades in while moving 6px in 0.2s; the plugin's own panels slide 10px in 0.3s,
   which read as a bounce). The plugin CSS is not edited, so its hidden and open states are restated here.
   ============================================ */
@media (min-width: 1025px) {
	#menu-menu-expansion .sub-menu.mes-sub-menu {
		transform: translate3d(0, -6px, 0); /* 3d on purpose: Safari draws the panel on its own layer from the first frame */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		/* DLS-196: a top-level dropdown closes 150ms after the pointer leaves (visibility changes only after the fade), so a pointer that
		   leaves a label for a moment does not shut it. Opening has no CSS delay: the 90ms intent is in ss-menu-hover-intent.js, which
		   adds the open class late. */
		transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s, visibility 0s linear 0.35s;
	}
	#menu-menu-expansion li.mes-trigger-hover.mes-hover-active > .sub-menu.mes-sub-menu,
	#menu-menu-expansion li.mes-trigger-click.mes-submenu-open > .sub-menu.mes-sub-menu {
		transform: translate3d(0, 0, 0);
		transition-delay: 0s;
	}
	/* DLS-196: the flyouts inside a dropdown (the panels of its rows) all sit at the same place, so moving between rows must never
	   leave the old one fading out while the new one waits: the outgoing flyout disappears at once and the incoming one appears at
	   once too (no fade: a fade left the right panel blank for ~0.1s on every row change). One flyout is visible at a time. */
	#menu-menu-expansion li:not(.menu-top-level) > .sub-menu.mes-sub-menu {
		transition: none;
	}
	#menu-menu-expansion li:not(.menu-top-level).mes-hover-active > .sub-menu.mes-sub-menu,
	#menu-menu-expansion li:not(.menu-top-level).mes-submenu-open > .sub-menu.mes-sub-menu {
		transition: none;
	}
	/* Safari flickered when the layer was only created at the start of the fade: the first-level panels, and every panel
	   below an open item, are promoted ahead of time (not all panels: each one is a large layer) */
	#menu-menu-expansion > li.menu-top-level > .sub-menu.mes-sub-menu,
	#menu-menu-expansion li.mes-hover-active .sub-menu.mes-sub-menu {
		will-change: opacity, transform;
	}
}