/**
 * Divi / Customizer / DIPI conflict overrides.
 *
 * global.css stays the design system (mirrors the demo). This sheet only
 * forces those base canvas + element defaults through late WP CSS that would
 * otherwise win — especially:
 *   - body.et_cover_background cream stripe gradient (!important, Customizer)
 *   - #main-content { background: white } (DIPI revealing footer)
 *   - Divi h1–h6 padding-bottom / font-weight defaults
 *
 * Printed last via wp_enqueue_scripts:PHP_INT_MAX (see assets.php) — Divi
 * re-enqueues its own theme stylesheet at priority 99999998, so we must run
 * after that to actually win the cascade.
 */

/* ── Canvas ────────────────────────────────────────────────────────── */

html {
	background: var(--black) !important;
	color: var(--white) !important;
}

html body,
html body.et_cover_background,
html body.et_divi_theme {
	font-family: var(--font) !important;
	font-size: 14px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	color: var(--white) !important;
	background-color: var(--black) !important;
	background-image: none !important;
	background-size: auto !important;
	background-repeat: repeat !important;
	background-attachment: scroll !important;
	/* clip (not hidden) so position:sticky keeps working */
	overflow-x: clip;
}

/* ── Shells painted white by Divi / DIPI ───────────────────────────── */

html body #page-container,
html body #et-boc,
html body #et-main-area {
	background-color: transparent !important;
	background-image: none !important;
	color: inherit;
}

/*
 * #main-content doubles as DIPI's "revealing footer" cover layer
 * (.dipi_revealing_footer_content): the footer is `position: fixed` behind
 * it and is only meant to peek out once the page has scrolled past the
 * content. It must stay OPAQUE — making it transparent lets the fixed
 * footer bleed through every section on the page.
 */
html body #main-content,
html body.et_pb_pagebuilder_layout #et-main-area #main-content,
html body .dipi_revealing_footer_content {
	background-color: var(--black) !important;
	background-image: none !important;
	color: inherit;
}

/* ── Element defaults Divi + Customizer re-apply ───────────────────── */

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	color: var(--white);
	padding-bottom: 0;
	font-weight: 400;
	font-family: inherit;
}

html body p {
	padding-bottom: 0;
	color: inherit;
}

html body a {
	color: inherit;
	text-decoration: none;
}

html body ul,
html body ol {
	list-style: none;
}

html body img {
	border: 0;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

html body *,
html body *::before,
html body *::after {
	box-sizing: border-box;
}

/*
 * Divi Pixel's Menu CTA Button feature ("Contact Us") is styled by an
 * option-driven inline <style id="cta-button-styles"> block, not by the
 * Divi Builder module's own font setting. Its "Default Theme Font" choice
 * is bugged — it emits font-family: 'none', sans-serif (a literal invalid
 * value) instead of actually inheriting the theme font, so the button
 * renders in plain browser sans-serif no matter what you pick in
 * Divi Pixel → Theme Customizer → Menu → CTA Button. Force it here instead.
 */
html body a.dipi-cta-button {
	font-family: var(--font) !important;
}

/* ── Site header / nav ─────────────────────────────────────────────── */

/*
 * Every `.section` in global.css closes with a hairline border-bottom; the
 * header never got one, so on inner pages (solid black, no hero canvas
 * behind it) it just blends into the page below with no seam at all. Add
 * the same hairline, plus the logo marquee's "transparent + backdrop-blur"
 * treatment (no background tint — it reads as a frosted black bar purely
 * because the page behind it is already black). `.et_pb_sticky` is Divi's
 * "stuck to top on scroll" state; it ships its own opaque slate-gray fill
 * (#333F48) which we clear so the blur stays consistent whether or not
 * the header has scrolled into its pinned state.
 */
html body header.et-l--header .et_pb_section_0_tb_header.et_pb_section {
	border-bottom: var(--hairline) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
}

html body .et_pb_sticky .et_pb_section_0_tb_header.et_pb_section {
	background-color: transparent !important;
}

/*
 * The Theme Builder header row uses Divi's own row width (max-width: 80%,
 * no gutter padding), which doesn't line up with the .wrap grid the rest
 * of the page uses (max-width: var(--wrap), padding: 0 var(--gutter)).
 * Force it to the same box so the logo/menu align with the hero copy
 * below it instead of sitting ~78px further in from each edge.
 */
html body header.et-l--header .et_pb_row_0_tb_header {
	width: 100% !important;
	max-width: var(--wrap) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 20px var(--gutter) !important;
}

/* Below 980px the hamburger menu replaces the full nav — trim the header's
   vertical padding to match its more compact, icon-only content. */
@media (max-width: 980px) {
	html body header.et-l--header .et_pb_row_0_tb_header {
		padding: 8px var(--gutter) !important;
	}
}

/*
 * Divi Pixel forces the header's outer wrapper to a real, in-flow 80px bar
 * below 900px, rather than the zero-height, absolutely-positioned overlay
 * every other breakpoint gets — that reserved box is empty space, not the
 * header's own background, so it read as a slab of flat black beneath the
 * row. Zero it out so the header overlays page content here too, matching
 * desktop (the row/section inside is already position: absolute, so it
 * keeps rendering at its own ~57px visual height regardless of this).
 */
@media (max-width: 900px) {
	html body header.et-l--header {
		height: 0px !important;
	}
}

/* Logo module ships at 250×173 (native); shrink to match the nav's scale. */
html body .et_pb_row_0_tb_header > div:first-child img {
	height: 46px !important;
	width: auto !important;
	max-height: none !important;
}

/* Keep the logo at its smaller, original size once the hamburger menu
   takes over — 46px reads too large next to the compact mobile bar. */
@media (max-width: 980px) {
	html body .et_pb_row_0_tb_header > div:first-child img {
		height: 36px !important;
	}
}

/*
 * Menu links: Divi's defaults (18px, weight 400, no letter-spacing, and
 * padding used only to reserve room for the underline animation) don't
 * match the rest of the site's type scale. Restyle as the same hover-pill
 * treatment global.css uses elsewhere.
 */
html body #menu-header-menu > li:not(.dipi-cta-button-menu-item) {
	padding: 0 !important;
}

html body #menu-header-menu > li:not(.dipi-cta-button-menu-item) > a {
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: var(--track-meta) !important;
	text-transform: uppercase !important;
	color: var(--white) !important;
	padding: 10px 14px !important;
	border-radius: var(--radius-card) !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	transition:
		color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body #menu-header-menu > li:not(.dipi-cta-button-menu-item) > a:hover {
	color: var(--teal) !important;
	background: color-mix(in srgb, var(--near-black) 70%, transparent) !important;
	border-color: color-mix(in srgb, var(--teal-hover) 20%, var(--white--15)) !important;
}

/* Divi's dropdown chevron (ETmodules icon font, ::after content) is
   absolutely positioned at top:0 against the link box, which no longer
   centers now that the link has real padding — pin it to the vertical
   middle instead. */
html body #menu-header-menu > li.menu-item-has-children > a::after {
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--white--50) !important;
	font-size: 11px !important;
	margin-left: 6px !important;
}

/*
 * The "Contact Us" CTA button is styled by SEVERAL Divi/DIPI generated
 * inline <style> blocks (#cta-button-styles, plus per-property rules like
 * `.et_pb_menu_0_tb_header.et_pb_menu ul li a { color: #fff !important }`),
 * each with an id (#et-boc) and up to 5 classes in their selector chain —
 * higher specificity than a plain `.dipi-cta-button` rule, so individual
 * properties kept winning even with !important, rule by rule. Rather than
 * chase each one, repeat the class to push specificity above all of them
 * at once (id:1, class:8 beats every competing rule's id:1, class:≤5).
 */
#et-boc a.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button {
	padding: 10px 24px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	color: var(--white) !important;
	background-color: transparent !important;
	border-width: 1px !important;
	border-color: var(--white--50) !important;
	border-radius: var(--r-pill) !important;
}

#et-boc a.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button.dipi-cta-button:hover {
	color: var(--teal) !important;
	background-color: color-mix(in srgb, var(--near-black) 70%, transparent) !important;
	border-color: color-mix(in srgb, var(--teal-hover) 20%, var(--white--15)) !important;
}

/* ── Site header / nav — mobile (<900px) ───────────────────────────── */

/*
 * Divi Pixel's hamburger toggle (`.dipi_hamburger`) ships as a solid
 * slate-gray circle (#2C3D48) with no hover state — restyle it to the same
 * outline-pill treatment as the desktop nav links / CTA button so it reads
 * as part of this design system instead of a bolted-on plugin default.
 * `html body` is needed to clear DIPI's own `.dipi_hamburger.hamburger`
 * (class:2) rule, which is !important but lower specificity.
 */
html body .dipi_hamburger.hamburger {
	background-color: transparent !important;
	border: 1px solid var(--white--50) !important;
	border-radius: 100px !important;
	transition:
		border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body .dipi_hamburger.hamburger:hover {
	border-color: color-mix(in srgb, var(--teal-hover) 20%, var(--white--15)) !important;
	background: color-mix(in srgb, var(--near-black) 70%, transparent) !important;
}

/* Open state: swap the border to teal instead of DIPI's flat slate fill. */
html body .dipi_hamburger.hamburger.is-active {
	background-color: transparent !important;
	border-color: var(--teal) !important;
}

/*
 * Mobile nav dropdown (Divi's `.et_mobile_menu`, opened by the hamburger
 * above). Previously this shrank to its content and stopped partway down
 * the screen — a hard edge with hero content (and its dot canvas) exposed
 * underneath, edge-to-edge with no horizontal breathing room, and DIPI's
 * flat slate-gray panel (#333F48) instead of the site's card surface.
 * Commit fully instead: a fixed, full-screen panel anchored below the
 * mobile header (reserved to a 57px bar just above — see that rule's note
 * on the `height: 57px` override), using the same card wash as everywhere
 * else and consistent padding on every side.
 *
 * The extra `.et_pb_menu__wrap .et_mobile_nav_menu` ancestor classes exist
 * only to out-rank a Divi core rule (`.has_et_pb_sticky ... .et_mobile_menu
 * { top: 56px }`, 4 classes) that would otherwise re-collapse the top
 * offset if this header ever picks up Divi's generic sticky-nav class.
 */
html body header.et-l--header .et_pb_menu_0_tb_header .et_pb_menu__wrap .et_mobile_nav_menu .et_mobile_menu {
	position: fixed !important;
	inset: 57px 0 0 0 !important;
	width: 100% !important;
	height: calc(100dvh - 57px) !important;
	margin: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: var(--space-md) var(--gutter) !important;
	background: var(--card-wash), var(--dark-2) !important;
	border-top: 2px solid var(--teal) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Nested submenu <ul>s picked up the same slate fill from Divi — the wash
   above already covers the whole panel, so they just need to go transparent. */
html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu ul {
	background: transparent !important;
	border-top: 0 !important;
	box-shadow: none !important;
}

html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu > li > a {
	background-color: transparent !important;
	color: var(--white) !important;
	font-family: var(--font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: var(--track-meta) !important;
	border-radius: var(--radius-card) !important;
}

html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu > li > a:hover {
	background-color: color-mix(in srgb, var(--near-black) 70%, transparent) !important;
	color: var(--teal) !important;
	opacity: 1 !important;
}

/* The "+" / collapse indicator DIPI renders via ::before/::after glyphs. */
html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu li.menu-item-has-children>a::before,
html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu li.menu-item-has-children>a::after {
	color: var(--teal) !important;
	background-color: color-mix(in srgb, var(--teal) 12%, transparent) !important;
}

/*
 * Sub-menus previously rendered as filled 50px pills (DIPI's
 * `border-radius: 50px !important`) sitting next to the top level's 8px
 * `--radius-card` rectangles — two unrelated shapes in the same list. Drop
 * the pill fill for a quieter indented row that shares the same radius as
 * everything else, with a hairline rail marking the nesting.
 */
html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu li > .sub-menu {
	margin-left: 4px !important;
	padding-left: 16px !important;
	border-left: 1px solid var(--white--15) !important;
}

html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu li > .sub-menu > li > a {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: var(--radius-card) !important;
	color: var(--white--70) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

html body header.et-l--header .et_pb_menu_0_tb_header .et_mobile_menu li > .sub-menu > li > a:hover {
	background-color: color-mix(in srgb, var(--near-black) 70%, transparent) !important;
	color: var(--teal) !important;
	opacity: 1 !important;
}

/* ── Site footer ────────────────────────────────────────────────────── */

/*
 * The Theme Builder footer section is painted a distinct slate-gray
 * (#333F48) and its rows use Divi's percentage row width (max-width: 80%,
 * no cap) instead of the fixed var(--wrap) grid. On viewports wider than
 * ~1475px that 80% grows past var(--wrap) entirely, which is why the
 * content read as "too wide" — it isn't capped at all. Match the demo:
 * same background as the page, same fixed content grid.
 */
html body footer.et-l--footer .et_pb_section_0_tb_footer {
	background-color: var(--black) !important;
	background-image: none !important;
}

html body footer.et-l--footer .et_pb_row_0_tb_footer,
html body footer.et-l--footer .et_pb_row_1_tb_footer,
html body footer.et-l--footer .et_pb_row_2_tb_footer {
	width: 100% !important;
	max-width: var(--wrap) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
}

/* The contact row (24/7 Support / E-mail Us / HQ) carries its own
   translucent slate-gray card background — the demo's contact block is
   plain, same background as the rest of the footer. */
html body footer.et-l--footer .et_pb_row_0_tb_footer {
	background-color: transparent !important;
	background-image: none !important;
}

/* "See Beyond" tagline, in the brand column (custom class sy-info-col). */
html body footer.et-l--footer .sy-info-col h4 {
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--teal) !important;
}

/*
 * Column titles (Products / Industries / Site Links) sit in the same
 * "with menu" columns as the link lists below them — .et_pb_column--with-menu
 * is a shared Divi utility class also used in the header, so this must stay
 * scoped under footer.et-l--footer.
 */
html body footer.et-l--footer .et_pb_column--with-menu .et_pb_text_inner h4 {
	font-size: var(--text-meta) !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--white) !important;
}

/* Column link lists (Falcon K, Robin W, Automotive, Downloads, etc). */
html body footer.et-l--footer .et_pb_column--with-menu .et-menu.nav a {
	font-size: 14px !important;
	color: var(--white--70) !important;
}

/* Contact labels (24/7 Support, E-mail Us, Seyond Headquarters). */
html body footer.et-l--footer .et_pb_blurb_container h4.et_pb_module_header {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--white--50) !important;
}

/* Contact values (phone, email, HQ address). */
html body footer.et-l--footer .et_pb_blurb_container p {
	font-size: 14px !important;
	color: var(--white--90) !important;
}

/* Bottom bar: copyright + legal links. */
html body footer.et-l--footer .et_pb_row_2_tb_footer .et_pb_text_inner p {
	font-size: 12px !important;
	letter-spacing: 0.06em !important;
	color: var(--white--50) !important;
}

html body footer.et-l--footer .et_pb_row_2_tb_footer .et-menu.nav a {
	font-size: 12px !important;
	color: var(--white--50) !important;
}