/* ==========================================================================
   IKM Accessibility – style panelu
   ========================================================================== */

/* ── Przycisk otwierający ─────────────────────────────────────────────────── */

.accessicon button {
	background: none;
	border: none;
	cursor: pointer;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */

#accessibility-menu {
	background: #fff;
	position: fixed;
	top: 111px;
	right: 0;
	width: calc(50vw - 253px);
	z-index: 110;
	height: calc(100dvh - 100px);
	box-shadow: -20px 0px 35px 0px rgba(0, 0, 0, 0.1);
	transition: transform 0.5s ease, visibility 0.5s ease;
}

#accessibility-menu.hidden {
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;
}

#accessibility-menu .inside {
	width: 400px;
	padding: 50px 20px 0 50px;
}

#accessibility-menu .inside .htitle {
	width: 60%;
}

#accessibility-menu .inside .htitle span {
	font-size: 2.4rem;
	line-height: 3rem;
	margin-bottom: 20px;
	display: block;
}

/* ── Kontener i listy ─────────────────────────────────────────────────────── */

#accessibility-menu .amenucontainer {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

#accessibility-menu .amenucontainer .hlist {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#accessibility-menu .amenucontainer .hlist .hline {
	display: flex;
	gap: 10px;
	align-items: center;
}

#accessibility-menu .hlabel {
	font-size: 1.6rem;
}

/* ── Przyciski toggle (aria-pressed) ──────────────────────────────────────── */

#accessibility-menu .toggle-btn {
	background: none;
	border: none;
	border-bottom: none;
	padding: 0;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

#accessibility-menu .toggle-btn:focus-visible {
	outline: 2px solid #79c6d2;
	outline-offset: 3px;
	border-radius: 3px;
}

/* Suwak */
#accessibility-menu .slider {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
	background: #ddd;
	border-radius: 20px;
	margin-left: 0px;
	flex-shrink: 0;
	transition: background 0.3s;
}

#accessibility-menu .slider-thumb {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: transform 0.3s;
	display: block;
}

/* Stan aktywny (aria-pressed="true") */
#accessibility-menu .toggle-btn[aria-pressed="true"] .slider {
	background: #79c6d2;
}

#accessibility-menu .toggle-btn[aria-pressed="true"] .slider-thumb {
	transform: translateX(20px);
}

/* ── Przyciski akcji (reset, zamknij) ─────────────────────────────────────── */

#accessibility-menu .amenucontainer .hlist button:not(.toggle-btn):not(#sizeplus):not(#sizeminus) {
	background: none;
	border: none;
	border-bottom: 1px solid #000;
	padding: 0 0 2px;
	display: inline-block;
	cursor: pointer;
}

#accessibility-menu .amenucontainer .hlist button:not(.toggle-btn):not(#sizeplus):not(#sizeminus):focus-visible {
	outline: 2px solid #79c6d2;
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── Przyciski rozmiaru tekstu ────────────────────────────────────────────── */

#accessibility-menu .amenucontainer .hlist .circles button {
	width: 24px;
	height: 24px;
	text-align: center;
	border: 1px solid #ccc;
	background: none;
	font-weight: bold;
	border-radius: 24px;
	cursor: pointer;
}

#accessibility-menu .amenucontainer .hlist .circles button:focus-visible {
	outline: 2px solid #79c6d2;
	outline-offset: 3px;
}

#accessibility-menu .amenucontainer .hlist .circles button.disabled {
	pointer-events: none;
	opacity: 0.2;
}

/* ── sr-only (na wszelki wypadek) ────────────────────────────────────────── */

#accessibility-menu .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
	#accessibility-menu {
		width: 450px;
	}
}

@media (max-width: 600px) {
	#accessibility-menu {
		width: 100vw;
	}

	#accessibility-menu .inside {
		width: 100%;
	}

	#accessibility-menu .inside .htitle {
		width: 100%;
	}
}

@media (max-width: 340px) {
	#accessibility-menu {
		top: 80px;
		height: calc(100dvh - 80px);
	}

	#accessibility-menu .inside {
		padding: 20px 20px 0;
	}
}

/* ==========================================================================
   IKM Accessibility – efekty po aktywacji opcji
   ========================================================================== */

/* ── Wysoki kontrast ──────────────────────────────────────────────────────── */

html.contrast {}
html.contrast * { background: #000 !important; color: #ffea00 !important; }
html.contrast svg,
html.contrast svg path { fill: #fff !important; }
html.contrast a { text-decoration: underline !important; }
html.contrast .hover01,
html.contrast .hover02 { display: none; }
html.contrast .isinglemedium .hover { background: none !important; }

/* Suwak w trybie kontrastu */
html.contrast #accessibility-menu .slider { background: #555 !important; }
html.contrast #accessibility-menu .toggle-btn[aria-pressed="true"] .slider { background: #79c6d2 !important; }
html.contrast #accessibility-menu .slider-thumb { background: #fff !important; }

/* ── Wielkość tekstu ──────────────────────────────────────────────────────── */

html.size0 { font-size: 75%; }
html.size2 { font-size: 150%; }

/* ── Rozstrzelenie tekstu ─────────────────────────────────────────────────── */

html.spacing,
html.spacing * { letter-spacing: 2px !important; }

/* ── Podkreślenie linków ──────────────────────────────────────────────────── */

html.underline a,
html.underline a * { text-decoration: underline !important; }