/*
 * Canonical Ex-Guard shell boundary.
 *
 * This file loads after every page stylesheet. It owns only shared header and
 * footer presentation so a local template cannot create a second brand skin.
 */

body.exg-shell {
	/* One shared visible-content rail for the utility bar, primary header,
	 * homepage sections, and footer. Full-width shell backgrounds stay intact. */
	--exg-shell-rail-max: 1200px;
	--exg-shell-rail-gutter: 36px;
	--exg-market-accent: var(--exg-gold);
	--exg-market-accent-text: var(--exg-black);
	--exg-shell-accent: var(--exg-gold);
	--exg-shell-accent-text: var(--exg-black);
	--exg-shell-utility: var(--exg-black);
	--exg-shell-utility-text: var(--exg-white);
	--exg-shell-utility-hover-bg: rgba(255, 255, 255, 0.14);
	--exg-shell-utility-hover-text: var(--exg-white);
	--exg-shell-utility-highlight-bg: rgba(255, 255, 255, 0.14);
	--exg-shell-utility-highlight-text: var(--exg-white);
	--exg-shell-active-bg: var(--exg-white);
	--exg-shell-active-text: var(--exg-black);
}

body.exg-shell .exg-v2-utility__inner,
body.exg-shell .exg-v2-primary__inner {
	box-sizing: border-box;
	width: min(
		100%,
		calc(
			var(--exg-shell-rail-max) +
			var(--exg-shell-rail-gutter) +
			var(--exg-shell-rail-gutter)
		)
	);
	margin-inline: auto;
	padding-inline: var(--exg-shell-rail-gutter);
}

body.exg-shell .exg-v2-header {
	height: 140px;
	background: var(--exg-white);
	color: var(--exg-black);
}

body.exg-shell .exg-v2-utility {
	height: 44px;
	border-color: var(--exg-charcoal);
	background: var(--exg-black);
	color: var(--exg-white);
}

body.exg-shell .exg-v2-primary {
	height: 96px;
	background: #f4f5f6;
	color: var(--exg-black);
}

body.exg-shell .exg-v2-dealer-cta,
body.exg-shell .exg-v2-mobile-nav__dealer {
	background: var(--exg-gold);
	color: var(--exg-black);
}

body.exg-shell .exg-v2-footer-accent {
	display: block !important;
	width: 100%;
	height: 7px;
	background: var(--exg-gold) !important;
}

body.exg-shell .exg-v2-footer {
	min-height: 0;
	background: var(--exg-black);
	color: var(--exg-white);
}

body.exg-shell .exg-v2-footer__brand > .exg-v2-footer__logo {
	display: inline-flex;
	width: 190px;
	height: 44px;
	margin-bottom: 20px;
}

body.exg-shell .exg-v2-footer__brand > .exg-v2-footer__phone {
	display: inline-flex;
	width: auto;
	height: auto;
	min-height: 24px;
	align-items: center;
	margin-bottom: 14px;
}

body.exg-shell .exg-v2-footer__links section h2 {
	color: var(--exg-gold);
}

body.exg-shell .exg-v2-footer-menu a,
body.exg-shell .exg-v2-footer__phone,
body.exg-shell .exg-v2-footer__legal-row nav a {
	color: var(--exg-white);
}

body.exg-shell .exg-v2-socials a,
body.exg-shell .exg-v2-socials a:hover {
	background: var(--exg-gold);
	color: var(--exg-black);
}

/* Retained product pages still load an older compiled search module. Keep its
 * dormant/fallback links inside the current palette if the module is exposed. */
body.exg-shell .search-container .popular-searches a,
body.exg-shell .search-container-mobile .popular-searches a {
	color: #806100;
}

@media (max-width: 1020px) {
	body.exg-shell {
		--exg-shell-rail-gutter: 24px;
	}

	body.exg-shell .exg-v2-header,
	body.exg-shell .exg-v2-primary {
		height: 86px;
	}

	body.exg-shell .exg-v2-utility {
		display: none;
	}
}

@media (max-width: 640px) {
	body.exg-shell {
		--exg-shell-rail-gutter: 18px;
	}
}