/*
 * Ateko Assessments: quiz styles.
 *
 * Everything is scoped under .ateko-asmt. Colours and fonts come from the Ateko
 * theme's presets, with the theme's own values as fallbacks so the quiz still
 * looks right if the theme changes or is missing. Layout follows Rosey's
 * Figma mocks (intro band, softer cards, results callout).
 *
 * Accessibility target: WCAG 2.1 AA (AODA requires 2.0 AA; 2.1 includes it).
 * Contrast rules, on white unless noted:
 * - --asmt-orange (#FF6229) is a fill behind black text only (7:1)
 * - --asmt-ember (#ee5f2b, 3.3:1) is the orange for indicators: the current
 *   stage, the selected answer's edge and radio
 * - --asmt-orange-text (#c4441a, 5.0:1; 4.4:1 on the band) is the orange for
 *   text: links and the result number
 * - --asmt-edge (#726f6f, 5.0:1) is the lightest edge for a control or
 *   indicator, and the lightest grey for text
 * tests/e2e/a11y.e2e.js measures every pair in every state.
 *
 * Fonts: the Typekit kit has Neue Haas Grotesk Text at 400/500/700 and Display
 * at 500 only, so bold text uses Text 700 and headings Display 500.
 */

.ateko-asmt {
	--asmt-ink: var(--wp--preset--color--contrast, #000);
	--asmt-base: var(--wp--preset--color--base, #fff);
	--asmt-band: #f1efed;
	--asmt-clay: var(--wp--preset--color--clay, #e4dfdc);
	--asmt-clay-mid: var(--wp--preset--color--light-dark-clay, #d1ccca);
	--asmt-edge: var(--wp--preset--color--medium-gray-1, #726f6f);
	--asmt-orange: #ff6229;
	--asmt-orange-hover: #e65825;
	--asmt-ember: var(--wp--preset--color--ember, #ee5f2b);
	--asmt-orange-text: #c4441a;
	--asmt-selected: #ffefeb;
	--asmt-font-display: var(--wp--preset--font-family--font-secondary, "neue-haas-grotesk-display", Arial, sans-serif);
	--asmt-font-text: var(--wp--preset--font-family--font-base, "neue-haas-grotesk-text", Arial, sans-serif);
	--asmt-radius-box: 12px;

	margin: 0 auto;
	color: var(--asmt-ink);
	font-family: var(--asmt-font-text);
	/* Room for the theme's fixed header when the quiz scrolls itself into view. */
	scroll-margin-top: 120px;
}

/* WordPress's constrained layout sets max-width on page content children at
   the same specificity and prints later, so this needs the extra attribute. */
.ateko-asmt[data-ateko-asmt] {
	max-width: 820px;
}

/* The intro band sits flush under the page's hero, so no gap above the quiz. */
.wp-block-post-content > * + .ateko-asmt[data-ateko-asmt] {
	margin-top: 0;
}

/* No hero: the band runs up under the theme's fixed (~100px) header, and its
   padding keeps the text clear of it. */
.wp-block-post-content > .ateko-asmt[data-ateko-asmt]:first-child {
	margin-top: 0;
}

.wp-block-post-content > .ateko-asmt[data-ateko-asmt]:first-child .ateko-asmt__intro {
	padding-top: 180px;
}

.wp-block-post-content > .ateko-asmt[data-ateko-asmt]:last-child {
	margin-bottom: var(--wp--preset--spacing--60, 48px);
}

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

.ateko-asmt p {
	margin: 0;
}

.ateko-asmt__card {
	background: none;
	padding: 0;
}

/* ── Intro band ──────────────────────────────────────────────────────────
 * Full width, while the text lines up with the 820px column: the band is
 * 100vw wide and its side padding is the gap between the column and the
 * viewport edge (% padding is relative to the column).
 */

.ateko-asmt__intro {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 56px calc(50vw - 50%) 52px;
	background: var(--asmt-band);
}

.ateko-asmt__eyebrow {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 14px !important;
}

.ateko-asmt .ateko-asmt__title {
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 2.875rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	margin: 0 0 18px;
}

.ateko-asmt__sub {
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.4;
}

.ateko-asmt__app {
	padding-top: 56px;
}

/* ── Stage indicator ─────────────────────────────────────────────────────
 * A row of numbered stages joined by a line. It is a progress readout, so it
 * is deliberately unlike the answer cards: no hover, no pointer.
 */

.ateko-asmt__stages {
	list-style: none;
	display: grid;
	/* One column per question; quiz.js sets --asmt-stages from the assessment. */
	grid-template-columns: repeat(var(--asmt-stages, 6), 1fr);
	margin: 0 0 48px;
	padding: 0;
	cursor: default;
}

.ateko-asmt__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Connector to the previous stage. Decorative. */
.ateko-asmt__stage + .ateko-asmt__stage::before {
	content: "";
	position: absolute;
	top: 18px;
	right: calc(50% + 24px);
	left: calc(-50% + 24px);
	height: 2px;
	background: var(--asmt-clay);
}

/* Upcoming: soft clay fill, with an edge dark enough (5:1) to see the circle. */
.ateko-asmt__stage-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--asmt-edge);
	border-radius: 50%;
	background: var(--asmt-clay);
	color: var(--asmt-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ateko-asmt__stage.is-done .ateko-asmt__stage-num {
	background: var(--asmt-ink);
	border-color: var(--asmt-ink);
	color: var(--asmt-base);
}

.ateko-asmt__stage.is-current .ateko-asmt__stage-num {
	background: var(--asmt-ember);
	border-color: var(--asmt-ember);
	color: var(--asmt-ink);
}

.ateko-asmt__stage-label {
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--asmt-edge);
}

.ateko-asmt__stage.is-current .ateko-asmt__stage-label {
	color: var(--asmt-ink);
	font-weight: 700;
}

.ateko-asmt__stage-score {
	font-size: 0.875rem;
	color: var(--asmt-ink);
}

.ateko-asmt__stage-score:empty {
	display: none;
}

/* Results: five pips per stage, filled up to the score. The score is shown by
   how many are filled, not by shade, and the "4/5" below repeats it in text. */
.ateko-asmt__pips {
	display: flex;
	gap: 3px;
	margin-top: 2px;
}

.ateko-asmt__pips[hidden] {
	display: none;
}

.ateko-asmt__pip {
	width: 8px;
	height: 8px;
	border: 1px solid var(--asmt-edge);
	border-radius: 50%;
	background: transparent;
}

.ateko-asmt__pip.is-filled {
	background: var(--asmt-ink);
	border-color: var(--asmt-ink);
}

@media (max-width: 640px) {
	.ateko-asmt__stage-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.ateko-asmt__stage-num {
		width: 30px;
		height: 30px;
		font-size: 0.8125rem;
	}
	.ateko-asmt__pips {
		gap: 2px;
	}
	.ateko-asmt__pip {
		width: 5px;
		height: 5px;
	}
	.ateko-asmt__stage + .ateko-asmt__stage::before {
		top: 14px;
		right: calc(50% + 18px);
		left: calc(-50% + 18px);
	}
	.ateko-asmt__intro {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.ateko-asmt__app {
		padding-top: 40px;
	}
}

/* More than six stages (quiz.js adds .is-long): one row needs the full
   820px quiz. Narrower, the row wraps to rows of five, so labels and each
   stage's pips keep their own space. Measured on the quiz, not the window. */
.ateko-asmt__app {
	container-type: inline-size;
}

@container (max-width: 800px) {
	.ateko-asmt__stages.is-long {
		grid-template-columns: repeat(5, 1fr);
		row-gap: 24px;
	}
	/* No connector into the first stage of each row. */
	.ateko-asmt__stages.is-long .ateko-asmt__stage:nth-child(5n + 1)::before {
		display: none;
	}
}

/* ── Question step ───────────────────────────────────────────────────── */

.ateko-asmt__step {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px !important;
}

.ateko-asmt .ateko-asmt__question {
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.6vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: 0;
	margin: 0 0 28px;
	outline: none;
}

.ateko-asmt__options {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

.ateko-asmt__option {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 24px;
	background: var(--asmt-base);
	border: 1px solid var(--asmt-edge);
	border-radius: var(--asmt-radius-box);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ateko-asmt__option:hover {
	border-color: var(--asmt-ink);
}

/* Selected: ember edge (3.3:1) and radio, on a light peach fill. */
.ateko-asmt__option:has(.ateko-asmt__radio:checked) {
	border-color: var(--asmt-ember);
	background: var(--asmt-selected);
}

.ateko-asmt__option:has(.ateko-asmt__radio:focus-visible) {
	outline: 3px solid var(--asmt-ink);
	outline-offset: 2px;
}

.ateko-asmt__radio {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--asmt-ember);
	cursor: pointer;
}

.ateko-asmt__radio:focus-visible {
	outline: none;
}

/* ── Buttons (the theme's pill shape and orange) ─────────────────────── */

.ateko-asmt__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.ateko-asmt__nav .ateko-asmt__btn--primary {
	margin-left: auto;
}

.ateko-asmt__hint {
	margin-left: auto !important;
	font-size: 1rem;
}

.ateko-asmt__hint[hidden] {
	display: none;
}

.ateko-asmt__hint:not([hidden]) + .ateko-asmt__btn--primary {
	margin-left: 0;
}

/* Narrow screens: the hint takes its own line above the buttons, so Back
   stays left and Next stays right. */
@media (max-width: 560px) {
	.ateko-asmt__hint {
		order: -1;
		flex-basis: 100%;
		text-align: right;
	}
	.ateko-asmt__hint:not([hidden]) + .ateko-asmt__btn--primary {
		margin-left: auto;
	}
}

.ateko-asmt__btn {
	display: inline-block;
	padding: calc(1rem - 1px) calc(2.25rem - 1px);
	border: 1px solid transparent;
	border-radius: 9999px;
	font-family: var(--asmt-font-text);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ateko-asmt__btn--primary {
	background: var(--asmt-orange);
	color: var(--asmt-ink);
}

.ateko-asmt__btn--primary:hover {
	background: var(--asmt-orange-hover);
	color: var(--asmt-ink);
}

/* Unavailable until an answer is chosen: a black outline, fully readable,
   with the hint beside it saying why. */
.ateko-asmt__btn--primary:disabled,
.ateko-asmt__btn--primary:disabled:hover {
	background: transparent;
	border-color: var(--asmt-ink);
	color: var(--asmt-ink);
	cursor: not-allowed;
}

.ateko-asmt__btn--ghost {
	background: transparent;
	border-color: var(--asmt-ink);
	color: var(--asmt-ink);
}

.ateko-asmt__btn--ghost:hover {
	background: var(--asmt-band);
}

.ateko-asmt__btn:focus-visible,
.ateko-asmt__restart:focus-visible,
.ateko-asmt__fineprint a:focus-visible {
	outline: 3px solid var(--asmt-ink);
	outline-offset: 3px;
}

.ateko-asmt__btn[hidden] {
	display: none;
}

/* ── Results ─────────────────────────────────────────────────────────── */

.ateko-asmt__results[hidden],
.ateko-asmt__quiz[hidden] {
	display: none;
}

/* The callout: a large soft circle holding the score. */
.ateko-asmt__callout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(340px, 86vw);
	aspect-ratio: 1;
	margin: 0 auto 40px;
	padding: 24px;
	border-radius: 50%;
	background: var(--asmt-band);
	text-align: center;
}

.ateko-asmt .ateko-asmt__results-heading {
	display: inline-block;
	/* Clear of the score's line box: in forced-colour modes the text backplate
	   behind the number would otherwise paint over this rule. */
	margin: 0 0 16px;
	padding: 0 12px 10px;
	border-bottom: 1px solid var(--asmt-ink);
	font-family: var(--asmt-font-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
	outline: none;
}

.ateko-asmt__score {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ateko-asmt__score-num {
	color: var(--asmt-orange-text);
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(5rem, 16vw, 7.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.ateko-asmt__score-den {
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	line-height: 1.1;
}

.ateko-asmt__tier {
	font-family: var(--asmt-font-display);
	font-weight: 500;
	font-size: clamp(1.625rem, 3.5vw, 2rem);
	line-height: 1.1;
	margin: 0 0 12px !important;
}

.ateko-asmt__body {
	font-size: 1.1875rem;
	line-height: 1.5;
	margin-bottom: 28px !important;
}

.ateko-asmt__signals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 28px;
}

.ateko-asmt__signals.is-single {
	grid-template-columns: 1fr;
}

@media (max-width: 560px) {
	.ateko-asmt__signals {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

.ateko-asmt__signal {
	background: var(--asmt-clay);
	border-radius: 8px;
	padding: 18px 24px;
}

.ateko-asmt__signal-label {
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 6px !important;
}

.ateko-asmt__signal-value {
	font-size: 1.1875rem;
	font-weight: 700;
}

.ateko-asmt__cta {
	background: var(--asmt-ink);
	color: var(--asmt-base);
	border-radius: 8px;
	padding: clamp(24px, 4vw, 32px);
	margin-bottom: 28px;
}

.ateko-asmt__cta-eyebrow {
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 12px !important;
}

.ateko-asmt__cta-copy {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: 24px !important;
}

.ateko-asmt__cta .ateko-asmt__btn {
	padding-top: calc(0.8rem - 1px);
	padding-bottom: calc(0.8rem - 1px);
	font-size: 1rem;
}

.ateko-asmt__cta .ateko-asmt__btn:focus-visible {
	outline-color: var(--asmt-base);
}

@media (max-width: 560px) {
	.ateko-asmt__cta-link {
		display: block;
		width: 100%;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		border-radius: 28px;
	}
}

.ateko-asmt__restart {
	display: block;
	margin: 0 auto;
	padding: 8px;
	background: none;
	border: 0;
	color: var(--asmt-orange-text);
	font-family: var(--asmt-font-text);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

/* ── Frame ───────────────────────────────────────────────────────────── */

.ateko-asmt__fineprint {
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid var(--asmt-clay);
	font-size: 1rem;
}

/* Orange like Rosey's mock, 5:1 on white. It differs from the surrounding
   black text by 4.2:1 and gains an underline on hover and focus (WCAG
   technique G183), so colour is not the only cue. */
.ateko-asmt__fineprint a {
	color: var(--asmt-orange-text);
	text-decoration: none !important;
}

.ateko-asmt__fineprint a:hover,
.ateko-asmt__fineprint a:focus-visible {
	text-decoration: underline !important;
}

.ateko-asmt__noscript {
	margin-top: 32px !important;
	padding: 16px 20px;
	background: var(--asmt-clay);
	border-radius: var(--asmt-radius-box);
}

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

/* Windows High Contrast and other forced-colour modes drop backgrounds and
   shadows, so every edge that carries meaning gets a system-colour border. */
@media (forced-colors: active) {
	.ateko-asmt__option,
	.ateko-asmt__stage-num,
	.ateko-asmt__signal,
	.ateko-asmt__cta,
	.ateko-asmt__callout {
		border: 1px solid CanvasText;
	}
	.ateko-asmt__option:has(.ateko-asmt__radio:checked) {
		outline: 2px solid Highlight;
	}
	.ateko-asmt__stage.is-current .ateko-asmt__stage-num {
		border: 3px solid Highlight;
	}
	.ateko-asmt__pip {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
		background: Canvas;
	}
	.ateko-asmt__pip.is-filled {
		background: CanvasText;
	}
	.ateko-asmt__btn--primary:disabled {
		border-color: GrayText;
		color: GrayText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ateko-asmt *,
	.ateko-asmt *::before {
		transition: none !important;
	}
}