/**
 * Fifth Scope Assessment: frontend.
 *
 * Tokens mirror the live Fifth Scope theme: Source Serif 4 headings,
 * Inter body, cream #F7F4EC, slate #718F94, ink #313131.
 */

.fsa {
	--fsa-ink: #313131;
	--fsa-ink-soft: #6c6d74;
	--fsa-cream: #f7f4ec;
	--fsa-slate: #617b7f;
	--fsa-slate-dark: #59757a;
	--fsa-sage: #bfc8ad;
	--fsa-line: #e0dbd0;
	--fsa-surface: #ffffff;
	--fsa-accent: var(--fsa-slate);
	--fsa-radius: 14px;

	color: var(--fsa-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}

.fsa__inner {
	max-width: 46rem;
	margin: 0 auto;
}

/* ---- page-wide arc motif -------------------------------------------- *
 * The motif is painted on the theme's page wrapper rather than on the
 * assessment block, so it runs from the top of the document and continues
 * underneath the navigation. The navbar and the section that holds the
 * assessment both paint cream by default and would otherwise cover it, so
 * both are cleared and the cream moves onto the wrapper instead.
 *
 * Everything keys off `body:has( .fsa )`, the assessment being physically
 * present in the DOM. That works no matter how the page was assembled
 * (plain content, page builder, template), which server-side detection
 * cannot reliably do: a builder stores its layout outside the post, so
 * nothing readable at body_class time proves the shortcode is on the page.
 *
 * The cream that would cover the motif comes from a different element
 * depending on how the page was built: `.tm-main` on a plain content page,
 * the builder's own section wrapper on a builder page. Clear both. The
 * `:has( .fsa )` on the section means only the section actually containing
 * the assessment is affected, never the footer or a sibling section.
 *
 * These are the theme's selectors, not the plugin's. If the theme markup
 * changes, this block is what needs revisiting.
 * ------------------------------------------------------------------- */

body:has( .fsa ) .tm-page {
	background-color: #f7f4ec;
	background-image: url( "../img/arcs.png" );
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 1500px auto;
}

body:has( .fsa ) .uk-navbar-container {
	background-color: transparent;
}

body:has( .fsa ) .tm-main.uk-section-default,
body:has( .fsa ) .uk-section-default:has( .fsa ) {
	background-color: transparent;
}

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

.fsa__panel {
	background: var(--fsa-cream);
	border: 1px solid var(--fsa-line);
	border-radius: var(--fsa-radius);
	padding: clamp( 1.5rem, 4vw, 2.75rem );

	/* Hold one height across the intro and every question so the page does
	   not jump as you advance. The reference is the tallest question (the
	   five-option one); the result screen is naturally taller and simply
	   grows past this. min-height, never height. Content must always win. */
	display: flex;
	flex-direction: column;
	min-height: 36rem;
}

/* Must out-specify the display:flex above, or hidden panels would show. */
.fsa__panel[hidden] {
	display: none;
}

/* A flex item stretches across the cross axis by default, which would pull
   the start button to full width. Only the intro has a button as a direct
   child, so pin that one back to its natural size. */
.fsa__panel > .fsa__btn {
	align-self: flex-start;
}

/* The intro carries the least content, so centre it vertically and the card
   reads as deliberate rather than top-heavy with dead space beneath. */
.fsa__panel--intro {
	justify-content: center;
}

/* Questions: progress stays at the top, the nav is pushed to the bottom, and
   the question sits between them, so the card reads the same on every
   question regardless of how many answers it has.

   Done with margin-top:auto on the nav rather than by letting the question
   flex-grow: .fsa__question is a <fieldset>, and a fieldset as a flex item
   with a growing basis has unreliable intrinsic sizing. It inflated the
   card to roughly double height instead of filling the gap. */
.fsa__panel--questions .fsa__nav {
	margin-top: auto;
}

/* ---- typography ---------------------------------------------------- */

.fsa__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fsa-slate-dark);
}

.fsa__title {
	margin: 0 0 0.85rem;
	font-family: "Source Serif 4", Georgia, serif;
	font-weight: 400;
	font-size: clamp( 1.6rem, 3.4vw, 2.3rem );
	line-height: 1.2;
	color: var(--fsa-ink);
}

.fsa__intro p {
	margin: 0 0 1.4rem;
	color: var(--fsa-ink-soft);
}

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

.fsa__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fsa__btn--primary {
	background: var(--fsa-slate);
	color: #fff;
}

.fsa__btn--primary:hover,
.fsa__btn--primary:focus-visible {
	background: var(--fsa-slate-dark);
}

.fsa__btn--ghost {
	background: transparent;
	color: var(--fsa-ink-soft);
	border-color: var(--fsa-line);
}

.fsa__btn--ghost:hover,
.fsa__btn--ghost:focus-visible {
	color: var(--fsa-ink);
	border-color: var(--fsa-slate);
}

.fsa__btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.fsa__btn:focus-visible,
.fsa__option-input:focus-visible + .fsa__option-marker {
	outline: 2px solid var(--fsa-slate-dark);
	outline-offset: 2px;
}

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

.fsa__progress {
	margin-bottom: 1.8rem;
}

.fsa__progress-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fsa-ink-soft);
}

.fsa__progress-track {
	height: 4px;
	background: rgba( 113, 143, 148, 0.22 );
	border-radius: 999px;
	overflow: hidden;
}

.fsa__progress-bar {
	height: 100%;
	background: var(--fsa-slate);
	border-radius: 999px;
	transition: width 0.35s ease;
}

/* ---- questions ----------------------------------------------------- */

.fsa__question {
	margin: 0;
	padding: 0;
	border: 0;
}

.fsa__question[hidden] {
	display: none;
}

.fsa__question-text {
	display: block;
	padding: 0;
	margin: 0 0 0.4rem;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: clamp( 1.25rem, 2.6vw, 1.6rem );
	font-weight: 400;
	line-height: 1.3;
}

.fsa__question-text:focus {
	outline: none;
}

.fsa__question-help {
	margin: 0 0 1.2rem;
	font-size: 0.9rem;
	color: var(--fsa-ink-soft);
}

.fsa__options {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.fsa__option {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	background: var(--fsa-surface);
	border: 1px solid var(--fsa-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.fsa__option:hover {
	border-color: var(--fsa-slate);
}

.fsa__option-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fsa__option-marker {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	border: 1.5px solid var(--fsa-slate);
	border-radius: 50%;
	background: #fff;
	position: relative;
	transition: border-color 0.16s ease;
}

.fsa__option-input:checked + .fsa__option-marker::after {
	content: "";
	position: absolute;
	inset: 3.5px;
	border-radius: 50%;
	background: var(--fsa-slate);
}

.fsa__option:has( .fsa__option-input:checked ) {
	border-color: var(--fsa-slate);
	background: rgba( 191, 200, 173, 0.24 );
}

.fsa__option-text {
	flex: 1 1 auto;
}

.fsa__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.fsa__nav .fsa__btn--ghost[hidden] {
	display: none;
}

.fsa__nav .fsa__btn--primary {
	margin-left: auto;
}

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

.fsa__result {
	padding: 1.5rem 1.6rem;
	background: var(--fsa-surface);
	border: 1px solid var(--fsa-line);
	border-left: 4px solid var(--fsa-accent);
	border-radius: 10px;
}

.fsa__result-name {
	margin: 0 0 0.3rem;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	font-weight: 400;
	color: var(--fsa-accent);
}

.fsa__result-tagline {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	color: var(--fsa-ink-soft);
}

.fsa__result-body p {
	margin: 0 0 1rem;
}

.fsa__result-bullets {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.fsa__result-bullets li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.fsa__result-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fsa-accent);
}

/* ---- contact form -------------------------------------------------- */

.fsa__contact {
	margin-top: 2rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
	border-top: 1px solid var(--fsa-line);
}

.fsa__contact-heading {
	margin: 0 0 0.4rem;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.3rem;
	font-weight: 400;
}

.fsa__contact-intro p {
	margin: 0 0 1.3rem;
	color: var(--fsa-ink-soft);
	font-size: 0.95rem;
}

.fsa__form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.fsa__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fsa__field--wide,
.fsa__form > .fsa__error,
.fsa__form > .fsa__btn {
	grid-column: 1 / -1;
}

.fsa__form > .fsa__btn {
	justify-self: start;
}

.fsa__field label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fsa-ink-soft);
}

.fsa__req {
	color: #9d4b32;
}

.fsa__field input,
.fsa__field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--fsa-ink);
	background: var(--fsa-surface);
	border: 1px solid var(--fsa-line);
	border-radius: 8px;
}

.fsa__field input:focus,
.fsa__field textarea:focus {
	outline: 2px solid var(--fsa-slate);
	outline-offset: -1px;
	border-color: var(--fsa-slate);
}

.fsa__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

.fsa__success {
	padding: 1.1rem 1.25rem;
	background: rgba( 191, 200, 173, 0.3 );
	border: 1px solid var(--fsa-sage);
	border-radius: 10px;
}

.fsa__success[hidden] {
	display: none;
}

.fsa__error {
	margin: 0.75rem 0 0;
	color: #9d4b32;
	font-size: 0.9rem;
}

.fsa__error[hidden] {
	display: none;
}

.fsa__retake {
	margin-top: 1.75rem;
}

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

@media ( max-width: 560px ) {
	.fsa__panel {
		min-height: 28rem;
	}

	.fsa__form {
		grid-template-columns: 1fr;
	}

	.fsa__nav {
		flex-direction: row-reverse;
	}

	.fsa__nav .fsa__btn {
		flex: 1 1 auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fsa *,
	.fsa *::before,
	.fsa *::after {
		transition-duration: 0.01ms !important;
	}
}

/* ---- inert (placeholder) contact form ------------------------------- */

.fsa__contact--inert .fsa__form {
	opacity: 0.62;
}

.fsa__contact--inert .fsa__field input,
.fsa__contact--inert .fsa__field textarea {
	background: #f4f2ec;
	cursor: not-allowed;
}

.fsa__contact--inert .fsa__btn--primary {
	cursor: not-allowed;
}