/* Daily Legal Quiz — front-end styles.
   Unlike the other TheLawToKnow plugins (deliberately theme-agnostic),
   this one is intentionally BRANDED to match thelawtoknow-tools's own
   ink-and-gold design system exactly (her explicit ask, 2026-08-31) —
   same hex values as tools.thelawtoknow-tools's globals.css, same
   gold-framed "window" treatment as the Graded Assessment panel there
   (src/components/course/graded-assessment-panel.tsx), same Lady
   Justice statue image (assets/img/lady-justice.png, the transparent
   cropped version, not the black-background one). Gold, black, and
   gray/cream only — no other colors anywhere, including the
   correct/incorrect answer states below, which use gold vs. muted gray
   instead of the usual green/red. */

.dlq-quiz {
	--dlq-gold: #93731f;
	--dlq-gold-hover: #7a5c15;
	--dlq-gold-bright: #e89e1e;
	--dlq-gold-line: rgba(147, 115, 31, 0.4);
	--dlq-ink: #14120d;
	--dlq-ink-soft: #201d16;
	--dlq-surface: #f7f8f9;
	--dlq-surface-2: #efece3;
	--dlq-border: #e2e0d6;

	max-width: 680px;
	margin: 2em 0;
	padding: 1.5em;
	background: var(--dlq-surface);
	border: 1px solid var(--dlq-border);
	border-radius: 4px;
	color: var(--dlq-ink-soft);
	font-family: Georgia, "Times New Roman", Times, serif;
}

/* ---- The golden window: Lady Justice framed in a square gold border,
   same motif as the Graded Assessment panel on tools.thelawtoknow-tools. ---- */

.dlq-quiz__window {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	width: 200px;
	max-width: 100%;
	margin: 0 auto 1.5em;
	padding: 1.25em 1em 1em;
	background: var(--dlq-surface-2);
	border: 1px solid var(--dlq-gold-line);
	border-radius: 2px;
	text-align: center;
}

.dlq-quiz__statue {
	width: 108px;
	height: auto;
	filter: drop-shadow(0 8px 16px rgba(20, 18, 13, 0.18));
}

.dlq-quiz__eyebrow {
	margin: 0;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dlq-gold);
}

.dlq-quiz__header {
	margin-bottom: 1.25em;
	text-align: center;
}

.dlq-quiz__title {
	margin: 0 0 0.4em;
	font-size: 1.5em;
	line-height: 1.2;
	color: var(--dlq-ink);
	font-weight: 700;
}

.dlq-quiz__sub {
	margin: 0 auto;
	max-width: 46em;
	font-size: 0.95em;
	opacity: 0.75;
}

.dlq-quiz__streak {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--dlq-gold);
}

.dlq-quiz__streak:empty {
	display: none;
}

.dlq-question {
	padding: 1em 0;
	border-top: 1px solid var(--dlq-border);
}

.dlq-question:first-child {
	border-top: none;
	padding-top: 0;
}

.dlq-question__number {
	margin: 0 0 0.35em;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dlq-gold);
	opacity: 0.85;
}

.dlq-question__text {
	margin: 0 0 0.75em;
	font-size: 1.08em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--dlq-ink);
}

.dlq-question__choices {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.dlq-choice {
	display: block;
	width: 100%;
	padding: 0.6em 0.9em;
	text-align: left;
	font-family: inherit;
	font-size: 0.98em;
	line-height: 1.35;
	color: var(--dlq-ink-soft);
	background: #fff;
	border: 1px solid var(--dlq-border);
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.dlq-choice:hover:not(:disabled) {
	border-color: var(--dlq-gold);
}

.dlq-choice:disabled {
	cursor: default;
}

.dlq-question.dlq-question--answered .dlq-choice:not(.dlq-choice--correct) {
	opacity: 0.5;
}

.dlq-choice--correct {
	border-color: var(--dlq-gold);
	background: rgba(147, 115, 31, 0.1);
	font-weight: 700;
	color: var(--dlq-ink);
}

.dlq-choice--incorrect {
	border-color: var(--dlq-ink);
	background: var(--dlq-surface-2);
	opacity: 0.7 !important;
}

.dlq-question__feedback {
	display: none;
	margin-top: 0.75em;
	padding: 0.75em 0.9em;
	border-left: 3px solid var(--dlq-gold-line);
	background: var(--dlq-surface-2);
	font-size: 0.92em;
	line-height: 1.5;
}

.dlq-question.dlq-question--answered .dlq-question__feedback {
	display: block;
}

.dlq-question__result {
	margin: 0 0 0.35em;
	font-weight: 700;
	color: var(--dlq-ink);
}

.dlq-question__explanation {
	margin: 0;
	opacity: 0.8;
}

.dlq-quiz__results {
	margin-top: 1.25em;
	padding: 1.5em;
	background: var(--dlq-surface-2);
	border: 1px solid var(--dlq-gold-line);
	text-align: center;
}

.dlq-quiz__score {
	margin: 0 0 0.4em;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--dlq-ink);
}

.dlq-quiz__streak-result {
	margin: 0 0 0.4em;
	font-weight: 700;
	color: var(--dlq-gold);
}

.dlq-quiz__streak-result:empty {
	display: none;
}

.dlq-quiz__tomorrow {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.8;
}

.dlq-quiz__tomorrow strong {
	color: var(--dlq-gold);
}

/* ---- The gateway: her explicit 2026-08-31 ask — the quiz should invite
   the visitor toward the matching real course/tool, not just be a
   standalone game. Sits inside the results panel, only shown once the
   visitor has actually finished today's quiz. ---- */

.dlq-quiz__gateway {
	margin-top: 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid var(--dlq-gold-line);
}

.dlq-quiz__gateway-label {
	margin: 0 0 0.75em;
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dlq-gold);
}

.dlq-quiz__gateway-link {
	display: inline-block;
	margin: 0 0.4em 0.6em;
	padding: 0.55em 1.1em;
	background: var(--dlq-gold);
	color: var(--dlq-ink);
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--dlq-ink);
	border-radius: 2px;
	transition: background 0.15s ease;
}

.dlq-quiz__gateway-link:hover {
	background: var(--dlq-gold-bright);
	color: var(--dlq-ink);
}

.dlq-quiz__disclaimer {
	margin: 1.25em 0 0;
	font-size: 0.8em;
	opacity: 0.55;
	text-align: center;
}