/**
 * Search - Nav Styles
 *
 * @package Supreme_Starter
 * @since 1.0.0
 * @snippet_id 23457
 */

/* ============================================
   MOBILE HEADER SECTION
   ============================================ */
.searchwp-predictive-results {
	width:150%;
}

.mob-header-section {
	padding: 15.5px 10px 16.5px 6.5%;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.mob-header-section .elementor-widget-wrap {
	padding: 0 0 0 0 !important;
}

.mob-header-section .elementor-widget-wrap .mob-logo.elementor-widget {
	width: auto;
}

.mob-header-section .elementor-widget-wrap .mob-logo.elementor-widget img {
	width: 100%;
	max-width: 140px;
}

.mob-header-section .elementor-widget-wrap .elementor-column.mob-header-right {
	width: auto;
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
}

.mob-header-section .elementor-widget-wrap .elementor-column.mob-header-left {
	width: auto;
}

/* ============================================
   MOBILE SEARCH BLOCK
   ============================================ */

.mobile-search-menu {
	display: none;
}

/* Search Form Placeholder Styles */
#searchwp-form-1 .swp-flex--row .swp-input--search.swp-input::placeholder {
	color: #707070;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

#searchwp-form-1
	.swp-flex--row
	.swp-input--search.swp-input::-webkit-input-placeholder {
	color: #707070;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

#searchwp-form-1 .swp-flex--row .swp-input--search.swp-input::-moz-placeholder {
	color: #707070;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	opacity: 1; /* Firefox needs this */
}

#searchwp-form-1
	.swp-flex--row
	.swp-input--search.swp-input:-ms-input-placeholder {
	color: #707070;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

#searchwp-form-1 .swp-flex--row .swp-input--search.swp-input:-moz-placeholder {
	color: #707070;
	font-family: var(--Font-Family-Primary, Lato);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	opacity: 1;
}

/* ============================================
   MOBILE SEARCH/MENU TOGGLE BUTTONS
   ============================================ */

.open-mob-search {
	margin: 0 16.5px 0 0;
}

.close-mob-search {
	display: flex;
	justify-content: center;
	align-items: center;
}

.open-mob-search *,
.open-mob-menu *,
.close-mob-menu *,
.close-mob-search * {
	height: auto;
	line-height: 19px;
}

.open-mob-search .elementor-button-icon svg,
.open-mob-menu .elementor-button-icon svg,
.close-mob-menu .elementor-button-icon svg,
.close-mob-search .elementor-button-icon svg {
	width: 19px;
	height: 19px;
}

#toggleSearch {
	display: none;
}

/* ============================================
   MOBILE MENU POPUP
   ============================================ */

.dialog-type-lightbox.mob-menu-popup {
	top: 195px;
}

.dialog-type-lightbox.mob-menu-popup {
	top: 160px !important;
	height: calc(100vh - 128px);
}

.mes-mobile-toggle {
	display: none;
}

.mes-nav-menu li.mes-trigger-click.mes-accordion-open > .mes-sub-menu,
.mes-nav-menu .mes-trigger-click.mes-accordion-open > .mes-sub-menu {
	opacity: 1;
	visibility: visible;
}

/* Mobile Menu Submenu Toggle */
.mob-menu-popup .mes-submenu-toggle {
	width: 40px;
	height: 40px;
	top: 0;
	transform: translateY(0%);
	display: block;
}

.mob-menu-popup .mes-submenu-toggle span {
	display: none;
}

.mob-menu-popup .mes-submenu-toggle:hover {
	background-color: transparent !important;
}

.mob-menu-popup .mes-submenu-toggle:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 9px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M14.2369 1.13361L7.92495 7.86639L1.61296 1.13361' stroke='%23FD7521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	transition: all ease-in-out 0.3s;
}

.mob-menu-popup .mes-submenu-toggle.active:after {
	transform: rotate(180deg);
	transition: all ease-in-out 0.3s;
}

/* ============================================
   MOBILE MENU STRUCTURE
   ============================================ */

#menu-mobile-menu-expansion li {
	position: relative;
	border-top: 1px solid #f0f0f0;
	border-bottom: none;
	background: #ffffff;
}

#menu-mobile-menu-expansion li a {
	padding: 15px 5px 15px 15px;
	color: #000000;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 27px;
	text-transform: uppercase;
	border-bottom: none;
}

#menu-mobile-menu-expansion li a:after,
#menu-mobile-menu-expansion li a .mes-arrow {
	display: none;
}

/* Mobile Menu Submenus */
#menu-mobile-menu-expansion .sub-menu {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	border-left: none;
}

#menu-mobile-menu-expansion .sub-menu li a {
	text-transform: none;
}

/* Level 1 Submenu */
#menu-mobile-menu-expansion.mes-menu .sub-menu-container-1 a {
	color: #000000;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	padding: 10px 45px 10px 25px;
}

#menu-mobile-menu-expansion.mes-menu
	.sub-menu-container-1
	.mes-accordion-open
	> a {
	background: #fff7f2;
}

/* Level 2 Submenu */
#menu-mobile-menu-expansion.mes-menu .sub-menu-container-2 a {
	color: #000000;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	padding: 10px 5px 10px 40px;
}

#menu-mobile-menu-expansion.mes-menu
	.sub-menu-container-2
	.mes-sub-menu
	li:not(.menu-item-has-children)
	> a {
	background: #fff7f2;
}

/* Level 3 Submenu */
#menu-mobile-menu-expansion.mes-menu .sub-menu-container-3 a {
	color: #000000;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	padding: 10px 5px 10px 60px;
}

/* Mobile Menu Button Item */
#menu-mobile-menu-expansion .menu-item.btn {
	border-top: none;
}

#menu-mobile-menu-expansion .menu-item.btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid #000000;
	background: #000000;
	color: var(--White, #fff);
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 27px;
	width: max-content;
	margin: 20px auto 0 auto;
}

/* ============================================
   MEDIA QUERIES
   ============================================ */

@media screen and (max-width: 1024px) {
	.mobile-search-menu-container .elementor-widget-wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 15px;
	}

	.swp-live-ajax-form {
		flex: 1;
	}

	.mobile-search-menu-close {
		width: 40px !important;
		padding-right: 10px;
		padding-left: 10px;
		cursor: pointer;
	}

	.mobile-search-menu.active {
		display: block;
		width: 100%;
		box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5) !important;
	}

	/* Client request: the search bar is solid white (the header template sets rgba(255,255,255,.9), so the page showed through).
	   The extra classes beat the template's own selector (.elementor-23451 .elementor-element.elementor-element-2e699f20:not(...)). */
	body .elementor-location-header .elementor-element.mobile-search-menu.active {
		background-color: #fff;
	}

	.mobile-search-close {
		display: none;
	}

	.mobile-search-close span {
		display: block;
		width: 18px;
		height: 3px;
		background: #333;
		margin: 5px auto;
		transition: all 0.3s ease;
	}

	.mobile-search-close span:nth-child(1) {
		transform: rotate(45deg) translate(9px, 0);
	}

	.mobile-search-close span:nth-child(2) {
		transform: rotate(-45deg) translate(-9px, 0);
	}

	.mobile-search-menu.active .mobile-search-close {
		display: block;
	}

	/* DLS-196: the bar at 1024px and below = logo | magnifier | menu button, as on production. The magnifier (.mobile-search-trigger)
	   opens the separate search bar (.mobile-search-menu, ss-menu-mobile-search-trigger.js); Contact Us is the purple button inside the
	   opened menu (.mobile-cta). DLS-142 had put a Contact Us pill in the bar and the search box inside the menu: that was unintended. */
	.header-search-contact {
		display: none;
	}

	.header-menu .elementor-widget-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.mobile-search-trigger {
		width: 20px;
		height: 20px;
		background-image: var(--supreme-search-icon);
		background-repeat: no-repeat;
		background-size: 20px 20px;
		margin-left: auto;
		background-position: right center;
		cursor: pointer;
	}

	.mobile-search-trigger > div {
		visibility: hidden;
	}

	.elementor-column.mobile-search-trigger .elementor-column,
	.elementor-column.mobile-search-trigger {
		width: 20px !important;
	}
	
	.searchwp-predictive-results {
		width:100%;
	}
}

/* Keep live search results within the viewport on mobile */
@media (max-width: 767px) {
	.searchwp-live-search-results {
		min-width: 0 !important;
		max-width: calc(100vw - 20px) !important;
	}
}
/* QA / DLS-189: leave a gap under the results panel so the CoA button pinned at its bottom is not hidden behind the phone's or
   iPad's bottom browser bar. The coa plugin sizes the panel to 100vh - 160px; there 100vh counts the area under that bar, so use
   svh (the viewport with the bars showing) and 100px more room (160 -> 260). The mobile search bar is used up to 1024px, so this
   covers tablets too. The first line is the fallback for old browsers.
   iPhone: the panel was drawn behind the homepage hero (its autoplaying video and blur layer are composited by Safari ahead of
   plain content), so the panel gets its own composited layer too; the layer order then follows z-index again. */
@media (max-width: 1024px) {
	body .searchwp-live-search-results.searchwp-live-search-results-showing {
		max-height: calc(100vh - 260px);
		max-height: calc(100svh - 260px - env(safe-area-inset-bottom, 0px));
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	/* the "Looking for a CoA?" bar shown when the field is focused before typing is a separate element (supreme-search-coa), not a
	   -showing results panel: same layer promotion */
	body .searchwp-live-search-results.coa-search-cta-fallback.coa-search-cta-fallback-showing {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}