/*
 * Divi header lookalike (spec 2026-10-16, sections 1 and 3).
 * Breakpoint: desktop at 981px and above, hamburger at 980px and below.
 */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--mh-orange: #ED8800;
	--mh-accent: #EDB059;
	--mh-text: rgba(0, 0, 0, 0.6);
	--mh-body: #666666;
	--mh-white: #ffffff;
	--mh-header-top: 80px;
	--mh-header-shrunk: 54px;
	--mh-topbar: 31px;
	--mh-offset: 111px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	#main-header,
	#logo,
	#top-menu > li > .mh-parent-toggle,
	#top-menu .sub-menu {
		transition: none !important;
	}
}

body.mh-chrome-active {
	margin: 0;
	background: var(--mh-white);
	color: var(--mh-body);
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}

body.mh-chrome-active #page {
	overflow: visible;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus,
.screen-reader-text:focus {
	background: #fff;
	clip: auto !important;
	clip-path: none;
	color: #111;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 8px 12px;
	position: absolute;
	top: 8px;
	width: auto;
	z-index: 100001;
}

/* Chrome stack. In flow on small screens so it scrolls away. Fixed on desktop. */
#mh-chrome,
#mh-chrome *,
#mh-chrome *::before,
#mh-chrome *::after {
	box-sizing: border-box;
}

#mh-chrome {
	position: relative;
	height: var(--mh-offset);
	z-index: 99999;
}

.mh-container {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	height: 100%;
}

#top-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--mh-topbar);
	background: var(--mh-orange);
	color: var(--mh-white);
	z-index: 100000;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
}

#top-header .mh-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 31px;
}

#et-info {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 12px;
}

#et-info-phone,
#et-info-email-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--mh-white);
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
	line-height: 12px;
}

#et-info-phone {
	position: relative;
	margin: 0 13px 0 0;
}

#et-info a {
	color: var(--mh-white);
	text-decoration: none;
}

#et-info svg {
	display: block;
	flex: 0 0 auto;
}

.et-social-icons {
	display: none;
	list-style: none;
	margin: 0 0 0 16px;
	padding: 0;
	gap: 16px;
	align-items: center;
}

.et-social-icons a.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: var(--mh-white);
	text-decoration: none;
}

#main-header {
	position: absolute;
	top: var(--mh-topbar);
	left: 0;
	right: 0;
	height: var(--mh-header-top);
	background: var(--mh-white);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	z-index: 99999;
	transition: height 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

#main-header .mh-container {
	display: flex;
	align-items: center;
	height: 100%;
}

.logo_container {
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.logo_container a {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	max-width: 50%;
	margin-left: 4px;
	pointer-events: auto;
}

#logo {
	display: block;
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 43.1875px;
	border: 0;
	transition: height 0.4s ease-in-out, max-height 0.4s ease-in-out;
}

.mh-tools {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 14px;
	height: 100%;
	position: static;
}

#top-menu-nav {
	display: none;
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	background: var(--mh-white);
	border-top: 3px solid var(--mh-accent);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 5%;
	z-index: 9999;
}

body.mh-mobile-open #top-menu-nav {
	display: block;
}

#top-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#top-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 10px;
}

#main-header button.mh-parent-toggle,
#main-header button.mh-search-toggle,
#main-header button.mh-hamburger,
#main-header button.mh-search-close {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	cursor: pointer;
	font-family: "Open Sans", sans-serif;
	text-transform: none;
	letter-spacing: normal;
}

#top-menu > li > .mh-parent-toggle {
	display: block;
	width: 100%;
	text-align: left;
	color: var(--mh-text);
	background: rgba(0, 0, 0, 0.03);
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	padding: 10px 5%;
	min-height: 44px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

#top-menu .sub-menu a {
	display: block;
	color: var(--mh-text);
	text-decoration: none;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	padding: 10px 5%;
	min-height: 44px;
	background: transparent;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

#top-menu > li.current-menu-ancestor > .mh-parent-toggle,
#top-menu > li.current-menu-parent > .mh-parent-toggle,
#top-menu .current-menu-item > a,
#top-menu .current-menu-ancestor > a {
	color: var(--mh-orange);
}

.mh-caret {
	display: none;
}

.mh-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, 0.6);
	padding: 0;
	width: 28px;
	height: 32px;
}

#main-header button.mh-hamburger,
#main-header button.mh-hamburger[aria-expanded="true"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mh-accent);
	background: transparent;
	width: 32px;
	height: 32px;
	padding: 0;
}

.mh-hamburger .mh-icon-close {
	display: none;
}

.mh-hamburger[aria-expanded="true"] .mh-icon-open {
	display: none;
}

.mh-hamburger[aria-expanded="true"] .mh-icon-close {
	display: block;
}

.mh-search-outer {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	align-items: center;
	gap: 8px;
	background: var(--mh-white);
	z-index: 6;
	padding-left: 46%;
}

.mh-search-outer[hidden] {
	display: none !important;
}

body.mh-search-open .mh-search-outer {
	display: flex;
}

body.mh-search-open #top-menu-nav,
body.mh-search-open .mh-hamburger {
	visibility: hidden;
}

.mh-search-form {
	flex: 1 1 auto;
	margin: 0;
}

.mh-search-field {
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	background: transparent;
	color: var(--mh-body);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	padding: 6px 4px;
	border-radius: 0;
	box-shadow: none;
}

.mh-search-close {
	color: #666666;
	font-size: 28px;
	line-height: 1;
	padding: 0 4px;
	width: 32px;
}

#main-header button:focus-visible,
#top-menu a:focus-visible,
#et-info a:focus-visible,
.logo_container a:focus-visible {
	outline: 2px solid var(--mh-orange);
	outline-offset: 2px;
}

/* Desktop. */
@media (min-width: 981px) {
	#mh-chrome {
		height: 0;
	}

	#top-header {
		position: fixed;
		top: 0;
	}

	#top-header .mh-container {
		justify-content: flex-start;
	}

	.et-social-icons {
		display: flex;
	}

	#main-header {
		position: fixed;
		top: 31px;
	}

	body.mh-shrunk #main-header {
		height: var(--mh-header-shrunk);
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
	}

	#content.site-content {
		padding-top: var(--mh-offset);
	}

	.mh-container {
		display: block;
	}

	#main-header .mh-container {
		display: block;
	}

	.logo_container {
		width: auto;
		height: 100%;
	}

	.logo_container a {
		max-width: none;
	}

	#logo {
		max-width: none;
		height: 43.1875px;
		width: auto;
		max-height: none;
	}

	body.mh-shrunk #logo {
		height: 29.1562px;
	}

	.mh-tools {
		position: static;
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
		height: 100%;
		margin-left: 0;
		gap: 0;
	}

	#top-menu-nav {
		display: block;
		position: static;
		width: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		z-index: auto;
	}

	body.mh-mobile-open #top-menu-nav {
		display: block;
	}

	#top-menu {
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
		height: 100%;
	}

	#top-menu > li {
		position: relative;
		display: flex;
		align-items: flex-end;
		height: 100%;
		padding: 0 22px 0 0;
	}

	#top-menu > li > .mh-parent-toggle {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		width: auto;
		min-height: 0;
		text-align: left;
		background: transparent;
		border: 0;
		color: var(--mh-text);
		font-size: 14px;
		font-weight: 600;
		line-height: 14px;
		padding: 0 20px 33px 0;
		white-space: nowrap;
		transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, padding-bottom 0.4s ease-in-out;
	}

	body.mh-shrunk #top-menu > li > .mh-parent-toggle {
		padding-bottom: 20px;
	}

	#top-menu > li > .mh-parent-toggle:hover,
	#top-menu > li.is-open > .mh-parent-toggle {
		opacity: 0.7;
	}

	.mh-caret {
		display: block;
		position: absolute;
		right: 2px;
		top: 4px;
	}

	#top-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 240px;
		padding: 20px 0;
		margin: 0;
		background: var(--mh-white);
		border-top: 3px solid var(--mh-accent);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	#top-menu > li.is-open > .sub-menu,
	#top-menu > li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#top-menu > li.mh-force-shut > .sub-menu,
	#top-menu > li.mh-force-shut:hover > .sub-menu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/*
	 * Spec lists width 200px and padding 6px 20px. On the live header the 200px
	 * box itself sits 20px in from the 240px panel, so the label starts about 40px
	 * from the panel edge. Padding 40px on a full-width row matches that inset.
	 */
	#top-menu .sub-menu a {
		box-sizing: border-box;
		width: 100%;
		padding: 6px 40px;
		min-height: 0;
		line-height: 28px;
		font-weight: 600;
		font-size: 14px;
		background: transparent;
		border: 0;
	}

	#top-menu .sub-menu a:hover {
		opacity: 0.7;
		background: rgba(0, 0, 0, 0.03);
	}

	.mh-search-toggle {
		align-self: center;
		color: #666666;
		margin-left: 2px;
		width: 22px;
		height: 22px;
	}

	#main-header button.mh-hamburger {
		display: none;
	}

	.mh-search-outer {
		left: 300px;
		padding-left: 0;
	}
}

/*
 * Divi custom CSS that used to live in et-core-unified.
 * The original rule gave #main-content 10% side padding (5% under 981px).
 * The live full-bleed GreenShift / mhm styles zero that padding so heroes sit edge to edge.
 * Both are kept: the original is recorded, then the live override wins.
 * Re-check on staging that each page still has exactly one visible H1. Page content supplies it.
 * h1[data-depth="0"] hid an auto-output heading on some Divi templates.
 */
#main-content {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 10%;
	padding-right: 10%;
}

@media (max-width: 980px) {
	#main-content {
		padding-left: 5%;
		padding-right: 5%;
	}
}

body.mh-chrome-active #main-content,
body.mh-chrome-active #main-content > .container,
body.mh-chrome-active #et-main-area,
body.mh-chrome-active #content-area,
body.mh-chrome-active #left-area,
body.mh-chrome-active .entry-content,
body.mh-chrome-active .ast-container,
body.mh-chrome-active .site-content > .ast-container {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
}

h1[data-depth="0"] {
	display: none !important;
}

/*
 * Astra's default footer is not printed (astra_footer callbacks are removed).
 * If a plugin still emits it, hide that chrome only. Never hide .mhm-foot.
 */
body.mh-chrome-active #colophon,
body.mh-chrome-active .site-footer,
body.mh-chrome-active footer.site-footer,
body.mh-chrome-active .ast-small-footer,
body.mh-chrome-active .ast-footer-overlay,
body.mh-chrome-active .ast-footer-copyright {
	display: none !important;
}

body.mh-chrome-active footer.mhm-foot {
	display: block !important;
}
