/**
 * Header - shared layout of the new design, ALL pages (DLS-142)
 *
 * The homepage's transparent colours live in ss-header-home.css (body.dls-home-header only). Everything
 * here is geometry/shape that must be the same on every page: container padding, search box size,
 * Contact Us pill, solid-white bar, and the slim top-level chevrons that flip when a menu is open.
 * Values come from the template's header (Homepage.html r61): `.site-header`, `.hdr`, `.navitem`,
 * `.navitem__c`. The mega menu itself (markup, scripts, panels) is not touched.
 */

/* ---- section padding: the template pads the header with 30px top/bottom and --pad at the sides (120px; 72px from 1500px
   down), content capped at 1440px and centred. Desktop only (1025px and up); the mobile header
   (1024px and below) has padding 11px 20px, set in ss-menu-mes-styles.css. Elementor's own section padding (0) needs !important. ---- */
.main-header {
	--dls-pad: 120px;
	--dls-pad-y: 30px;
	--dls-navgap: 12px; /* space between the top-level menu items: 12px from 1501px, 14px 1341-1500, 10px 1310-1340, 6px 1280-1309, 2px 1025-1279 (the template steps 12/14/10; the narrow steps are ours, see below; 1025-1250 is the compact tier) */
}
@media (max-width: 1500px) { .main-header { --dls-pad: 72px; --dls-navgap: 14px; } }

.main-header > .elementor-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---- desktop (the mega menu bar) ---- */
@media (min-width: 1025px) {
	/* no fixed height: the header is 30px + the 42px menu row + 30px (= 102px, as in the template). Elementor's own
	   10px padding around the header widgets is removed so the row is only as tall as its tallest item. */
	.main-header {
		padding: var(--dls-pad-y) max(var(--dls-pad), calc((100% - 1440px) / 2)) !important;
	}
	.main-header .elementor-widget-wrap,
	.main-header .elementor-widget-container { padding-top: 0 !important; padding-bottom: 0 !important; }

	/* logo -> menu: the template's 32px gap (61px from 1501px) measured to the menu item's edge */
	.main-header .elementor-column.header-logo { margin-right: 30px; }

	/* menu items: template padding 10px 5px (6px from 1501px, with 12px between items) instead of 15px. The item itself
	   reaches the full header height (its padding and negative margin cancel out) so hover, the orange bar and the
	   dropdown (top: 100%) line up with the header's bottom edge. */
	.main-header #menu-menu-expansion > li.menu-top-level { height: auto; margin-block: calc(var(--dls-pad-y) * -1); padding-top: var(--dls-pad-y); padding-bottom: calc(var(--dls-pad-y) - 4px); box-sizing: border-box; } /* 4px = the item's bottom border (the orange bar sits in it) */
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper { padding: 10px 5px; height: auto !important; box-sizing: border-box; } /* the label row sets the height (ss-menu-mes-styles.css makes it 100% of the item) */
	.main-header #menu-menu-expansion { column-gap: var(--dls-navgap); } /* the menu is a flex row: items are spaced with gap, not margins */
	/* hover bridge (template .nvi::before): each label owns half the gap on both sides, so the pointer never crosses a dead zone between two items (the open menu would close and reopen) */
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper,
	.main-header #menu-menu-expansion > li.menu-top-level > a { position: relative; }
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper::before,
	.main-header #menu-menu-expansion > li.menu-top-level > a::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--dls-navgap) / -2); right: calc(var(--dls-navgap) / -2); }
	/* DLS-196: no bridge on the OUTER side of the first and last item: there is no neighbour to bridge to, and the overhang over the empty header (between the logo and the first label, between the last label and the search box) opened a dropdown from blank space. The last item is the one before the mobile-only Contact Us li. */
	.main-header #menu-menu-expansion > li.menu-top-level:first-child > .mes-title-wrapper::before,
	.main-header #menu-menu-expansion > li.menu-top-level:first-child > a::before { left: 0; }
	.main-header #menu-menu-expansion > li.menu-top-level:is(:last-child, :has(+ li.mobile-cta)) > .mes-title-wrapper::before,
	.main-header #menu-menu-expansion > li.menu-top-level:is(:last-child, :has(+ li.mobile-cta)) > a::before { right: 0; }

	/* the top-level dropdown starts at the header's bottom edge (the item reaches the full header height); nested panels
	   keep the base position from ss-menu-mes-styles.css */
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-top-level > .sub-menu { top: calc(100% + 4px); } /* 100% is the item without its 4px bottom border */

	/* the search + button group hugs the right edge, and the search box SHRINKS (307px wide, 250px at 1500px and below, 210px at 1340px and below,
	   never below 120px; QA asked for 1341-1500px wider than the template's 210; above 1500px the free room, not this value, sets the width) when the row is tight, instead of pushing the button off screen */
	.main-header .elementor-column.header-search-contact { flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; margin-left: auto; }
	.main-header .header-search-contact > .elementor-widget-wrap,
	.main-header .header-search-contact .elementor-section,
	.main-header .header-search-contact .elementor-container { min-width: 0; }
	/* reference (.hdr__right): 30px between the search field and the Contact Us button (16px up to 1340px); the button column is only as wide as the button */
	.main-header .header-search-contact .elementor-container { gap: 30px; }
	.main-header .header-search-contact .header-button-container { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
	.main-header .header-search-contact .header-button-container .elementor-widget-container { padding-left: 0 !important; }
	.main-header .header-search-col { flex: 0 1 307px !important; width: auto !important; min-width: 120px !important; }
	.main-header .header-search-col .elementor-widget-wrap,
	.main-header .header-search-col .elementor-widget,
	.main-header .header-search-col .elementor-widget-container,
	.main-header .header-search-col .swp-live-ajax-form { min-width: 0; width: 100%; }
	.main-header #searchwp-form-1,
	.main-header #searchwp-form-1 .swp-input--search { width: 100% !important; height: 32.5px !important; }
}
@media (min-width: 1025px) and (max-width: 1500px) {
	.main-header .header-search-col { flex-basis: 250px !important; }
}
@media (min-width: 1025px) and (max-width: 1340px) {
	.main-header .header-search-col { flex-basis: 210px !important; } /* tight row: the nav labels need the room */
}
@media (min-width: 1025px) and (max-width: 1340px) {
	.main-header { --dls-navgap: 2px; } /* the template's 10px does not fit our longer labels (the homepage font is wider): one would wrap and the header grow to 124px */
	.main-header .header-search-contact .elementor-container { gap: 16px; }
}
@media (min-width: 1280px) and (max-width: 1340px) {
	.main-header { --dls-navgap: 6px; }
}
@media (min-width: 1310px) and (max-width: 1340px) {
	.main-header { --dls-navgap: 10px; }
}
/* compact tier, 1025-1250px: the full menu now stays up to here (the hamburger starts at 1024px; Scout docks the page, so the
   container can be this narrow on a wide screen). Smaller side padding, logo, labels and search so the five labels, the search
   box and the right edge fit (checked at 1025, 1100, 1135, 1250). The Contact Us column is hidden by Elementor from 1025 to 1134px
   ("hide on Tablet Extra" in the header template). */
@media (min-width: 1025px) and (max-width: 1250px) {
	.main-header { padding-left: 24px !important; padding-right: 24px !important; }
	.main-header .elementor-column.header-logo { flex: 0 0 140px !important; width: 140px !important; margin-right: 16px; }
	/* !important on purpose: ss-menu-elementor-styles.css pins the logo at 170px !important on desktop, and Elementor's own template
	   only shrinks the image to 140px up to 1134px, so from 1135px the 170px logo overflowed the 140px column into the menu */
	.main-header .header-logo .elementor-widget-container { max-width: 140px !important; }
	.main-header .header-logo img { width: 140px !important; max-width: 140px !important; }
	/* the menu column keeps its full label width (no shrinking): Safari sizes the search + button column larger than Chrome, and with a
	   shrinkable menu column the last label ran under the search box. The search column (min-width: 0, flex-shrink) gives the room up instead. */
	.main-header .header-menu { width: auto !important; flex: 0 0 auto !important; min-width: 0; margin-right: 12px; }
	.main-header .header-search-contact .elementor-container { justify-content: flex-end; } /* Safari: the group sits at the right edge, not left in a wider column */
	.main-header #menu-menu-expansion > li.menu-top-level { width: auto !important; } /* removes the fixed .width-185 */
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper { padding: 10px 8px; }
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper,
	.main-header #menu-menu-expansion > li.menu-top-level > a { font-size: 13px; }
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper .mes-title-text { font-size: 13px; white-space: nowrap; }
	.main-header .header-search-col { flex: 0 1 150px !important; min-width: 120px !important; }
}
@media (min-width: 1501px) {
	.main-header .elementor-column.header-logo { margin-right: 59px; }
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper { padding-left: 6px; padding-right: 6px; }
}

/* top-level labels on one line as in the template, only where the search box leaves room (from 1366px);
   below that the long label wraps as it does today */
@media (min-width: 1366px) {
	.main-header #menu-menu-expansion > li.menu-top-level > .mes-title-wrapper .mes-title-text { white-space: nowrap; }
}

/* ---- top-level chevrons: the template's slim 12px chevron (1px stroke, round ends) instead of the thick
   rotated square; it flips upward while that item's menu is open ---- */
@media (min-width: 1025px) {
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level > .mes-title-wrapper::after,
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level > a::after {
		content: "";
		display: inline-block;
		width: 12px;
		height: 12px;
		margin: 0 0 0 7px;
		border: 0;
		transform: none;
		background-color: var(--dls-hdr-fg, #000);
		-webkit-mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		mask: url("../images/chevron-down.svg") center / 12px 12px no-repeat;
		transition: transform .25s cubic-bezier(.22, .61, .36, 1), background-color .18s cubic-bezier(.22, .61, .36, 1);
	}
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level.mes-hover-active > .mes-title-wrapper::after,
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level.mes-hover-active > a::after,
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level.mes-mega-active > .mes-title-wrapper::after,
	.main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level.mes-mega-active > a::after {
		transform: rotate(180deg);
	}
}

/* ---- the Contact Us button is a pill on every page ---- */
.main-header .header-button-container a.elementor-button {
	border-radius: 9999px !important; /* Elementor's own button radius (5px) outranks this otherwise */
	letter-spacing: normal !important; /* reference: no tracking (the kit adds 0.86px, making the button 8px wider than the template) */
}

/* ---- inner pages: a plain solid white header (the homepage's transparent state is in ss-header-home.css) ---- */
body:not(.dls-home-header) .main-header {
	background-color: rgba(255, 255, 255, .98) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
body:not(.dls-home-header) .main-header .header-button-container a.elementor-button {
	background-color: #32126E;
	color: #fff;
}
body:not(.dls-home-header) .main-header .header-button-container a.elementor-button:hover,
body:not(.dls-home-header) .main-header .header-button-container a.elementor-button:focus-visible {
	background-color: #f45a28;
	color: #fff;
}
body:not(.dls-home-header) .main-header #searchwp-form-1 .swp-input--search {
	border-color: #d1d3d4;
}