/* Marty's Header Scroll — solidify + invert + shrink the transparent hero header on scroll.
   Values come from Customizer (emitted as :root vars by the plugin). */
:root {
	--mhs-bg: #ffffff;
	--mhs-text: #2A656B;
	--mhs-text-hover: #1a1a1a;
	--mhs-shrink: 1; /* 1 = shrink enabled, 0 = disabled (set inline when off) */
}

/* Smooth the transition regardless of scroll state. */
.mhs-header {
	transition: background-color .28s ease, box-shadow .28s ease, padding .28s ease;
	will-change: background-color, padding;
}
.mhs-header .elementor-widget-image img,
.mhs-header .elementor-nav-menu .elementor-item {
	transition: all .28s ease;
}

/* ---- Scrolled state ---- */
.mhs-header.mhs-on {
	background-color: var(--mhs-bg) !important;
	background-image: none !important; /* drop the hero photo so bg is truly solid */
	box-shadow: 0 2px 14px rgba(0,0,0,.10);
}
/* Elementor sometimes paints the header photo on a ::before overlay — hide it too. */
.mhs-header.mhs-on::before,
.mhs-header.mhs-on > .elementor-background-overlay,
.mhs-header.mhs-on .elementor-background-overlay {
	opacity: 0 !important;
	background-image: none !important;
}

/* The header's inner boxed container (7944dd63) carries a translucent dark overlay
   (#00000045) that tints the solid white gray on scroll — clear just that one so the
   background reads pure white, without touching the Order Online button's container. */
.mhs-header.mhs-on .elementor-element-7944dd63,
.mhs-header.mhs-on > .elementor-element > .e-con-boxed {
	background-color: transparent !important;
}

/* Mobile hamburger toggle: it's an SVG using currentColor — invert to brand color. */
.mhs-header.mhs-on .elementor-menu-toggle,
.mhs-header.mhs-on .elementor-menu-toggle svg,
.mhs-header.mhs-on .elementor-menu-toggle i {
	color: var(--mhs-text) !important;
	fill: var(--mhs-text) !important;
}
.mhs-header.mhs-on .elementor-menu-toggle svg path { fill: var(--mhs-text) !important; }

/* The theme sets the burger icon fill to white via a high-specificity scoped rule
   (.elementor-20 … .elementor-icon svg { fill:#fff }). Override it on scroll. */
.mhs-header.mhs-on .elementor-icon svg,
.mhs-header.mhs-on .elementor-icon svg path,
body.mhs-scrolled .elementor-location-header .elementor-menu-toggle svg,
body.mhs-scrolled .elementor-location-header .elementor-menu-toggle svg path,
body.mhs-scrolled .elementor-location-header .elementor-icon svg {
	fill: var(--mhs-text) !important;
	color: var(--mhs-text) !important;
}

/* Invert nav + link text to the brand color (was white over the hero photo). */
.mhs-header.mhs-on .elementor-nav-menu .elementor-item,
.mhs-header.mhs-on .elementor-nav-menu a,
.mhs-header.mhs-on a,
.mhs-header.mhs-on .elementor-heading-title {
	color: var(--mhs-text) !important;
}
.mhs-header.mhs-on .elementor-nav-menu .elementor-item:hover,
.mhs-header.mhs-on .elementor-nav-menu a:hover,
.mhs-header.mhs-on .elementor-item.elementor-item-active {
	color: var(--mhs-text-hover) !important;
}
/* Nav underline / current-item marker to brand color too. */
.mhs-header.mhs-on .elementor-nav-menu .elementor-item::after,
.mhs-header.mhs-on .elementor-nav-menu .elementor-item::before {
	background-color: var(--mhs-text) !important;
	border-color: var(--mhs-text) !important;
}

/* "Order Online" outlined button: solid brand fill on scroll for contrast. */
.mhs-header.mhs-on .elementor-button,
.mhs-header.mhs-on .elementor-button-wrapper a {
	background-color: var(--mhs-text) !important;
	border-color: var(--mhs-text) !important;
	color: #fff !important;
}

/* ---- Shrink (padding + logo) — gated by --mhs-shrink ---- */
.mhs-header.mhs-on {
	padding-top: calc(var(--mhs-shrink) * 0px + (1 - var(--mhs-shrink)) * 0px);
}
/* Reduce the header's vertical padding when shrink is on. Elementor sets padding on
   the inner e-con; we compress it. */
.mhs-header.mhs-on.e-parent,
.mhs-header.mhs-on .e-con-inner {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
/* Shrink the logo image ~28%. */
.mhs-header.mhs-on .elementor-widget-image img {
	max-height: 68px !important;
	width: auto !important;
}

/* When shrink disabled via inline --mhs-shrink:0, restore padding/logo. */
.mhs-header.mhs-on[style*="--mhs-shrink:0"] .e-con-inner,
.mhs-header.mhs-on[style*="--mhs-shrink:0"].e-parent { padding-top: revert !important; padding-bottom: revert !important; }
.mhs-header.mhs-on[style*="--mhs-shrink:0"] .elementor-widget-image img { max-height: none !important; }