/*!
 * nav-menu.css — replacement for Elementor Pro's widget-nav-menu.min.css.
 *
 * Only the rules the mileslandsurveying.com header actually exercises are reproduced:
 * a flat 3-item horizontal menu (no submenus, so no SmartMenus), the underline pointer
 * with the fade animation, the burger toggle, and the full-width dropdown panel.
 *
 * Every value here was measured from the live site on 2026-08-06 with Pro still active
 * (getComputedStyle at 1440 / 768 / 375). Per-element colours, fonts and spacing are NOT
 * here — those come from header-21.css, which is Elementor's own generated output.
 *
 * Loaded only when Elementor Pro is inactive; see functions.php.
 */

/* ---------------------------------------------------------------- list reset */

.elementor-nav-menu,
.elementor-nav-menu li,
.elementor-nav-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-nav-menu a {
	display: flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: 0.4s;
}

/* ------------------------------------------------------------- main (horizontal) */

.elementor-nav-menu--main {
	display: flex;
}

.elementor-nav-menu--main .elementor-nav-menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
}

.elementor-nav-menu--main .elementor-nav-menu > li {
	display: flex;
	position: relative;
}

/*
 * Elementor spreads the "Space Between" value as a half-margin on each INNER side, so the
 * 30px gap is 15px contributed by each neighbour. header-21.css sets
 * --e-nav-menu-horizontal-menu-item-margin: calc( 30px / 2 ). The first item has no leading
 * half-margin and the last no trailing one, so the computed margins run
 * `0 15px 0 0` / `0 15px 0 15px` / `0 0 0 15px` — which is what produces the 259.8px width.
 */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child) > .elementor-item {
	margin-inline-end: var( --e-nav-menu-horizontal-menu-item-margin, 0px );
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > .elementor-item {
	margin-inline-start: var( --e-nav-menu-horizontal-menu-item-margin, 0px );
}

/* ------------------------------------------------------------------ pointer: underline */

/*
 * Only ::after is defined: the widget is set to the "underline" pointer, which draws a single
 * rule along the bottom edge. header-21.css supplies the colour (#324A6D) and the 1px height.
 */
.e--pointer-underline .elementor-item::after {
	content: "";
	display: block;
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	opacity: 0;
	/* Matches the live computed transition on the pseudo-element. */
	transition: 0.3s cubic-bezier( 0.58, 0.3, 0.005, 1 );
}

/* .highlighted is omitted deliberately — it is a SmartMenus class, and SmartMenus is not ported. */
.e--animation-fade .elementor-item:hover::after,
.e--animation-fade .elementor-item:focus::after,
.e--animation-fade .elementor-item.elementor-item-active::after {
	opacity: 1;
}

/* --------------------------------------------------------------------- burger toggle */

.elementor-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	border: 0 solid;
	border-radius: 3px;
	background-color: rgba( 255, 255, 255, 0 );
	cursor: pointer;
	/* Elementor pads the hit area by 25% of the icon size (20px icon -> 5px, 22px -> 5.5px). */
	padding: calc( var( --nav-menu-icon-size, 22px ) * 0.25 );
	font-size: var( --nav-menu-icon-size, 22px );
	-webkit-appearance: none;
	appearance: none;
}

.elementor-menu-toggle svg {
	display: block;
	width: var( --nav-menu-icon-size, 22px );
	height: var( --nav-menu-icon-size, 22px );
	fill: currentColor;
}

.elementor-menu-toggle .elementor-menu-toggle__icon--close,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
	display: none;
}

.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
	display: block;
}

/* ------------------------------------------------------------------ dropdown panel */

.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	/*
	 * Pro stretched this panel with inline JS styles. We do it in CSS instead: the panel is
	 * fixed to the viewport, so it is full-bleed by construction and cannot drift when the
	 * header's own layout changes. --mls-dropdown-top is written by nav-menu.js from the
	 * toggle's live position; --mls-dropdown-inset exists so the panel can be pushed off the
	 * left edge if that is ever wanted (see the runbook's "known deviation" note).
	 *
	 * ORIGINAL GEOMETRY, restored on operator request. Pro's panel started ~32px (tablet) /
	 * ~34px (mobile) in from the left and ran off the right edge, because StretchElement computed
	 * the inline width/left ONCE at init — before the sticky handler repositioned the header — and
	 * never recomputed. Those two numbers are therefore a captured constant, not something
	 * derivable: they are the horizontal shift the static->fixed transition caused at each
	 * breakpoint, measured on the live site 2026-08-06 while Pro was still active.
	 *
	 * Reproducing it needs `width` rather than a right inset, since the panel is WIDER than the
	 * viewport. Consequence to be aware of: 100vw includes the classic scrollbar gutter, so a
	 * desktop window narrowed below 1024px gets a horizontal scrollbar while the menu is open.
	 * That is faithful to what Pro did. To get the corrected full-bleed panel instead, set
	 * --mls-dropdown-inset to 0 and swap `width` for `inset-inline-end: 0` (see the runbook).
	 */
	position: fixed;
	inset-inline-start: var( --mls-dropdown-inset, 0px );
	inset-inline-end: auto;
	width: 100vw;
	top: var( --mls-dropdown-top, 100% );
	/*
	 * Pro's widget default. header-21.css only overrides it at <=767px (15px !important), so
	 * without this the 768-1024px panel sat flush against the toggle instead of 10px below it.
	 * nav-menu.js reads this back to size the scroll box, so it must be a real margin.
	 */
	margin-top: 10px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s;
	z-index: 10000;
}

/*
 * setExpanded() always writes elementor-active and aria-hidden together, so one selector is
 * enough. The attribute form is kept because it survives the toggle ever moving out of
 * adjacent-sibling position. 1000vmax is Pro's fixed max-height — the finite value is what
 * lets the open/close transition animate at all.
 */
.elementor-nav-menu__container.elementor-nav-menu--dropdown[aria-hidden="false"] {
	max-height: var( --menu-height, 1000vmax );
	overflow-y: auto;
}

.elementor-nav-menu--dropdown .elementor-nav-menu {
	display: block;
	position: relative;
}

.elementor-nav-menu--dropdown .elementor-nav-menu > li {
	display: block;
}

.elementor-nav-menu--dropdown a.elementor-item {
	display: block;
	/*
	 * header-21.css only overrides the vertical padding (and only under 767px), so the 20px
	 * horizontal padding is Pro's widget default and has to live here.
	 */
	padding: 10px 20px;
	white-space: normal;
}

/* ------------------------------------------------------------------- breakpoints */

/*
 * The widget is configured "Breakpoint: Tablet", which Elementor renders as
 * .elementor-nav-menu--dropdown-tablet: the inline menu is swapped for the burger at 1024px.
 */
@media ( max-width: 1024px ) {
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}

	.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}
}

/*
 * The captured original insets. Two values because the shift differed per breakpoint; both were
 * measured from the live site with Pro active (tablet panel at x=32.46, mobile at x=33.95).
 */
@media ( max-width: 1024px ) {
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		--mls-dropdown-inset: 32.456px;
	}
}

@media ( max-width: 767px ) {
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		--mls-dropdown-inset: 33.953px;
	}
}

@media ( min-width: 1025px ) {
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		display: none;
	}
}