/*
 * "Serving Locations" mega menu.
 *
 * The panel is still the menu's own <ul class="sub-menu">, so SmartMenus keeps
 * showing and hiding it exactly as before; everything here is layout.
 *
 * Two things have to be fought for, both from Elementor's SmartMenus init
 * (`{subIndicators:false, subMenusMaxWidth:"1000px"}`), which writes inline
 * styles a stylesheet only beats with !important:
 *
 *   max-width   SmartMenus applies its 1000px cap inline; the panel is wider.
 *   left/margin keepInViewport is on by default and shifts a submenu that would
 *               overflow the viewport — which a full-width panel always would.
 *
 * Horizontal placement is written by mega-menu.js, which measures the header's
 * content box. The literals below are the no-JS fallback and are correct for the
 * current header composition from 1200px up.
 *
 * They are literals, not custom properties, deliberately: Chromium resolves
 * `left: var(--x) !important` on this element to 0 even though the variable
 * itself reads back correctly and the same literal value positions it exactly.
 * `right` was unaffected, which made it look like a specificity problem rather
 * than a substitution one. Not worth chasing — the value has one writer.
 */

.elementor-nav-menu--main .ddm-mega-menu {
	--ddm-mm-panel: #ffffff;
	--ddm-mm-orange: #ee6e20;
	--ddm-mm-ink: #14171a;
	--ddm-mm-body: #5b666d;
	--ddm-mm-rule: #e7eaec;
	--ddm-mm-foot: #f4f5f6;
	--ddm-mm-gap: 22px;

	position: absolute !important;
	top: 100% !important;
	left: -290px !important;
	right: -296px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: var(--ddm-mm-gap) 0 0 !important;
	padding: 0 !important;

	/* Hidden until the item is hovered or focused — see the rule below. An
	   unconditional `display: grid !important` here beat SmartMenus' own
	   hiding and left the panel open on every page load. */
	display: none;
	grid-template-columns: minmax(260px, 27%) repeat(4, minmax(0, 1fr));
	/* Row 1 takes the slack: the aside is normally the tallest cell, and with
	   `auto auto` the leftover height fell to the footer strip and left a band
	   of empty grey under the phone number. */
	grid-template-rows: 1fr auto;
	align-items: stretch;

	background: var(--ddm-mm-panel);
	border: 1px solid var(--ddm-mm-rule);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
	overflow: hidden;
	list-style: none;
	z-index: 200;
}

/*
 * Open state. Three routes, because three things can open this menu:
 *
 *   :hover         the pointer, which is the normal case
 *   :focus-within  a keyboard user tabbing into the trigger or the panel
 *   aria-expanded  SmartMenus, which opens on tap and on Enter and marks
 *                  the trigger — without this the panel would open as a
 *                  plain block and lose the grid
 *
 * !important is needed against SmartMenus' inline display, but only here,
 * in the open state, so the closed state stays under its control.
 */
.elementor-nav-menu--main .ddm-mega-menu-item:hover > .ddm-mega-menu,
.elementor-nav-menu--main .ddm-mega-menu-item:focus-within > .ddm-mega-menu,
.elementor-nav-menu--main .ddm-mega-menu-item > a[aria-expanded="true"] + .ddm-mega-menu {
	display: grid !important;
}

/*
 * The menu item stops being the containing block so the panel can resolve
 * against the nav widget wrapper, which Elementor already positions.
 */
.elementor-nav-menu--main .ddm-mega-menu-item {
	position: static;
	--ddm-mm-gap: 22px;
}

/*
 * Hover bridge.
 *
 * The panel sits 22px below the menu bar, and the pointer has to cross that
 * dead space to reach it. Padding on the item extends its hover area down
 * through the gap; the negative margin gives the space back so the menu bar
 * keeps its height and the underline pointer stays put.
 *
 * It has to be here rather than on the panel: a pseudo-element inside the
 * panel cannot catch the pointer, because the panel is display:none until
 * something has already hovered the item. Nor on the <a> — Elementor's
 * underline pointer already owns both of its pseudo-elements.
 */
.elementor-nav-menu--main .ddm-mega-menu-item {
	padding-bottom: var(--ddm-mm-gap, 22px);
	margin-bottom: calc(var(--ddm-mm-gap, 22px) * -1);
}

/* Elementor styles sub-menu items; none of that applies inside the panel. */
.elementor-nav-menu--main .ddm-mega-menu > li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	width: auto;
}

.elementor-nav-menu--main .ddm-mega-menu > li > a {
	background: none;
	border: 0;
	padding: 0;
	white-space: normal;
}

/* ------------------------------------------------------------------ aside -- */

.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__aside {
	grid-column: 1;
	grid-row: 1 / -1;
	border-right: 1px solid var(--ddm-mm-rule);
}

.ddm-mm__aside-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 28px;
	height: 100%;
}

.ddm-mm__heading {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ddm-mm-ink);
	letter-spacing: -0.01em;
}

/* The short rule under the heading. */
.ddm-mm__heading::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 14px;
	background: var(--ddm-mm-orange);
	border-radius: 2px;
}

.ddm-mm__intro {
	margin: 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--ddm-mm-body);
}

.ddm-mm__map {
	display: block;
	width: 100%;
	height: auto;
	max-height: 196px;
	margin-top: 6px;
	align-self: center;
	object-fit: contain;
}

/* ---------------------------------------------------------------- regions -- */

.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__region {
	grid-row: 1;
	border-left: 1px solid var(--ddm-mm-rule);
}

.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__region:first-of-type {
	border-left: 0;
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 30px 20px 28px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.18s ease;
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card:hover,
.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card:focus-visible {
	background: #fdf6f1;
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card:focus-visible {
	outline: 2px solid var(--ddm-mm-orange);
	outline-offset: -3px;
}

.ddm-mm__card-icon {
	display: block;
	color: var(--ddm-mm-orange);
	line-height: 0;
	margin-bottom: 4px;
}

.ddm-mm__card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ddm-mm-ink);
}

.ddm-mm__card-text {
	font-size: 13.5px;
	line-height: 1.58;
	color: var(--ddm-mm-body);
}

/* Pushed to the bottom so the buttons line up however long the blurbs are. */
.ddm-mm__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 9px 16px;
	border: 1px solid var(--ddm-mm-orange);
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ddm-mm-orange);
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card:hover .ddm-mm__card-cta,
.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__card:focus-visible .ddm-mm__card-cta {
	background: var(--ddm-mm-orange);
	color: #ffffff;
}

/* ------------------------------------------------------------------- foot -- */

.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__foot {
	grid-column: 2 / -1;
	grid-row: 2;
	background: var(--ddm-mm-foot);
	border-top: 1px solid var(--ddm-mm-rule);
}

.ddm-mm__foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 26px;
	padding: 18px 26px;
}

.ddm-mm__prompt {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ddm-mm__prompt-icon,
.ddm-mm__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fbe4d4;
	color: var(--ddm-mm-orange);
}

.ddm-mm__prompt-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.45;
	min-width: 0;
}

.ddm-mm__prompt-copy strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--ddm-mm-ink);
}

.ddm-mm__prompt-copy span {
	font-size: 13.5px;
	color: var(--ddm-mm-body);
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__phone {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding-left: 26px;
	border-left: 1px solid #dcdfe1;
	text-decoration: none;
	color: var(--ddm-mm-ink);
}

.ddm-mm__phone-number {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__phone:hover .ddm-mm__phone-number,
.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__phone:focus-visible .ddm-mm__phone-number {
	color: var(--ddm-mm-orange);
}

.elementor-nav-menu--main .ddm-mega-menu a.ddm-mm__phone:focus-visible {
	outline: 2px solid var(--ddm-mm-orange);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ narrow desk -- */

/*
 * Elementor hands over to the burger at 1024px, so the panel only ever renders
 * from 1025px up. Between there and ~1180px the four columns get too tight, so
 * the regions wrap to two rows and the aside sits above them.
 */
@media (max-width: 1180px) {
	.elementor-nav-menu--main .ddm-mega-menu {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Below 1200px the header container tracks the viewport, so the fixed
	   fallback offsets stop being right. mega-menu.js measures and corrects
	   them, then marks the panel; this guard is only for a page where the
	   script did not run, and is scoped so it cannot over-constrain the box
	   once it has. */
	.elementor-nav-menu--main .ddm-mega-menu:not(.ddm-mega-menu--aligned) {
		max-width: calc(100vw - 32px) !important;
	}

	.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__aside {
		grid-column: 1 / -1;
		grid-row: auto;
		border-right: 0;
		border-bottom: 1px solid var(--ddm-mm-rule);
	}

	.ddm-mm__aside-inner {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 20px 24px;
	}

	.ddm-mm__heading {
		flex: 0 0 30%;
	}

	.ddm-mm__heading::after {
		margin-top: 10px;
	}

	.ddm-mm__map {
		flex: 0 0 180px;
		width: 180px;
		max-height: 120px;
		margin-top: 0;
	}

	.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__region {
		grid-row: auto;
	}

	.elementor-nav-menu--main .ddm-mega-menu > .ddm-mm__foot {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-nav-menu--main .ddm-mega-menu * {
		transition: none !important;
	}
}