/* ==========================================================================
   single-quiz.css — sfwd-quiz single template styling
   Loaded conditionally via inc/setup.php on `is_singular('sfwd-quiz')`
   ALONGSIDE _ld-shell.css (the shared LearnDash surface chrome partial).

   Split established 2026-05-17 when single-sfwd-topic.php arrived. The
   chrome (header, footer, container, lesson-scoped tokens, mobile + reduced-
   motion treatments of the chrome) now lives in _ld-shell.css. This file
   owns ONLY the quiz-specific surface:

     - .quiz-body prose container around the_content().
     - The seven ProQuiz override blocks (question list, native radio/check,
       buttons, response panel, correct/incorrect variants, final result).
     - The reduced-motion treatments of those quiz-specific elements.
     - The un-layered escape for the .single-quiz-wrap site-shell layer trap.

   Note: the quiz template renders <article class="quiz-body">, the lesson
   template renders <article class="lesson-body">, and the topic template
   renders <article class="topic-body"> — three slot names that keep their
   own identity even though the chrome wrapping them is shared.
   ========================================================================== */

@layer page-types {

	/* ----------------------------------------------------------------------
	   Quiz body — prose container around the_content().
	   Font size is scoped to .quiz-body (NOT applied globally), same
	   pattern as .lesson-body for prose comfort.
	   ---------------------------------------------------------------------- */

	.quiz-body {
		max-width: var(--lesson-content-width);
		margin: 0 auto;
		padding: 0 2rem 6rem;
		font-size: 1.125rem;
		line-height: 1.6;
		color: var(--color-text-strong);
	}

	.quiz-body h2 {
		font-family: var(--ff-display, "Fraunces", Georgia, serif);
		font-size: clamp(1.5rem, 2.6vw, 2rem);
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-text-strong);
		margin: 3.5rem 0 1.5rem;
		scroll-margin-top: var(--lesson-scroll-margin);
	}

	.quiz-body p {
		margin: 0 0 1.2em;
	}

	/* ----------------------------------------------------------------------
	   ProQuiz overrides — the seven selectors LD ships out of the box,
	   restyled to match the brand. These target the .wpProQuiz_* classes
	   that LD's template_content filter injects into the_content() at
	   render time, so they live below .quiz-body in the cascade.
	   ---------------------------------------------------------------------- */

	/* Question list — each option is a bordered row that picks up a soft
	   gold tint on hover/focus, so it reads as "selectable" without the
	   default blue checkbox bar. */
	.quiz-body .wpProQuiz_questionListItem {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		padding: 0.75rem 1rem;
		margin-bottom: 0.5rem;
		transition: border-color 200ms var(--ease-standard, ease), background-color 200ms var(--ease-standard, ease);
	}

	.quiz-body .wpProQuiz_questionListItem:hover,
	.quiz-body .wpProQuiz_questionListItem:focus-within {
		border-color: var(--color-gold);
		background: var(--color-gold-soft);
	}

	/* Native radio / checkbox — keep the browser control, just tint it. */
	.quiz-body .wpProQuiz_questionListItem input[type="radio"],
	.quiz-body .wpProQuiz_questionListItem input[type="checkbox"] {
		accent-color: var(--color-accent);
	}

	/* Buttons — the brand primary shape (navy fill, white text, navy
	   border, card-radius). Applies to ProQuiz's Start, Restart, Check,
	   and Submit buttons; covers both the startpage variant and the in-quiz
	   variant. */
	.quiz-body .wpProQuiz_startpageHolder .wpProQuiz_button,
	.quiz-body .wpProQuiz_button,
	.quiz-body .wpProQuiz_button2 {
		background: var(--color-accent-strong);
		color: #ffffff;
		border: 2px solid var(--color-accent-strong);
		border-radius: var(--radius-card);
		font-weight: 600;
		padding: 0.85rem 1.4rem;
		min-height: 44px;
		cursor: pointer;
		transition: background-color 200ms var(--ease-standard, ease), border-color 200ms var(--ease-standard, ease), color 200ms var(--ease-standard, ease);
	}

	.quiz-body .wpProQuiz_startpageHolder .wpProQuiz_button:hover,
	.quiz-body .wpProQuiz_button:hover,
	.quiz-body .wpProQuiz_button2:hover,
	.quiz-body .wpProQuiz_startpageHolder .wpProQuiz_button:focus-visible,
	.quiz-body .wpProQuiz_button:focus-visible,
	.quiz-body .wpProQuiz_button2:focus-visible {
		background: var(--color-accent);
		border-color: var(--color-accent);
	}

	.quiz-body .wpProQuiz_startpageHolder .wpProQuiz_button:focus-visible,
	.quiz-body .wpProQuiz_button:focus-visible,
	.quiz-body .wpProQuiz_button2:focus-visible {
		outline: 2px solid var(--color-teal, var(--color-accent));
		outline-offset: 3px;
	}

	/* Response panel — the explanation block that appears under a question
	   after the learner submits or after they hit "Check". Neutral gold
	   accent by default; success/error variants override below. */
	.quiz-body .wpProQuiz_response {
		border-left: 3px solid var(--color-gold);
		background: var(--color-surface-alt);
		border-radius: var(--radius-card);
		padding: 0.65rem 0.9rem;
	}

	.quiz-body .wpProQuiz_correct {
		border-left-color: var(--color-success);
		background: var(--color-success-soft);
	}

	.quiz-body .wpProQuiz_incorrect {
		border-left-color: var(--color-error);
		background: var(--color-error-soft);
	}

	/* Final result panel — the score / pass-fail summary at the end of
	   the quiz. Same gold-accent shape as the per-question response, sized
	   up for the closing-card register. */
	.quiz-body .wpProQuiz_resultState {
		background: var(--color-surface-alt);
		border: 1px solid var(--color-border);
		border-left: 3px solid var(--color-gold);
		padding: 1.25rem 1.5rem;
		border-radius: var(--radius-card);
	}

	/* ----------------------------------------------------------------------
	   Mobile — quiz-body only. Header / footer mobile padding lives in
	   _ld-shell.css.
	   ---------------------------------------------------------------------- */

	@media (max-width: 700px) {

		.quiz-body {
			padding-inline: 1.25rem;
		}
	}

	/* ----------------------------------------------------------------------
	   Reduced motion — quiz-specific elements only.
	   ---------------------------------------------------------------------- */

	@media (prefers-reduced-motion: reduce) {

		.quiz-body .wpProQuiz_questionListItem,
		.quiz-body .wpProQuiz_button,
		.quiz-body .wpProQuiz_button2 {
			transition: none;
		}
	}
}

/* ============================================================
   Un-layered escape — defeats the .site-shell layer trap.
   Same pattern as single-lesson.css. See
   reference_thisismyurl_site_shell_layer_trap.
   ============================================================ */

.single-quiz-wrap {
	padding-block-start: 0;
	margin-block-start: 0;
}