/* Quiz engine — loaded on single quiz pages and on articles with a quiz. */

.gkta-quiz {
	--gkta-quiz-border: #ddd;
	--gkta-quiz-muted: #646970;
	--gkta-quiz-correct: #1e7e34;
	--gkta-quiz-correct-bg: #e6f4ea;
	--gkta-quiz-wrong: #b32d2e;
	--gkta-quiz-wrong-bg: #fcebea;
	--gkta-quiz-accent: var(--gkta-primary);

	margin-top: 30px;
	min-height: 360px;
}

.gkta-quiz__progress {
	color: var(--gkta-quiz-muted);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
}

.gkta-quiz__bar {
	background: #eee;
	border-radius: 3px;
	height: 6px;
	margin-bottom: 24px;
	overflow: hidden;
}

.gkta-quiz__bar span {
	background: var(--gkta-quiz-accent);
	display: block;
	height: 100%;
	transition: width 0.3s ease;
}

.gkta-quiz__question {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 20px;
}

.gkta-quiz__question:focus,
.gkta-quiz__result-heading:focus {
	outline: none;
}

.gkta-quiz__options {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}

.gkta-quiz .gkta-quiz__option {
	align-items: center;
	background: #fff;
	border: 2px solid var(--gkta-quiz-border);
	border-radius: 5px;
	color: #333;
	display: flex;
	font-weight: 400;
	gap: 12px;
	min-height: 52px;
	padding: 12px 16px;
	text-align: left;
	width: 100%;
}

.gkta-quiz .gkta-quiz__option:not(:disabled):hover,
.gkta-quiz .gkta-quiz__option:focus-visible {
	background: #fff;
	border-color: var(--gkta-quiz-accent);
	color: #333;
}

.gkta-quiz .gkta-quiz__option:focus-visible {
	outline: 2px solid var(--gkta-quiz-accent);
	outline-offset: 2px;
}

/* Beats the theme's `.site-container button:disabled:hover` (grey, borderless). */
.gkta-quiz .gkta-quiz__option:disabled,
.gkta-quiz .gkta-quiz__option:disabled:hover {
	background: #fff;
	border-width: 2px;
	color: var(--gkta-quiz-muted);
	cursor: default;
}

.gkta-quiz__letter {
	align-items: center;
	background: #f0f0f1;
	border-radius: 50%;
	display: inline-flex;
	flex-shrink: 0;
	font-weight: 700;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.gkta-quiz .gkta-quiz__option.is-correct:disabled {
	background: var(--gkta-quiz-correct-bg);
	border-color: var(--gkta-quiz-correct);
	color: #333;
}

.gkta-quiz .gkta-quiz__option.is-correct .gkta-quiz__letter {
	background: var(--gkta-quiz-correct);
	color: #fff;
}

.gkta-quiz .gkta-quiz__option.is-wrong:disabled {
	background: var(--gkta-quiz-wrong-bg);
	border-color: var(--gkta-quiz-wrong);
	color: #333;
}

.gkta-quiz .gkta-quiz__option.is-wrong .gkta-quiz__letter {
	background: var(--gkta-quiz-wrong);
	color: #fff;
}

.gkta-quiz__verdict {
	font-weight: 700;
	margin-bottom: 12px;
}

.gkta-quiz__verdict.is-correct {
	color: var(--gkta-quiz-correct);
}

.gkta-quiz__verdict.is-wrong {
	color: var(--gkta-quiz-wrong);
}

.gkta-quiz__explanation {
	background: #f7f7f7;
	border-left: 4px solid var(--gkta-quiz-accent);
	margin-bottom: 20px;
	padding: 12px 16px;
}

.gkta-quiz__explanation > div > :last-child {
	margin-bottom: 0;
}

.gkta-quiz__result {
	border: 2px solid var(--gkta-quiz-border);
	border-radius: 5px;
	padding: 30px 20px;
	text-align: center;
}

.gkta-quiz__score {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gkta-quiz__score-number {
	color: var(--gkta-quiz-accent);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.gkta-quiz__score-label {
	color: var(--gkta-quiz-muted);
}

.gkta-quiz__share {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 16px;
}

.gkta-quiz .gkta-quiz__share-whatsapp {
	background: #128c7e;
}

.gkta-quiz .gkta-quiz__share-twitter {
	background: #000;
}

.gkta-quiz .gkta-quiz__share a:hover,
.gkta-quiz .gkta-quiz__share a:focus {
	color: #fff;
	opacity: 0.9;
}

@media only screen and (min-width: 600px) {

	.gkta-quiz__options {
		grid-template-columns: 1fr 1fr;
	}
}

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

	.gkta-quiz__bar span {
		transition: none;
	}
}

/* Quiz archives — /quiz/ and /quiz/category/{slug}/. */


.gkta-quiz-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-bottom: 30px;
}

.gkta-quiz-card {
	border: 1px solid #ddd;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.gkta-quiz-card__title {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 8px;
}

.gkta-quiz-card__title a {
	color: #333;
	text-decoration: none;
}

.gkta-quiz-card__title a:hover,
.gkta-quiz-card__title a:focus {
	color: var(--gkta-primary);
}

.gkta-quiz-card__meta {
	color: #646970;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 4px 12px;
	margin-bottom: 16px;
}

.gkta-quiz-card__start {
	align-self: flex-start;
	font-size: 15px;
	margin-top: auto;
	padding: 10px 20px;
}

/* Article quiz (below a current affairs article)
--------------------------------------------- */

.gkta-article-quiz {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-top: 4px solid var(--gkta-primary);
	border-radius: 6px;
	margin: 32px 0;
	padding: 20px 22px;
}

.gkta-article-quiz__kicker {
	color: var(--gkta-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.gkta-article-quiz__title {
	font-size: 21px;
	margin: 0;
}

.gkta-article-quiz .gkta-quiz {
	margin-top: 18px;
	min-height: 0;
}

.gkta-article-quiz__more {
	border-top: 1px solid #eee;
	font-size: 15px;
	margin: 20px 0 0;
	padding-top: 12px;
}

.gkta-article-quiz__more span {
	color: #999;
	margin: 0 6px;
}

.gkta-quiz-source {
	background: #f6f7f7;
	border-left: 4px solid var(--gkta-primary);
	padding: 10px 14px;
}

@media only screen and (max-width: 600px) {

	.gkta-article-quiz {
		padding: 16px;
	}

}

/* Answer key (single quiz page)
--------------------------------------------- */

.gkta-answer-key {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	margin: 32px 0;
}

.gkta-answer-key summary {
	cursor: pointer;
	font-weight: 700;
	padding: 14px 18px;
}

.gkta-answer-key[open] summary {
	border-bottom: 1px solid #eee;
}

.gkta-answer-key__list {
	margin: 0;
	padding: 12px 18px 12px 40px;
}

.entry-content .gkta-answer-key__list li {
	margin-bottom: 16px;
}

.entry-content .gkta-answer-key__q {
	font-weight: 600;
	margin-bottom: 4px;
}

.entry-content .gkta-answer-key__a {
	color: var(--gkta-quiz-correct, #1e7e34);
	margin-bottom: 4px;
}

.gkta-answer-key__e {
	color: #50575e;
	font-size: 15px;
}