/* =====================================================================
   NAGŁÓWEK

   Wartości mierzone przy 90em, gdzie 1rem = 10px.
   ===================================================================== */

.bp-naglowek {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bp-biel);
	border-bottom: 1px solid var(--bp-ramka-lekka);
}

/* Pasek administratora WordPressa jest `position: fixed` i leży nad
   wszystkim. Bez tego przesunięcia zalogowany widzi obcięty nagłówek,
   a odwiedzający poprawny - błąd niewidoczny inaczej niż w incognito.

   UWAGA: nie kompensujemy paska własnym marginesem na `html`.
   WordPress sam dokłada `html { margin-top: 32px }`, więc druga taka
   reguła zsumowałaby się i zostawiła pusty pas nad nagłówkiem. */
body.admin-bar .bp-naglowek { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .bp-naglowek { top: 46px; }
}

/* --- rząd górny --- */

.bp-naglowek__gora {
	background: var(--bp-czern);
	color: var(--bp-biel);
	font-size: 1.4rem;
}

.bp-naglowek__gora-srodek {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2.4rem;
	min-height: 4rem;
}

.bp-naglowek__gora a { color: var(--bp-biel); }
.bp-naglowek__gora p { margin: 0; }

@media (max-width: 59.99em) {
	.bp-naglowek__gora { display: none; }
}

/* --- rząd główny --- */

.bp-naglowek__srodek {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	min-height: var(--bp-naglowek-wysokosc-tel);
}

@media (min-width: 60em) {
	.bp-naglowek__srodek { min-height: 8.8rem; }
}

.bp-naglowek__marka { margin-right: auto; }

.bp-naglowek__marka img {
	height: 4.6rem;
	width: auto;
	max-width: none;
}

.bp-naglowek__nazwa {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bp-czern);
}

/* --- menu --- */

.bp-menu__lista {
	display: flex;
	align-items: center;
	/* Odstęp i wielkość pisma z „Dostosuj -> Nagłówek - układ ->
	   Styl nagłówka i menu". Liczba po przecinku to wartość domyślna,
	   ta sama, która stała tu wcześniej na sztywno. */
	gap: var(--bp-menu-odstep, 2.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-menu__lista a {
	color: var(--bp-czern);
	font-size: var(--bp-menu-rozmiar, 1.6rem);
	font-weight: 500;
}

.bp-menu__lista a:hover,
.bp-menu__lista .current-menu-item > a { color: var(--bp-akcent); }

@media (max-width: 59.99em) {
	.bp-menu { display: none; }
	.bp-naglowek__akcja { display: none; }
}

/* --- hamburger --- */

.bp-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Wysokość WPROST, taka sama jak przycisku akcji. Przy samej
	   wyściółce różne rozmiary pisma dają różne wysokości. */
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 1px solid var(--bp-ramka);
	border-radius: var(--bp-btn-promien);
	background: var(--bp-biel);
	color: var(--bp-czern);
	/* Gasi niebieski błysk przy dotknięciu na telefonie. */
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

@media (min-width: 60em) {
	.bp-hamburger { display: none; }
}

.bp-hamburger__kreski,
.bp-hamburger__kreski::before,
.bp-hamburger__kreski::after {
	display: block;
	width: 2rem;
	height: 2px;
	background: currentColor;
	transition: transform .15s ease, opacity .15s ease;
}

.bp-hamburger__kreski { position: relative; }

.bp-hamburger__kreski::before,
.bp-hamburger__kreski::after {
	content: '';
	position: absolute;
	left: 0;
}

.bp-hamburger__kreski::before { top: -6px; }
.bp-hamburger__kreski::after  { top: 6px; }

/* Stan otwarty czytamy z atrybutu, który i tak ustawiamy dla czytników
   ekranu - nie z osobnej klasy. */
.bp-hamburger[aria-expanded="true"] {
	background: var(--bp-akcent);
	border-color: var(--bp-akcent);
	color: var(--bp-biel);
}

.bp-hamburger[aria-expanded="true"] .bp-hamburger__kreski { background: transparent; }
.bp-hamburger[aria-expanded="true"] .bp-hamburger__kreski::before { transform: translateY(6px) rotate(45deg); }
.bp-hamburger[aria-expanded="true"] .bp-hamburger__kreski::after  { transform: translateY(-6px) rotate(-45deg); }

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

.bp-panel-mobilny {
	/* `max(..., 10px)`: przy rem mniejszym niz 10 px pozycje menu staly
	   9 px od krawedzi ekranu - blizej niz logo (M9, M11). */
	padding: 2.4rem max(var(--bp-oddech), 10px) 3.2rem;
	background: var(--bp-czern);
}

/* Tekst w panelu jest ZAWSZE biały. Panel jest ciemny niezależnie
   od tego, jak wygląda pasek nagłówka - stąd przedrostek, który
   podnosi wagę ponad regułę menu wyżej. */
.bp-panel-mobilny .bp-panel-mobilny__lista a,
.bp-panel-mobilny .bp-panel-mobilny__pomoc-lista a,
.bp-panel-mobilny .bp-panel-mobilny__kontakt,
.bp-panel-mobilny .bp-panel-mobilny__kontakt a { color: var(--bp-biel); }

/*
   ROZWINIETY PANEL MUSI DAC SIE PRZEWINAC.

   Przy menu glownym, sciezkach „Z czym mozemy pomoc”, danych
   kontaktowych i ikonach panel jest wyzszy niz ekran telefonu -
   a bez wlasnej wysokosci nie ma czego przewijac i dolne pozycje
   sa nieosiagalne.

   `dvh`, nie `vh`: na telefonie `100vh` to wysokosc okna z UKRYTYMI
   paskami przegladarki, czyli wiecej niz widac naprawde.
   Odjete 6.5rem to wysokosc paska naglowka.
*/
.bp-panel-mobilny {
	max-height: calc(100dvh - var(--bp-naglowek-wysokosc-tel));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.bp-panel-mobilny__lista {
	margin: 0 0 2.4rem;
	padding: 0;
	list-style: none;
}

.bp-panel-mobilny__lista li + li { border-top: 1px solid rgba(255,255,255,.15); }

.bp-panel-mobilny__lista a {
	display: flex;
	align-items: center;
	min-height: 5.2rem;
	font-size: 1.8rem;
}

body.bp-menu-otwarte { overflow: hidden; }

/* --- ikony społecznościowe --- */

.bp-spolecznosciowe {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-spolecznosciowe__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.bp-spolecznosciowe__link:hover { color: var(--bp-akcent); }

/* --- podmenu -------------------------------------------------------

   Bez tej sekcji podmenu jest zwykłą listą w środku nagłówka: rozwiniętą
   na stałe, rozpychającą rząd i psującą wyrównanie pozostałych pozycji.
   Nie jest to więc ozdoba - menu z choćby jedną pozycją drugiego poziomu
   wygląda bez niej na zepsute.

   Panel jest pozycjonowany względem pozycji menu, więc pozycja z dziećmi
   musi mieć `position: relative`. Wysuwa się po najechaniu ORAZ po
   przejściu klawiaturą (`:focus-within`) - bez tego drugiego pozycje
   podmenu są nieosiągalne dla kogoś, kto nie używa myszy.
   ------------------------------------------------------------------- */

.bp-menu__lista li { position: relative; }

/*
   Wygląd odwzorowany z paczki startowej - zmierzony, nie dobrany na oko:
   białe tło, BEZ zaokrąglenia i bez ramki, cień 0 2px 13px rgba(0,0,0,.1),
   wyściółka wyłącznie na pozycjach (15 px w pionie, 14 px w poziomie).

   Brak promienia i ramki jest celowy. Panel ma wyglądać jak przedłużenie
   paska nawigacji, a nie jak osobne okienko nad stroną.
*/
.bp-menu__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 22rem;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bp-biel);
	border: 0;
	border-radius: 0;
	box-shadow: 0 2px 13px rgba(0, 0, 0, .1);

	/*
	   Chowamy widocznością, a nie `display: none` - dzięki temu panel da
	   się animować, a czytnik ekranu widzi go dopiero po otwarciu.
	   Odstęp od pozycji robi `padding-top` rodzica, nie `margin` panelu:
	   margines tworzyłby szczelinę, w której kursor gubi najechanie
	   i panel zamykałby się w drodze do niego.
	*/
	opacity: 0;
	visibility: hidden;
	transform: translateY(.6rem);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.bp-menu__lista li:hover > .sub-menu,
.bp-menu__lista li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bp-menu__lista .sub-menu a {
	display: block;
	padding: 1.5rem 1.4rem;
	font-size: 1.4rem;
	line-height: 1.6rem;
	font-weight: 400;
	white-space: nowrap;
}

.bp-menu__lista .sub-menu a:hover,
.bp-menu__lista .sub-menu a:focus {
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent);
}

/* Grot przy pozycji, która ma podmenu. Rysowany znakiem, nie obrazkiem -
   jedna rzecz mniej do pobrania i skaluje się z pismem. */
.bp-menu__lista .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .5rem;
	height: .5rem;
	margin-left: .8rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-.2rem) rotate(45deg);
}

/* --- panel mobilny: podmenu ----------------------------------------

   Na telefonie panel nie wysuwa się w bok, tylko stoi wcięty pod
   pozycją nadrzędną. Reguły wyżej trzeba tu jawnie cofnąć, bo dotyczą
   `.bp-menu__lista`, a panel mobilny ma własną klasę.
   ------------------------------------------------------------------- */

.bp-panel-mobilny .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	margin: .4rem 0 .8rem 1.6rem;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--bp-ramka);
	border-radius: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}

.bp-panel-mobilny .sub-menu a {
	padding: .8rem 0 .8rem 1.6rem;
	white-space: normal;
}

/* =====================================================================
   PASEK PROMOCYJNY - nad wszystkim

   Gradient, nie płaski kolor: pasek ma się odróżniać od nagłówka,
   który stoi tuż pod nim. Przy dwóch płaskich pasach jeden nad drugim
   nie widać, że to dwie różne rzeczy.
   ===================================================================== */

.bp-promo {
	/*
	   GRADIENT Z DWOCH ODCIENI NIEBIESKIEGO, nie niebiesko-fioletowy.
	   Oba kolory pochodza z tokenow marki, wiec zmiana palety zmienia
	   tez ten pasek - a nie zostawia go w poprzednim odcieniu.
	*/
	background: linear-gradient(90deg, var(--bp-akcent-ciemny) 0%, var(--bp-akcent) 100%);

	/*
	   PASEK MUSI LEZEC NAD NAGLOWKIEM, a nie pod nim.

	   Stoi w kodzie PRZED naglowkiem, a naglowek jest przyklejony
	   z `z-index: 100`. Przy rownym `z-index` wygrywa element pozniejszy
	   w kodzie - wiec naglowek malowal sie na wierzchu i przykrywal
	   rozwinieta liste jezykow. Lista sie otwierala, po prostu nie bylo
	   jej widac: klikniecie wygladalo jak brak reakcji.

	   `position: relative` jest tu konieczne - bez niego `z-index`
	   nie ma na czym zadzialac.
	*/
	position: relative;
	z-index: 200;
	color: #fff;
	font-size: 1.4rem;
	line-height: 2rem;
}

.bp-promo__srodek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .8rem 2.4rem;
	padding-block: 1rem;
}

.bp-promo__tresc {
	display: inline-flex;
	align-items: center;
	gap: 1.2rem;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

a.bp-promo__tresc:hover .bp-promo__tekst { text-decoration: underline; }

.bp-promo__plakietka {
	/*
	   TEN SAM PROMIEN ZAOKRAGLENIA CO KAZDY PRZYCISK NA STRONIE.

	   Zasada: wszystkie przyciski w calym serwisie maja jednakowo
	   zaokraglone rogi. Bierzemy je ze zmiennej `--bp-btn-promien`,
	   tej samej, ktorej uzywa „Bezplatna wycena” - dzieki temu zmiana
	   promienia w jednym miejscu przechodzi przez cala strone.

	   Wysciolka jest WLASNA i celowo nizsza: pasek ma 4rem wysokosci,
	   wiec przycisk o wysciolce z sekcji rozpychalby go dwukrotnie.
	   Rozne sa odstepy, nie ksztalt.
	*/
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.6rem;
	border-radius: var(--bp-btn-promien);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

/* Zachowanie po najechaniu takie samo jak przy kazdym innym przycisku:
   wyrazna, ale spokojna zmiana tla. */
a.bp-promo__tresc:hover .bp-promo__plakietka,
a.bp-promo__tresc:focus-visible .bp-promo__plakietka {
	background: #fff;
	color: var(--bp-akcent-ciemny);
}

/* --- PRAWA STRONA PASKA: KONTAKT, PROFILE, JĘZYKI ---------------------

   Zmiana z 8 sierpnia 2026. Wcześniej stały tu odnośniki dodatkowe,
   a dane kontaktowe miały własny czarny pasek pod spodem. Czarny pasek
   zniknął, jego treść jest tutaj.
   -------------------------------------------------------------------- */

.bp-promo__kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2.4rem;
	margin-left: auto;
}

.bp-promo__pozycja {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	white-space: nowrap;
}

/* Ikona przed napisem. Osobne pudełko o stałym rozmiarze, żeby trzy
   pozycje obok siebie miały napisy w jednej linii pionowej niezależnie
   od tego, jak wysoka jest sama ikona. */
.bp-promo__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	opacity: .85;
}

/* --- KRESKA ROZDZIELAJĄCA ---------------------------------------------
   Krótka i wyśrodkowana w pionie, nie przez całą wysokość wiersza.
   Dlatego osobny element, a nie `border-left` na sąsiedzie: obramowanie
   zawsze biegnie przez całą wysokość elementu, którego dotyczy. */

.bp-promo__kreska {
	flex: 0 0 auto;
	width: 1px;
	height: 1.6rem;
	background: rgba(255, 255, 255, .35);
}

/* Kreska przed przełącznikiem języka znika razem z nim - inaczej pasek
   kończyłby się kreską wiszącą w powietrzu na stronie jednojęzycznej. */
.bp-promo__kreska--jezyki:last-child { display: none; }

/* Adres nie jest odnośnikiem, więc nie ma go po co podświetlać. */
a.bp-promo__pozycja:hover,
a.bp-promo__pozycja:focus { color: #fff; text-decoration: underline; }

/*
   Ikony profili na pasku są mniejsze niż w stopce i bez kółka -
   pasek ma 4rem wysokości i kółko go rozpycha.
*/
.bp-promo__kontakt .bp-spolecznosciowe {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-promo__kontakt .bp-spolecznosciowe a {
	display: flex;
	color: rgba(255, 255, 255, .9);
}

.bp-promo__kontakt .bp-spolecznosciowe a:hover,
.bp-promo__kontakt .bp-spolecznosciowe a:focus { color: #fff; }

/* Przełącznik języka: oddzielony kreską od reszty, żeby nie czytało się
   go jako kolejnej danej kontaktowej. */
.bp-promo__kontakt .bpj-przelacznik {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding-left: 0;
	/*
	   BEZ `border-left`. Kreska przed przelacznikiem jest osobnym
	   elementem (`.bp-promo__kreska--jezyki`) - obramowanie dawalo
	   DRUGA kreske tuz obok pierwszej.
	*/
}

.bp-promo__kontakt .bpj-przelacznik__pozycja {
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
	text-transform: uppercase;
}

.bp-promo__kontakt .bpj-przelacznik__pozycja.jest-biezacy,
.bp-promo__kontakt .bpj-przelacznik__pozycja:hover,
.bp-promo__kontakt .bpj-przelacznik__pozycja:focus { color: #fff; }

.bp-promo a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
   NA TELEFONIE PASEK NIE ZNIKA, TYLKO SIĘ SKRACA.

   Wcześniej cała prawa strona chowała się poniżej 64em. Teraz siedzi
   tu telefon, więc kasowanie jej odbierałoby najważniejszą rzecz
   na najmniejszym ekranie.

   Zostaje telefon i przełącznik języka. Adres i e-mail schodzą - są
   długie i łamią pasek na trzy wiersze, a jedno i drugie jest w stopce
   oraz w rozwijanym panelu.
*/
@media (max-width: 64em) {
	.bp-promo__srodek {
		justify-content: center;
		gap: .8rem 1.6rem;
	}

	.bp-promo__kontakt {
		margin-left: 0;
		gap: .8rem 1.6rem;
	}

	.bp-promo__pozycja--adres,
	.bp-promo__kontakt .bp-spolecznosciowe { display: none; }

	.bp-promo__kontakt .bpj-przelacznik {
		padding-left: 1.6rem;
	}
}

/* Poniżej 30em nie mieści się już nic poza telefonem. */
@media (max-width: 30em) {
	.bp-promo__kontakt a[href^="mailto:"] { display: none; }
}

/* =====================================================================
   PASEK „Z CZYM MOŻEMY POMÓC?” - pod menu

   Druga droga do oferty: menu jest ułożone według tego, co robimy,
   a ten pasek według tego, kim jest odwiedzający.
   ===================================================================== */

.bp-pomoc {
	border-top: 1px solid var(--bp-ramka-lekka);
	background: var(--bp-biel);
}

.bp-pomoc__srodek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 3.2rem;
	padding-block: 1.4rem;
}

.bp-pomoc__naglowek {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bp-tekst-2);
	/* Kreska oddzielająca napis od pozycji - bez niej wygląda jak
	   pierwsza pozycja listy, tylko szara. */
	padding-right: 3.2rem;
	border-right: 1px solid var(--bp-ramka-lekka);
}

.bp-pomoc__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 3.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-pomoc__lista a {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-size: 1.5rem;
	color: var(--bp-tekst);
	text-decoration: none;
}

.bp-pomoc__lista a:hover,
.bp-pomoc__lista a:focus { color: var(--bp-akcent); }

.bp-pomoc__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--bp-tekst-2);
}

.bp-pomoc__lista a:hover .bp-pomoc__ikona,
.bp-pomoc__lista a:focus .bp-pomoc__ikona { color: var(--bp-akcent); }

/*
   Pasek chowa się na telefonie. Pięć pozycji w wąskim ekranie zajmuje
   cały pierwszy ekran i spycha treść strony poniżej krawędzi - a to
   jest droga dodatkowa, nie główna.
*/
@media (max-width: 64em) {
	.bp-pomoc { display: none; }
}

/* --- „Z CZYM MOŻEMY POMÓC?” W PANELU NA TELEFONIE ---------------------
   Na komputerze te ścieżki stoją paskiem pod menu i są drugą drogą
   do oferty. Na telefonie pasek się chowa, więc lista wraca tutaj -
   inaczej ta droga po prostu znikałaby na najmniejszym ekranie. */

.bp-panel-mobilny__pomoc {
	margin-top: 2.4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bp-ramka-lekka);
}

/*
   PANEL JEST CZARNY, WIEC NAPISY SA BIALE.

   Bylo `--bp-tekst-2` (szary) i `--bp-czern` - czyli kolory pisane
   pod jasne tlo strony, wklejone do ciemnego panelu. Naglowek ledwie
   bylo widac, a nazwy sciezek zlewaly sie z tlem calkowicie.

   Przedrostek `.bp-panel-mobilny` podnosi wage ponad regule ogolna,
   ktora te napisy przemalowywala.
*/
.bp-panel-mobilny .bp-panel-mobilny__naglowek {
	margin: 0 0 1.2rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .65);
}

.bp-panel-mobilny__pomoc-lista {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-panel-mobilny__pomoc-lista li { margin: 0; list-style: none; }

.bp-panel-mobilny__pomoc-lista a {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	/* Wysokość celu do dotknięcia: palec trafia pewnie dopiero
	   od ok. 44 px, a to jest lista, w którą trzeba trafić za pierwszym
	   razem. */
	min-height: 4.4rem;
	padding: .6rem 0;
	color: var(--bp-biel);
	font-size: 1.7rem;
	text-decoration: none;
}

.bp-panel-mobilny__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--bp-akcent);
}


/* --- PRZELACZNIK JEZYKA NA TELEFONIE ----------------------------------
   Dosuniety do prawej krawedzi paska. `margin-left: auto` dziala takze
   wtedy, gdy pasek zlamie sie na dwa wiersze - `justify-content` sam
   by wtedy nie wystarczyl. */

@media (max-width: 64em) {
	.bp-promo__kontakt .bpj-przelacznik { margin-left: auto; }
	.bp-promo__srodek { justify-content: space-between; }
}


/* =====================================================================
   UKŁAD Z KLOCKÓW (od 1.19.0)

   Szablon: `includes/naglowek-uklad.php`. Każdy wiersz ma trzy miejsca:
   lewo, środek, prawo. Wiersz jest wypisany dwa razy - dla komputera
   i dla telefonu - a próg 60em rozstrzyga, który widać. To ten sam próg,
   przy którym od zawsze pojawia się przycisk menu.

   SIATKA, NIE FLEX. Przy trzech kolumnach `1fr auto 1fr` środek stoi
   naprawdę na środku ekranu, a nie w połowie wolnego miejsca między
   lewą a prawą stroną. `minmax(max-content, ...)` pilnuje, żeby strona
   z długim menu nie ściskała się poniżej szerokości swojej treści.
   ===================================================================== */

.bp-uklad {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	column-gap: 3.2rem;
}

.bp-uklad__miejsce {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	min-width: 0;
}

.bp-uklad__miejsce--srodek { justify-content: center; }
.bp-uklad__miejsce--prawo  { justify-content: flex-end; }

/* Dawny układ dopychał menu w prawo marginesem logo. W siatce miejsce
   robi to samo, a margines rozpychałby logo i menu stojące obok siebie. */
.bp-uklad .bp-naglowek__marka { margin-right: 0; }

/* --- który zestaw widać (od 1.23.0 także tablet) ---------------------
   Komputer od 60em, tablet 40-59.99em, telefon poniżej 40em. Zestaw,
   pasek i menu rozwijane mają klasę `bp-urz` i klasy urządzeń, na których
   mają być widoczne (`bp-na-komputerze`, `bp-na-tablecie`,
   `bp-na-telefonie`). `!important`, bo zestaw ma własne `display: grid`,
   a otwarte menu rozwijane - zdjęty atrybut `hidden`. */

@media (max-width: 39.99em) {
	.bp-urz:not(.bp-na-telefonie) { display: none !important; }
}

@media (min-width: 40em) and (max-width: 59.99em) {
	.bp-urz:not(.bp-na-tablecie) { display: none !important; }
}

@media (min-width: 60em) {
	.bp-urz:not(.bp-na-komputerze) { display: none !important; }
}

/* Zestaw bez klas urządzeń (motyw potomny z własnym kawałkiem) - jak
   przed 1.23. */
@media (max-width: 59.99em) {
	.bp-uklad.bp-uklad--komputer:not(.bp-urz) { display: none; }
}

@media (min-width: 60em) {
	.bp-uklad.bp-uklad--telefon:not(.bp-urz) { display: none; }
}

/* --- wiersz główny na telefonie --------------------------------------
   Czwarta kolumna to przycisk menu - zawsze na prawym końcu. Dawne
   reguły chowały na telefonie menu i przycisk akcji w ogóle; teraz
   o tym decyduje ustawienie, więc tutaj je przywracamy. */

.bp-uklad--telefon.bp-naglowek__srodek {
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) auto;
	column-gap: 1.6rem;
}

.bp-uklad--telefon .bp-uklad__miejsce { gap: 1.6rem; }
.bp-uklad--telefon .bp-menu { display: block; }
.bp-uklad--telefon .bp-naglowek__akcja { display: inline-flex; }

/* Menu w wierszu głównym na telefonie nie łamie się na kilka linii -
   przewija się w bok w swoim pudełku, nie rozpychając strony. */
.bp-uklad--telefon .bp-menu { overflow-x: auto; }

/* --- pasek nad menu -------------------------------------------------- */

.bp-promo .bp-uklad {
	column-gap: 2.4rem;
	padding-block: 1rem;
}

.bp-promo .bp-uklad__miejsce {
	flex-wrap: wrap;
	gap: .8rem 2.4rem;
}

/* KRESKA MIĘDZY KLOCKAMI. Krótka i wyśrodkowana w pionie, więc rysowana
   osobnym znacznikiem, a nie obramowaniem - obramowanie biegnie zawsze
   przez całą wysokość elementu. Stoi w połowie odstępu 2.4rem. */
.bp-promo .bp-uklad__miejsce > .bp-klocek + .bp-klocek { position: relative; }

.bp-promo .bp-uklad__miejsce > .bp-klocek + .bp-klocek::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -1.2rem;
	width: 1px;
	height: 1.6rem;
	margin-top: -.8rem;
	background: rgba(255, 255, 255, .35);
}

/* Między dwiema pozycjami kontaktowymi kreski nie ma - jak w dawnym
   pasku, gdzie adres, telefon i e-mail stały jednym ciągiem. */
.bp-promo .bp-uklad__miejsce > .bp-klocek--kontaktowy + .bp-klocek--kontaktowy::before { display: none; }

.bp-promo .bp-menu__lista a { color: rgba(255, 255, 255, .9); }
.bp-promo .bp-menu__lista a:hover,
.bp-promo .bp-menu__lista .current-menu-item > a { color: #fff; }
.bp-promo .bp-menu__lista .sub-menu a { color: var(--bp-czern); }

.bp-promo .bp-spolecznosciowe__link { color: rgba(255, 255, 255, .9); }
.bp-promo .bp-spolecznosciowe__link:hover,
.bp-promo .bp-spolecznosciowe__link:focus { color: #fff; }

.bp-klocek--jezyki .bpj-przelacznik {
	display: flex;
	align-items: center;
}

/* --- dane kontaktowe ------------------------------------------------- */


.bp-kontakt__pozycja {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

a.bp-kontakt__pozycja:hover,
a.bp-kontakt__pozycja:focus { text-decoration: underline; }

/* Osobne pudełko o stałym rozmiarze: napisy trzech pozycji stoją w jednej
   linii niezależnie od tego, jak wysoka jest sama ikona. */
.bp-kontakt__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	opacity: .85;
}

.bp-promo .bp-kontakt__pozycja { color: rgba(255, 255, 255, .9); }
.bp-promo a.bp-kontakt__pozycja:hover,
.bp-promo a.bp-kontakt__pozycja:focus { color: #fff; }

.bp-naglowek__glowny .bp-kontakt__pozycja { color: var(--bp-czern); }
.bp-naglowek__glowny .bp-kontakt__ikona { color: var(--bp-akcent); opacity: 1; }

/* KAŻDY KLOCEK W KAŻDYM MIEJSCU (od 1.23.0). Gdzie stoi telefon, e-mail
   i adres, decyduje WYŁĄCZNIE układ w „Dostosuj" - arkusz niczego już nie
   chowa. Do 1.22 e-mail w pasku znikał poniżej 480 px, a adres przy
   960-1024 px: klocek ustawiony w panelu na stronie się nie pokazywał.
   Zamiast chowania pozycje w pasku przechodzą do drugiej linii.

   Pasek bez niczego w środku (najczęstszy) jest rzędem elastycznym:
   lewa i prawa strona zwężają się, gdy brakuje miejsca, a ich pozycje
   łamią się do nowej linii (`flex-wrap` wyżej). Dopóki miejsca starcza,
   wygląda dokładnie jak siatka. Pasek ze środkiem zostaje siatką -
   środek musi stać na środku ekranu; na tablecie i telefonie jego boki
   mogą się zwężać. */
.bp-promo .bp-uklad:has(> .bp-uklad__miejsce--srodek:empty) {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bp-promo .bp-uklad:has(> .bp-uklad__miejsce--srodek:empty) > .bp-uklad__miejsce { flex: 0 1 auto; }
.bp-promo .bp-uklad:has(> .bp-uklad__miejsce--srodek:empty) > .bp-uklad__miejsce:empty { display: none; }
.bp-promo .bp-uklad:has(> .bp-uklad__miejsce--srodek:empty) > .bp-uklad__miejsce--prawo { margin-left: auto; }

.bp-promo .bp-uklad--telefon {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

/* Adres to jedyna pozycja, która może złamać się w środku. */
.bp-promo .bp-kontakt__pozycja--adres { white-space: normal; }

/* Na wąskim ekranie pozycje w pasku stoją ciaśniej. */
@media (max-width: 39.99em) {
	.bp-promo .bp-uklad--telefon .bp-uklad__miejsce { gap: .6rem 1.6rem; }
	.bp-promo .bp-uklad--telefon .bp-uklad__miejsce > .bp-klocek + .bp-klocek::before { left: -.8rem; }
}

/* --- menu rozwijane na telefonie ------------------------------------- */

.bp-panel-mobilny > .bp-klocek + .bp-klocek { margin-top: 2.4rem; }
.bp-panel-mobilny .bp-klocek--menu > .bp-panel-mobilny__lista { margin: 0; }

.bp-panel-mobilny > .bp-klocek--kontaktowy + .bp-klocek--kontaktowy { margin-top: 1.2rem; }

.bp-panel-mobilny .bp-kontakt__pozycja {
	color: var(--bp-biel);
	white-space: normal;
}

/* Ikona na ciemnym panelu - biala. Kolor glowny bywa ciemny (granat)
   i na tle panelu nie mial 3:1 (M21). */
.bp-panel-mobilny .bp-kontakt__ikona { color: var(--bp-biel); opacity: .85; }
.bp-panel-mobilny .bp-spolecznosciowe__link,
.bp-panel-mobilny .bpj-przelacznik { color: var(--bp-biel); }
.bp-panel-mobilny .bp-klocek--przycisk .bp-naglowek__akcja { display: flex; width: 100%; }

/* =====================================================================
   NAGŁÓWEK PŁYWAJĄCY (od 1.19.0)

   Zaokrąglona wyspa z cieniem, odsunięta od krawędzi ekranu, przyklejona
   przy przewijaniu. LEŻY NA PIERWSZEJ SEKCJI (od 1.23; od 1.24 bez
   skryptu): ujemny margines pod nagłówkiem wciąga pierwszą sekcję pod
   wyspę, a pierwsza sekcja dostaje przezroczystą górną ramkę tej samej
   wysokości. Tło sekcji maluje się także pod ramką (`background-origin:
   border-box`), a treść sekcji stoi tam, gdzie stała. Wysokość wyspy
   liczy arkusz (`--bp-wyspa`), więc przy wczytaniu nic nie drga.

   GEOMETRIA (zasada M9 - lewa krawędź logo = lewa krawędź treści):
   wyspa jest szersza od treści o pół oddechu z każdej strony, a w środku
   ma wyściółkę pół oddechu. Pół plus pół daje cały oddech, więc logo
   stoi dokładnie tam, gdzie treść sekcji - przy każdej szerokości ekranu.

   Obwódka jest cieniem, nie `border` - ramka dokładałaby piksel
   i przesuwała logo względem treści.
   ===================================================================== */

.bp-naglowek--plywajacy {
	padding-top: 1.2rem;
	background: transparent;
	border-bottom: 0;
}

/* Wciagniecie pierwszej sekcji pod wyspe - tylko przy klasie na <body>.
   Motyw potomny, ktory ustawia naglowek po swojemu (np. `fixed`), zdejmuje
   te klase filtrem `body_class` i ta czesc go nie dotyczy. */
body.bp-ma-plywajacy .bp-naglowek--plywajacy {
	margin-bottom: calc(-1 * (1.2rem + var(--bp-wyspa)));
}

/* Wysokość wyspy: najniższy wiersz nagłówka albo logo, jeśli wyższe. */
:root { --bp-wyspa: max(8.8rem, var(--bp-logo-wysokosc, 4.6rem)); }

@media (max-width: 59.99em) {
	:root { --bp-wyspa: max(var(--bp-naglowek-wysokosc-tel), var(--bp-logo-wysokosc-tel, 4.6rem)); }
}

body.bp-ma-plywajacy #tresc > :first-child {
	border-top: calc(1.2rem + var(--bp-wyspa)) solid transparent;
	background-origin: border-box;
}

.bp-naglowek--plywajacy .bp-naglowek__glowny,
.bp-naglowek--plywajacy .bp-panel-mobilny {
	width: calc(100% - max(var(--bp-oddech), 10px));
	max-width: calc(var(--bp-tresc) - max(var(--bp-oddech), 10px));
	margin-inline: auto;
	border-radius: var(--bp-naglowek-promien, 1.6rem);
}

.bp-naglowek--plywajacy .bp-naglowek__glowny {
	background: var(--bp-biel);
	box-shadow: 0 0 0 1px var(--bp-ramka-lekka), 0 .8rem 2.4rem rgba(2, 6, 23, .08);
}

.bp-naglowek--plywajacy .bp-naglowek__glowny > .bp-tresc {
	max-width: none;
	padding-inline: calc(max(var(--bp-oddech), 10px) / 2);
}

.bp-naglowek--plywajacy .bp-panel-mobilny { margin-top: .8rem; }

/* PUSTY ŚRODEK NIE ZABIERA MIEJSCA (od 1.20.2). Trzy kolumny mają dwa
   odstępy `column-gap`, także wtedy, gdy w środku nic nie stoi. Przy
   długim menu po prawej brakowało przez to kilkudziesięciu pikseli i
   przycisk wychodził poza krawędź treści. Bez środka zostają dwie
   kolumny i jeden odstęp - wygląd bez zmian. Tylko wiersze komputerowe:
   wiersz telefonu ma czwartą kolumnę na przycisk menu. */
.bp-uklad--komputer:has(> .bp-uklad__miejsce--srodek:empty) {
	grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
}

.bp-uklad--komputer > .bp-uklad__miejsce--srodek:empty { display: none; }


/* =====================================================================
   WYGLĄD LOGO, MENU I PODMENU Z „DOSTOSUJ" (od 1.21.0)

   Pola: `includes/naglowek-wyglad.php`. Liczby i kolory przychodzą jako
   zmienne, wybory z list - jako klasy na `<body>`. Wartość po przecinku
   w `var()` to wartość domyślna, ta sama, która stała tu wcześniej.
   ===================================================================== */

/* --- logo --- */

.bp-naglowek__marka img { height: var(--bp-logo-wysokosc-tel, 4.6rem); }

@media (min-width: 60em) {
	.bp-naglowek__marka img { height: var(--bp-logo-wysokosc, 4.6rem); }
}

/* --- menu: pismo i kolory --- */

.bp-menu__lista a {
	color: var(--bp-menu-kolor, var(--bp-czern));
}

.bp-menu__lista a:hover,
.bp-menu__lista .current-menu-item > a,
.bp-menu__lista .current-menu-ancestor > a { color: var(--bp-menu-kolor-hover, var(--bp-akcent)); }

.bp-menu-grubosc--400 .bp-menu__lista > li > a { font-weight: 400; }
.bp-menu-grubosc--600 .bp-menu__lista > li > a { font-weight: 600; }
.bp-menu-grubosc--700 .bp-menu__lista > li > a { font-weight: 700; }

.bp-menu-litery--wielkie .bp-naglowek__glowny .bp-menu__lista > li > a {
	text-transform: uppercase;
	letter-spacing: .06em;
}

.bp-menu-kroj--naglowki .bp-naglowek__glowny .bp-menu__lista a {
	font-family: var(--bp-pismo-naglowki, var(--bp-pismo));
}

/* --- menu: efekt po najechaniu (wiersz główny nagłówka) ---

   Kreski rysuje `::before` - `::after` zajmuje grot pozycji z podmenu. */

.bp-naglowek__glowny .bp-menu__lista > li > a { position: relative; }

.bp-menu-efekt--podkreslenie .bp-naglowek__glowny .bp-menu__lista > li > a:hover,
.bp-menu-efekt--podkreslenie .bp-naglowek__glowny .bp-menu__lista > .current-menu-item > a,
.bp-menu-efekt--podkreslenie .bp-naglowek__glowny .bp-menu__lista > .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .6rem;
}

.bp-menu-efekt--kreska-srodek .bp-naglowek__glowny .bp-menu__lista > li > a::before,
.bp-menu-efekt--kreska-lewo .bp-naglowek__glowny .bp-menu__lista > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.8rem;
	height: 2px;
	background: var(--bp-menu-kolor-hover, var(--bp-akcent));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}

.bp-menu-efekt--kreska-lewo .bp-naglowek__glowny .bp-menu__lista > li > a::before { transform-origin: left; }

.bp-menu-efekt--kreska-srodek .bp-naglowek__glowny .bp-menu__lista > li > a:hover::before,
.bp-menu-efekt--kreska-srodek .bp-naglowek__glowny .bp-menu__lista > .current-menu-item > a::before,
.bp-menu-efekt--kreska-srodek .bp-naglowek__glowny .bp-menu__lista > .current-menu-ancestor > a::before,
.bp-menu-efekt--kreska-lewo .bp-naglowek__glowny .bp-menu__lista > li > a:hover::before,
.bp-menu-efekt--kreska-lewo .bp-naglowek__glowny .bp-menu__lista > .current-menu-item > a::before,
.bp-menu-efekt--kreska-lewo .bp-naglowek__glowny .bp-menu__lista > .current-menu-ancestor > a::before { transform: scaleX(1); }

/* Pasek przy górnej krawędzi nagłówka: pozycja menu sięga od góry do
   dołu wiersza (patrz „podmenu od dolnej krawędzi"), więc `li::before`
   stoi dokładnie na górnej krawędzi nagłówka. */
.bp-menu-efekt--kreska-gora .bp-naglowek__glowny .bp-uklad--komputer .bp-menu__lista > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--bp-menu-kolor-hover, var(--bp-akcent));
	opacity: 0;
	transition: opacity .2s ease;
}

.bp-menu-efekt--kreska-gora .bp-naglowek__glowny .bp-uklad--komputer .bp-menu__lista > li:hover::before,
.bp-menu-efekt--kreska-gora .bp-naglowek__glowny .bp-uklad--komputer .bp-menu__lista > .current-menu-item::before,
.bp-menu-efekt--kreska-gora .bp-naglowek__glowny .bp-uklad--komputer .bp-menu__lista > .current-menu-ancestor::before { opacity: 1; }

/* Tło pod pozycją. Ujemny margines oddaje wyściółkę - napisy stoją tam,
   gdzie bez efektu, więc krawędzie menu się nie przesuwają. */
.bp-menu-efekt--tlo .bp-naglowek__glowny .bp-menu__lista > li > a {
	margin: -.6rem -1.2rem;
	padding: .6rem 1.2rem;
	border-radius: var(--bp-btn-promien);
	transition: background-color .15s ease, color .15s ease;
}

.bp-menu-efekt--tlo .bp-naglowek__glowny .bp-menu__lista > li > a:hover,
.bp-menu-efekt--tlo .bp-naglowek__glowny .bp-menu__lista > .current-menu-item > a,
.bp-menu-efekt--tlo .bp-naglowek__glowny .bp-menu__lista > .current-menu-ancestor > a {
	background: color-mix(in srgb, var(--bp-menu-kolor-hover, var(--bp-akcent)) 10%, transparent);
}

/* --- podmenu: od dolnej krawędzi nagłówka ---

   Pozycja menu rozciąga się na całą wysokość wiersza nagłówka. Podmenu
   stoi `top: 100%` względem pozycji, czyli dokładnie pod dolną krawędzią
   nagłówka, a kursor nie gubi najechania w drodze do podmenu. */

.bp-podmenu-poz--pod-naglowkiem .bp-naglowek__glowny .bp-uklad--komputer .bp-uklad__miejsce:has(> .bp-klocek--menu) { align-self: stretch; }

.bp-podmenu-poz--pod-naglowkiem .bp-naglowek__glowny .bp-uklad--komputer .bp-klocek--menu {
	display: flex;
	align-self: stretch;
}

.bp-podmenu-poz--pod-naglowkiem .bp-naglowek__glowny .bp-uklad--komputer .bp-klocek--menu > .bp-menu__lista { align-items: stretch; }

.bp-podmenu-poz--pod-naglowkiem .bp-naglowek__glowny .bp-uklad--komputer .bp-menu__lista > li {
	display: flex;
	align-items: center;
}

/* --- podmenu: pismo i kolor --- */

.bp-menu__lista .sub-menu a { font-size: var(--bp-podmenu-rozmiar, 1.4rem); }

.bp-menu__lista .sub-menu a:hover,
.bp-menu__lista .sub-menu a:focus,
.bp-menu__lista .sub-menu .current-menu-item > a { color: var(--bp-podmenu-kolor-hover, var(--bp-akcent)); }

/* --- podmenu: wygląd --- */

.bp-podmenu--kreska .bp-menu__lista .sub-menu { border-top: 3px solid var(--bp-akcent); }

.bp-podmenu--zaokraglona .bp-menu__lista .sub-menu {
	border-radius: 0 0 var(--bp-btn-promien) var(--bp-btn-promien);
	overflow: hidden;
}

.bp-podmenu--ciemna .bp-menu__lista .sub-menu {
	background: var(--bp-czern);
	box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .25);
}

.bp-podmenu--ciemna .bp-menu__lista .sub-menu a { color: rgba(255, 255, 255, .85); }

.bp-podmenu--ciemna .bp-menu__lista .sub-menu a:hover,
.bp-podmenu--ciemna .bp-menu__lista .sub-menu a:focus,
.bp-podmenu--ciemna .bp-menu__lista .sub-menu .current-menu-item > a {
	background: rgba(255, 255, 255, .08);
	color: var(--bp-podmenu-kolor-hover, var(--bp-biel));
}

/* --- podmenu: animacja --- */

.bp-podmenu-anim--zanikanie .bp-menu__lista .sub-menu,
.bp-podmenu-anim--zanikanie .bp-menu__lista li:hover > .sub-menu { transform: none; }

.bp-podmenu-anim--rozwijanie .bp-menu__lista .sub-menu {
	transform: none;
	clip-path: inset(0 0 100% 0);
	transition: opacity .2s ease, clip-path .22s ease, visibility .22s;
}

.bp-podmenu-anim--rozwijanie .bp-menu__lista li:hover > .sub-menu,
.bp-podmenu-anim--rozwijanie .bp-menu__lista li:focus-within > .sub-menu { clip-path: inset(0 -3rem -3rem -3rem); }

.bp-podmenu-anim--brak .bp-menu__lista .sub-menu {
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.bp-menu__lista .sub-menu { transition: none; transform: none; }
}