/*
 * QuizPansa — style front-endu.
 *
 * Kolory, kroje i odstępy pochodzą z tokenów motywu (theme.json → --wp--preset--*),
 * z wartościami zapasowymi, więc wtyczka działa też z motywem bez tych tokenów.
 * Styl płaski jak motyw PANSA.pl v2.0: bez zaokrągleń i cieni.
 *
 * Specyficzność: każdy selektor elementu zaczyna się od .qp-quiz (min. 0,2,0),
 * bo motyw stylizuje treść strony regułami typu `.pansa-page__prose h2` / `:is(ul, ol)`
 * (0,1,1) — bez prefiksu nadpisywałyby nagłówki, listy odpowiedzi i marginesy quizu.
 */
.qp-quiz {
	--qp-primary: var(--wp--preset--color--primary, #0f304d);
	--qp-primary-hover: #0a2438;
	--qp-primary-hover: color-mix(in srgb, var(--qp-primary) 72%, var(--wp--preset--color--accent, #5795ca));
	--qp-accent: var(--wp--preset--color--accent, #5795ca);        /* tylko obramowania / dekoracja */
	--qp-accent-text: var(--pansa-accent-strong, #2e6da4);         /* akcent czytelny jako tekst (5,47:1) */
	--qp-focus: var(--pansa-focus-color, #2e6da4);
	--qp-correct: #1a7f45;                                          /* 5,0:1 na bieli */
	--qp-correct-bg: #eaf6ef;
	--qp-wrong: #c62828;                                            /* 5,6:1 na bieli */
	--qp-wrong-bg: #fcebeb;
	--qp-bg: var(--wp--preset--color--surface, #ffffff);
	--qp-surface: var(--wp--preset--color--page-background, #f0f1f4);
	--qp-text: var(--wp--preset--color--foreground, #0f304d);
	--qp-muted: #4a5d70;
	--qp-muted: color-mix(in srgb, var(--qp-text) 78%, transparent);
	--qp-border: #dde1e7;
	--qp-border: color-mix(in srgb, var(--qp-primary) 12%, transparent);
	--qp-radius: 0;
	--qp-font-body: var(--wp--preset--font-family--body, inherit);
	--qp-font-heading: var(--wp--preset--font-family--heading, inherit);
	--qp-space-xs: var(--wp--preset--spacing--20, 8px);
	--qp-space-s: var(--wp--preset--spacing--30, 16px);
	--qp-space-m: var(--wp--preset--spacing--40, 24px);
	--qp-space-l: var(--wp--preset--spacing--50, 32px);

	box-sizing: border-box;
	max-inline-size: 820px;
	margin: var(--qp-space-m) auto;
	padding: var(--qp-space-l);
	background: var(--qp-bg);
	border: 1px solid var(--qp-border);
	border-top: 4px solid var(--qp-primary);
	border-radius: var(--qp-radius);
	color: var(--qp-text);
	font-family: var(--qp-font-body);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.55;
}

.qp-quiz *,
.qp-quiz *::before,
.qp-quiz *::after {
	box-sizing: border-box;
}

.qp-quiz.qp-quiz--notice {
	color: var(--qp-muted);
	text-align: center;
}

/* --- Nagłówek quizu --- */
.qp-quiz .qp-quiz__header {
	margin: 0 0 var(--qp-space-m);
	padding: 0 0 var(--qp-space-s);
	border-bottom: 1px solid var(--qp-border);
}

.qp-quiz .qp-quiz__title {
	margin: 0 0 var(--qp-space-xs);
	color: var(--qp-text);
	font-family: var(--qp-font-heading);
	font-size: var(--pansa-fs-h2-sm, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
}

.qp-quiz .qp-quiz__intro {
	margin: 0;
	color: var(--qp-muted);
	font-size: var(--pansa-fs-lead, 1.1rem);
}

/* --- Pytanie --- */
.qp-quiz .qp-question {
	min-inline-size: 0;
	margin: 0 0 var(--qp-space-s);
	padding: var(--qp-space-m);
	background: var(--qp-bg);
	border: 1px solid var(--qp-border);
	border-left: 3px solid var(--qp-accent);
	border-radius: var(--qp-radius);
}

.qp-quiz .qp-question.is-unanswered {
	border-color: var(--qp-wrong);
	border-left-color: var(--qp-wrong);
}

.qp-quiz .qp-question__text {
	display: block;
	float: left; /* legend jako zwykły blok — bez „wcięcia" w ramkę fieldsetu */
	inline-size: 100%;
	margin: 0 0 var(--qp-space-s);
	padding: 0;
	color: var(--qp-text);
	font-family: var(--qp-font-heading);
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
}

.qp-quiz .qp-question__text + * {
	clear: both;
}


/* --- Obrazek w treści pytania --- */
.qp-quiz .qp-question__image {
	margin: 0 0 var(--qp-space-s);
}

.qp-quiz .qp-question__image img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--qp-border);
	border-radius: var(--qp-radius);
}

/* --- Odpowiedzi --- */
.qp-quiz .qp-answers {
	display: grid;
	gap: var(--qp-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qp-quiz .qp-answer {
	margin: 0;
	padding: 0;
}

.qp-quiz .qp-answer__label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem var(--qp-space-s);
	background: var(--qp-bg);
	border: 1px solid var(--qp-border);
	border-radius: var(--qp-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.qp-quiz .qp-answer__label:hover {
	background: var(--qp-surface);
	border-color: var(--qp-accent);
}

.qp-quiz .qp-answer__label:has(input:checked) {
	background: var(--qp-surface);
	border-color: var(--qp-primary);
	box-shadow: inset 3px 0 0 var(--qp-primary);
}

.qp-quiz .qp-answer__label:has(input:focus-visible) {
	outline: 3px solid var(--qp-focus);
	outline-offset: 2px;
}

.qp-quiz .qp-answer input[type="radio"] {
	flex: 0 0 auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0.15rem 0 0;
	accent-color: var(--qp-primary);
}

.qp-quiz .qp-answer__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--qp-space-xs);
	min-inline-size: 0;
}

/* --- Obrazek jako element odpowiedzi --- */
.qp-quiz .qp-answer__media {
	display: block;
	margin: 0;
}

.qp-quiz .qp-answer__media img {
	display: block;
	inline-size: 100%;
	max-block-size: 220px;
	object-fit: cover;
	border: 1px solid var(--qp-border);
	border-radius: var(--qp-radius);
}

/* --- Stan po sprawdzeniu: kolor + ikona (nie tylko kolor — WCAG 1.4.1) --- */
.qp-quiz .qp-answer.is-correct .qp-answer__label {
	background: var(--qp-correct-bg);
	border-color: var(--qp-correct);
	box-shadow: inset 3px 0 0 var(--qp-correct);
}

.qp-quiz .qp-answer.is-wrong .qp-answer__label {
	background: var(--qp-wrong-bg);
	border-color: var(--qp-wrong);
	box-shadow: inset 3px 0 0 var(--qp-wrong);
}

.qp-quiz .qp-answer.is-correct .qp-answer__label::after,
.qp-quiz .qp-answer.is-wrong .qp-answer__label::after {
	flex: 0 0 auto;
	align-self: center;
	font-weight: 700;
	line-height: 1;
}

.qp-quiz .qp-answer.is-correct .qp-answer__label::after {
	content: "✓";
	content: "✓" / "poprawna odpowiedź";
	color: var(--qp-correct);
}

.qp-quiz .qp-answer.is-wrong .qp-answer__label::after {
	content: "✕";
	content: "✕" / "błędna odpowiedź";
	color: var(--qp-wrong);
}

/* --- Przyciski (spójne z .pansa-btn motywu) --- */
.qp-quiz .qp-quiz__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qp-space-s);
	margin-top: var(--qp-space-m);
}

.qp-quiz .qp-quiz__submit,
.qp-quiz .qp-quiz__retry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--qp-space-s) var(--qp-space-l);
	appearance: none;
	background: var(--qp-primary);
	color: var(--wp--preset--color--text-inverse, #fff);
	border: 3px solid transparent;
	border-radius: var(--qp-radius);
	font-family: var(--qp-font-body);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.qp-quiz .qp-quiz__submit:hover,
.qp-quiz .qp-quiz__submit:focus-visible,
.qp-quiz .qp-quiz__retry:hover,
.qp-quiz .qp-quiz__retry:focus-visible {
	background: var(--qp-primary-hover);
	color: var(--wp--preset--color--text-inverse, #fff);
}

.qp-quiz .qp-quiz__submit:focus-visible,
.qp-quiz .qp-quiz__retry:focus-visible {
	outline: 3px solid var(--qp-focus);
	outline-offset: 2px;
}

.qp-quiz .qp-quiz__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.qp-quiz [hidden] {
	display: none !important;
}

/* --- Formularz uczestnika (tryb konkursu) --- */
.qp-quiz .qp-contest {
	margin-top: var(--qp-space-m);
	padding: var(--qp-space-m);
	background: var(--qp-surface);
	border: 1px solid var(--qp-border);
	border-radius: var(--qp-radius);
}

.qp-quiz .qp-contest__title {
	margin: 0 0 var(--qp-space-xs);
	color: var(--qp-text);
	font-family: var(--qp-font-heading);
	font-size: var(--pansa-fs-h6, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
}

.qp-quiz .qp-contest__lead {
	margin: 0 0 var(--qp-space-s);
	color: var(--qp-muted);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
}

.qp-quiz .qp-field {
	margin: 0 0 var(--qp-space-s);
}

.qp-quiz .qp-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
}

.qp-quiz .qp-field .qp-req {
	margin-left: 0.15rem;
	color: var(--qp-wrong);
}

.qp-quiz .qp-field input[type="text"],
.qp-quiz .qp-field input[type="email"],
.qp-quiz .qp-field input[type="tel"] {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.6rem 0.75rem;
	background: var(--qp-bg);
	color: var(--qp-text);
	border: 1px solid color-mix(in srgb, var(--qp-primary) 40%, transparent);
	border-radius: var(--qp-radius);
	font-family: var(--qp-font-body);
	font-size: 1rem;
}

.qp-quiz .qp-field input:focus-visible {
	outline: 3px solid var(--qp-focus);
	outline-offset: 1px;
	border-color: var(--qp-primary);
}

/* Honeypot — ukryty przed ludźmi, łapie boty. */
.qp-quiz .qp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qp-quiz .qp-field .qp-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--qp-text);
	font-weight: 400;
}

.qp-quiz .qp-consent input {
	flex: 0 0 auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-top: 0.15rem;
	accent-color: var(--qp-primary);
}

.qp-quiz .qp-field__error {
	display: block;
	margin-top: 0.25rem;
	color: var(--qp-wrong);
	font-size: 0.85rem;
}

.qp-quiz .qp-form-message {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.95rem;
}

.qp-quiz .qp-form-message.is-error {
	color: var(--qp-wrong);
}

/* --- Ekran wyniku --- */
.qp-quiz .qp-quiz__result {
	margin-top: var(--qp-space-m);
	padding: var(--qp-space-l) var(--qp-space-m);
	background: var(--qp-surface);
	border: 1px solid var(--qp-border);
	border-top: 4px solid var(--qp-primary);
	border-radius: var(--qp-radius);
	text-align: center;
}

.qp-quiz .qp-result__score {
	margin-bottom: var(--qp-space-xs);
	color: var(--qp-text);
	font-family: var(--qp-font-heading);
	font-size: var(--pansa-fs-stat, 2rem);
	font-weight: 700;
	line-height: 1.15;
}

.qp-quiz .qp-result__message {
	margin-bottom: var(--qp-space-m);
	font-size: var(--pansa-fs-lead, 1.1rem);
	font-weight: 600;
}

.qp-quiz .qp-result__message.is-high {
	color: var(--qp-correct);
}

.qp-quiz .qp-result__message.is-mid {
	color: var(--qp-text);
}

.qp-quiz .qp-result__message.is-low {
	color: var(--qp-wrong);
}

@media (max-width: 600px) {
	.qp-quiz {
		padding: var(--qp-space-s);
	}

	.qp-quiz .qp-question {
		padding: var(--qp-space-s);
	}

	.qp-quiz .qp-quiz__submit,
	.qp-quiz .qp-quiz__retry {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qp-quiz .qp-answer__label,
	.qp-quiz .qp-quiz__submit,
	.qp-quiz .qp-quiz__retry {
		transition: none;
	}
}

/*
 * Szablon pojedynczego quizu z wtyczki (templates/single-qp_quiz.php).
 * :where() = zerowa specyficzność: gdy motyw ma .pansa-inner / .pansa-page__title,
 * jego reguły wygrywają, a te działają tylko jako zapas dla innych motywów.
 */
:where(.qp-single) :where(.qp-single__main) {
	padding-block: 48px 64px;
}

:where(.qp-single) :where(.qp-single__inner) {
	max-inline-size: 1320px;
	margin-inline: auto;
	padding-inline: 16px;
}

.qp-single .qp-single__column {
	max-inline-size: 820px;
	margin-inline: auto;
}

.qp-single .qp-single__thumb {
	margin: 0 0 var(--wp--preset--spacing--40, 24px);
}

.qp-single .qp-single__thumb img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.qp-single .qp-single__column > .qp-quiz {
	margin-block: 0;
}