/*
 * Nagłówek serwisu i nakładka wyszukiwania (makieta: css/style.css,
 * rozdziały 6.1 i 6.20; szkielet w render.php).
 *
 * Nagłówek stoi poza `main`, więc nie obejmuje go skala `--u`: odstępy
 * i pismo biorą wartości presetów z `:root` (na telefonie tryb mobilny
 * z tokeny.css), dokładnie jak w makiecie. Poniżej 1360 px menu jest panelem
 * wysuwanym z prawej z ekranami podmenu, od 1360 px paskiem z rozwinięciami.
 * Reset przycisków i list tylko w obrębie bloku (makieta ma go globalnie).
 */

.implai-navigation {
	--implai-nav-pismo-male: 0.875rem;
	--implai-nav-odstep: clamp(1.25rem, -0.571rem + 2.143vw, 2rem);
	--implai-nav-panel-margines: 0.75rem;
	--implai-nav-panel-szerokosc: 22.5rem;
	--implai-nav-panel-wciecie: 1.5rem;
	--implai-nav-panel-wciecie-gora: 4.25rem;
	--implai-nav-kontrolka-odstep: 1.25rem;
	--implai-nav-kontrolka: 2.5rem;
	--implai-nav-boks: 54rem;
	--implai-nav-boks-waski: 22.5rem;
	--implai-nav-boks-jezyk: 11.25rem;
	--implai-nav-boks-wciecie: 2rem;
	--implai-nav-boks-odstep: calc(var(--wp--preset--spacing--5) + var(--wp--preset--spacing--2));
	--implai-nav-boks-wjazd: -0.5rem;
	--implai-nav-cien: 0 1rem 2rem rgb(0 0 0 / 0.12);

	position: relative;
	z-index: 30;
	display: grid;
	grid-template-columns: minmax(0, var(--wp--style--global--wide-size));
	justify-content: center;
	padding-inline: var(--wp--preset--spacing--bok-waski);
	padding-block: var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--czern);
}

@media (width < 48rem) {

	.implai-navigation {
		--implai-nav-pismo-male: 0.75rem;
	}
}

/* Reset w `:where()`: waga zero, więc każda reguła bloku wygrywa bez
   dublowania selektorów. */
:where(.implai-navigation) :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:where(.implai-navigation) :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.implai-navigation) :where(p) {
	margin: 0;
}

.implai-navigation__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
}

/* Pasek wracający do kadru po zjechaniu poniżej progu: `sticky`, nie `fixed`,
   więc zostaje w przepływie i włączenie stanu niczego nie przesuwa. Animowany
   jest tylko wjazd (`backwards`: po wjeździe nie zostaje żadne przesunięcie,
   bo element z `translate` stałby się układem odniesienia panelu `fixed`). */
.implai-navigation.is-stuck {
	position: sticky;
	inset-block-start: 0;
	animation-name: implai-nav-wjazd;
	animation-duration: var(--wp--custom--ruch--srednio);
	animation-timing-function: var(--wp--custom--ruch--wyjscie);
	animation-fill-mode: backwards;
}

@keyframes implai-nav-wjazd {

	from {
		translate: 0 -100%;
		opacity: 0;
	}
}

/* Strażnik obu progów: od góry dokumentu do 250 px, bez pozycjonowanego
   przodka. Wypada z kadru dopiero poniżej 250 px (pasek się przykleja), cały
   mieści się tylko na samej górze (pasek wraca do przepływu). */
.implai-navigation__sentinel {
	position: absolute;
	inset-block-start: 0;
	inline-size: 1px;
	block-size: 15.625rem;
	pointer-events: none;
}

.implai-navigation__logo {
	display: block;
	flex: none;
	inline-size: 14.85rem;
	max-inline-size: 42vw;
}

.implai-navigation__logo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Menu poniżej 1360 px: panel wysuwany z prawej nad przyciemnioną stroną.
   Warstwa `nav` kryje całe okno, a przyciemnienie to jej `::before`, więc
   kliknięcie obok panelu trafia w sam `nav`. `visibility` gaśnie z opóźnieniem
   równym wyjazdowi. `z-index`, bo obrócone kreski przycisku menu przebijały
   nad panel. */
.implai-navigation__nav {
	position: fixed;
	inset: 0;
	z-index: 1;
	visibility: hidden;
	transition: visibility 0s linear var(--wp--custom--ruch--szuflada-czas);
}

.implai-navigation__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--custom--kolor--zaslona);
	opacity: 0;
	transition: opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.implai-navigation__nav.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.implai-navigation__nav.is-open::before {
	opacity: 1;
}

/* Panel 12 px od góry, prawej i dołu; na wąskim telefonie bez marginesów
   bocznych, od około 384 px 360 px przy prawej krawędzi. `clip`, nie
   `hidden`: element z `hidden` da się przewinąć skryptem i fokus na
   wjeżdżającym przycisku powrotu przesuwał ekran. */
.implai-navigation__panel {
	position: absolute;
	inset-block: var(--implai-nav-panel-margines);
	inset-inline-end: var(--implai-nav-panel-margines);
	inline-size: calc(100% - 2 * var(--implai-nav-panel-margines));
	max-inline-size: var(--implai-nav-panel-szerokosc);
	border-radius: var(--wp--preset--border-radius--karta);
	background-color: var(--wp--preset--color--biel);
	box-shadow: var(--implai-nav-cien);
	overflow: hidden;
	overflow: clip;
	translate: calc(100% + var(--implai-nav-panel-margines)) 0;
	transition: translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada);
}

.implai-navigation__nav.is-open .implai-navigation__panel {
	translate: none;
}

/* Ekran główny przewija się sam; górne wcięcie robi miejsce na krzyżyk.
   Bez pozycji: ekran podmenu zaczepia się o panel. */
.implai-navigation__screen {
	display: flex;
	flex-direction: column;
	gap: var(--implai-nav-panel-wciecie);
	block-size: 100%;
	padding: var(--implai-nav-panel-wciecie-gora) var(--implai-nav-panel-wciecie) var(--implai-nav-panel-wciecie);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: var(--wp--preset--font-size--wstep);
}

.implai-navigation__menu,
.implai-navigation__utils,
.implai-navigation__sub-list {
	display: flex;
	flex-direction: column;
}

/* Krzyżyk leży nad oboma ekranami i z obu zamyka cały panel. */
.implai-navigation__close {
	position: absolute;
	inset-block-start: var(--implai-nav-kontrolka-odstep);
	inset-inline-end: var(--implai-nav-kontrolka-odstep);
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: var(--implai-nav-kontrolka);
	block-size: var(--implai-nav-kontrolka);
	transition: opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.implai-navigation__close-icon,
.implai-navigation__overlay-close-icon {
	display: block;
	inline-size: 2rem;
	block-size: 2rem;
	background-color: currentcolor;
	mask: url(../../assets/icons/search-close.svg) center / contain no-repeat;
}

/* Pozycja z podmenu w panelu: przycisk na całą szerokość wiersza, nazwa po
   lewej, strzałka w prawo po prawej. */
.implai-navigation__sub-toggle {
	inline-size: 100%;
	justify-content: space-between;
	text-align: start;
}

.implai-navigation__caret,
.implai-navigation__back-icon {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: currentcolor;
	mask: url(../../assets/icons/contact-chevron.svg) center / contain no-repeat;
}

.implai-navigation__caret {
	rotate: -90deg;
}

.implai-navigation__back-icon {
	rotate: 90deg;
}

/* Ekran podmenu: tej samej wielkości co panel, wjeżdża z prawej tą samą
   krzywą co panel. Ekran trzeciego poziomu leży w ekranie rodzica, który
   przycina go w poziomie. */
.implai-navigation__sub {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	padding: var(--implai-nav-panel-wciecie-gora) var(--implai-nav-panel-wciecie) var(--implai-nav-panel-wciecie);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--wp--preset--color--biel);
	visibility: hidden;
	translate: 100% 0;
	transition:
		translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada),
		visibility 0s linear var(--wp--custom--ruch--szuflada-czas);
}

.implai-navigation__item.is-open > .implai-navigation__sub {
	visibility: visible;
	translate: none;
	transition:
		translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada),
		visibility 0s linear 0s;
}

.implai-navigation__sub-title {
	font-size: var(--wp--preset--font-size--tytul-s);
	font-weight: 500;
	line-height: var(--wp--custom--interlinia--normalna);
}

/* Powrót w jednej linii z krzyżykiem, po lewej, wyjęty z przepływu. */
.implai-navigation__back {
	position: absolute;
	inset-block-start: var(--implai-nav-kontrolka-odstep);
	inset-inline-start: var(--implai-nav-panel-wciecie);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-block-size: var(--implai-nav-kontrolka);
	font-size: var(--wp--preset--font-size--tekst);
	transition: color var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie);
}

@media (hover: hover) {

	.implai-navigation__close:hover,
	.implai-navigation__overlay-close:hover {
		opacity: 0.7;
	}

	.implai-navigation__back:hover {
		color: var(--wp--preset--color--blekit);
	}
}

/* Strona pod otwartym panelem się nie przewija (miejsce na pasek przewijania
   jest zarezerwowane w podstawie, więc nic nie skacze). */
@media (width < 85rem) {

	html:has(.implai-navigation__nav.is-open) {
		overflow: hidden;
	}
}

.implai-navigation__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-block-size: 2.75rem;
	transition: color var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie);
}

/* Odnośnik nadrzędny schowany w panelu; stoi po `__link`, bo ma tę samą
   wagę. */
.implai-navigation__link--parent {
	display: none;
}

/* Projekt nie wyróżnia bieżącej pozycji: `aria-current` niesie logo. */
.implai-navigation__link:hover {
	color: var(--wp--preset--color--blekit);
}

.implai-navigation__link--search::before {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: currentcolor;
	mask: url(../../assets/icons/search.svg) center / contain no-repeat;
}

/* Wiersz rozwinięcia: nazwa, pod nią opis w jednej linii z wielokropkiem. */
.implai-navigation__entry {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	padding-block: var(--wp--preset--spacing--2);
}

.implai-navigation__entry-name {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.implai-navigation__entry-text {
	overflow: hidden;
	font-size: var(--wp--preset--font-size--tekst);
	color: var(--wp--preset--color--tekst-przygaszony);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Przycisk menu (projekt mobilny): ikona 20 px, odstęp i napis „Menu”.
   Wcięcie powiększa pole kliknięcia, ujemny margines oddaje je układowi. */
.implai-navigation__toggle {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--3);
	margin: calc(var(--wp--preset--spacing--3) * -1);
	margin-inline-start: auto;
	font-size: var(--implai-nav-pismo-male);

	/* Wiersz 24 px z projektu niezależnie od pisma (14 albo 12 px). */
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.5rem;
}

/* Trzy kreski 1 px co 3,75 px, środkowa krótsza; przy otwarciu krzyżyk. */
.implai-navigation__toggle-icon {
	display: grid;
	flex: none;
	align-content: center;
	justify-content: center;
	row-gap: 0.171875rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.implai-navigation__toggle-bar {
	display: block;
	inline-size: 0.885rem;
	block-size: 1px;
	border-radius: 1px;
	background-color: currentcolor;
	transition:
		transform var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
		opacity var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie);
}

.implai-navigation__toggle-bar--mid {
	inline-size: 0.729rem;
}

.implai-navigation__toggle[aria-expanded="true"] .implai-navigation__toggle-bar--top {
	transform: translateY(0.234375rem) rotate(45deg);
}

.implai-navigation__toggle[aria-expanded="true"] .implai-navigation__toggle-bar--mid {
	opacity: 0;
}

.implai-navigation__toggle[aria-expanded="true"] .implai-navigation__toggle-bar--bottom {
	transform: translateY(-0.234375rem) rotate(-45deg);
}

/* Telefon: pasek 48 px, logo 158 px, odstęp przycisku menu 24 px. */
@media (width < 48rem) {

	.implai-navigation__logo {
		inline-size: 9.875rem;
		max-inline-size: none;
	}

	.implai-navigation__toggle {
		gap: var(--wp--preset--spacing--7);
		padding: var(--wp--preset--spacing--5);
		margin: calc(var(--wp--preset--spacing--5) * -1);
		margin-inline-start: auto;
	}
}

/* Pasek poziomy od 1360 px: osiem pozycji mieści się w jednej linii dopiero
   od około 1330 px okna (ten sam próg w view.js). */
@media (min-width: 85rem) {

	.implai-navigation__nav {
		position: static;
		flex: 1;
		visibility: visible;
		transition: none;
	}

	.implai-navigation__nav::before {
		content: none;
	}

	.implai-navigation__panel {
		position: static;
		inline-size: auto;
		max-inline-size: none;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		overflow: visible;
		translate: none;
		transition: none;
	}

	.implai-navigation__screen {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--wp--preset--spacing--6);
		block-size: auto;
		padding: 0;
		overflow: visible;
		font-size: inherit;
	}

	.implai-navigation__close,
	.implai-navigation__sub-toggle,
	.implai-navigation__sub {
		display: none;
	}

	.implai-navigation__link--parent {
		display: flex;
	}

	/* Rozwinięcie: najechanie wysuwa boks. Pozycja bez własnej strony, więc
	   cała nazwa jest przyciskiem, tym samym, który w panelu otwiera ekran. */
	.implai-navigation__item--mega {
		--implai-nav-boks-rozmiar: var(--implai-nav-boks);

		position: relative;
		display: flex;
		align-items: center;
	}

	.implai-navigation__item--mega-narrow {
		--implai-nav-boks-rozmiar: var(--implai-nav-boks-waski);
	}

	.implai-navigation__item--mega > .implai-navigation__sub-toggle {
		display: flex;
		inline-size: auto;
		padding-inline: var(--wp--preset--spacing--1);
	}

	.implai-navigation__item--mega > .implai-navigation__sub-toggle--labelled {
		gap: var(--wp--preset--spacing--1);
		padding-inline: 0;
	}

	.implai-navigation__item--mega > .implai-navigation__sub-toggle .implai-navigation__caret {
		rotate: none;
		transition: rotate var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie);
	}

	.implai-navigation__item--mega.is-open > .implai-navigation__sub-toggle .implai-navigation__caret {
		rotate: 180deg;
	}

	/* Boks 8 px pod paskiem, tekst pierwszej kolumny równo z nazwą pozycji,
	   bez przewijania (przewijanie ucinałoby most nad boksem). */
	.implai-navigation__item--mega > .implai-navigation__sub {
		display: block;
		inset: auto;
		inset-block-start: calc(100% + var(--implai-nav-boks-odstep));
		inset-inline-start: calc(var(--implai-nav-boks-wciecie) * -1);
		inline-size: var(--implai-nav-boks-rozmiar);
		padding: var(--implai-nav-boks-wciecie);
		overflow: visible;
		border-radius: var(--wp--preset--border-radius--karta);
		box-shadow: var(--implai-nav-cien);
		white-space: normal;
		opacity: 0;
		translate: 0 var(--implai-nav-boks-wjazd);
		transition:
			opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
			translate var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
			visibility 0s linear var(--wp--custom--ruch--srednio);
	}

	.implai-navigation__item--mega.is-open > .implai-navigation__sub {
		visibility: visible;
		opacity: 1;
		translate: none;
		transition:
			opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
			translate var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
			visibility 0s linear 0s;
	}

	/* Most nad szczeliną między pozycją a boksem; należy do boksu, więc przy
	   zamkniętym boksie dziedziczy `visibility: hidden` i nie łapie kursora. */
	.implai-navigation__item--mega > .implai-navigation__sub::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 100%;
		block-size: var(--implai-nav-boks-odstep);
	}

	.implai-navigation__back,
	.implai-navigation__item--mega > .implai-navigation__sub > .implai-navigation__sub-title {
		display: none;
	}

	/* Trzy kolumny kategorii, grupa nigdy nie rozpada się między kolumny. */
	.implai-navigation__item--mega > .implai-navigation__sub > .implai-navigation__sub-list {
		display: block;
		columns: 3;
		column-gap: var(--wp--preset--spacing--6);
	}

	.implai-navigation__item--mega-narrow > .implai-navigation__sub > .implai-navigation__sub-list {
		display: flex;
		columns: auto;
	}

	/* Język przy prawej krawędzi paska: boks wyrównany do prawej krawędzi
	   pozycji, nazwa bez strzałki. */
	.implai-navigation__item--mega-end {
		--implai-nav-boks-rozmiar: var(--implai-nav-boks-jezyk);
	}

	.implai-navigation__item--mega-end > .implai-navigation__sub {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	.implai-navigation__item--mega-end > .implai-navigation__sub-toggle {
		gap: 0;
	}

	.implai-navigation__group {
		break-inside: avoid;
	}

	.implai-navigation__group + .implai-navigation__group {
		margin-block-start: var(--wp--preset--spacing--5);
	}

	.implai-navigation__group > .implai-navigation__sub {
		position: static;
		display: block;
		padding: 0;
		overflow: visible;
		background-color: transparent;
		visibility: inherit;
		translate: none;
		transition: none;
	}

	.implai-navigation__group .implai-navigation__sub-title {
		margin-block-end: var(--wp--preset--spacing--2);
		font-size: var(--implai-nav-pismo-male);
		text-transform: uppercase;
		color: var(--wp--preset--color--tekst-przygaszony);
	}

	/* Tło po najechaniu wychodzi 12 px poza kolumnę, tekst zostaje równo
	   z nagłówkiem. */
	.implai-navigation__entry {
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
		margin-inline: calc(var(--wp--preset--spacing--3) * -1);
		border-radius: var(--wp--preset--border-radius--m);
		transition:
			color var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie),
			background-color var(--wp--custom--ruch--szybko) var(--wp--custom--ruch--wyjscie);
	}

	.implai-navigation__entry:hover {
		background-color: var(--wp--preset--color--tlo-wtorne);
	}

	.implai-navigation__entry-name {
		font-weight: 500;
	}

	.implai-navigation__entry-text {
		font-size: var(--implai-nav-pismo-male);
	}

	/* Nazwa pozycji nigdy się nie łamie; odstęp jest płynny. */
	.implai-navigation__menu {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--implai-nav-odstep);
		white-space: nowrap;
	}

	.implai-navigation__utils {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--7);
	}

	.implai-navigation__link--search .implai-navigation__link-text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.implai-navigation__toggle {
		display: none;
	}
}

/* ---- Nakładka wyszukiwania (6.20) ----
   `dialog` z `showModal()`: warstwa nad całą stroną, Escape, pułapka fokusu
   i wyłączenie reszty strony od przeglądarki. Jedna liczba trzyma wcięcie
   nakładki i położenie krzyżyka. */
.implai-navigation__overlay {
	--implai-nav-nakladka-wciecie: clamp(var(--wp--preset--spacing--5), 3.5vw, var(--wp--preset--spacing--8));

	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: var(--implai-nav-nakladka-wciecie);
	border: 0;
	background-color: var(--wp--custom--kolor--zaslona);
	backdrop-filter: blur(20px);
	color: var(--wp--preset--color--biel);
	opacity: 0;

	/* `display` i `overlay` są skokowe, więc bez `allow-discrete` nakładka
	   znikałaby od razu; przeglądarka, która tego nie zna, pokaże ją bez
	   przenikania. */
	transition:
		opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
		display var(--wp--custom--ruch--srednio) allow-discrete,
		overlay var(--wp--custom--ruch--srednio) allow-discrete;
}

/* Własne `display` wymaga własnego ukrycia: reguła przeglądarki przegrywa
   z arkuszem strony. */
.implai-navigation__overlay:not([open]) {
	display: none;
}

.implai-navigation__overlay[open] {
	opacity: 1;
}

@starting-style {

	.implai-navigation__overlay[open] {
		opacity: 0;
	}
}

.implai-navigation__overlay::backdrop {
	background-color: transparent;
}

html:has(dialog[open]) {
	overflow: hidden;
}

/* Kolumna treści: tytuł i wiersz wyszukiwania po 860 px na środku okna;
   reszta nakładki zamyka ją kliknięciem. */
.implai-navigation__overlay-inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	inline-size: 100%;
	max-inline-size: 53.75rem;
}

.implai-navigation__overlay-title {
	font-size: var(--wp--preset--font-size--tytul-sekcji);
	font-weight: 500;
	line-height: var(--wp--custom--interlinia--normalna);
	text-align: center;
}

.implai-navigation__overlay-close {
	position: absolute;
	inset-block-start: var(--implai-nav-nakladka-wciecie);
	inset-inline-end: var(--implai-nav-nakladka-wciecie);
	inline-size: 2rem;
	block-size: 2rem;
	transition: opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.implai-navigation__overlay-close-icon {
	inline-size: 100%;
	block-size: 100%;
}

/* Wiersz wyszukiwania: pole na wysokość kafla przycisku i kafel z lupą. */
.implai-navigation__search {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--3);
	inline-size: 100%;
}

/* Kolor tekstu wprost: pole stoi na białym tle w nakładce o odwróconym
   kolorze. Obrys fokusu przezroczysty (kursor wpisywania wystarcza, a tryb
   wysokiego kontrastu przywraca obrys własnym kolorem). */
.implai-navigation__search-control {
	flex: 1;
	box-sizing: border-box;
	min-inline-size: 0;
	block-size: var(--wp--custom--przycisk--ikona);
	padding-inline: var(--wp--custom--pole--bok);
	border: 1px solid var(--wp--custom--kolor--pole-ramka);
	border-radius: var(--wp--custom--pole--promien);
	background-color: var(--wp--preset--color--biel);
	font: inherit;
	font-size: var(--wp--custom--pole--pismo);
	color: var(--wp--preset--color--czern);
	appearance: none;
}

.implai-navigation__search-control::placeholder {
	color: var(--wp--custom--kolor--pole-podpowiedz);
}

.implai-navigation__search-control::-webkit-search-cancel-button {
	appearance: none;
}

.implai-navigation__search-control:focus-visible {
	outline-color: transparent;
}

.implai-navigation__search-submit {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: var(--wp--custom--przycisk--ikona);
	block-size: var(--wp--custom--przycisk--ikona);
	border-radius: var(--wp--preset--border-radius--m);
	background-color: var(--wp--preset--color--blekit);
	color: var(--wp--preset--color--biel);
	transition: background-color var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.implai-navigation__search-submit:hover {
	background-color: var(--wp--preset--color--granat);
}

.implai-navigation__search-icon {
	display: block;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	background-color: currentcolor;
	mask: url(../../assets/icons/resources-search.svg) center / contain no-repeat;
}