/*
 * Study/Quiz mode: the rules that make Quiz Mode actually behave
 * differently from Study Mode on an actual MCQ card. The toggle
 * CONTROL's own visual styling lives in the separate, site-wide
 * quiz-mode-toggle.css instead — split apart specifically so this
 * (larger, MCQ-specific) file only needs to load on pages that
 * actually have MCQ cards to apply these rules to, not on every page
 * just because the toggle button itself appears everywhere.
 *
 * The MCQ card markup (plugin) is IDENTICAL in both modes — the correct
 * answer is always in the DOM, always marked with .is-correct. What
 * changes between modes is purely which CSS is scoped under
 * html[data-quiz-mode="quiz"]. This is the "render once, toggle
 * client-side" approach from the architecture doc: switching modes
 * never re-fetches anything, and Study Mode's fully-revealed markup
 * stays the crawlable/SEO-visible state regardless of which mode a
 * given visitor's browser is currently in.
 *
 * [data-quiz-mode] is set as early as possible via the same anti-flash
 * inline script in wp_head that already handles dark mode (see
 * inc/class-enqueue.php) — this matters even more here than for dark
 * mode, since without it a Quiz Mode visitor would see the correct
 * answer flash on screen for a moment before JS hides it.
 */

/* ---------- Quiz Mode: hide the giveaway until answered ---------- */
html[data-quiz-mode="quiz"] .examission-mcq:not(.is-answered) .examission-mcq__option.is-correct {
	border-color: var( --wp--preset--color--border, #d8dce1 );
	background: transparent;
}

html[data-quiz-mode="quiz"] .examission-mcq:not(.is-answered) .examission-mcq__option.is-correct .examission-mcq__option-letter {
	border-color: var( --wp--preset--color--border, #d8dce1 );
	background: transparent;
	color: inherit;
}

html[data-quiz-mode="quiz"] .examission-mcq:not(.is-answered) .examission-mcq__correct-flag {
	display: none;
}

/* Options are only actually clickable in Quiz Mode, before an answer is
   locked in. In Study Mode (or once answered) the buttons still exist
   for keyboard/screen-reader access, but nothing happens on click —
   see quiz-engine.js, which checks the current mode before acting. */
html[data-quiz-mode="quiz"] .examission-mcq:not(.is-answered) .examission-mcq__option-button {
	cursor: pointer;
}

html[data-quiz-mode="quiz"] .examission-mcq:not(.is-answered) .examission-mcq__option-button:hover {
	background: var( --wp--preset--color--muted, #eef2f8 );
}