/* ================================================================================================
 * BASELINE — KMA CSS MODULE 07 — KMA QUIZ COMPONENT
 * ================================================================================================
 *
 * FILE: 07-quiz.css
 * VERSION: 1.0
 * Last Updated: 2026-03-21
 *
 * OWNS
 * ----
 * - .km-quiz
 * - .km-quiz-header / .km-quiz-title / .km-quiz-progress
 * - .km-quiz-card / .km-quiz-question
 * - .km-quiz-choices / .km-quiz-choice*
 * - .km-quiz-actions / .km-quiz-btn*
 * - .km-quiz-answer* (answer panel)
 * - Quiz mobile tweaks (@media <= 520px)
 *
 * PURPOSE
 * -------
 * Encapsulated styling for the Quiz HTML widget/component.
 *
 * NOTES
 * -----
 * - Keep every selector prefixed with .km-quiz (or km-quiz-*) to prevent bleed.
 * - This module is self-contained and intended to avoid affecting unrelated UI.
 *
 * IMPORTANT
 * ---------
 * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
 * - This snapshot reflects the working production version.
 *
 * ================================================================================================ */


/* ================================================================================================
 * MODULE 07A — QUIZ OUTER WRAPPER
 * ================================================================================================ */

.km-quiz {

	/**** Constrain quiz width for readability. ****/
	max-width: 900px;

	/**** Center quiz block horizontally. ****/
	margin: 0 auto;
}


/* ================================================================================================
 * MODULE 07B — QUIZ HEADER
 * ================================================================================================ */

.km-quiz-header {

	/**** Lay out title and progress side by side. ****/
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;

	/**** Separate header from card body below. ****/
	margin-bottom: 14px;
}

.km-quiz-title {

	/**** Remove default heading margins for tighter control. ****/
	margin: 0;
}

.km-quiz-progress {

	/**** Smaller, softer progress text. ****/
	font-size: 14px;
	opacity: 0.75;
}


/* ================================================================================================
 * MODULE 07C — QUIZ CARD + QUESTION
 * ================================================================================================ */

.km-quiz-card {

	/**** Card shell styling for quiz content area. ****/
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.06);
	background: #fff;
}

.km-quiz-question {

	/**** Space question from choices below. ****/
	margin: 0 0 16px 0;
}


/* ================================================================================================
 * MODULE 07D — CHOICES LIST + CHOICE ROWS
 * ================================================================================================ */

/* Choices list + spacing */
.km-quiz-choices {

	/**** Space above and below list; keep left indent for markers/letters. ****/
	margin: 12px 0 26px 0;
	padding-left: 1.2em;
}

.km-quiz-choice {

	/**** Add vertical separation between options and make row clickable. ****/
	margin: 10px 0;
	line-height: 1.5;
	cursor: pointer;
}

.km-quiz-choice-letter {

	/**** Reserve aligned width for option letter. ****/
	display: inline-block;
	min-width: 2.2em;
	font-weight: 700;
}

.km-quiz-choice-text {

	/**** Keep option text inline with letter block. ****/
	display: inline;
}


/* ================================================================================================
 * MODULE 07E — CHOICE REVEAL STATES
 * ================================================================================================ */

.km-quiz-choice.is-correct {

	/**** Highlight correct answer when revealed. ****/
	padding: 8px 10px;
	border-radius: 10px;
	border: 2px solid rgba(46, 160, 67, 0.55);
	background: rgba(46, 160, 67, 0.08);
}

.km-quiz-choice.is-dim {

	/**** Fade non-selected / non-correct answers when answer is shown. ****/
	opacity: 0.55;
}


/* ================================================================================================
 * MODULE 07F — BUTTON ROW
 * ================================================================================================ */

.km-quiz-actions {

	/**** Keep action buttons in a flexible row that can wrap. ****/
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}


/* ================================================================================================
 * MODULE 07G — BUTTONS
 * ================================================================================================ */

.km-quiz-btn {

	/**** Button layout and alignment. ****/
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	/**** Button shape and border. ****/
	padding: 10px 14px;
	border-radius: 10px;
	border: 2px solid rgba(0,0,0,0.18);
	background: #fff;

	/**** Interaction + typography. ****/
	cursor: pointer;
	font-weight: 600;
}

.km-quiz-btn:hover {

	/**** Slight lift and shadow on hover. ****/
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.km-quiz-btn:disabled {

	/**** Dim disabled buttons and remove hover motion. ****/
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.km-quiz-btn-primary {

	/**** Primary-action border emphasis. ****/
	border-color: rgba(74, 125, 252, 0.55);
}


/* ================================================================================================
 * MODULE 07H — ANSWER PANEL
 * ================================================================================================ */

.km-quiz-answer {

	/**** Distinct answer reveal panel styling. ****/
	margin-top: 22px;
	padding: 14px 16px;
	border-left: 4px solid #4a7dfc;
	background: #f7f9ff;
	border-radius: 10px;
}

.km-quiz-answer-head {

	/**** Two-column answer header layout: label + summary content. ****/
	display: grid;
	grid-template-columns: 70px 1fr;
	gap: 10px;
	align-items: start;
	margin-bottom: 10px;
}

.km-quiz-answer-label {

	/**** Emphasize answer heading label. ****/
	font-weight: 700;
}

.km-quiz-answer-text {

	/**** Space body text below header and preserve author line breaks. ****/
	margin-top: 10px;
	white-space: pre-line;
}

.km-quiz-answer-image {

	/**** Space image from text content above. ****/
	margin-top: 12px;
}

.km-quiz-answer-image img {

	/**** Responsive answer image styling. ****/
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.12);
}


/* ================================================================================================
 * MODULE 07I — MOBILE TWEAKS
 * ================================================================================================ */

@media (max-width: 520px) {

	.km-quiz-card {

		/**** Reduce card padding on narrow screens. ****/
		padding: 16px;
	}

	.km-quiz-answer-head {

		/**** Stack answer header into one column on small screens. ****/
		grid-template-columns: 1fr;
	}
}


/* ================================================================================================
 * END OF MODULE 07
 * ================================================================================================ */