/**
 * Chestnut Risk Checker
 *
 * Typography is inherited from the theme on purpose. A widget that drops two
 * webfonts into a charity site costs load time on a 4G phone and drags a
 * third-party font host into the privacy notice, for the sake of a typeface
 * that would then clash with everything around it. Personality here comes
 * from scale, weight and spacing instead.
 *
 * Colours are custom properties, set inline from the ACF options screen, so
 * the charity can rebrand without a deploy.
 */

.crc {
	--crc-ink: #33271e;
	--crc-primary: #5a2e19;
	--crc-accent: #3f6b4a;
	--crc-rule: color-mix( in srgb, var( --crc-ink ) 18%, transparent );
	--crc-wash: color-mix( in srgb, var( --crc-primary ) 5%, transparent );
	--crc-radius: 4px;

	max-width: 34rem;
	margin: 2rem auto;
	color: var( --crc-ink );
	font: inherit;
	line-height: 1.55;
	text-align: left;
}

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

/* ---- panel -------------------------------------------------------- */

.crc__panel {
	border: 1px solid var( --crc-rule );
	border-top: 3px solid var( --crc-primary );
	border-radius: var( --crc-radius );
	padding: 1.75rem 1.5rem 1.5rem;
	background: #fff;
}

@media ( max-width: 30rem ) {
	.crc__panel {
		padding: 1.25rem 1rem 1.25rem;
	}
}

/* ---- type --------------------------------------------------------- */

.crc__kicker {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --crc-primary );
}

.crc__heading {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.35rem, 4vw, 1.7rem );
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --crc-ink );
}

.crc__heading--result {
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var( --crc-rule );
	margin-bottom: 1.1rem;
}

.crc__heading:focus-visible,
.crc__question:focus-visible {
	outline: 3px solid var( --crc-accent );
	outline-offset: 4px;
}

.crc__prose {
	font-size: 1rem;
}

.crc__prose > *:first-child {
	margin-top: 0;
}

.crc__prose > *:last-child {
	margin-bottom: 0;
}

.crc__prose p,
.crc__prose ul,
.crc__prose ol {
	margin: 0 0 0.9rem;
}

.crc__prose ul,
.crc__prose ol {
	padding-left: 1.25rem;
}

.crc__prose li {
	margin-bottom: 0.35rem;
}

/* ---- progress ----------------------------------------------------- */

.crc__progress {
	display: flex;
	gap: 4px;
	margin-bottom: 1.1rem;
}

.crc__progress-seg {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var( --crc-rule );
}

.crc__progress-seg.is-done {
	background: var( --crc-accent );
}

.crc__count {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix( in srgb, var( --crc-ink ) 65%, transparent );
}

/* ---- question ----------------------------------------------------- */

.crc__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.crc__legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.crc__question {
	display: block;
	font-size: clamp( 1.2rem, 3.5vw, 1.45rem );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.crc__help {
	margin: 0.4rem 0 1rem;
	font-size: 0.9375rem;
	color: color-mix( in srgb, var( --crc-ink ) 72%, transparent );
}

.crc__options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.crc__option {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 0.9rem;
	border: 1px solid var( --crc-rule );
	border-radius: var( --crc-radius );
	cursor: pointer;
	background: #fff;
}

.crc__option:hover {
	border-color: color-mix( in srgb, var( --crc-primary ) 45%, transparent );
	background: var( --crc-wash );
}

.crc__option:has( .crc__radio:checked ) {
	border-color: var( --crc-primary );
	box-shadow: inset 0 0 0 1px var( --crc-primary );
	background: var( --crc-wash );
}

.crc__option:has( .crc__radio:focus-visible ) {
	outline: 3px solid var( --crc-accent );
	outline-offset: 2px;
}

.crc__radio {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var( --crc-primary );
}

.crc__option-text {
	font-size: 1rem;
	line-height: 1.4;
}

.crc__warn {
	min-height: 1.4rem;
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #a4262c;
}

/* ---- the trace ----------------------------------------------------- */

/* The one place the widget raises its voice. Showing the user which of their
   answers produced this result is what makes the tool checkable rather than
   an oracle, so it gets its own visual treatment. */

.crc__why {
	margin: 0 0 1.2rem;
	padding: 0.9rem 1rem;
	border-left: 3px solid var( --crc-accent );
	background: color-mix( in srgb, var( --crc-accent ) 7%, transparent );
}

.crc__why-title {
	margin: 0 0 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: color-mix( in srgb, var( --crc-accent ) 80%, var( --crc-ink ) );
}

.crc__why-list {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
}

.crc__why-list li + li {
	margin-top: 0.2rem;
}

/* ---- buttons ------------------------------------------------------- */

.crc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 1.2rem;
}

.crc__btn {
	display: inline-block;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border-radius: var( --crc-radius );
	cursor: pointer;
}

.crc__btn--primary {
	padding: 0.8rem 1.4rem;
	border: 1px solid var( --crc-primary );
	background: var( --crc-primary );
	color: #fff;
}

.crc__btn--primary:hover,
.crc__btn--primary:focus {
	background: color-mix( in srgb, var( --crc-primary ) 85%, #000 );
	color: #fff;
}

.crc__btn--primary[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.crc__btn--quiet {
	padding: 0.8rem 0;
	border: 0;
	background: none;
	color: var( --crc-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.crc__btn:focus-visible {
	outline: 3px solid var( --crc-accent );
	outline-offset: 2px;
}

.crc a.crc__btn--primary {
	margin-top: 0.4rem;
}

/* ---- disclosures --------------------------------------------------- */

.crc__details {
	margin-top: 1.1rem;
	border-top: 1px solid var( --crc-rule );
	padding-top: 0.85rem;
}

.crc__summary {
	font-weight: 700;
	cursor: pointer;
	list-style-position: outside;
}

.crc__summary:focus-visible {
	outline: 3px solid var( --crc-accent );
	outline-offset: 2px;
}

.crc__details[open] .crc__summary {
	margin-bottom: 0.7rem;
}

/* ---- footnotes ----------------------------------------------------- */

.crc__privacy,
.crc__disclaimer,
.crc__provenance {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: color-mix( in srgb, var( --crc-ink ) 70%, transparent );
}

.crc__privacy {
	font-weight: 600;
	color: color-mix( in srgb, var( --crc-ink ) 85%, transparent );
}

.crc__noscript {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var( --crc-rule );
}

/* ---- print --------------------------------------------------------- */

@media print {
	.crc__btn,
	.crc__progress,
	.crc__count {
		display: none;
	}

	.crc__details {
		display: block;
	}

	.crc__details > div {
		display: block !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.crc * {
		transition: none !important;
		animation: none !important;
	}
}