/*
 * Colorado Accident Help — base layer.
 * Element defaults and the layout primitives every block is built on.
 */

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

html { -webkit-text-size-adjust: 100%; }

body.co {
	margin: 0;
	background: var(--co-bg);
	color: var(--co-text-soft);
	font-family: var(--co-font-sans);
	font-size: var(--co-fs-body);
	line-height: var(--co-lh-normal);
	letter-spacing: var(--co-ls-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.co h1, .co h2, .co h3, .co h4 {
	font-family: var(--co-font-serif);
	color: var(--co-primary);
	font-weight: var(--co-fw-semibold);
	line-height: var(--co-lh-heading);
	letter-spacing: var(--co-ls-heading);
	margin: 0;
	text-wrap: balance;
}
.co h1 { font-size: var(--co-fs-h1); line-height: var(--co-lh-snug); }
.co h2 { font-size: var(--co-fs-h2); }
.co h3 { font-size: var(--co-fs-h3); }
.co h4 { font-size: var(--co-fs-h4); font-family: var(--co-font-sans); font-weight: var(--co-fw-semibold); }

.co p { margin: 0; }
.co a { color: var(--co-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.co a:hover { color: var(--co-link-hover); }
.co strong { color: var(--co-text); font-weight: var(--co-fw-semibold); }
.co img, .co svg, .co video { max-width: 100%; height: auto; display: block; }

.co :focus-visible {
	outline: 2px solid var(--co-focus-ring);
	outline-offset: 2px;
	border-radius: 3px;
}

.co ::selection { background: var(--co-alpine-100); color: var(--co-primary); }

/* ------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------ */
.co-container {
	width: 100%;
	max-width: var(--co-container-max);
	margin-inline: auto;
	padding-inline: var(--co-gutter-current);
}
.co-container--wide   { max-width: var(--co-container-wide); }
.co-container--narrow { max-width: var(--co-container-narrow); }
.co-container--reading { max-width: calc(var(--co-reading-max) + var(--co-gutter-current) * 2); }

.co-section { padding-block: var(--co-section-y); }
.co-section--lg { padding-block: var(--co-section-y-lg); }
.co-section--tight { padding-block: clamp(36px, 4vw, 64px); }
.co-section--tint { background: var(--co-bg-alt); }
.co-section--surface { background: var(--co-surface); }

.co-section--invert {
	background: var(--co-grad-alpine);
	color: var(--co-text-invert-muted);
	position: relative;
	overflow: hidden;
}
.co-section--invert h1, .co-section--invert h2,
.co-section--invert h3, .co-section--invert h4 { color: #fff; }
.co-section--invert a { color: #fff; }
.co-section--invert strong { color: #fff; }
.co-section--invert::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--co-ridge);
	opacity: .5;
	pointer-events: none;
}
.co-section--invert > * { position: relative; }

.co-stack  { display: grid; gap: var(--co-stack); }
.co-stack--tight { gap: var(--co-space-4); }
.co-grid   { display: grid; gap: var(--co-gap); }
.co-grid--2 { grid-template-columns: 1fr; }
.co-grid--3 { grid-template-columns: 1fr; }
.co-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.co-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.co-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.co-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.co-split { display: grid; gap: var(--co-gap-lg); align-items: start; }
@media (min-width: 1000px) { .co-split { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (min-width: 1000px) { .co-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } }

.co-eyebrow {
	display: block;
	font-size: var(--co-fs-eyebrow);
	font-weight: var(--co-fw-semibold);
	letter-spacing: var(--co-ls-eyebrow);
	text-transform: uppercase;
	color: var(--co-accent);
	margin-bottom: var(--co-space-3);
}
.co-section--invert .co-eyebrow { color: var(--co-gold-600); }

.co-lede {
	font-size: var(--co-fs-body-lg);
	line-height: var(--co-lh-relaxed);
	color: var(--co-text-muted);
	max-width: 62ch;
}
.co-section--invert .co-lede { color: var(--co-text-invert-muted); }

.co-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--co-z-skip);
	padding: 12px 18px;
	background: var(--co-primary);
	color: #fff;
	border-radius: 0 0 var(--co-radius-sm) 0;
	font-weight: var(--co-fw-semibold);
	text-decoration: none;
}
.co-skip:focus { left: 0; color: #fff; }

.co-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Reveal-on-scroll, driven by ui.js. Starts visible so the page reads
   correctly with javascript off or before the observer runs. */
.co [data-co-reveal] { opacity: 1; }
.co.co-js [data-co-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--co-dur-slow) var(--co-ease-out), transform var(--co-dur-slow) var(--co-ease-out);
	transition-delay: var(--co-reveal-delay, 0ms);
}
.co.co-js [data-co-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.co.co-js [data-co-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The theme's own header and footer are replaced by ours. */
.site-header, .site-footer,
header.site-header, footer.site-footer { display: none !important; }


/* Layout corrections — 2026-09-11.
   Grid and flex children default to min-width:auto, so a wide child (a data
   table inside its own scroller) pushes the track past the viewport instead of
   letting the scroller do its job. Pin the tracks to zero. */
.co-split > *,
.co-grid > *,
.co-cards > *,
.co-row > * { min-width: 0; }
.co-split, .co-grid, .co-cards { min-width: 0; }
.co-table-scroll { max-width: 100%; }