/**
 * Dostępność: pasek ustawień, tryb wysokiego kontrastu, widoczność zaznaczenia.
 *
 * Rozmiary w rem — inaczej przełącznik powiększania tekstu nie miałby na co działać.
 */

/* ============================================================
   Typografia GeneratePressa przeliczona na rem

   Motyw nadrzędny podaje rozmiary w px, a px nie reaguje na zmianę rozmiaru
   bazowego. Bez tych dwóch reguł powiększanie tekstu działałoby na treści
   stron, ale menu i tekst podstawowy zostawałyby w miejscu.

   Wartości są dokładnym przeliczeniem (17/16 i 15/16), więc przy ustawieniu
   zwykłym wygląd się nie zmienia.
   ============================================================ */

body,
button,
input,
select,
textarea {
	font-size: 1.0625rem;
}

.main-navigation a {
	font-size: 0.9375rem;
}

/* ============================================================
   Ustawienia dostępności — przycisk w nagłówku i wysuwany panel

   Dawniej był to pas na całą szerokość nad nagłówkiem. Na telefonie zajmował
   dwa wiersze i spychał logo w dół, zanim ktokolwiek zobaczył treść.

   Teraz jest to jeden przycisk w nagłówku, po prawej, i panel wysuwany spod
   niego — ten sam wzór co menu na telefonie.

   ŚWIADOMIE NIE W MENU. Przycisk stoi obok hamburgera, a nie w środku: osoba,
   która potrzebuje większego tekstu albo wysokiego kontrastu, musi znaleźć te
   ustawienia ZANIM będzie w stanie wygodnie przeczytać pozycje menu.
   ============================================================ */

/*
 * Za logo w kodzie, po prawej na ekranie. `order` nie rusza kolejności klawisza
 * Tab — patrz komentarz przy montowaniu w `dostepnosc.js`.
 *
 * `margin-left: auto` jest tu tym, co faktycznie dosuwa blok do prawej krawędzi:
 * samo `order` ustawia tylko kolejność, a wolne miejsce zostałoby ZA blokiem.
 * Menu nie dosuwa się samo, bo `style.css` daje mu od 768 px `margin-left: 30px`
 * — stoi więc tuż za logo, a cała nadwyżka szerokości zostaje do rozdania.
 */
.klucz-dostepnosc-blok {
	position: relative;
	/*
	 * Warstwa ponad nawigacją.
	 *
	 * `#site-navigation` stoi w kodzie ZA naszym blokiem i ma własne tło, więc
	 * rysuje się na panelu. Przy powiększeniu tekstu menu łamie się na dwa
	 * wiersze, nawigacja robi się wysoka i zaczyna zasłaniać górę panelu.
	 *
	 * `z-index` razem z `position: relative` tworzy tu kontekst nakładania,
	 * w którym panel ze swoim `z-index: 20` jest już bezpieczny.
	 */
	z-index: 200;
	order: 3;
	display: flex;
	align-items: center;
	/* Szerokość z zawartości. Blok jest elementem flex nagłówka i tam wyszłoby to
	   samo, ale w wariancie awaryjnym — w pasku nad nagłówkiem — pudełko `flex`
	   rozciągnęłoby się na całą szerokość i panel z `right: 0` odjechałby od
	   przycisku na drugi koniec ekranu. */
	width: fit-content;
	margin-left: auto;
}

.klucz-dostepnosc-przelacznik {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	/* 2,25 rem = 36 px przy zwykłym stopniu pisma. Wymagane minimum to 24 px
	   (WCAG 2.2, 2.5.8); w rem, więc rośnie razem z powiększeniem tekstu. */
	min-height: 2.25rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--pakiet-ink);
	font-family: var(--klucz-font-ui);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.klucz-dostepnosc-przelacznik:hover {
	border-color: var(--pakiet-red);
	color: var(--pakiet-red);
}

.klucz-dostepnosc-przelacznik__znak {
	flex: 0 0 auto;
}

/* Panel jest wysunięty, więc przycisk musi pokazywać, że coś trzyma otwarte. */
.klucz-dostepnosc-blok--otwarty .klucz-dostepnosc-przelacznik {
	border-color: var(--pakiet-red);
	background-color: var(--pakiet-red);
	color: #fff;
}

/* ---------------------------------------------------------- panel */

.klucz-dostepnosc {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 20;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	/*
	 * Kres szerokości liczony od okna, nie od panelu.
	 *
	 * Panel jest zaczepiony prawą krawędzią o przycisk, a przycisk nie stoi przy
	 * samej krawędzi ekranu — po jego prawej jest jeszcze hamburger. Odjęcie
	 * samych 24 px nie brało tego pod uwagę i przy powiększeniu tekstu do 150%
	 * (19 rem to wtedy 456 px) panel wychodził poza lewą krawędź.
	 *
	 * 6 rem to zapas na hamburger z marginesami. W `rem`, więc rośnie razem
	 * z przyciskami — inaczej problem wróciłby przy każdym powiększeniu.
	 */
	width: min(19rem, calc(100vw - 6rem));
	padding: 1rem;
	border: 1px solid var(--pakiet-line);
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 26px 55px -22px rgba(23, 23, 23, .5);
	font-size: 0.875rem;
}

.klucz-dostepnosc-blok--otwarty .klucz-dostepnosc {
	display: grid;
}

/* Etykieta i oba przełączniki na całą szerokość panelu, trzy stopnie pisma
   w jednym wierszu — stąd siatka trzykolumnowa. */
.klucz-dostepnosc__etykieta,
.klucz-dostepnosc__kontrast,
.klucz-dostepnosc__ruch {
	grid-column: 1 / -1;
}

.klucz-dostepnosc__etykieta {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.klucz-dostepnosc__przycisk {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--pakiet-ink);
	font-family: var(--klucz-font-ui);
	line-height: 1.2;
	cursor: pointer;
}

.klucz-dostepnosc__przycisk:hover {
	border-color: var(--pakiet-red);
	color: var(--pakiet-red);
}

/* Stan wciśnięcia niesie znaczenie, więc nie może zależeć od samej barwy —
   dokładamy grubszą ramkę, żeby był rozpoznawalny także przy zaburzeniach
   widzenia barw. Biel na #332f2c daje 11,98:1. */
.klucz-dostepnosc__przycisk[aria-pressed="true"] {
	border: 2px solid var(--pakiet-ink);
	background-color: var(--pakiet-ink);
	color: #fff;
	font-weight: 700;
}

.klucz-dostepnosc__rozmiar {
	font-weight: 600;
}

.klucz-dostepnosc__kontrast,
.klucz-dostepnosc__ruch {
	justify-content: flex-start;
}

.klucz-dostepnosc__znak {
	font-size: 1rem;
}

/*
 * Na wąskim ekranie zostaje sam znak — nagłówek ma tam miejsce na logo,
 * hamburger i jeden przycisk, nie na trzy napisy.
 *
 * Próg 768 px, a nie 767: tyle wynosi próg menu mobilnego w GeneratePressie
 * i przy 768 px hamburger jest jeszcze widoczny.
 *
 * Kolejność też się zmienia. Na szerokim ekranie blok idzie na sam koniec,
 * za menu. Na wąskim ma stać PRZED hamburgerem, bo to hamburger jest ostatni
 * przy krawędzi — a że w kodzie blok i tak siedzi zaraz za logo, wystarczy
 * ZDJĄĆ mu `order` i wrócić do kolejności z kodu.
 *
 * `order: 1` było tu błędem: elementy bez `order` mają zero, więc jedynka
 * wypychała blok za obie nawigacje. Ukryte `#site-navigation` zajmuje na
 * telefonie całą szerokość wiersza, więc przycisk lądował pod nagłówkiem.
 *
 * Dosuwanie przechodzi z nawigacji na nasz blok. Gdyby oba miały
 * `margin-left: auto`, wolne miejsce podzieliłoby się między nie i przycisk
 * zawisłby w połowie nagłówka.
 */
@media screen and (max-width: 768px) {
	.klucz-dostepnosc-blok {
		order: 0;
		margin-right: 10px;
	}

	.inside-header > .main-navigation.mobile-menu-control-wrapper {
		margin-left: 0 !important;
	}

	.klucz-dostepnosc-przelacznik {
		padding: 0.35rem;
		min-width: 2.25rem;
		justify-content: center;
	}

	.klucz-dostepnosc-przelacznik__napis {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ============================================================
   Widoczność zaznaczenia klawiaturą

   Motyw miał dotąd dwa takie style w całości. Bez nich osoba poruszająca się
   klawiszem Tab nie wie, gdzie jest — a to warunek korzystania ze strony
   bez myszy. `:focus-visible` pokazuje obwódkę wyłącznie przy nawigacji
   klawiaturą, więc kliknięcie myszą nie zostawia po sobie ramki.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #0b5fa5;
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Treść wyłącznie dla czytnika ekranu.
 *
 * Odsunięcie i przycięcie, a NIE `display: none` ani `visibility: hidden` —
 * te dwa usuwają element także z drzewa dostępności, czyli dokładnie stamtąd,
 * gdzie ma być widoczny. Tak ukryty jest nagłówek H1 stron ofertowych.
 */
.klucz-tylko-czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Odsyłacz „przejdź do treści”: poza ekranem, dopóki nie dostanie zaznaczenia.
   Pozwala pominąć menu bez przechodzenia Tabem przez kilkanaście pozycji. */
.klucz-pomin {
	position: absolute;
	left: -9999px;
	z-index: 100000;
	padding: 0.7rem 1.2rem;
	background-color: #1f1f1f;
	color: #fff;
	text-decoration: none;
}

.klucz-pomin:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* ============================================================
   Tryb wysokiego kontrastu

   Biały tekst na czerni daje 21:1, żółte odsyłacze 14,9:1 — wielokrotnie
   powyżej wymaganych 4,5:1. `!important` jest tu konieczne: barwy siedzą
   też w stylach liniowych wpisanych w treść stron, a tych nie da się
   przykryć zwykłą regułą.

   ⚠ TE BARWY MAJĄ ZOSTAĆ LICZBAMI. NIE ZAMIENIAĆ NA ZMIENNE.

   Od 17.08.2026 barwy serwisu da się zmienić z panelu. Ta sekcja jest
   z tego świadomie wyjęta: tryb wysokiego kontrastu to funkcja dostępności,
   nie element wyglądu. Ma wyglądać tak samo niezależnie od tego, co ktoś
   wybierze w panelu — bo jego jedynym zadaniem jest dać czytelność komuś,
   komu zwykłe barwy serwisu nie wystarczają.

   Podmiana `#000` i `#fff` na `var(--kolor-tlo)` i `var(--kolor-tekst)`
   wygląda na porządkowanie i psuje dokładnie to, po co ta sekcja istnieje:
   przy jasnym motywie z panelu tryb kontrastu przestałby cokolwiek zmieniać.

   Zmienne NIŻEJ, w widgecie `.klucz-dostepnosc`, są w porządku i mają iść
   za panelem — to zwykły element strony, a nie tryb ratunkowy.
   ============================================================ */

/* Wyłączenia opakowane w :where(), bo :where() nie dokłada szczegółowości.
   Bez tego reguła ogólna miałaby wyższą wagę niż reguły dla odsyłaczy i pól
   niżej — i wszystko byłoby białe, łącznie z odsyłaczami. */
html.klucz-kontrast,
html.klucz-kontrast body {
	background: #000 !important;
	color: #fff !important;
}

html.klucz-kontrast *:not(:where(html, body, .klucz-dostepnosc, .klucz-dostepnosc *, .klucz-dostepnosc-przelacznik, .klucz-dostepnosc-przelacznik *)) {
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.klucz-kontrast a:not(:where(.klucz-dostepnosc *)) {
	color: #ffd54f !important;
	text-decoration: underline !important;
}

html.klucz-kontrast button:not(.klucz-dostepnosc__przycisk),
html.klucz-kontrast input[type="submit"],
html.klucz-kontrast input[type="button"],
html.klucz-kontrast .button {
	border: 2px solid #ffd54f !important;
	background-color: #000 !important;
	color: #ffd54f !important;
}

html.klucz-kontrast input:not([type="submit"]):not([type="button"]),
html.klucz-kontrast select,
html.klucz-kontrast textarea {
	border: 2px solid #fff !important;
	background-color: #000 !important;
	color: #fff !important;
}

html.klucz-kontrast *:focus-visible {
	outline: 3px solid #ffd54f !important;
	outline-offset: 2px;
}

/* Obrazki i mapy zostają widoczne — wygaszenie ich odebrałoby treść.
   Lekkie przyciemnienie zdejmuje z nich jaskrawość, która na czarnym tle razi. */
html.klucz-kontrast img,
html.klucz-kontrast svg,
html.klucz-kontrast iframe {
	filter: brightness(0.85) contrast(1.15);
}

/* Ikony rysowane jako tło znikają razem z background-image, więc te,
   które niosą znaczenie, dostają widoczną ramkę zastępczą. */
html.klucz-kontrast .contact_way_icon,
html.klucz-kontrast .footer-icon {
	border: 1px solid #fff !important;
	border-radius: 4px;
}

/*
 * Wszystko, co wysuwa się NAD treść, musi mieć w tym trybie własne tło.
 *
 * Reguła ogólna wyżej zeruje tła i na zwykłej treści o to właśnie chodzi — ale
 * panel położony na stronie bez tła przestaje być panelem: prześwituje przez
 * niego to, co przykrywa, i oba teksty nakładają się na siebie.
 *
 * Cień też znika (`box-shadow: none`), więc oddzielenie od tła bierze na siebie
 * biała obwódka.
 */
html.klucz-kontrast .klucz-dostepnosc,
html.klucz-kontrast .main-navigation .sub-menu,
html.klucz-kontrast .has-inline-mobile-toggle #site-navigation.toggled,
html.klucz-kontrast .pakiet-szczegoly[open] > .pakiet-szczegoly-tresc {
	border: 2px solid #fff !important;
	background-color: #000 !important;
	color: #fff !important;
}

/*
 * To samo dotyczy trzech rzeczy, które unoszą się nad treścią nie dlatego, że ktoś
 * je otworzył, tylko zawsze: nagłówka przyklejonego do górnej krawędzi, powrotu na górę
 * i pasa ze zgodą na ciasteczka. Bez własnego tła przewijana treść prześwituje przez nie
 * na wylot — menu i nagłówek slajdu lądują jeden na drugim i nie da się przeczytać ani
 * jednego, ani drugiego.
 *
 * Obwódka zamiast cienia, bo cień zdejmuje reguła ogólna (`box-shadow: none`), a bez
 * żadnego oddzielenia czarny pas na czarnej stronie zlewa się z tym, co pod nim.
 */
html.klucz-kontrast .site-header {
	border-bottom: 2px solid #fff !important;
	background-color: #000 !important;
}

html.klucz-kontrast .klucz-zgody {
	border-top: 2px solid #fff !important;
	background-color: #000 !important;
}

/* Powrót na górę to sterowanie, więc barwa odsyłaczy i przycisków, a nie treści. */
html.klucz-kontrast .generate-back-to-top {
	border: 2px solid #ffd54f !important;
	background-color: #000 !important;
	color: #ffd54f !important;
}

html.klucz-kontrast .klucz-dostepnosc__etykieta {
	color: #fff !important;
}

html.klucz-kontrast .klucz-dostepnosc__przycisk {
	border-color: #fff !important;
	background-color: #000 !important;
	color: #fff !important;
}

html.klucz-kontrast .klucz-dostepnosc__przycisk[aria-pressed="true"] {
	border-color: #ffd54f !important;
	background-color: #ffd54f !important;
	color: #000 !important;
}

/* Dymek „i” przy cechach pakietu leży NA tekście kartki. Tryb wysokiego
   kontrastu zeruje wszystkie tła, więc bez tej reguły napis dymka nakładałby się
   na to, co pod nim. Barwy zostają dosłowne — tu nie ma miejsca na zmienne. */
html.klucz-kontrast .pakiet-rada-tresc {
	background-color: #000 !important;
	border: 1px solid #fff !important;
	color: #fff !important;
}