/* ==========================================================================
   Main St Auto Body: tokens, base, typography, buttons
   Values are copied 1:1 from the prototype (Main St Auto Body v2.dc.html).
   "Mobile" in the prototype = viewport < 1180px; see layout.css.
   ========================================================================== */

:root {
	/* Brand */
	--c-accent: #D0161D;
	--c-accent-hover: #A80F15;
	--c-accent-light: #FF5A5F;
	--c-accent-tint: #FDE2E2;

	/* Dark UI */
	--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-star: #E0A100;

	/* Light UI (reviews, forms) */
	--c-light: #FBFAFA;
	--c-light-card: #FDFDFD;
	--c-light-line: #E6E2DB;
	--c-ink: #0D0E10;
	--c-ink-muted: #5B5F67;

	/* Sister brands (hover borders in the family block) */
	--c-logistics: #F2A516;
	--c-aircare: #4FB3E8;

	--f-display: 'Michroma', sans-serif;
	--f-body: 'Manrope', system-ui, sans-serif;

	--container: 1120px;
	--gutter: 20px;
	--header-offset: 80px;

	/* Vertical rhythm (client request 9 Oct 2026: more room between sections).
	   Prototype: 64px between sections, 48px under the header, on every screen size. */
	--space-section: clamp(4.5rem, 3.4rem + 3.2vw, 7rem); /* 72px phone → ~100px at 1440 → 112px max */
	--space-top: clamp(3rem, 2.4rem + 2vw, 4.5rem);       /* first block under the header: 48 → 72px */
	--space-text: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);    /* text under a page title: 40 → 56px */
}

/* ---------- Base ---------- */

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

html,
body {
	margin: 0;
	padding: 0;
	background: var(--c-bg);
	color: var(--c-text-2);
	font-family: var(--f-body);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-accent-light); }
a:hover { color: var(--c-text); }

input,
select,
textarea,
button { font-family: inherit; }

img { max-width: 100%; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: 2px; }

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

.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	left: 12px;
	top: 12px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--c-text);
	color: var(--c-ink);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

/* Page wrapper (prototype root div) */
.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--f-body);
	color: var(--c-text);
	background: var(--c-bg);
}

.site-main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	width: 100%;
}

/* Inline links in running text: underlined so they stand out from the text around them. */
.inline-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.inline-link:hover { text-decoration-thickness: 2px; }

/* ---------- Typography ---------- */

.eyebrow {
	font-family: var(--f-display);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-accent-light);
}

.h1 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 4cqw, 2.625rem);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0;
	text-wrap: pretty;
}

.h2 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.1875rem, 2.6cqw, 1.75rem);
	line-height: 1.25;
	text-transform: uppercase;
}

.h2--sm { font-size: clamp(1.125rem, 2.4cqw, 1.625rem); }

.lead {
	margin: 0;
	font-size: clamp(1rem, calc(0.9536rem + 0.1905cqw), 1.125rem);
	line-height: 1.5;
	color: var(--c-text-2);
	max-width: 520px;
	text-wrap: pretty;
}

.copy {
	font-size: clamp(1rem, calc(0.9768rem + 0.0952cqw), 1.0625rem);
	line-height: 1.6;
	color: var(--c-text-2);
	text-wrap: pretty;
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

/* Small square bullet used in lists (USPs, fleet perks, careers perks) */
.bullet-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 16px;
}

.bullet-list__item {
	display: flex;
	gap: 14px;
}

.bullet-list__item::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--c-accent);
	flex: none;
	margin-top: 7px;
}

.bullet-list__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bullet-list__title {
	font-weight: 800;
	font-size: 1rem;
}

.bullet-list__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-muted);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 0.9375rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 10px;
	padding: 0 22px;
	min-height: 52px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
}

.btn--primary,
.btn--primary:hover { color: #fff; }
.btn--primary { background: var(--c-accent); }
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--outline {
	color: var(--c-text);
	background: transparent;
	border: 1.5px solid var(--c-text);
}
.btn--outline:hover {
	background: var(--c-text);
	color: var(--c-ink);
}

.btn--light,
.btn--light:hover { color: var(--c-ink); }
.btn--light { background: var(--c-text); }
.btn--light:hover { background: var(--c-text-2); }

.btn--ghost-white {
	color: #fff;
	background: transparent;
	border: 1.5px solid #fff;
}
.btn--ghost-white:hover {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

.btn--sm {
	font-size: 0.8125rem;
	padding: 0 18px;
	min-height: 46px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Rating pill ---------- */

.rating-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	align-self: flex-start;
	color: var(--c-text);
	text-decoration: none;
}
a.rating-pill:hover { color: var(--c-text); border-color: var(--c-line-2); }

.stars__off { opacity: .3; }

.rating-pill__stars {
	color: var(--c-star);
	font-size: 0.9375rem;
	letter-spacing: 1px;
}

.rating-pill__score {
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.rating-pill__count {
	font-size: 0.875rem;
	color: var(--c-muted);
	white-space: nowrap;
}

.rating-pill--light {
	background: var(--c-light-card);
	border-color: var(--c-light-line);
	color: var(--c-ink);
}
a.rating-pill--light:hover { color: var(--c-ink); border-color: #D6D1C8; }

/* ---------- Media boxes ---------- */

.media {
	border-radius: 14px;
	overflow: hidden;
	background: var(--c-surface);
}

.media > img,
.media > iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--16x10 { aspect-ratio: 16 / 10; border-radius: 12px; }
.media--square { aspect-ratio: 1; border-radius: 12px; }

/* Auto-fit grid used throughout: --min sets the column minimum. */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 340px)), 1fr));
	gap: var(--gap, 36px);
}

/* Editor text inside sections (paragraphs keep the prototype's 20px rhythm) */
.copy > * + * { margin-top: 20px; }
.copy ul,
.copy ol { padding-left: 1.25em; }
.copy li + li { margin-top: .4em; }
.copy h3 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 0.9375rem;
	text-transform: uppercase;
	color: var(--c-text);
	line-height: 1.25;
}
.copy strong { color: var(--c-text); }
.rating-pill--light .rating-pill__count { color: var(--c-ink-muted); } /* prototype #A3A6AD: 2.5:1 on white */

/* ---------- Ring motif (from the "years" tile) ----------
   Concentric rings in a corner of a block, like a gauge.
   Variants: --wide (full-width bands), --top (top-right corner), --small (cards), --faint (dark boxes). */
.rings {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	--rings-size: 440px;
	--rings-step: 40px;
	--rings-alpha: .08;
}

.rings::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--rings-size);
	height: var(--rings-size);
	right: calc(var(--rings-size) * -0.42);
	bottom: calc(var(--rings-size) * -0.42);
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, var(--rings-alpha)) 0 1px, transparent 1px var(--rings-step));
	pointer-events: none;
}

.rings--top::before { bottom: auto; top: calc(var(--rings-size) * -0.42); }
.rings--wide { --rings-size: 560px; --rings-step: 44px; }
.rings--wide::before { bottom: auto; top: 50%; transform: translateY(-50%); right: calc(var(--rings-size) * -0.3); }
.rings--small { --rings-size: 240px; --rings-step: 24px; }
.rings--faint { --rings-alpha: .05; }