/*
 * Sego program quiz — presentation.
 * Design: Figma "Programs Components" 159:93 (quiz-quest1/2/3 + 4 result frames).
 * Colour tokens come from tokens.css; nothing here hard-codes a brand hex except
 * the two translucent result-card fills, which have no token equivalent.
 */

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

.sego-quiz {
	/* Matches the Divi row's max width (880px). At 860px the section heading
	   wrapped onto a second line on desktop. */
	max-width: 880px;
	margin: 0 auto;
	font-family: var(--sego-font-body);
	color: var(--sego-text-secondary);
	text-align: left;

	/* Per-result theme. Defaults are overridden by the [data-program] rules. */
	--sq-accent: var(--sego-teal);
	--sq-card-bg: var(--sego-teal-light);
	--sq-tagline: var(--sq-accent);
}

/* Result themes — one per program. Figma gives each its own accent + card fill. */
.sego-quiz[data-program="rising"] {
	--sq-accent: var(--sego-gold);
	--sq-card-bg: var(--sego-gold-pale);
}
.sego-quiz[data-program="leading"] {
	--sq-accent: var(--sego-mauve);
	--sq-card-bg: var(--sego-mauve);
	/* Figma sets the tagline to dusty plum here, not the accent — the pale-plum
	   accent is unreadable at 13px on white. See spec 08 flag on contrast. */
	--sq-tagline: var(--sego-plum-mid);
}
.sego-quiz[data-program="suite"] {
	--sq-accent: var(--sego-teal-sage);
	--sq-card-bg: rgba(97, 138, 131, 0.7); /* sage teal @70% — no token */
}
.sego-quiz[data-program="next"] {
	--sq-accent: var(--sego-coral);
	--sq-card-bg: rgba(220, 104, 103, 0.5); /* warm coral @50% — no token */
}

/* ---------------------------------------------------------------- section head */

.sego-quiz__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-align: center;
	color: var(--sego-teal);
}

/* The eyebrow turns plum once a result is showing. */
.sego-quiz[data-state="result"] .sego-quiz__eyebrow {
	color: var(--sego-plum);
}

/*
 * The section heading stays visible in EVERY state — user ruling 2026-07-29.
 * (Figma hides it after question 1 and reserves an empty band in its place; we
 * deliberately do not follow that.)
 *
 * Its height is intentionally NOT fixed. It previously carried `height: 64px`,
 * which let wrapped lines overflow *on top of* the card below instead of pushing
 * it down — the heading wrapped to two lines on desktop and three on phone,
 * leaving only a few pixels of real gap above the card.
 */
/*
 * NOTE ON SPECIFICITY for every heading rule below.
 * The quiz renders inside a Divi Code module, so the child theme's own ramp
 * (`h1..h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3`) matches these
 * headings at 0-1-1 and beats a bare single-class selector. Every rule that
 * styles an h2/h3 in here is therefore scoped `.sego-quiz <class>` (0-2-0).
 * Drop the prefix and the colours silently revert to near-black.
 */
.sego-quiz .sego-quiz__heading {
	margin: 16px 0 0;
	font-family: var(--sego-font-heading);
	font-size: 48px;
	font-weight: 500;
	line-height: 56px;
	letter-spacing: -1.44px;
	text-align: center;
	color: var(--sego-plum-mid);
}

/* ------------------------------------------------------------------ the card */

.sego-quiz__card {
	max-width: 680px;
	margin: 40px auto 0;
	padding: 48px;
	background: var(--sego-white);
	border: 1px solid var(--sego-border);
	border-radius: 12px;
}

.sq-builder-note {
	margin: 0;
	text-align: center;
	color: var(--sego-text-secondary);
}

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

.sq-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Q1's card carries extra headroom in the design — it has no Back row to balance. */
.sego-quiz[data-step="0"] .sq-progress {
	margin-top: 40px;
}

.sq-progress__label {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--sego-teal);
}

.sq-progress__bar {
	display: flex;
	gap: 6px;
}

.sq-progress__step {
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: var(--sego-border);
	transition: background 0.2s ease;
}

.sq-progress__step.is-done {
	background: var(--sego-plum);
}

.sego-quiz .sq-question {
	margin: 36px 0 0;
	padding: 0;
	font-family: var(--sego-font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.36px;
	color: var(--sego-gold);
}

.sq-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 32px;
}

.sq-option {
	width: 100%;
	padding: 17px 21px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 28px;
	text-align: left;
	color: var(--sego-text-secondary);
	background: var(--sego-white);
	border: 1px solid var(--sego-border);
	border-radius: 8px;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sq-option:hover {
	border-color: var(--sego-plum-mid);
}

.sq-option.is-selected {
	border-color: var(--sego-plum);
	background: var(--sego-plum-light);
	color: var(--sego-plum);
}

.sq-back-row {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.sq-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--sego-teal);
	background: none;
	border: 0;
	cursor: pointer;
}

.sq-back__icon {
	display: block;
}

/* -------------------------------------------------------------- result state */

.sq-match {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--sego-teal);
}

.sego-quiz .sq-result-heading {
	margin: 16px 0 0;
	padding: 0;
	font-family: var(--sego-font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.36px;
	color: var(--sego-text-secondary);
}

.sego-quiz .sq-result-heading .sq-program {
	color: var(--sq-accent);
}

.sq-tagline {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--sq-tagline);
}

.sq-desc-card {
	margin-top: 28px;
	padding: 28px 24px;
	background: var(--sq-card-bg);
	border-radius: 10px;
}

.sq-desc {
	margin: 0;
	font-size: 17px;
	line-height: 28px;
	color: var(--sego-text-secondary);
}

.sq-meta {
	display: flex;
	gap: 32px;
	margin-top: 20px;
}

.sq-meta__label {
	margin: 0;
	font-size: 11px;
	line-height: 20px;
	color: var(--sego-text-secondary);
}

.sq-meta__value {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--sego-text-secondary);
}

.sq-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

/*
 * Both buttons carry the same 1.5px border (transparent on the primary) so they
 * render identical heights — Figma's literal padding values differ between the
 * two, which would make the outline ~5px taller than the fill.
 */
.sq-cta {
	display: inline-block;
	padding: 13px 28px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: 6px;
	cursor: pointer;
}

.sq-cta--primary,
.sq-cta--primary:hover,
.sq-cta--primary:focus {
	color: var(--sego-white);
	background: var(--sq-accent);
	border-color: var(--sq-accent);
}

.sq-cta--outline,
.sq-cta--outline:hover,
.sq-cta--outline:focus {
	color: var(--sq-accent);
	background: transparent;
	border-color: var(--sq-accent);
}

.sq-retake {
	margin-left: 4px;
	padding: 4px;
	font-family: inherit;
	font-size: 13px;
	line-height: 20px;
	color: var(--sego-text-secondary);
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------- a11y */

.sego-quiz :focus-visible {
	outline: 2px solid var(--sego-plum);
	outline-offset: 2px;
}

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

/* -------------------------------------------------------------- responsive */

@media (max-width: 980px) {
	.sego-quiz .sego-quiz__heading {
		font-size: 36px;
		line-height: 44px;
	}
}

@media (max-width: 767px) {
	.sego-quiz .sego-quiz__heading {
		font-size: 28px;
		line-height: 36px;
		letter-spacing: -0.84px;
	}

	.sego-quiz__card {
		/* Standard gap between the heading and the card on phone. Real now that
		   the heading is no longer height-clamped — it used to measure ~4px. */
		margin-top: 32px;
		padding: 24px 20px;
	}

	.sego-quiz[data-step="0"] .sq-progress {
		margin-top: 0;
	}

	.sego-quiz .sq-question {
		margin-top: 28px;
		font-size: 22px;
		line-height: 30px;
	}

	.sq-option {
		padding: 14px 16px;
		font-size: 16px;
		line-height: 24px;
	}

	.sq-desc,
	.sq-desc-card {
		font-size: 16px;
	}

	.sq-desc-card {
		padding: 24px 18px;
	}

	.sq-meta {
		gap: 24px;
	}

	/* Keep both buttons full-width and the retake link on its own line. */
	.sq-cta {
		flex: 1 1 100%;
		text-align: center;
	}

	.sq-retake {
		margin-left: 0;
	}
}