/* Carbon-readiness assessment. Brand tokens from the child theme. */

.cq-assess {
	max-width: 1220px;
	margin: 0 auto;
	font-family: var(--cq-font-sans, 'Poppins', sans-serif);
}

.cq-assess-title {
	color: var(--cq-ink, #0A2540);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.25;
	text-align: center;
}

.cq-assess-intro {
	color: var(--cq-ink-500, #33547B);
	text-align: center;
	margin: 10px 0 28px;
}

.cq-assess-progress {
	height: 6px;
	border-radius: 3px;
	background: var(--cq-ink-50, #E6EAF0);
	margin-bottom: 26px;
	overflow: hidden;
}

.cq-assess-progress > span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cq-green, #1FA971), var(--cq-teal, #2DBFB0));
	transition: width 0.3s ease;
}

.cq-assess-q {
	color: var(--cq-ink, #0A2540);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.4;
	margin-bottom: 18px;
}

.cq-assess-qnum {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cq-green, #1FA971);
	margin-bottom: 8px;
}

.cq-assess-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cq-assess-option {
	text-align: left;
	background: #ffffff;
	border: 1.5px solid var(--cq-ink-100, #C4CDDB);
	border-radius: 10px;
	padding: 14px 18px;
	font-family: inherit;
	font-size: 15.5px;
	color: var(--cq-ink-500, #33547B);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cq-assess-option:hover {
	border-color: var(--cq-green, #1FA971);
	background: var(--cq-green-tint, #E6F7F1);
}

/* Keyboard focus gets its own additive indicator so it is never confusable
   with a hover resting elsewhere. */
.cq-assess-option:focus-visible {
	outline: 2px solid var(--cq-sky, #3B82F6);
	outline-offset: 2px;
}

.cq-assess-option.is-selected {
	border-color: var(--cq-green, #1FA971);
	background: var(--cq-green-tint, #E6F7F1);
	box-shadow: inset 3px 0 0 var(--cq-green, #1FA971);
}

.cq-assess-option:disabled {
	cursor: default;
	opacity: 0.7;
}

.cq-assess-back {
	background: none;
	border: none;
	color: var(--cq-ink-500, #33547B);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	margin-top: 16px;
	padding: 4px 0;
	text-decoration: underline;
}

/* Result */

.cq-assess-tier {
	text-align: center;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cq-ink-300, #7B90AD);
}

.cq-assess-tier-name {
	text-align: center;
	color: var(--cq-ink, #0A2540);
	font-size: 34px;
	font-weight: 600;
	margin-bottom: 4px;
}

.cq-assess-score {
	text-align: center;
	color: var(--cq-ink-500, #33547B);
	font-size: 14px;
	margin-bottom: 14px;
}

.cq-assess-summary {
	color: var(--cq-ink-500, #33547B);
	text-align: center;
	max-width: 62ch;
	margin: 0 auto 26px;
	line-height: 1.6;
}

.cq-assess-breakdown {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.cq-assess-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--cq-surface, #F7F9FB);
	border: 1px solid var(--cq-ink-50, #E6EAF0);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cq-ink-500, #33547B);
}

.cq-assess-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-top: 5px;
}

.cq-assess-dot--good { background: var(--cq-green, #1FA971); }
.cq-assess-dot--mid  { background: #F59E0B; }
.cq-assess-dot--gap  { background: var(--cq-sky, #3B82F6); }

.cq-assess-disclaimer {
	text-align: center;
	font-size: 12.5px;
	color: var(--cq-ink-300, #7B90AD);
	margin-bottom: 22px;
}

.cq-assess-cta {
	text-align: center;
}

.cq-assess-cta a {
	display: inline-block;
	background: var(--cq-green, #1FA971);
	color: #ffffff !important;
	border-radius: 8px;
	padding: 12px 26px;
	font-weight: 500;
	text-decoration: none;
}

.cq-assess-cta a:hover {
	background: var(--cq-green-600, #1A9163);
}

.cq-assess-restart {
	display: block;
	margin: 14px auto 0;
	background: none;
	border: none;
	color: var(--cq-ink-500, #33547B);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.cq-assess-progress > span { transition: none; }
}

/* ===========================================================================
   Question screen — two columns: the question and its options on the left,
   a "Why this matters" panel on the right. Matches the approved design.
   =========================================================================== */
.cq-assess-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) {
	.cq-assess-grid { grid-template-columns: 1fr; gap: 18px; }
}
.cq-assess-main { min-width: 0; }

/* progress */
.cq-assess-progress {
	height: 6px;
	border-radius: 4px;
	background: #E6EDF4;
	overflow: hidden;
	margin-bottom: 24px;
}
.cq-assess-progress span {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: 4px;
	background: linear-gradient(90deg, #1FA971, #2DBFB0);
	transition: width 0.35s ease;
}

.cq-assess-qnum {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: #117A4F;
	margin-bottom: 10px;
}
.cq-assess-qtext {
	font-size: 21px;
	font-weight: 600;
	color: #0A2540;
	line-height: 1.4;
	margin: 0 0 20px;
}

/* options as radio cards */
.cq-assess-options { display: flex; flex-direction: column; gap: 11px; }
.cq-assess-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: #ffffff;
	border: 1.5px solid #E6EAF0;
	border-radius: 11px;
	padding: 15px 18px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.cq-assess-option:hover { border-color: #7ED9B4; box-shadow: 0 6px 18px -12px rgba(10, 37, 64, 0.35); }
.cq-assess-radio {
	flex: 0 0 21px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	border: 2px solid #1FA971;
	position: relative;
	transition: 0.18s ease;
}
.cq-assess-optlabel { font-size: 14.5px; color: #0A2540; line-height: 1.45; }
.cq-assess-option.is-selected { border-color: #1FA971; background: #E9F7F0; }
.cq-assess-option.is-selected .cq-assess-radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #1FA971;
}
.cq-assess-option:focus-visible { outline: 2px solid #3B82F6; outline-offset: 2px; }

/* navigation */
.cq-assess-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 24px;
}
.cq-assess-back {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	color: #33547B;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cq-assess-back:hover { color: #117A4F; }
.cq-assess-next {
	margin-left: auto;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	background: #1FA971;
	color: #ffffff;
	border-radius: 8px;
	padding: 13px 26px;
	font-size: 14px;
	font-weight: 600;
	transition: background-image 0.2s ease, opacity 0.2s ease;
}
.cq-assess-next:hover:not(:disabled) { background-image: linear-gradient(90deg, #1FA971, #2DBFB0); }
.cq-assess-next:disabled { opacity: 0.45; cursor: not-allowed; }

/* "Why this matters" panel */
.cq-assess-aside {
	background: #EDF8F3;
	border: 1px solid rgba(31, 169, 113, 0.18);
	border-radius: 14px;
	padding: 22px;
}
.cq-assess-aside-ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.cq-assess-aside-ic img { width: 26px; height: 26px; display: block; }
.cq-assess-aside b { display: block; font-size: 15.5px; font-weight: 600; color: #0A2540; margin-bottom: 7px; }
.cq-assess-aside p { font-size: 13px; color: #33547B; line-height: 1.6; margin: 0; }

/* ===========================================================================
   Result screen — the score card (as in the approved result states) beside
   the breakdown of what drove it.
   =========================================================================== */
.cq-assess-resultwrap {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) {
	.cq-assess-resultwrap { grid-template-columns: 1fr; gap: 24px; }
}

.cq-assess-card {
	background: #ffffff;
	border: 1px solid #E6EAF0;
	border-radius: 16px;
	padding: 26px 26px 24px;
	box-shadow: 0 14px 34px -22px rgba(10, 37, 64, 0.35);
}
.cq-assess-card-ic {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #E4F5EC;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.cq-assess-card-ic img { width: 30px; height: 30px; display: block; }
.cq-assess-card-name {
	font-size: 25px;
	font-weight: 600;
	color: #0A2540;
	line-height: 1.2;
	margin: 0 0 6px;
}
.cq-assess-card-score { font-size: 13.5px; color: #33547B; margin: 0 0 14px; }
.cq-assess-card-bar {
	height: 9px;
	border-radius: 5px;
	background: #E6EDF4;
	overflow: hidden;
	margin-bottom: 16px;
}
.cq-assess-card-bar span {
	display: block;
	height: 100%;
	border-radius: 5px;
	transition: width 0.5s ease;
}
/* the bar takes the tone of the tier reached */
.cq-assess-card--low  .cq-assess-card-bar span { background: linear-gradient(90deg, #F0A73C, #E8C23B); }
.cq-assess-card--mid  .cq-assess-card-bar span { background: linear-gradient(90deg, #1FA971, #2DBFB0); }
.cq-assess-card--high .cq-assess-card-bar span { background: linear-gradient(90deg, #1FA971, #2DBFB0); }
.cq-assess-card-text {
	font-size: 14px;
	color: #33547B;
	line-height: 1.65;
	margin: 0 0 20px;
}
.cq-assess-card-cta {
	display: block;
	text-align: center;
	border: 1.5px solid #1FA971;
	color: #117A4F !important;
	background: #ffffff;
	border-radius: 9px;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cq-assess-card-cta:hover { background: #1FA971; color: #ffffff !important; }

.cq-assess-ih {
	font-size: 19px;
	font-weight: 600;
	color: #0A2540;
	margin: 0 0 14px;
}