/*
 * Colorado Accident Help — block layer.
 * The header, the footer, the hero and the Free Case Check.
 */

/* ==================================================================
 * Header
 * ================================================================== */
.co-shell { display: contents; }

.co-header {
	position: sticky;
	top: 0;
	z-index: var(--co-z-header);
	background: var(--co-glass);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--co-border-soft);
	transition: box-shadow var(--co-dur) var(--co-ease-out), background var(--co-dur) var(--co-ease-out);
}
.co-header.is-stuck { box-shadow: var(--co-shadow-md); background: rgba(255,255,255,.92); }
.co-header__in {
	display: flex;
	align-items: center;
	gap: var(--co-space-6);
	min-height: var(--co-header-h);
	padding-block: 14px;
}
.co-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.co-header__mark {
	width: 38px; height: 38px; flex: none;
	border-radius: 10px;
	background: var(--co-grad-alpine);
	display: grid; place-items: center;
	color: var(--co-gold-600);
	box-shadow: var(--co-shadow-sm);
}
.co-header__name { display: grid; line-height: 1.1; }
.co-header__name b {
	font-family: var(--co-font-serif);
	font-size: 1.0625rem;
	font-weight: var(--co-fw-semibold);
	color: var(--co-primary);
	letter-spacing: -.01em;
}
.co-header__name span {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	font-weight: var(--co-fw-semibold);
}

.co-nav {
	display: flex;
	align-items: center;
	gap: var(--co-space-5);
	margin-left: auto;
	flex-wrap: wrap;
	row-gap: var(--co-space-3);
}
/* Nav links themselves are styled by the California parity layer as
   .co-navlink; what stays here is the mega trigger, which has to match them. */
.co-mega__btn {
	font-size: var(--co-fs-nav);
	font-weight: var(--co-fw-medium);
	color: var(--co-text-soft);
	text-decoration: none;
	padding: 8px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--co-font-sans);
	white-space: nowrap;
	transition: color var(--co-dur) var(--co-ease-out);
}
.co-mega__btn:hover,
.co-mega__btn[aria-expanded="true"] { color: var(--co-primary); }

.co-nav a.co-btn { color: #fff; padding: 0 var(--co-space-5); margin-left: var(--co-space-2); }
.co-nav a.co-btn:hover { color: #fff; }

/* ---------- Mega panels ---------- */
.co-mega { position: relative; }
.co-mega__btn { display: inline-flex; align-items: center; gap: 5px; }
.co-mega__chev { transition: transform var(--co-dur) var(--co-ease-out); margin-top: -2px; }
.co-mega__btn[aria-expanded="true"] .co-mega__chev { transform: rotate(180deg); margin-top: 3px; }

.co-mega__panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	width: min(860px, calc(100vw - 48px));
	padding: var(--co-space-6);
	background: var(--co-surface);
	border: 1px solid var(--co-border-soft);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow-xl);
	display: grid;
	gap: var(--co-space-6);
	grid-template-columns: minmax(0, 1fr) 268px;
	z-index: var(--co-z-dropdown);
}
.co-mega__panel[hidden] { display: none; }
.co-mega__cols { display: grid; gap: var(--co-space-6) var(--co-space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-mega__heading {
	font-size: var(--co-fs-caption);
	text-transform: uppercase;
	letter-spacing: var(--co-ls-eyebrow);
	color: var(--co-text-muted);
	font-weight: var(--co-fw-semibold);
	margin-bottom: var(--co-space-3);
}
.co-mega__list { display: grid; gap: 2px; }
.co-mega__link {
	display: grid;
	gap: 1px;
	padding: 9px 10px;
	margin-inline: -10px;
	border-radius: var(--co-radius-sm);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	transition: background var(--co-dur) var(--co-ease-out);
}
.co-mega__link:hover { background: var(--co-alpine-50); }
.co-mega__link b {
	font-size: var(--co-fs-small);
	font-weight: var(--co-fw-semibold);
	color: var(--co-primary);
	text-transform: none;
	letter-spacing: 0;
}
.co-mega__link span {
	font-size: var(--co-fs-caption);
	color: var(--co-text-muted);
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
}
.co-mega__feature {
	background: var(--co-grad-alpine);
	border-radius: var(--co-radius-md);
	padding: var(--co-space-5);
	display: grid;
	gap: var(--co-space-3);
	align-content: start;
	color: var(--co-text-invert-muted);
}
.co-mega__feature a.co-mega__all:hover { color: var(--co-gold-500); }
.co-mega__feature p { font-size: var(--co-fs-caption); line-height: 1.55; margin: 0; }
.co-mega__feature b { color: #fff; font-size: var(--co-fs-small); font-weight: var(--co-fw-semibold); }
.co-mega__cta { text-transform: none; letter-spacing: 0; }
.co-mega__feature .co-mega__all {
	font-size: var(--co-fs-caption);
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: 0;
}

.co-nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	color: var(--co-primary);
	cursor: pointer;
}

@media (max-width: 1060px) {
	.co-header { position: relative; }
	.co-header__in, .co-header__inner { flex-wrap: wrap; padding-bottom: 18px; }
	.co-nav-toggle { display: flex; }
	/* The utility link moves into the drawer at this width so the brand, the
	   call to action and the toggle still fit on one line. */
	.co-header__actions .co-navlink--utility { display: none; }
	.co-header__actions { margin-left: auto; gap: var(--co-space-2); }
	.co-nav {
		display: none;
		width: 100%;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding-top: var(--co-space-4);
		border-top: 1px solid var(--co-border-soft);
		margin-top: var(--co-space-4);
	}
	.co-nav.is-open { display: flex; }
	.co-nav .co-navlink, .co-nav > a:not(.co-btn) { width: 100%; padding: 11px 0; }
	.co-nav a.co-btn { width: auto; align-self: flex-start; margin: var(--co-space-3) 0 0; padding: 0 var(--co-space-6); }
	.co-mega { display: block; width: 100%; }
	.co-mega__btn { width: 100%; justify-content: space-between; padding: 11px 0; }
	.co-mega__panel {
		position: static;
		transform: none;
		width: 100%;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--co-border-soft);
		border-radius: 0;
		padding: var(--co-space-3) 0 var(--co-space-5) var(--co-space-4);
		grid-template-columns: 1fr;
		gap: var(--co-space-5);
	}
	.co-mega__cols { grid-template-columns: 1fr; gap: var(--co-space-5); }
}

/* ==================================================================
 * Footer
 * ================================================================== */
.co-footer {
	background: var(--co-grad-alpine);
	color: var(--co-text-invert-muted);
	padding-block: var(--co-space-16) var(--co-space-8);
	position: relative;
	overflow: hidden;
}
.co-footer::before { content: ""; position: absolute; inset: 0; background: var(--co-ridge); opacity: .5; pointer-events: none; }
.co-footer > * { position: relative; }
.co-footer__cols {
	display: grid;
	gap: var(--co-space-10) var(--co-space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .co-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .co-footer__cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } }
.co-footer h4 {
	font-family: var(--co-font-sans);
	font-size: var(--co-fs-caption);
	text-transform: uppercase;
	letter-spacing: var(--co-ls-eyebrow);
	color: #fff;
	margin-bottom: var(--co-space-4);
}
.co-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--co-space-2); }
.co-footer a { color: var(--co-text-invert-muted); text-decoration: none; font-size: var(--co-fs-small); }
.co-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.co-footer__brand { display: grid; gap: var(--co-space-4); max-width: 42ch; }
.co-footer__brand p { font-size: var(--co-fs-small); line-height: 1.65; }
.co-footer__rule { height: 3px; width: 64px; border-radius: 3px; background: var(--co-grad-rule); }
.co-footer__contact { display: grid; gap: var(--co-space-2); font-size: var(--co-fs-small); }
.co-footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.co-footer__bottom {
	margin-top: var(--co-space-12);
	padding-top: var(--co-space-6);
	border-top: 1px solid var(--co-border-invert);
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-3) var(--co-space-6);
	justify-content: space-between;
	font-size: var(--co-fs-caption);
}
.co-footer__legal { max-width: 90ch; line-height: 1.65; }

/* ==================================================================
 * Hero
 * ================================================================== */
.co-hero {
	background: var(--co-grad-hero);
	color: var(--co-text-invert-muted);
	position: relative;
	overflow: hidden;
	padding-block: clamp(48px, 6vw, 88px);
}
.co-hero::after {
	content: "";
	position: absolute;
	right: -120px; bottom: -140px;
	width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(233,169,61,.16) 0%, transparent 62%);
	pointer-events: none;
}
.co-hero > * { position: relative; }
.co-hero h1 { color: #fff; max-width: 18ch; }
.co-hero__grid { display: grid; gap: var(--co-gap-lg); align-items: center; }
/* Matches California: a fluid near-even split rather than a fixed 468px
   quiz column, so the panel grows with the viewport instead of stranding
   the copy beside a narrow card. */
@media (min-width: 1040px) { .co-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); } }
.co-hero__copy { display: grid; gap: var(--co-space-5); align-content: start; }
.co-hero__lede { font-size: var(--co-fs-body-lg); line-height: var(--co-lh-relaxed); color: var(--co-text-invert-muted); max-width: 56ch; }
.co-hero__actions { display: flex; flex-wrap: wrap; gap: var(--co-space-3); margin-top: var(--co-space-2); }
.co-hero__trust { margin-top: var(--co-space-4); }

/* ==================================================================
 * Free Case Check
 * ================================================================== */
.co-check {
	background: var(--co-surface);
	border-radius: var(--co-radius-xl);
	box-shadow: var(--co-shadow-xl);
	border: 1px solid var(--co-border-soft);
	overflow: hidden;
	color: var(--co-text-soft);
}
.co-check__head {
	padding: var(--co-space-5) var(--co-space-6);
	border-bottom: 1px solid var(--co-border-soft);
	background: var(--co-surface-alt);
	display: grid;
	gap: var(--co-space-3);
}
.co-check__title {
	font-family: var(--co-font-sans);
	font-size: var(--co-fs-h4);
	font-weight: var(--co-fw-semibold);
	color: var(--co-primary);
}
.co-check__meter { display: grid; gap: 6px; }
.co-check__bar { height: 5px; border-radius: 3px; background: var(--co-surface-sunk); overflow: hidden; }
.co-check__fill { height: 100%; width: 0; border-radius: 3px; background: var(--co-grad-rust); transition: width var(--co-dur-slow) var(--co-ease-out); }
.co-check__count { font-size: var(--co-fs-caption); color: var(--co-text-muted); font-variant-numeric: tabular-nums; }

.co-check__body { padding: var(--co-space-6); display: grid; gap: var(--co-space-5); }
.co-check__question { font-family: var(--co-font-sans); font-size: 1.1875rem; font-weight: var(--co-fw-semibold); color: var(--co-primary); line-height: 1.35; }
.co-check__help { font-size: var(--co-fs-caption); color: var(--co-text-muted); }
.co-check__choices { display: grid; gap: var(--co-space-2); }
.co-check__fields { display: grid; gap: var(--co-space-4); }
@media (min-width: 560px) { .co-check__fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.co-check__foot {
	display: flex;
	align-items: center;
	gap: var(--co-space-3);
	padding: var(--co-space-5) var(--co-space-6);
	border-top: 1px solid var(--co-border-soft);
	background: var(--co-surface-alt);
	flex-wrap: wrap;
}
.co-check__back { background: none; border: 0; color: var(--co-text-muted); font: var(--co-fw-medium) var(--co-fs-small)/1 var(--co-font-sans); cursor: pointer; padding: 10px 0; }
.co-check__back:hover { color: var(--co-primary); }
.co-check__next { margin-left: auto; }
.co-check__consent { font-size: 12px; line-height: 1.55; color: var(--co-text-muted); }
.co-check__consent a { color: var(--co-link); }

.co-check__done { padding: var(--co-space-10) var(--co-space-6); text-align: center; display: grid; gap: var(--co-space-4); justify-items: center; }
.co-check__done-mark {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--co-success-tint); color: var(--co-success);
	display: grid; place-items: center;
}
.co-check[data-co-check-state="done"] .co-check__head,
.co-check[data-co-check-state="done"] .co-check__foot { display: none; }

.co-check__error { font-size: var(--co-fs-small); color: var(--co-error); font-weight: var(--co-fw-medium); }

/* A compact variant for the sidebar and mid-page calls to action. */
.co-check--compact .co-check__body { padding: var(--co-space-5); }
.co-check--compact .co-check__question { font-size: var(--co-fs-body); }


/* ------------------------------------------------------------------
 * Elementor widget library — the few blocks the static page builder
 * never rendered, so they had no styles of their own yet.
 * ------------------------------------------------------------------ */

/* Compact hero for interior pages, against the full homepage hero. */
.co-hero--page { padding-block: clamp(48px, 6vw, 88px); }
.co-hero--page h1 { max-width: 22ch; }
.co-hero--light { background: var(--co-surface-2); }
.co-hero--light h1,
.co-hero--light .co-hero__lede { color: var(--co-text); }

/* Inline citation shown beside a figure or statement. */
.co-cite {
	color: var(--co-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: var(--co-fs-small);
}

/* A fact still waiting on a second source. */
.co-flag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(233, 169, 61, .18);
	color: #7A4B08;
	font-size: var(--co-fs-small);
	font-weight: var(--co-fw-semibold);
}

.co-card__badge {
	align-self: start;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--co-surface-3);
	font-size: var(--co-fs-small);
	font-weight: var(--co-fw-semibold);
	color: var(--co-text-soft);
}

/* Placeholder for a listing with nothing in it yet. */
.co-empty {
	display: grid;
	justify-items: center;
	gap: var(--co-space-3);
	padding: clamp(32px, 5vw, 56px);
	border: 1px dashed var(--co-border);
	border-radius: var(--co-radius-lg);
	text-align: center;
	color: var(--co-text-soft);
}
.co-empty__title { font-weight: var(--co-fw-semibold); color: var(--co-text); }
.co-empty__body { max-width: 46ch; }