/*
Theme Name: PARLO IMiD
Theme URI: https://imid.parlo.pl
Description: Motyw potomny Twenty Twenty-Five przygotowany dla Instytutu Matki i Dziecka (projekt 6/DPF/2026). Skonfigurowany pod wymagania WCAG 2.1 AA: kontrasty >= 4.5:1 dla tekstu i >= 3:1 dla elementow interfejsu, widoczny fokus, obsluga klawiatura, wsparcie dla powiekszenia do 200%.
Author: PARLO sp. z o.o.
Author URI: https://edu-platformy.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parlo-imid
Tags: accessibility-ready, block-styles, full-site-editing
*/

/* ==========================================================================
   DOSTEPNOSC — WCAG 2.1 AA
   ========================================================================== */

/* 2.4.7 Focus Visible + 1.4.11 Non-text Contrast
   Fokus musi byc widoczny na kazdym tle. Podwojny outline (ciemny + jasny)
   gwarantuje kontrast zarowno na jasnym, jak i ciemnym podlozu. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--base);
	border-radius: 2px;
}

/* Nie usuwamy outline dla myszy bez zapewnienia alternatywy */
:where(a, button):focus:not(:focus-visible) {
	outline: 2px solid transparent;
}

/* 2.4.1 Bypass Blocks — link "przejdz do tresci" */
.parlo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: underline;
}
.parlo-skip-link:focus {
	left: 0;
}

/* 1.4.4 Resize Text — plynna typografia bez utraty czytelnosci przy 200% */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 1.4.10 Reflow — brak poziomego przewijania do 320px */
body {
	overflow-x: hidden;
}
img, video, iframe, table {
	max-width: 100%;
}

/* 2.2.2 Pause, Stop, Hide + 2.3.1 Three Flashes
   Respektujemy preferencje ograniczenia ruchu */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 1.4.12 Text Spacing — tresc nie moze sie urywac przy zwiekszonych odstepach */
p, li, dd, dt, blockquote, figcaption {
	overflow-wrap: break-word;
}

/* 1.4.1 Use of Color — linki w tekscie ciaglym odroznialne nie tylko kolorem.
   Wykluczamy komponenty, ktore sa linkami opakowujacymi (kafle, karty),
   przyciski i nawigacje — tam rozroznienie daje ksztalt i tlo. */
.entry-content p > a:not(.wp-element-button),
.entry-content li > a:not(.wp-element-button),
.imid-footer p > a,
.parlo-lesson__content p > a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Linki-komponenty: bez podkreslenia w stanie spoczynku */
.imid-tile,
.imid-tile *,
.imid-btn,
.parlo-btn,
.parlo-course__title a,
.parlo-sidebar__nav a,
.parlo-step a {
	text-decoration: none;
}

/* 3.3.2 Labels or Instructions — pola obowiazkowe */
.parlo-required {
	color: var(--wp--preset--color--error);
	font-weight: 700;
}

/* 3.3.1 Error Identification — komunikaty bledow nie tylko kolorem */
.parlo-field-error {
	display: block;
	margin-top: 0.35rem;
	padding-left: 1.5rem;
	position: relative;
	color: var(--wp--preset--color--error);
	font-size: 0.9375rem;
}
.parlo-field-error::before {
	content: "\26A0";
	position: absolute;
	left: 0;
	font-size: 1.1em;
}

/* Tabele — czytelne obramowania o kontrascie >= 3:1 */
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.8rem;
}
.wp-block-table th {
	background: var(--wp--preset--color--surface);
	text-align: left;
}

/* Szerokie tabele przewijaja sie wewnatrz kontenera, nie rozpychaja strony */
.wp-block-table {
	overflow-x: auto;
}

/* Formularze — minimalny rozmiar celu dotykowego (2.5.5 AAA, dobra praktyka AA) */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button {
	min-height: 44px;
	font-size: 1rem;
}
input[type="checkbox"],
input[type="radio"] {
	width: 1.35rem;
	height: 1.35rem;
}

/* Pola formularza — widoczne obramowanie (1.4.11) */
input, select, textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	padding: 0.5rem 0.75rem;
}

/* Tryb wysokiego kontrastu systemowego */
@media (forced-colors: active) {
	:where(a, button):focus-visible {
		outline: 3px solid CanvasText;
	}
}

/* Wydruk — czytelnosc dokumentow */
@media print {
	.parlo-skip-link,
	.wp-block-navigation {
		display: none !important;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
}


/* ==========================================================================
   UKŁAD APLIKACYJNY — wg handoffu Claude Design
   Sidebar 272px (jasny), top bar 72px, tło #F5F7FA.
   ========================================================================== */

.parlo-app {
	--parlo-sidebar-w: 272px;
	--parlo-topbar-h: 72px;
	display: grid;
	grid-template-columns: var(--parlo-sidebar-w) minmax(0, 1fr);
	grid-template-rows: var(--parlo-topbar-h) 1fr;
	grid-template-areas:
		"sidebar topbar"
		"sidebar main";
	min-height: 100vh;
	background: var(--wp--preset--color--surface);
}

.parlo-app.is-collapsed {
	--parlo-sidebar-w: 72px;
}

/* --- Panel boczny --- */
.parlo-sidebar {
	grid-area: sidebar;
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wp--preset--color--divider);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.parlo-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--parlo-topbar-h);
	padding: 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	text-decoration: none;
	flex-shrink: 0;
}

.parlo-sidebar__brand img,
.parlo-sidebar__brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	flex-shrink: 0;
	object-fit: contain;
	/* Wyglad znaku zastepczego trzymamy TU, nie w stylach inline —
	   inaczej panel kursow i panel zgloszen rozjezdzaja sie wizualnie. */
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.parlo-sidebar__brand-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	line-height: 1.25;
}

.parlo-sidebar__brand-sub {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.3;
}

.parlo-sidebar__nav {
	flex: 1;
	padding: 16px 12px;
}

.parlo-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.parlo-sidebar__nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 12px;
	border-radius: 8px;
	border-left: 4px solid transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color 150ms ease, color 150ms ease;
}

.parlo-sidebar__nav a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

/* Stan bieżący — nie tylko kolorem: tło + obramowanie + pogrubienie */
.parlo-sidebar__nav a[aria-current="page"] {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
	border-left-color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.parlo-sidebar__nav a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	box-shadow: none;
}

.parlo-sidebar__foot {
	border-top: 1px solid var(--wp--preset--color--divider);
	padding: 12px;
}

.parlo-sidebar__foot a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
}

.parlo-sidebar__foot a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.parlo-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.parlo-sidebar__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Stan zwinięty — same ikony */
.is-collapsed .parlo-sidebar__label,
.is-collapsed .parlo-sidebar__brand-text {
	display: none;
}

.is-collapsed .parlo-sidebar__nav a,
.is-collapsed .parlo-sidebar__foot a,
.is-collapsed .parlo-sidebar__brand {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
	border-left-width: 0;
	gap: 0;
}

/* --- Górny pasek --- */
.parlo-topbar {
	grid-area: topbar;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--parlo-topbar-h);
	padding: 0 24px;
	background: var(--wp--preset--color--card);
	border-bottom: 1px solid var(--wp--preset--color--divider);
	position: sticky;
	top: 0;
	z-index: 20;
}

.parlo-topbar__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	flex-shrink: 0;
}

.parlo-topbar__toggle:hover {
	background: var(--wp--preset--color--surface);
}

.parlo-topbar__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.parlo-topbar__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.parlo-topbar__spacer {
	flex: 1;
}

.parlo-topbar__user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.parlo-topbar__user-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.parlo-topbar__avatar,
.parlo-topbar img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-dark);
}

.parlo-topbar__logout {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	border-radius: 6px;
}

.parlo-topbar__logout:hover {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface);
	text-decoration: underline;
}

/* --- Obszar treści --- */
.parlo-app__main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.parlo-content {
	flex: 1;
	padding: 40px 48px;
}

.parlo-content__title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	text-wrap: pretty;
}

.parlo-content__lead {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 32px;
}

.parlo-app__footer {
	padding: 20px 48px;
	border-top: 1px solid var(--wp--preset--color--divider);
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

.parlo-app__footer p {
	margin: 0;
}

/* --- Karty --- */
.parlo-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
	padding: 24px 28px 28px;
}

.parlo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 24px;
}

.parlo-empty {
	text-align: center;
	color: var(--wp--preset--color--text-muted);
}

/* --- Pasek postępu --- */
.parlo-progress {
	height: 10px;
	border-radius: 5px;
	background: var(--wp--preset--color--divider);
	overflow: hidden;
}

.parlo-progress__bar {
	height: 100%;
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
}

/* --- Etykiety stanu --- */
.parlo-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 700;
	border-radius: 6px;
	padding: 4px 10px;
}

.parlo-badge--progress {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
}

.parlo-badge--new {
	background: #eef2f7;
	color: var(--wp--preset--color--text-secondary);
}

/* --- Widok mobilny --- */
@media (max-width: 1024px) {
	.parlo-app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"topbar"
			"main";
	}

	.parlo-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(272px, 85vw);
		transform: translateX(-100%);
		transition: transform 200ms ease;
		z-index: 100;
	}

	.parlo-app.is-open .parlo-sidebar {
		transform: translateX(0);
		box-shadow: 0 0 0 100vmax rgba(20, 24, 31, 0.5);
	}

	.parlo-content {
		padding: 24px 20px;
	}

	.parlo-app__footer {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.parlo-sidebar,
	.parlo-sidebar__nav a,
	.parlo-topbar__toggle {
		transition: none;
	}
}

@media print {
	.parlo-sidebar,
	.parlo-topbar {
		display: none !important;
	}
	.parlo-app {
		display: block;
	}
}

/* Pasek administracyjny WordPressa nie może nachodzić na panel */
.admin-bar .parlo-sidebar,
.admin-bar .parlo-topbar {
	top: 32px;
}

.admin-bar .parlo-sidebar {
	height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	.admin-bar .parlo-sidebar,
	.admin-bar .parlo-topbar {
		top: 46px;
	}
	.admin-bar .parlo-sidebar {
		height: calc(100vh - 46px);
	}
}

/* Panel jako samodzielny widok — bez marginesów motywu */
body.parlo-app-body {
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--surface);
}

/* ==========================================================================
   KARTY KURSÓW — wg handoffu
   ========================================================================== */

.parlo-courses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 24px;
}

.parlo-course {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
	overflow: hidden;
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

.parlo-course:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 16px rgba(20, 24, 31, 0.10);
}

.parlo-course__thumb {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	display: block;
}

.parlo-course__thumb--empty {
	background: repeating-linear-gradient(
		135deg,
		#eef2f7,
		#eef2f7 10px,
		#dbe3ee 10px,
		#dbe3ee 20px
	);
}

.parlo-course__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 28px 28px;
	flex: 1;
}

.parlo-course__title {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.parlo-course__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.parlo-course__title a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.parlo-course__progress-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: -6px;
}

.parlo-course__meta {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.parlo-course__cta {
	margin: auto 0 0;
}

.parlo-badge {
	align-self: flex-start;
	margin: 0;
}

.parlo-badge--done {
	background: #e7f2ec;
	color: var(--wp--preset--color--success);
}

/* --- Przyciski --- */
.parlo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.parlo-btn--primary {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 2px solid var(--wp--preset--color--primary);
}

.parlo-btn--primary:hover,
.parlo-btn--primary:focus {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.parlo-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.parlo-btn--outline:hover,
.parlo-btn--outline:focus {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-dark);
}

.parlo-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* ==========================================================================
   LEARNDASH w układzie panelu
   ========================================================================== */

.parlo-app .learndash-wrapper {
	background: transparent;
}

.parlo-app .learndash-wrapper .ld-item-list,
.parlo-app .learndash-wrapper .ld-course-status,
.parlo-app .learndash-wrapper .ld-tabs-content,
.parlo-app .learndash-wrapper .ld-focus-content {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
}

/* Przyciski LearnDash — spójne z projektem */
.parlo-app .learndash-wrapper .ld-button,
.parlo-app .learndash-wrapper input[type="submit"] {
	background: var(--wp--preset--color--primary);
	border-radius: 8px;
	font-weight: 700;
	min-height: 48px;
	border: 2px solid var(--wp--preset--color--primary);
}

.parlo-app .learndash-wrapper .ld-button:hover,
.parlo-app .learndash-wrapper input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

.parlo-app .learndash-wrapper .ld-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Pasek postępu LearnDash */
.parlo-app .learndash-wrapper .ld-progress-bar {
	border-radius: 5px;
	background: var(--wp--preset--color--divider);
	height: 10px;
}

.parlo-app .learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
	height: 10px;
}

/* Stany kroków kursu — czytelne, nie tylko kolorem */
.parlo-app .learndash-wrapper .ld-status-complete {
	background: var(--wp--preset--color--success);
}

.parlo-app .learndash-wrapper .ld-status-incomplete {
	background: var(--wp--preset--color--text-muted);
}

/* Ścieżka nawigacji w panelu */
.parlo-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	margin-bottom: 12px;
	color: var(--wp--preset--color--text-muted);
}

.parlo-breadcrumb a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	text-decoration: none;
}

.parlo-breadcrumb a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   WIDOK MODUŁU — układ dwukolumnowy (artboard 3)
   ========================================================================== */

.parlo-content--course {
	padding: 32px 40px;
}

.parlo-course-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.parlo-lesson__title {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
	text-wrap: pretty;
}

.parlo-lesson__content > *:first-child {
	margin-top: 0;
}

/* --- Panel modułów --- */
.parlo-modules {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
	position: sticky;
	top: 96px;
	overflow: hidden;
}

.parlo-modules__head {
	padding: 20px 24px;
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.parlo-modules__title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.parlo-modules__meta {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 10px;
}

.parlo-progress--sm {
	height: 8px;
	border-radius: 4px;
}

.parlo-progress--sm .parlo-progress__bar {
	border-radius: 4px;
}

.parlo-modules__list {
	list-style: none;
	margin: 0;
	padding: 8px;
	counter-reset: none;
}

.parlo-step a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px 12px;
	border-radius: 8px;
	border-left: 4px solid transparent;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: background-color 150ms ease;
}

.parlo-step a:hover {
	background: var(--wp--preset--color--surface);
}

.parlo-step a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}

/* Znacznik stanu */
.parlo-step__mark {
	display: grid;
	place-items: center;

	/* 🚨 Rozmiar w `em`, nie w px. Przy powiekszeniu tekstu (pasek
	   dostepnosci, zoom przegladarki) cyfra rosla, a kolko zostawalo
	   28 px — numer wychodzil poza obrys. `em` skaluje kolko razem
	   z czcionka, wiec cyfra zostaje wysrodkowana na kazdym poziomie.
	   2.15em przy 0.8125rem ≈ 28 px, czyli wyglad bez zmian na 100%. */
	width: 2.15em;
	height: 2.15em;
	font-size: 0.8125rem;
	line-height: 1;
	border-radius: 50%;
	font-weight: 700;
	flex-shrink: 0;

	/* Cyfra ma stac w osi kolka niezaleznie od kroju i wysokosci linii. */
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.parlo-step__mark svg {
	width: 16px;
	height: 16px;
}

.parlo-step__mark--done {
	background: var(--wp--preset--color--success);
}

.parlo-step__mark--current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.parlo-step__mark--upcoming {
	border: 2px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	background: transparent;
}

.parlo-step__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.parlo-step__title {
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* Etykieta stanu — informacja nie tylko kolorem (WCAG 1.4.1) */
.parlo-step__state {
	font-size: 0.8125rem;
	font-weight: 700;
}

.parlo-step--done .parlo-step__state {
	color: var(--wp--preset--color--success);
}

.parlo-step--current .parlo-step__state {
	color: var(--wp--preset--color--primary-dark);
}

.parlo-step--upcoming .parlo-step__state {
	color: var(--wp--preset--color--text-muted);
}

/* Moduł otwarty w tej chwili */
.parlo-step.is-here > a {
	background: var(--wp--preset--color--primary-tint);
	border-left-color: var(--wp--preset--color--primary);
}

.parlo-step.is-here .parlo-step__title {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

/* --- Nawigacja LearnDash pod treścią --- */
.parlo-app .learndash-wrapper .ld-content-actions {
	background: transparent;
	border: 0;
	padding: 20px 0 0;
	margin-top: 20px;
	border-top: 1px solid var(--wp--preset--color--divider);
}

.parlo-app .learndash-wrapper .ld-content-action {
	margin: 0;
}

/* LearnDash: kapsułkowe przyciski -> prostokątne wg projektu */
.parlo-app .learndash-wrapper .ld-button,
.parlo-app .learndash-wrapper a.ld-button {
	border-radius: 8px !important;
	font-weight: 700;
	padding: 0 24px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.parlo-app .learndash-wrapper .ld-status {
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 4px 10px;
}

.parlo-app .learndash-wrapper .ld-status-unlocked,
.parlo-app .learndash-wrapper .ld-status-progress {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
}

/* Ukrycie zdublowanego nagłówka LearnDash (tytuł mamy własny) */
.parlo-app .learndash-wrapper .ld-lesson-header,
.parlo-app .learndash-wrapper .ld-focus-header {
	display: none;
}

@media (max-width: 1100px) {
	.parlo-course-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.parlo-modules {
		position: static;
	}

	.parlo-content--course {
		padding: 24px 20px;
	}
}

.parlo-course__summary {
	margin: 20px 0 24px;
	padding: 20px;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.parlo-course__summary .parlo-course__progress-row {
	margin-bottom: 0;
}

/* ==========================================================================
   AKCJE POD TREŚCIĄ MODUŁU

   Struktura LearnDash:
   .ld-content-actions
     ├ .ld-content-action           → <a> Poprzedni
     ├ .ld-content-action           → <form> + <a> Wróć do kursu
     └ .ld-content-action           → <a> Następny

   Cel: trzy przyciski w rzędzie, równej wysokości; „Wróć do kursu"
   w osobnym wierszu pod nimi, wyśrodkowany.
   ========================================================================== */

.parlo-app .learndash-wrapper .ld-content-actions {
	display: grid;
	/* Rowne kolumny: skrajne przyciski trzymaja krawedzie, srodkowy jest
	   zawsze w osi tresci niezaleznie od tego, ile akcji jest widocznych. */
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"prev complete next"
		"back back back";
	align-items: stretch;
	justify-items: center;
	gap: 16px;
	padding: 24px 0 0;
	margin-top: 20px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--divider);
	background: transparent;
}

.parlo-app .learndash-wrapper .ld-content-action {
	display: flex;
	align-items: stretch;
	margin: 0;
	position: static;
}

.parlo-app .learndash-wrapper .ld-content-action:nth-child(1) {
	grid-area: prev;
	justify-self: start;
}

.parlo-app .learndash-wrapper .ld-content-action:nth-child(2) {
	grid-area: complete;
	position: relative;
}

.parlo-app .learndash-wrapper .ld-content-action:nth-child(3) {
	grid-area: next;
	justify-self: end;
}

/* 🚨 PRZEPROJEKTOWANA 21.09.2026 — pozycje przyciskow skakaly miedzy lekcjami.
   `display: none` na pustej akcji USUWALO kolumne z gridu, wiec `1fr auto 1fr`
   przeliczalo sie i „Oznacz jako ukonczone" wypadalo raz po lewej, raz po
   prawej. Teraz kolumna zostaje, tylko jej zawartosc jest niewidoczna —
   srodkowy przycisk stoi w tym samym miejscu w kazdej lekcji. */
.parlo-app .learndash-wrapper .ld-content-action.ld-empty {
	visibility: hidden;
	pointer-events: none;
}

.parlo-app .learndash-wrapper form.sfwd-mark-complete {
	display: flex;
	align-items: stretch;
	margin: 0;
}

/* Jednakowe wymiary wszystkich trzech przycisków.
   input[type=submit] wymaga height, bo nie honoruje min-height jak <a>. */
.parlo-app .learndash-wrapper .ld-content-actions a.ld-button,
.parlo-app .learndash-wrapper input.learndash_mark_complete_button {
	box-sizing: border-box;
	/* Jednakowa szerokosc wszystkich trzech: wczesniej 200/164/250 px,
	   co wygladalo na przypadkowe. min-height zamiast height, zeby dluzsza
	   etykieta („Oznacz jako ukonczone") nie byla przycinana. */
	width: 100%;
	max-width: 260px;
	min-height: 56px;
	height: auto;
	padding-block: 12px;
	text-align: center;
	line-height: 1.25;
	min-height: 64px;
	width: 240px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	padding: 0 20px !important;
	margin: 0 !important;
	white-space: normal;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
}

/* „Oznacz jako ukończone" — akcja zmieniająca stan, odróżniona kolorem.
   Biały na #1c6b3f = 6.51:1 (WCAG AA). */
.parlo-app .learndash-wrapper input.learndash_mark_complete_button {
	position: relative;
	background: var(--wp--preset--color--success) !important;
	border: 2px solid var(--wp--preset--color--success) !important;
	color: #fff !important;
	padding-right: 56px !important;
	padding-left: 20px !important;
	justify-content: flex-start;
	text-align: left;
}

.parlo-app .learndash-wrapper input.learndash_mark_complete_button:hover,
.parlo-app .learndash-wrapper input.learndash_mark_complete_button:focus {
	background: #14532d !important;
	border-color: #14532d !important;
}

.parlo-app .learndash-wrapper input.learndash_mark_complete_button::after {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	font-size: 1.125rem;
}

.parlo-app .learndash-wrapper input.learndash_mark_complete_button:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Nawigacja między krokami */
.parlo-app .learndash-wrapper .ld-content-actions a.ld-button {
	background: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	color: #fff;
}

.parlo-app .learndash-wrapper .ld-content-actions a.ld-button:hover,
.parlo-app .learndash-wrapper .ld-content-actions a.ld-button:focus {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.parlo-app .learndash-wrapper .ld-content-actions a.ld-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.parlo-app .learndash-wrapper .ld-content-actions .ld-icon {
	flex-shrink: 0;
}

/* „Wróć do kursu" — wyjęte z kolumny środkowej do własnego wiersza */
.parlo-app .learndash-wrapper .ld-course-step-back {
	position: absolute;
	left: 50%;
	top: calc(100% + 16px);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--primary-dark);
	border-radius: 6px;
}

.parlo-app .learndash-wrapper .ld-course-step-back:hover {
	background: var(--wp--preset--color--surface);
	text-decoration: underline;
}

.parlo-app .learndash-wrapper .ld-course-step-back:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Rezerwa miejsca na link w drugim wierszu siatki */
.parlo-app .learndash-wrapper .ld-content-actions::after {
	content: "";
	grid-area: back;
	min-height: 44px;
}

/* --- Wąskie ekrany: jedna kolumna --- */
@media (max-width: 1000px) {
	.parlo-app .learndash-wrapper .ld-content-actions {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"complete"
			"prev"
			"next"
			"back";
		justify-items: stretch;
	}

	.parlo-app .learndash-wrapper .ld-content-action:nth-child(1),
	.parlo-app .learndash-wrapper .ld-content-action:nth-child(3) {
		justify-self: stretch;
	}

	.parlo-app .learndash-wrapper .ld-content-action:nth-child(2) {
		position: static;
	}

	.parlo-app .learndash-wrapper .ld-content-actions a.ld-button,
	.parlo-app .learndash-wrapper input.learndash_mark_complete_button,
	.parlo-app .learndash-wrapper form.sfwd-mark-complete {
		width: 100%;
	}

	.parlo-app .learndash-wrapper .ld-course-step-back {
		position: static;
		transform: none;
		grid-area: back;
		width: 100%;
		margin-top: 4px;
	}

	.parlo-app .learndash-wrapper .ld-content-actions::after {
		display: none;
	}
}

/* ==========================================================================
   ODSTĘPY W PANELU — korekta rytmu pionowego (10.09.2026)
   ========================================================================== */

.parlo-content {
	padding: 44px 48px;
}

.parlo-content__title {
	margin-bottom: 12px;
}

.parlo-content__lead {
	margin-bottom: 36px;
}

/* Karty kursów */
.parlo-course__body {
	gap: 16px;
	padding: 28px 28px 32px;
}

.parlo-courses {
	gap: 28px;
}

/* Sidebar — powietrze wokół pozycji */
.parlo-sidebar__nav {
	padding: 20px 12px;
}

.parlo-sidebar__nav ul {
	gap: 6px;
}

.parlo-sidebar__brand {
	padding: 0 20px;
	gap: 12px;
}

/* Top bar */
.parlo-topbar {
	padding: 0 28px;
	gap: 20px;
}

/* Panel modułów */
.parlo-modules__head {
	padding: 24px;
}

.parlo-modules__title {
	margin-bottom: 8px;
}

.parlo-modules__meta {
	margin-bottom: 14px;
}

.parlo-modules__list {
	padding: 12px;
}

.parlo-step a {
	padding: 12px;
	gap: 14px;
}

.parlo-step + .parlo-step {
	margin-top: 4px;
}

/* Breadcrumb → tytuł */
.parlo-breadcrumb {
	margin-bottom: 20px;
}

/* Karta modułu */
.parlo-card {
	padding: 32px;
}

.parlo-lesson__title {
	margin-bottom: 20px;
}

/* Karta treści w panelu — wspólna dla wszystkich podstron aplikacyjnych. */
.parlo-content__card {
	padding: 2rem 2.25rem;
}

.parlo-content__card > *:first-child { margin-top: 0; }
.parlo-content__card > *:last-child { margin-bottom: 0; }

.parlo-empty__text {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--text-muted, #4B5563);
}

@media (max-width: 782px) {
	.parlo-content__card { padding: 1.25rem; }
}

/* Nagłówki wewnątrz karty treści panelu.
   🚨 H2 z bloków Gutenberga brały rozmiar `x-large` z theme.json (36 px)
   i były WIĘKSZE niż H1 podstrony (32 px) — hierarchia wyglądała odwrotnie.
   Skala niżej trzyma porządek: H1 32 → H2 24 → H3 19 → H4 17. */
.parlo-content__card h2,
.parlo-content__card .wp-block-heading:is(h2) {
	margin: 2rem 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.parlo-content__card h3,
.parlo-content__card .wp-block-heading:is(h3) {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.35;
	font-weight: 700;
}

.parlo-content__card h4,
.parlo-content__card .wp-block-heading:is(h4) {
	margin: 1.25rem 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.4;
	font-weight: 700;
}

/* Pierwszy nagłówek nie odsuwa się od górnej krawędzi karty. */
.parlo-content__card > h2:first-child,
.parlo-content__card > h3:first-child { margin-top: 0; }

/* ==========================================================================
   STRONY PUBLICZNE — KARTA TREŚCI I PRZYCISKI
   --------------------------------------------------------------------------
   Podstrony renderowały surową treść bez oprawy, a odnośniki „Szczegóły
   ścieżki: …" wyglądały jak zwykłe linki w akapicie. Ten sam język wizualny
   co moduł platformy: biała karta na szarym tle, nagłówki w hierarchii,
   wyróżnione odnośniki kierujące dalej.

   WCAG: karta to wyłącznie warstwa wizualna — nie zmienia kolejności treści
   ani struktury nagłówków. Przyciski mają wysokość 44 px (2.5.5), widoczny
   fokus (2.4.7) i kontrast liczony, nie dobierany na oko (1.4.3).
   ========================================================================== */

.imid-page {
	max-width: 62rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.imid-page__title {
	margin: 0 0 1.5rem;
}

/* Karta treści — odpowiednik .parlo-content__card z panelu. */
.imid-page__card {
	background: var(--wp--preset--color--card, #fff);
	border: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
	padding: 2.25rem 2.5rem 2.5rem;
}

.imid-page__card > *:first-child { margin-top: 0; }
.imid-page__card > *:last-child { margin-bottom: 0; }

/* Hierarchia nagłówków w karcie: H1 poza kartą, H2 24, H3 19. */
.imid-page__card h2 {
	margin: 2.25rem 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.imid-page__card h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.35;
}

.imid-page__card h2:first-child,
.imid-page__card h3:first-child { margin-top: 0; }

.imid-page__card p { line-height: 1.7; }
.imid-page__card ul,
.imid-page__card ol { line-height: 1.7; padding-left: 1.5rem; }
.imid-page__card li { margin-bottom: 0.4rem; }

/* Odnośnik prowadzący dalej — wygląda jak przycisk, pozostaje linkiem,
   więc czytnik ekranu nadal zapowiada go jako odnośnik. */
.imid-page__card a.imid-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	margin-top: 0.25rem;
	padding: 0 1.25rem;
	background: var(--wp--preset--color--primary, #0A6FE0);
	color: #fff;
	border: 2px solid var(--wp--preset--color--primary, #0A6FE0);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

.imid-page__card a.imid-link-btn:hover,
.imid-page__card a.imid-link-btn:focus-visible {
	background: #0B4FA8;
	border-color: #0B4FA8;
	color: #fff;
}

/* Fokus musi być widoczny także na tle przycisku (2.4.7). */
.imid-page__card a:focus-visible {
	outline: 3px solid #14181f;
	outline-offset: 2px;
}

@media (max-width: 782px) {
	.imid-page { padding: 1.5rem 1rem 3rem; }
	.imid-page__card { padding: 1.25rem; border-radius: 10px; }
}

/* Tryb wysokiego kontrastu — karta i przyciski jak reszta serwisu. */
html[data-a11y-contrast="1"] .imid-page__card {
	background: #000 !important;
	border-color: #fff !important;
	box-shadow: none !important;
}

html[data-a11y-contrast="1"] .imid-page__card a.imid-link-btn {
	background: #ffff00 !important;
	color: #000 !important;
	border-color: #ffff00 !important;
}

/* Blok grupy w środku karty też nie może zwężać treści. */
.imid-page__card > .wp-block-group,
.imid-page__card > * {
	max-width: none;
}


/* Karta treści dopasowana do kontenera nagłówka.
   Nagłówek: max-width 1200px + padding 0 24px (assets/public.css).
   Ten sam wzór daje zgodność krawędzi na każdej szerokości okna —
   wcześniej karta miała własne marginesy i rozjeżdżała się poniżej 1250 px. */
.imid-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 24px 4rem;
}

/* theme.json zwęża zawartość układem „constrained" — karta ma zająć
   całą szerokość kontenera, tak jak nawigacja w nagłówku. */
.imid-page > .imid-page__title,
.imid-page > .imid-page__card {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.imid-page__card > * { max-width: none; }

@media (max-width: 782px) {
	.imid-page { padding: 1.5rem 16px 3rem; }
}

/* Przycisk nie potrzebuje podkreślenia — kształt i tło wystarczą, żeby go
   odróżnić od tekstu (1.4.1 spełnione przez obrys i wielkość, nie sam kolor).
   theme.json podkreśla wszystkie linki w treści, stąd !important. */
.imid-page__card a.imid-link-btn,
.imid-page__card a.imid-link-btn:hover,
.imid-page__card a.imid-link-btn:focus-visible {
	text-decoration: none !important;
}

/* 🚨 Regresja po dodaniu karty: `.imid-page__card > * { max-width: none }`
   zdjęło ograniczenie z kontenera tabeli, więc `.pih-wrap` rozciągał się do
   szerokości zawartości (1106 px) zamiast kurczyć się i przewijać. Efekt:
   ucięty przycisk „Zapisz się" i poziomy przewijak całej strony.

   `max-width: none` miało pozwolić treści zająć całą szerokość karty —
   ale musi to być OGRANICZONE do tej szerokości, nie zdjęte całkiem. */
.imid-page__card > * {
	max-width: 100%;
}

/* Kontener przewijanej tabeli nigdy nie może przekroczyć karty. */
.imid-page__card .pih-wrap,
.imid-page__card .pir-table-wrap,
.imid-page__card figure.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/* Element flex/grid kurczy się poniżej zawartości tylko z min-width: 0. */
.imid-page,
.imid-page__card {
	min-width: 0;
}

/* Tabela harmonogramu rozpychała stronę o 105 px mimo `overflow-x: auto`
   na `.pih-wrap`. Kontener przewijany kurczy się poniżej swojej zawartości
   tylko wtedy, gdy CAŁY łańcuch przodków ma `min-width: 0` — inaczej
   domyślne `min-width: auto` pozwala im rosnąć do szerokości treści.
   Blok Gutenberga `entry-content` w środku karty nie miał tego ustawienia. */
.imid-page__card,
.imid-page__card > .entry-content,
.imid-page__card .wp-block-group,
.imid-page__card .entry-content > * {
	min-width: 0;
}

.imid-page__card .pih-wrap {
	max-width: 100%;
	min-width: 0;
}

/* 🚨 Tabela harmonogramu rozpychała CAŁĄ stronę (body.scrollWidth 1105 przy
   oknie 1000), mimo `overflow-x: auto` na `.pih-wrap`.

   Przyczyna: `.pih-wrap` to zwykły blok w przepływie — jego szerokość wynika
   z rodzica, ale gdy rodzic sam nie ma ograniczenia, łańcuch rośnie do
   szerokości tabeli (min-width: 900px + zawartość komórek). Ustawienie
   min-width na przodkach nie pomogło, bo to nie jest kontekst flex/grid.

   Rozwiązanie: kontener dostaje twardą szerokość równą karcie. */
.imid-page__card .pih-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Blok treści Gutenberga nie może przekroczyć karty. */
.imid-page__card > .entry-content {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

/* Zabezpieczenie ostateczne — strona nigdy nie przewija się w poziomie. */
.imid-page {
	overflow-x: clip;
}

/* Przy szerokich ekranach tabela wymagała przewinięcia o ~34 px, żeby
   pokazać przycisk „Zapisz się" — kolumna „Grupa docelowa" zabierała za dużo
   miejsca. Na ekranach mieszczących całą tabelę przewijanie jest zbędne
   i myli: przycisk wygląda na ucięty.

   `min-width: 900px` z wtyczki zostaje — chroni układ na wąskich ekranach,
   gdzie przewijanie jest właściwym rozwiązaniem (1.4.10 dopuszcza je
   dla tabel danych). */
@media (min-width: 1100px) {
	.imid-page__card .pih-table {
		min-width: 0;
		table-layout: fixed;
	}

	.imid-page__card .pih-table th:nth-child(2),
	.imid-page__card .pih-table td:nth-child(2) {
		width: 21%;
	}

	.imid-page__card .pih-table th:nth-child(1),
	.imid-page__card .pih-table td:nth-child(1) { width: 19%; }

	.imid-page__card .pih-table th:nth-child(3),
	.imid-page__card .pih-table td:nth-child(3) { width: 19%; }

	/* 🚨 Kolumna „Moduly" ma dwuwierszowy naglowek z dopiskiem
	   „wyklad / praktyka". Przy 8% dopisek (nowrap) wylewal sie na sasiednia
	   kolumne „Miejsce". 13% mieszcza go w calosci. */
	.imid-page__card .pih-table th:nth-child(4),
	.imid-page__card .pih-table td:nth-child(4) { width: 13%; }

	.imid-page__card .pih-table th:nth-child(5),
	.imid-page__card .pih-table td:nth-child(5) { width: 14%; }

	.imid-page__card .pih-table th:nth-child(6),
	.imid-page__card .pih-table td:nth-child(6) { width: 14%; }
}

/* Prawa krawędź ramki tabeli była ucięta: `overflow-x: clip` na
   `.entry-content` przycinało obrys kontenera dokładnie na granicy.
   Szerokość jest już ograniczona przez `width: 100%` na `.pih-wrap`,
   więc przycinanie jest zbędne — i psuje wygląd ramki. */
.imid-page__card > .entry-content {
	overflow-x: visible;
}

/* Bezpiecznik przeciw poziomemu przewijaniu zostaje, ale na poziomie
   strony, gdzie nie dotyka obrysów pojedynczych elementów. */
.imid-page {
	overflow-x: clip;
}

/* Ramka tabeli wystawała 2 px poza rodzica i była przycinana.
   `.pih-wrap` miał `width: 100%` bez `box-sizing: border-box`, więc obrys
   1 px z każdej strony doliczał się DO szerokości rodzica (1070 + 2 = 1072).
   Przy `overflow-x: clip` na `.imid-page` te 2 px znikały razem z krawędzią. */
.imid-page__card .pih-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
   NAWIGACJA v2 — dopiecie po testach w przegladarce
   Poprzednie podejscie ustawialo szerokosc na samych przyciskach, ale to
   `.ld-content-action` (opakowanie) wyznacza kolumne, a `justify-items:
   center` zwezal je do szerokosci tresci. Stad 250/164/182 px i skakanie
   srodkowego przycisku. Tutaj: opakowania wypelniaja kolumny, przyciski
   wypelniaja opakowania, wiec wszystkie trzy maja identyczne wymiary.
   ========================================================================== */

.parlo-app .learndash-wrapper .ld-content-actions {
	justify-items: stretch;
}

.parlo-app .learndash-wrapper .ld-content-action,
.parlo-app .learndash-wrapper form.sfwd-mark-complete {
	width: 100%;
	justify-content: center;
}

/* Skrajne przyciski przy krawedziach, srodkowy w osi tresci. */
.parlo-app .learndash-wrapper .ld-content-action:nth-child(1) { justify-content: flex-start; }
.parlo-app .learndash-wrapper .ld-content-action:nth-child(2) { justify-content: center; }
.parlo-app .learndash-wrapper .ld-content-action:nth-child(3) { justify-content: flex-end; }

.parlo-app .learndash-wrapper .ld-content-actions a.ld-button,
.parlo-app .learndash-wrapper input.learndash_mark_complete_button {
	/* Stala szerokosc zamiast wyznaczanej tekstem — „Poprzedni Modul"
	   i „Oznacz jako ukonczone" maja teraz ten sam rozmiar. */
	width: 100%;
	min-width: 0;
	max-width: 240px;
	/* `height` z wczesniejszej reguly przycinal dluzsza etykiete do 2 linii;
	   min-height pozwala przyciskowi urosnac, gdy tekst sie zawija. */
	height: auto;
	min-height: 56px;
	padding: 12px 20px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

/* „Wroc do kursu" zawsze wysrodkowany pod przyciskami, niezaleznie od tego,
   ile akcji jest widocznych. */
.parlo-app .learndash-wrapper .ld-content-actions .ld-course-link,
.parlo-app .learndash-wrapper .ld-content-actions a[href*="sfwd-courses"] {
	grid-area: back;
	justify-self: center;
	margin-top: 4px;
}

@media (max-width: 782px) {
	.parlo-app .learndash-wrapper .ld-content-actions {
		grid-template-columns: 1fr;
		grid-template-areas: "prev" "complete" "next" "back";
	}
	.parlo-app .learndash-wrapper .ld-content-action:nth-child(1),
	.parlo-app .learndash-wrapper .ld-content-action:nth-child(2),
	.parlo-app .learndash-wrapper .ld-content-action:nth-child(3) {
		justify-content: center;
	}
	.parlo-app .learndash-wrapper .ld-content-actions a.ld-button,
	.parlo-app .learndash-wrapper input.learndash_mark_complete_button {
		max-width: 100%;
	}
	/* Na waskim ekranie pusta akcja zajmowalaby caly wiersz — tu ukrywamy
	   ja calkiem, bo kolumny i tak nie ma. */
	.parlo-app .learndash-wrapper .ld-content-action.ld-empty { display: none; }
}

/* --- SAM PRZYCISK „Oznacz jako ukończone" na środku ---
   Przy postępie liniowym LearnDash nie renderuje „Następny moduł", dopóki
   lekcja nie jest ukończona. W pierwszej lekcji nie ma też „Poprzedni",
   więc zostaje jedna widoczna akcja — a trójkolumnowa siatka trzymała ją
   w środkowej kolumnie z pustą przestrzenią po bokach, co wygląda na
   przesunięcie w prawo.

   `:has()` wykrywa układ, w którym skrajne akcje są puste, i zwija siatkę
   do jednej kolumny. Selektor jest wspierany przez Chrome, Safari i Firefox
   od 2023 — a gdy przeglądarka go nie zna, zostaje poprzedni układ, więc
   brak wsparcia niczego nie psuje. */

/* Puste obie skrajne akcje = tylko „Oznacz jako ukończone". */
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) {
	grid-template-columns: 1fr;
	grid-template-areas: "complete" "back";
}
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) .ld-content-action.ld-empty {
	display: none;
}
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) .ld-content-action,
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) .ld-content-action:nth-child(1),
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) .ld-content-action:nth-child(2),
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) .ld-content-action:nth-child(3) {
	justify-content: center;
	justify-self: center;
	margin-inline: auto;
}
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) form.sfwd-mark-complete {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
}
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) input.learndash_mark_complete_button,
.parlo-app .learndash-wrapper .ld-content-actions:has(.ld-content-action:nth-child(1).ld-empty):has(.ld-content-action:nth-child(3).ld-empty) a.ld-button {
	margin-inline: auto;
}

/* --- AKCJA ZE SRODKOWYM PRZYCISKIEM ---
   `.ld-content-action` z „Oznacz jako ukonczone" trzyma tez odnosnik
   „Wroc do kursu". Oba sa dziecmi tego samego kontenera flex, wiec link
   przesuwal formularz o ~8px w lewo. Formularz zajmuje teraz cala szerokosc
   akcji i centruje przycisk samodzielnie — dziala tak samo przy jednej,
   dwoch i trzech widocznych akcjach. */
.parlo-app .learndash-wrapper .ld-content-action form.sfwd-mark-complete {
	flex: 1 1 100%;
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
}
.parlo-app .learndash-wrapper .ld-content-action form.sfwd-mark-complete input.learndash_mark_complete_button {
	margin-inline: auto;
}

/* Padding akcji przesuwal wysrodkowany formularz o polowe swojej wartosci,
   bo obok stoi jeszcze odnosnik „Wroc do kursu". Odstepy daje `gap` siatki. */
.parlo-app .learndash-wrapper .ld-content-action:has(form.sfwd-mark-complete) {
	padding-inline: 0;
}

/* --- Cały kafelek kursu klikalny ---
   Zamiast owijać kafelek w <a> (co zagnieżdża przycisk w linku — niepoprawny
   HTML) rozciągamy istniejący odnośnik tytułu pseudoelementem. W DOM zostaje
   JEDEN link do kursu, więc czytnik ekranu nie czyta go dwa razy, a fokus
   klawiatury działa jak dotąd: tytuł → przycisk „Rozpocznij". */
.parlo-course--link {
	position: relative;
}
.parlo-course--link .parlo-course__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Przycisk musi zostać nad warstwą odnośnika, inaczej jego własny
   :hover i :focus przestają działać. */
.parlo-course--link .parlo-course__cta,
.parlo-course--link .parlo-progress {
	position: relative;
	z-index: 2;
}
/* Kursor i podświetlenie na całej powierzchni — sygnał, że kafelek klika. */
.parlo-course--link { cursor: pointer; }
.parlo-course--link:hover {
	border-color: var(--wp--preset--color--primary, #0A6FE0);
	box-shadow: 0 4px 16px rgba(20, 24, 31, 0.10);
}
/* Fokus na tytule ma obrysować cały kafelek, nie sam tekst — inaczej
   użytkownik klawiatury nie wie, że aktywny jest kafelek (WCAG 2.4.7). */
.parlo-course--link:focus-within {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: 2px;
}
.parlo-course--link .parlo-course__link:focus-visible {
	outline: none;
}
/* Zaznaczanie tekstu w kafelku nie powinno otwierać kursu — user-select
   zostaje, a klik w zaznaczony tekst obsługuje przeglądarka. */
.parlo-course--link .parlo-course__body { user-select: text; }

/* --- Ramka kafelka kursu ---
   🚨 Odkad CALY kafelek jest klikalny (parlo-course--link), jego ramka
   to granica komponentu interaktywnego — WCAG 1.4.11 wymaga 3:1.
   Domyslny #DDE2E8 dawal tylko 1,30:1 wzgledem bialego tla strony.
   #75828f (kolor `border` z palety) daje 3,93:1. */
.parlo-course--link {
	border-color: var(--wp--preset--color--border, #75828f);
}

/* --- LOGO W SIDEBARZE PANELU ---
   Reguly `.parlo-sidebar__brand-mark` byly pisane pod ZNAK ZASTEPCZY
   (kwadrat 40x40 z tlem i napisem „IMiD"). Prawdziwe logo jest pionowe
   126x160, wiec w kwadracie z tlem wyglada ciasno i sprawia wrazenie
   przycietego. Obrazek dostaje wlasne reguly: bez tla, bez zaokraglenia,
   pelna wysokosc kontenera. */
.parlo-sidebar__brand img {
	width: auto;
	height: 40px;
	max-width: 44px;
	object-fit: contain;
	background: none;
	border-radius: 0;
	flex-shrink: 0;
}
html[data-a11y-contrast="1"] .parlo-sidebar__brand img {
	content: url("assets/img/logo-imid-white.png");
}

/* --- MENU MOBILNE: nakladka i przycisk zamykania ---
   🚨 Przyciemnienie bylo robione przez `box-shadow: 0 0 0 100vmax` na
   panelu — to tylko efekt wizualny, nieklikalny. Po otwarciu menu przycisk
   hamburgera znikal pod panelem i nie bylo jak wyjsc (Escape dziala tylko
   z klawiatury, a to widok dotykowy). */
.parlo-app__overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(20, 24, 31, 0.5);
	border: 0;
}
.parlo-app__overlay[hidden] { display: none; }

/* Przycisk zamykania w rogu panelu. 44px = minimalny cel dotykowy
   (WCAG 2.5.5). Widoczny tylko na waskich ekranach — na desktopie panel
   zwija sie hamburgerem, ktory pozostaje dostepny. */
.parlo-sidebar__close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #14181f);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.parlo-sidebar__close:hover {
	background: var(--wp--preset--color--surface, #F5F7FA);
}
.parlo-sidebar__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: -3px;
}

@media (max-width: 782px) {
	.parlo-sidebar__close { display: block; }
	/* Panel nad nakladka. */
	.parlo-app.is-open .parlo-sidebar { z-index: 100; }
	/* Cien 100vmax juz niepotrzebny — przyciemnia nakladka, ktora
	   dodatkowo przechwytuje dotyk. */
	.parlo-app.is-open .parlo-sidebar { box-shadow: none; }
}

/* --- Wezwanie do testu pod trescia lekcji ---
   LearnDash wypisuje test jako wiersz tabeli w sekcji „Tresc Modul" —
   sam tekst z ikona, bez wygladu przycisku. Kursant nie wie, ze ma tam
   kliknac, zeby ukonczyc modul. */
.parlo-lesson__quiz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--border, #75828f);
	border-radius: 8px;
	background: var(--wp--preset--color--primary-tint, #E6F0FB);
}
.parlo-lesson__quiz-text { flex: 1 1 260px; }
.parlo-lesson__quiz-title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast, #14181f);
}
.parlo-lesson__quiz-note {
	margin: 0;
	font-size: 0.9375rem;
	/* #374151 na tle #E6F0FB daje 9,22:1 — z zapasem ponad prog 4,5:1. */
	color: var(--wp--preset--color--text-secondary, #374151);
}
.parlo-lesson__quiz .parlo-btn { flex-shrink: 0; }

html[data-a11y-contrast="1"] .parlo-lesson__quiz {
	background: #000 !important;
	border-color: #fff !important;
}
html[data-a11y-contrast="1"] .parlo-lesson__quiz-title,
html[data-a11y-contrast="1"] .parlo-lesson__quiz-note { color: #fff !important; }

@media (max-width: 600px) {
	.parlo-lesson__quiz { flex-direction: column; align-items: stretch; }
	.parlo-lesson__quiz .parlo-btn { text-align: center; }
}

/* --- Stara lista „Tresc Modul" ukryta ---
   LearnDash wypisuje test jako wiersz tabeli z niebieskim naglowkiem.
   Zastapil ja `.parlo-lesson__quiz` — wyrazny przycisk z wyjasnieniem.
   Dwa wezwania do tego samego testu myla, wiec oryginal chowamy.

   ⚠️ `display:none` jest tu bezpieczne: link do testu istnieje takze
   w `.parlo-lesson__quiz` oraz w nawigacji kursu po prawej, wiec zaden
   sposob dotarcia do quizu nie znika (WCAG 2.4.5 — wiele drog do tresci). */
.parlo-app .learndash-wrapper .ld-lesson-topic-list {
	display: none;
}

/* ==========================================================================
   NAWIGACJA MODUŁU — własna, zamiast domyślnej z LearnDash
   Domyślna miesza przyciski z listą „Treść Moduł" i nie daje kontroli nad
   kolejnością. Tutaj: test, oznaczenie ukończenia, przejście dalej.
   ========================================================================== */
.parlo-lesson-nav {
	margin-top: 32px;
}

/* Ramka testu — ten sam wygląd co wcześniej zaakceptowany. */
.parlo-lesson-nav__quiz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--border, #75828f);
	border-radius: 8px;
	background: var(--wp--preset--color--primary-tint, #E6F0FB);
}
.parlo-lesson-nav__quiz-text { flex: 1 1 260px; }
.parlo-lesson-nav__quiz-title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast, #14181f);
}
.parlo-lesson-nav__quiz-note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secondary, #374151);
}
.parlo-lesson-nav__quiz .parlo-btn { flex-shrink: 0; }

/* Trzy kolumny: wstecz — ukończ — dalej. Równe `1fr`, więc środkowy
   przycisk stoi w osi treści niezależnie od tego, ile akcji jest widocznych
   (to właśnie rozjeżdżało się w domyślnej nawigacji). */
.parlo-lesson-nav__steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--divider, #DDE2E8);
}
.parlo-lesson-nav__prev { justify-self: start; }
.parlo-lesson-nav__complete { justify-self: center; }
.parlo-lesson-nav__next { justify-self: end; }

.parlo-lesson-nav .parlo-btn,
.parlo-lesson-nav input.learndash_mark_complete_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 48px to minimalna wysokosc celu dotykowego z zapasem (WCAG 2.5.5
	   wymaga 44px). `nowrap` trzyma etykiete w jednej linii — „Oznacz jako
	   ukonczone" lamalo sie wczesniej na dwie. */
	min-height: 48px;
	padding: 12px 24px;
	white-space: nowrap;
	text-align: center;
	line-height: 1.2;
	font-size: 1rem;
	border-radius: 8px;
}

/* Przycisk „Oznacz jako ukończone" z LearnDash — nadpisujemy jego style,
   żeby wyglądał jak reszta. */
.parlo-lesson-nav input.learndash_mark_complete_button {
	border: 2px solid var(--wp--preset--color--success, #1c6b3f);
	border-radius: 8px;
	background: var(--wp--preset--color--success, #1c6b3f);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.parlo-lesson-nav form { margin: 0; }

/* Stan „ukończony" — zieleń #1c6b3f na białym daje 5,74:1 (AA dla tekstu). */
.parlo-lesson-nav__done {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--success, #1c6b3f);
}

.parlo-lesson-nav__back {
	margin: 20px 0 0;
	text-align: center;
}

@media (max-width: 782px) {
	.parlo-lesson-nav__steps {
		grid-template-columns: 1fr;
	}
	.parlo-lesson-nav__prev,
	.parlo-lesson-nav__complete,
	.parlo-lesson-nav__next { justify-self: stretch; }
	.parlo-lesson-nav .parlo-btn,
	.parlo-lesson-nav input.learndash_mark_complete_button {
		width: 100%;
		white-space: normal;
	}
	.parlo-lesson-nav__quiz {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 16px 18px;
	}
	/* `flex: 1 1 260px` z ukladu poziomego rozciagal tekst na cala wysokosc
	   kontenera. W kolumnie blok ma zajmowac tyle, ile potrzebuje. */
	.parlo-lesson-nav__quiz-text {
		flex: 0 0 auto;
	}
	.parlo-lesson-nav__quiz-title { font-size: 1rem; }
}

html[data-a11y-contrast="1"] .parlo-lesson-nav__quiz {
	background: #000 !important;
	border-color: #fff !important;
}
html[data-a11y-contrast="1"] .parlo-lesson-nav__quiz-title,
html[data-a11y-contrast="1"] .parlo-lesson-nav__quiz-note,
html[data-a11y-contrast="1"] .parlo-lesson-nav__done { color: #fff !important; }

/* --- JEDNOLITA WYSOKOSC PRZYCISKOW NAWIGACJI ---
   🚨 Linki mialy 76px, a „Oznacz jako ukonczone" 48px. Przyczyna:
   `.screen-reader-text` z nazwa docelowego modulu jest ukryty wizualnie,
   ale nadal jest elementem inline w srodku <a> i dokladal linie do
   wysokosci. `<input>` takiego potomka nie ma, stad roznica.

   Fix: stala wysokosc na wszystkich trzech + `position:absolute` na
   tekscie dla czytnika, zeby wypadl z ukladu. Tekst zostaje w DOM,
   wiec czytnik nadal odczyta, dokad prowadzi link (WCAG 2.4.4). */
.parlo-lesson-nav .parlo-btn,
.parlo-lesson-nav input.learndash_mark_complete_button {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	padding-block: 0;
}
.parlo-lesson-nav .parlo-btn .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.parlo-lesson-nav .parlo-btn { position: relative; }

@media (max-width: 782px) {
	.parlo-lesson-nav .parlo-btn,
	.parlo-lesson-nav input.learndash_mark_complete_button {
		height: auto;
		min-height: 48px;
		padding-block: 12px;
	}
}

/* --- Domyslna nawigacja LearnDash ukryta ---
   Zastapila ja `.parlo-lesson-nav` — jeden spojny blok z testem,
   oznaczeniem ukonczenia i przejsciem dalej. Dwie nawigacje na jednej
   stronie dezorientuja i dubluja te same odnosniki dla czytnika ekranu.

   ⚠️ Ukrywamy TYLKO w lekcjach. W quizach i innych typach domyslna
   nawigacja zostaje, bo `.parlo-lesson-nav` renderuje sie wylacznie
   w szablonie lekcji. */
.parlo-app.single-sfwd-lessons .learndash-wrapper .ld-content-actions,
body.single-sfwd-lessons .parlo-app .learndash-wrapper .ld-content-actions {
	display: none;
}

/* --- Testy w bocznej nawigacji kursu ---
   Pozycja PODRZEDNA modulu, nie kolejny numerowany krok — numeracja
   „1, 2, 3" ma odpowiadac modulom, tak jak w programie kursu.
   Wciecie i pionowa linia pokazuja przynaleznosc wizualnie. */
.parlo-step__quizzes {
	list-style: none;
	margin: 4px 0 0;
	padding: 0 0 0 40px;
}
.parlo-step__quiz {
	position: relative;
}
/* Pionowa linia od ikony modulu do testu — czytelniejsze niz samo wciecie. */
.parlo-step__quiz::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 50%;
	width: 1px;
	background: var(--wp--preset--color--divider, #DDE2E8);
}
.parlo-step__quiz::after {
	content: "";
	position: absolute;
	left: -20px;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--wp--preset--color--divider, #DDE2E8);
}
.parlo-step__quiz > a {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 44px = minimalny cel dotykowy (WCAG 2.5.5). */
	min-height: 44px;
	padding: 6px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--text-secondary, #374151);
}
.parlo-step__quiz > a:hover {
	background: var(--wp--preset--color--surface, #F5F7FA);
}
.parlo-step__quiz > a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: 2px;
}
.parlo-step__quiz-mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;

	/* Jak wyzej — rozmiar w `em`, zeby pytajnik zostal w kolku
	   przy powiekszonym tekscie. 1.85em przy 0.75rem ≈ 22 px. */
	width: 1.85em;
	height: 1.85em;
	font-size: 0.75rem;
	line-height: 1;
	border-radius: 50%;
	border: 1px dashed var(--wp--preset--color--border, #75828f);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted, #4B5563);

	text-align: center;
	font-variant-numeric: tabular-nums;
}
.parlo-step__quiz-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.parlo-step__quiz-title { font-size: 0.9375rem; font-weight: 600; }

/* Zaliczony test — zielen #1c6b3f na bialym daje 6,51:1. */
.parlo-step__quiz.is-done .parlo-step__quiz-mark {
	border-style: solid;
	border-color: var(--wp--preset--color--success, #1c6b3f);
	background: var(--wp--preset--color--success, #1c6b3f);
	color: #fff;
}
.parlo-step__quiz.is-done .parlo-step__state {
	color: var(--wp--preset--color--success, #1c6b3f);
}

/* Biezacy test — tak samo wyrozniony jak biezacy modul. */
.parlo-step__quiz.is-here > a {
	background: var(--wp--preset--color--primary-tint, #E6F0FB);
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
	font-weight: 700;
}
.parlo-step__quiz.is-here .parlo-step__quiz-mark {
	border-style: solid;
	border-color: var(--wp--preset--color--primary-dark, #0B4FA8);
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
}

html[data-a11y-contrast="1"] .parlo-step__quiz > a,
html[data-a11y-contrast="1"] .parlo-step__quiz-mark {
	background: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}


/* --- Pasek logotypów FE/RP/UE w panelu ---
   Obowiązkowe oznaczenie projektu także po zalogowaniu. Pierwszy element
   obszaru treści, więc widoczny od razu, bez przewijania. */
.parlo-logos {
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--divider);
}
.parlo-logos .imid-logos__inner {
	max-width: none;
	margin: 0;
	padding: 12px 24px;
	display: flex;
	justify-content: center;
}
.parlo-logos img {
	height: 52px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
@media (max-width: 600px) {
	.parlo-logos .imid-logos__inner { padding: 10px 16px; }
	.parlo-logos img { height: auto; }
}


/* --- Testy LearnDash: dostępność (WCAG 2.1 AA) ---
   Zob. assets/js/quiz-a11y.js. */

/* Testy nie mają limitu czasu; „Twój czas: 00:00:00” w wyniku był mylący. */
.wpProQuiz_quiz_time {
	display: none !important;
}

/* Fokus przenoszony skryptem na treść pytania i nagłówek wyniku.
   Ramka tylko przy obsłudze klawiaturą (:focus-visible, WCAG 2.4.7);
   po kliknięciu myszą fokus jest ustawiany dla czytnika ekranu, ale bez
   obramowania, które rozpraszało przy każdym pytaniu. */
.wpProQuiz_question_text:focus,
.wpProQuiz_results .wpProQuiz_header:focus {
	outline: none;
}
.wpProQuiz_question_text:focus-visible,
.wpProQuiz_results .wpProQuiz_header:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0a6fe0);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Widoczny fokus na odpowiedzi wybieranej KLAWIATURĄ (2.4.7).
   :focus-within łapał też kliknięcie myszą i dublował niebieską ramkę,
   którą LearnDash rysuje wokół wybranej odpowiedzi. Obrys jest rysowany
   do wewnątrz (ujemny offset), bo kontener odpowiedzi przycinał to,
   co wychodziło poza pole. */
.wpProQuiz_questionListItem label:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary, #0a6fe0);
	outline-offset: -6px;
	border-radius: 6px;
}

/* Oznaczenie odpowiedzi tekstem, nie tylko kolorem tła (1.4.1). */
.parlo-quiz-znacznik {
	font-weight: 700;
	white-space: nowrap;
}
.wpProQuiz_answerCorrect .parlo-quiz-znacznik { color: #14532d; }
.wpProQuiz_answerIncorrect .parlo-quiz-znacznik { color: #7f1d1d; }