/* ==========================================================================
   Main St Auto Body: LIGHT look (preview variant, Novax 29 Oct 2026)
   Loaded for everyone; every rule except the toggle button is scoped to
   body.look-light, which the header toggle (cookie msab_look) switches on.
   Trust bar, green blocks, before/after slider and footer keep the dark palette.
   ========================================================================== */

html:has(body.look-light) { background: #F4F4F5; }

/* 1. Light palette for the page ---------------------------------------- */
body.look-light {
	--c-bg: #F4F4F5;
	--c-bg-2: #EBEBED;
	--c-surface: #FFFFFF;
	--c-line: #E0E0E3;
	--c-line-2: #CFD0D4;
	--c-text: #0D0E10;
	--c-text-2: #383B41;
	--c-muted: #5C6068;
	--c-muted-2: #4A4E55;
	--c-muted-3: #6E727A;
	--c-accent-light: #B3121A;
	--c-light: #FFFFFF;
	--c-light-card: #FFFFFF;
	background: var(--c-bg);
}

/* 2. Blocks that stay dark (green bands, footer, sliders) ---------------- */
body.look-light .trust,
body.look-light .site-footer,
body.look-light .stat-tile,
body.look-light .final-cta,
body.look-light .ba,
body.look-light .ba-pair__shot,
body.look-light .family-card--current {
	--c-bg: #0D0E10;
	--c-bg-2: #131417;
	--c-surface: #1A1C20;
	--c-line: #2A2D33;
	--c-line-2: #34373E;
	--c-text: #FBFAFA;
	--c-text-2: #E3E3E3;
	--c-muted: #A3A6AD;
	--c-muted-2: #BDC0C6;
	--c-muted-3: #868A92;
	--c-accent-light: #FF5A5F;
}

/* 3. Header, mobile bars ------------------------------------------------ */
body.look-light .site-header {
	background: rgba(255, 255, 255, .92);
	border-bottom-color: var(--c-line);
}

body.look-light .sticky-bar {
	background: rgba(255, 255, 255, .95);
	border-top-color: var(--c-line);
}

/* 4. Buttons that flip with the palette --------------------------------- */
body.look-light .btn--outline:hover { background: var(--c-text); color: var(--c-bg); }
body.look-light .btn--light { background: var(--c-text); color: var(--c-bg); }
body.look-light .btn--light:hover { background: var(--c-text-2); color: var(--c-bg); }
body.look-light .ba-tabs__btn[aria-pressed="true"],
body.look-light .pagination .page-numbers.current { color: #FFFFFF; }

/* 5. Ring motif and map placeholder on light ground --------------------- */
body.look-light .rings::before {
	background: repeating-radial-gradient(circle, rgba(13, 14, 16, var(--rings-alpha)) 0 1px, transparent 1px var(--rings-step));
}

body.look-light .trust.rings::before,
body.look-light .site-footer .rings::before,
body.look-light .family-card--current.rings::before {
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, var(--rings-alpha)) 0 1px, transparent 1px var(--rings-step));
}

body.look-light .map { background: repeating-linear-gradient(135deg, #E7E7E9 0 12px, #EFEFF1 12px 24px); }

/* 6. Cards: soft shadows instead of dark ones ---------------------------- */
body.look-light a.service-card:hover { box-shadow: 0 16px 32px -22px rgba(13, 14, 16, .35); }

body.look-light .service-card,
body.look-light .step-card,
body.look-light .faq-card,
body.look-light .steps-box,
body.look-light .role-card,
body.look-light .post-card { box-shadow: 0 1px 2px rgba(13, 14, 16, .04); }

/* 7. Heroes on light ground (plain and photo) ------------------------- */
body.look-light .hero:not(.hero--photo)::before {
	background:
		radial-gradient(55% 75% at 0% 0%, rgba(208, 22, 29, .13), rgba(208, 22, 29, 0) 70%),
		radial-gradient(40% 60% at 100% 100%, rgba(208, 22, 29, .06), rgba(208, 22, 29, 0) 70%);
}

body.look-light .hero:not(.hero--photo)::after {
	background: repeating-radial-gradient(circle, rgba(13, 14, 16, .06) 0 1px, transparent 1px 44px);
}

body.look-light .hero .eyebrow {
	color: #D0161D;
	background: rgba(208, 22, 29, .08);
	border-color: rgba(208, 22, 29, .28);
}

body.look-light .hero .h1,
body.look-light .hero .eyebrow { text-shadow: none; }

body.look-light .hero .hero__copy .lead,
body.look-light .hero .lead {
	color: var(--c-text-2);
	text-shadow: none;
}

body.look-light .hero .btn--outline {
	color: var(--c-text);
	border-color: var(--c-text);
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.look-light .hero .btn--primary { box-shadow: 0 12px 26px -16px rgba(208, 22, 29, .6); }

body.look-light .hero .rating-pill {
	background: #FFFFFF;
	border-color: var(--c-line);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.look-light .hero .lead-card {
	box-shadow: 0 28px 60px -32px rgba(13, 14, 16, .35), 0 0 0 1px var(--c-line);
}

body.look-light .hero .btn--outline:hover { background: var(--c-text); color: var(--c-bg); }

/* 8. Photo hero (home): light veil over the photo, text on the left ------- */
body.look-light .hero--photo { background: var(--c-bg); }

body.look-light .hero--photo .hero__bg { filter: saturate(.95) brightness(1.04); }

body.look-light .hero--photo .hero__shade {
	background: linear-gradient(180deg, rgba(244, 244, 245, .20) 0%, rgba(244, 244, 245, 0) 45%, rgba(244, 244, 245, .70) 100%);
}

body.look-light .hero--photo .hero__shade--side {
	background: linear-gradient(90deg, rgba(244, 244, 245, .97) 0%, rgba(244, 244, 245, .92) 36%, rgba(244, 244, 245, .55) 58%, rgba(244, 244, 245, 0) 82%);
}

@media (max-width: 1179.98px) {
	body.look-light .hero--photo .hero__shade {
		background: linear-gradient(180deg, rgba(244, 244, 245, .86) 0%, rgba(244, 244, 245, .84) 55%, rgba(244, 244, 245, .96) 100%);
	}
}

/* 9. Light / dark toggle button in the header (all visitors) -------------- */
.look-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.look-toggle:hover { border-color: var(--c-accent-light); color: var(--c-accent-light); }
.look-toggle:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: 2px; }
.look-toggle svg { width: 18px; height: 18px; display: block; }
.look-toggle .look-toggle__moon,
body.look-light .look-toggle .look-toggle__sun { display: none; }
body.look-light .look-toggle .look-toggle__moon { display: block; }

/* Desktop: the header is full, so the button floats bottom right instead. */
.look-toggle--float { display: none; }

@media (min-width: 1180px) {
	.site-header .look-toggle { display: none; }

	.look-toggle.look-toggle--float {
		display: inline-flex;
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 900;
		width: 48px;
		height: 48px;
		background: var(--c-surface);
		box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
	}

	body.look-light .look-toggle.look-toggle--float { box-shadow: 0 12px 30px -14px rgba(13, 14, 16, .35); }
	.look-toggle--float svg { width: 20px; height: 20px; }
}

/* Phones: no room next to the logo, so the switch sits in the menu as a labelled row. */
.look-toggle__text { display: none; }
.look-toggle--menu { display: none; }

@media (max-width: 599.98px) {
	.site-header__actions .look-toggle { display: none; }

	.look-toggle.look-toggle--menu {
		display: inline-flex;
		align-self: flex-start;
		gap: 10px;
		width: auto;
		height: auto;
		margin-top: 12px;
		padding: 12px 18px;
		border-radius: 12px;
		font: inherit;
		font-weight: 600;
		font-size: 15px;
	}

	.look-toggle--menu .look-toggle__text--to-light { display: inline; }
	body.look-light .look-toggle--menu .look-toggle__text--to-light { display: none; }
	body.look-light .look-toggle--menu .look-toggle__text--to-dark { display: inline; }
}

/* 10. Hero veil 20% transparent (Shaban, 29 Oct): photo shows through more. */
body.look-light .hero--photo .hero__shade,
body.look-light .hero--photo .hero__shade--side { opacity: .8; }

/* 11. Photo hero text contrast on the light veil (Shaban, 29 Oct) --------- */
body.look-light .hero--photo .h1 {
	color: #0D0E10;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 22px rgba(255, 255, 255, .85);
}

body.look-light .hero--photo .h1__place {
	color: #A80F15;
	text-shadow: 0 0 16px rgba(255, 255, 255, .9);
}

body.look-light .hero--photo .hero__copy .lead {
	color: #17181B;
	font-weight: 500;
	text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .85);
}

body.look-light .hero--photo .eyebrow {
	color: #A80F15;
	background: rgba(255, 255, 255, .88);
	border-color: rgba(208, 22, 29, .35);
}

body.look-light .hero--photo .btn--outline {
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body.look-light .hero--photo .btn--outline:hover { background: var(--c-text); color: #FFFFFF; }

body.look-light .hero--photo .rating-pill { box-shadow: 0 4px 14px -8px rgba(13, 14, 16, .35); }