/*
 * Nagłówek serwisu.
 *
 * Reguły przeniesione ze starego motywu (`klucz/style.css`, sekcja przeniesiona
 * tam wcześniej z Kokpit → Wygląd → Dostosuj → Dodatkowy CSS). Tam nadpisywały
 * GeneratePress i dlatego były najeżone `!important` — tutaj nie mają czego
 * nadpisywać, więc `!important` zniknęły. Wygląd bez zmian.
 *
 * Czego GeneratePress dawał, a co trzeba było dopisać samemu: pas nagłówka,
 * ustawienie logo i menu w rzędzie, rozwijane podmenu, okienko menu na telefonie.
 */

/* ---------------------------------------------------------------------------
   Pas nagłówka
   --------------------------------------------------------------------------- */

.site-header {
	/* #fafafa, nie biel. Ta wartość była ustawieniem w Dostosuj GeneratePressa
	   i wychodziła jako styl osadzany w stronie — czyli nie było jej w żadnym
	   pliku motywu i nie pojechałaby razem z nim na hosting. */
	background-color: var(--kolor-naglowek);
	/* Przyklejony do góry okna.
	 *
	 * Cień pod nim jest zdjęty celowo: sekcja hero ma kremowe tło, które samo
	 * odcina nagłówek od treści, a cień dokładał drugą, słabszą linię tuż obok
	 * wyraźnej granicy barw.
	 *
	 * Świadomy skutek uboczny: przy przewijaniu nagłówek płynie nad treścią bez
	 * oddzielenia. Przy jasnych sekcjach niemal niewidoczne, ale gdy pod nagłówek
	 * wjedzie ciemny blok „Dodatkowe informacje”, granica zniknie zupełnie.
	 * Właściwym rozwiązaniem byłoby przywrócenie cienia WYŁĄCZNIE po przewinięciu. */
	position: sticky;
	top: 0;
	z-index: 99999;
}

/* Logo, pasek dostępności i menu w jednym rzędzie. */
.inside-header {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: var(--klucz-kolumna);
	margin: 0 auto;
	/* 5 px góra-dół z Dodatkowego CSS, 30 px po bokach z ustawień Dostosuj. */
	padding: 5px 30px;
}

.site-logo {
	margin: 0;
	padding: 0;
	line-height: 0;
}

/*
 * SZEROKOŚĆ LOGO — 150 px.
 *
 * To była wartość z Dostosuj GeneratePressa (`.site-header .header-image`),
 * wychodząca jako styl osadzany w stronie. Nie było jej w żadnym pliku motywu,
 * więc nie pojechałaby razem z nim na hosting — a bez niej plik znaku wchodzi
 * w swoich naturalnych 390×226 i sam rozpycha nagłówek na trzy razy za wysoki.
 *
 * `height: auto` obowiązkowe: znacznik ma wpisane `width="390" height="226"`,
 * więc bez tego obrazek zostałby ściśnięty w poziomie i rozciągnięty w pionie.
 */
.site-logo img,
.custom-logo,
.header-image {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
}

.naglowek__nazwa {
	font-family: var(--klucz-font-ui);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pakiet-ink);
	text-decoration: none;
}

/*
 * NAWIGACJA NIE MA `margin-left: auto` — i to jest istotne, a nie przeoczone.
 *
 * Do prawej krawędzi dosuwa się blok ułatwień dostępu, swoim własnym
 * `margin-left: auto` (`dostepnosc.css`). Wolne miejsce w nagłówku może wybrać
 * TYLKO JEDEN element elastyczny. Gdy `auto` mają dwa, przeglądarka dzieli
 * nadwyżkę po połowie i pasek dostępności ląduje pośrodku nagłówka —
 * a rozwijany panel, zaczepiony do jego prawej krawędzi, wychodzi wtedy
 * poza lewą krawędź ekranu.
 *
 * Miałem tu `auto` i dokładnie to się stało. Ostrzegał przed tym przegląd
 * arkuszy: `dokumentacja/rozpoznanie-css.md`, punkt o punktach montażu.
 *
 * Tło to samo co pas nagłówka — w Dostosuj było ustawione osobno, ale na tę
 * samą wartość.
 */
.main-navigation {
	background-color: var(--kolor-naglowek);
}

@media screen and (min-width: 768px) {
	.main-navigation {
		margin-left: 30px;
	}
}

/* ---------------------------------------------------------------------------
   Menu główne
   --------------------------------------------------------------------------- */

.main-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation .menu > li {
	position: relative;
}

.main-navigation .menu a {
	display: block;
	padding: 0 20px;
	line-height: 60px;
	font-family: var(--klucz-font-ui);
	font-weight: 600;
	/* Barwa z Dodatkowego CSS (`--pakiet-ink`), nie z ustawień Dostosuj (#4a4a4a) —
	   tamta była nadpisywana i na ekranie nigdy jej nie było widać. */
	color: var(--pakiet-ink);
	text-decoration: none;
}

/* Barwy stanu wprost z ustawień Dostosuj GeneratePressa. */
.main-navigation .menu > li:not([class*="current-menu-"]):hover > a,
.main-navigation .menu > li:not([class*="current-menu-"]):focus-within > a {
	color: var(--kolor-menu-akcent);
}

.main-navigation .menu li[class*="current-menu-"] > a {
	color: var(--pakiet-red);
}

/* Odsyłacze bez przejścia — tak było w starym motywie. */
a,
a:visited,
a:focus,
a:active,
a:hover {
	transition: none;
}

/* Pozycje menu z podmenu nie mają href (patrz functions.php), więc trzeba
   przywrócić im kursor — bez tego przeglądarka pokazuje kursor tekstowy. */
.main-navigation .menu li.menu-item-has-children > a[role="button"] {
	cursor: default;
	user-select: none;
}

/* Strzałka przy pozycjach, które się rozwijają.
   Ten sam gest, co w „Dodatkowych informacjach”: kwadrat z dwiema krawędziami,
   obrócony o 45°. Bez niej nic nie odróżniało pozycji rozwijanej od zwykłego
   odsyłacza — w menu na komórce stało sześć jednakowych napisów i nie było
   wiadomo, że dwa z nich coś chowają. */
.main-navigation .menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

/* Strzałka obraca się razem z podmenu: na szerokim ekranie przy najechaniu
   i wejściu klawiaturą, na komórce po rozwinięciu (`jest-otwarte`). */
.main-navigation .menu > li.menu-item-has-children:hover > a::after,
.main-navigation .menu > li.menu-item-has-children:focus-within > a::after,
.main-navigation .menu li.menu-item-has-children.jest-otwarte > a::after {
	transform: translateY(1px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .menu li.menu-item-has-children > a::after {
		transition: none;
	}
}

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

   TO JEST NAPRAWA TEGO, CO BYŁO WIDAĆ NA EKRANIE: bez `display: none` w stanie
   spoczynku podmenu „Obsługa klienta” stało rozwinięte na stałe, rozpychając
   nagłówek na pół ekranu. GeneratePress chował je swoim arkuszem — tutaj musi
   to zrobić nasz.

   Wygląd: biała karta, zaokrąglenie 20 px, miękki cień zamiast twardego obrysu.

   Dopełnienie 6 px u góry i u dołu jest potrzebne, a nie ozdobne: bez niego
   prostokątne tło pierwszej i ostatniej pozycji przy najechaniu wychodziłoby
   poza łuk rogu. Odstęp załatwia to bez `overflow: hidden`, które zamknęłoby
   drogę podmenu drugiego poziomu.
   --------------------------------------------------------------------------- */

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 260px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--pakiet-line);
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 26px 55px -22px rgba(23, 23, 23, .5);
	list-style: none;
	/* Stan spoczynku. Pokazujemy dopiero przy najechaniu albo po otwarciu
	   klawiaturą — `opacity` i `visibility` zamiast `display`, żeby dało się
	   to kiedyś animować i żeby czytnik ekranu nie widział zwiniętej listy. */
	opacity: 0;
	visibility: hidden;
}

.main-navigation .menu > li:hover > .sub-menu,
.main-navigation .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.main-navigation .sub-menu a {
	padding: 10px 14px;
	border-radius: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Podświetlenie wiersza — biel na tle karty, barwa napisu jak przy najechaniu
   w menu głównym. Obie wartości z ustawień Dostosuj. */
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	background-color: #fff;
	color: var(--kolor-menu-akcent);
}

/* ---------------------------------------------------------------------------
   Ikony w rozwijanym menu „Obsługa klienta”

   Rysunki są nakładane jako MASKA, a nie jako tło. Różnica jest istotna: maska
   przepuszcza kolor spod spodu, więc ikona bierze barwę z koloru tekstu. Sama
   zmienia się na czerwoną przy najechaniu i sama dostosowuje się do trybu
   wysokiego kontrastu — bez drugiego kompletu plików i bez osobnych reguł.

   Pozycje rozpoznajemy po adresie, a nie po numerze pozycji menu: numery różnią
   się między instalacjami, adres jest ten sam lokalnie i na produkcji.

   Całość stoi w @supports, bo bez obsługi maski przeglądarka pokazałaby zamiast
   ikony pełny kwadrat w kolorze tekstu. Wtedy lepiej nie pokazywać nic.
   --------------------------------------------------------------------------- */

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.main-navigation .sub-menu a[href*="regulaminy"]::before,
	.main-navigation .sub-menu a[href*="cennik"]::before,
	.main-navigation .sub-menu a[href*="trwaly-nosnik"]::before,
	.main-navigation .sub-menu a[href*="dorejestracja"]::before,
	.main-navigation .sub-menu a[href*="faq"]::before,
	.main-navigation .sub-menu a[href*="kody-ussd"]::before {
		content: "";
		display: inline-block;
		width: 1.2em;
		/* Pudełko ikony jest wyższe niż sam rysunek i ma wysokość JEDNEGO wiersza
		   tekstu. Rysunek jest w nim wyśrodkowany, więc trafia w środek pierwszego
		   wiersza — także tam, gdzie podpis łamie się na dwa („Regulaminy
		   i komunikaty”, „Dorejestracja numerów”). */
		height: 1.45em;
		/* Bez tego ikona jako element elastyczny zwężyłaby się przy dłuższym napisie. */
		flex: 0 0 auto;
		margin-right: 0.55em;
		background-color: currentColor;
		-webkit-mask: no-repeat center / 1.2em 1.2em;
		mask: no-repeat center / 1.2em 1.2em;
	}

	.main-navigation .sub-menu a[href*="regulaminy"]::before {
		-webkit-mask-image: url("../img/menu/regulaminy.svg");
		mask-image: url("../img/menu/regulaminy.svg");
	}

	.main-navigation .sub-menu a[href*="cennik"]::before {
		-webkit-mask-image: url("../img/menu/cennik.svg");
		mask-image: url("../img/menu/cennik.svg");
	}

	.main-navigation .sub-menu a[href*="trwaly-nosnik"]::before {
		-webkit-mask-image: url("../img/menu/trwaly-nosnik.svg");
		mask-image: url("../img/menu/trwaly-nosnik.svg");
	}

	.main-navigation .sub-menu a[href*="dorejestracja"]::before {
		-webkit-mask-image: url("../img/menu/dorejestracja.svg");
		mask-image: url("../img/menu/dorejestracja.svg");
	}

	.main-navigation .sub-menu a[href*="faq"]::before {
		-webkit-mask-image: url("../img/menu/faq.svg");
		mask-image: url("../img/menu/faq.svg");
	}

	.main-navigation .sub-menu a[href*="kody-ussd"]::before {
		-webkit-mask-image: url("../img/menu/kody-ussd.svg");
		mask-image: url("../img/menu/kody-ussd.svg");
	}

	/* Ikona i tekst obok siebie. Wyrównanie do góry, bo pudełko ikony ma dokładnie
	   wysokość jednego wiersza — przy dwuwierszowym podpisie ikona ma stać przy
	   pierwszym wierszu, nie pośrodku obu. */
	.main-navigation .sub-menu a {
		display: flex;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Przycisk menu — widoczny dopiero na wąskim ekranie
   --------------------------------------------------------------------------- */

.menu-toggle {
	display: none;
	margin-right: 20px;
	padding: 10px;
	border: 0;
	border-radius: 5px;
	/* GeneratePress malował pod przyciskiem `rgba(0,0,0,.02)`, przez co na jasnym
	   nagłówku widać było szarą płytkę dokoła kresek. Sam znak wystarczy. */
	background-color: transparent;
	cursor: pointer;
	/* WCAG 2.5.8: punkt dotykowy nie mniejszy niż 24×24. Tu 44×44. */
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.menu-toggle__kreski,
.menu-toggle__kreski::before,
.menu-toggle__kreski::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--pakiet-ink);
}

.menu-toggle__kreski {
	position: relative;
}

.menu-toggle__kreski::before,
.menu-toggle__kreski::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__kreski::before { top: -7px; }
.menu-toggle__kreski::after { top: 7px; }

/* Tekst wyłącznie dla czytnika ekranu — przycisk pokazuje kreski, ale
   przedstawiać się musi słowem. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Menu na telefonie jako pływające okienko

   W makiecie jest to biała karta z zaokrąglonymi rogami, wysunięta spod przycisku
   i położona NA treści — a nie pas na całą szerokość rozpychający treść w dół.

   Wszystko wisi na klasie `.toggled`, którą dokłada `motyw.js` po kliknięciu.
   Stan zamknięty zostaje nietknięty.

   Punkt odniesienia dla `position: absolute` to `.inside-header`; bez tego
   okienko liczyłoby położenie od całej strony i przy przewijaniu odjeżdżało
   od przycisku.
   --------------------------------------------------------------------------- */

/* 768 px, nie 900 — to punkt, przy którym GeneratePress przełączał się na menu
   pod przyciskiem. Inna wartość znaczy, że układ zmienia się w innym miejscu
   niż w `klucznew`, a to widać gołym okiem przy zwężaniu okna. */
@media screen and (max-width: 768px) {
	.inside-header {
		position: relative;
		/* 12 px zamiast 30 po bokach. Na 375 px szerokości logo, pasek dostępności
		   i przycisk menu zajmują prawie całą linię — przy 30 px z każdej strony
		   rozwijany panel ułatwień dostępu nie mieści się i wychodzi poza lewą
		   krawędź ekranu. */
		padding-left: 12px;
		padding-right: 12px;
	}

	/*
	 * Panel ułatwień dostępu nie może być szerszy niż okno.
	 *
	 * `dostepnosc.css` zaczepia go do prawej krawędzi przycisku (`right: 0`),
	 * więc panel rozwija się w LEWO. Przy wąskim ekranie i przycisku stojącym
	 * blisko prawej krawędzi zabrakło mu miejsca i wychodził poza ekran —
	 * z ucięciem napisu „ROZMIAR TEKSTU”.
	 *
	 * Reguła jest tutaj, a nie w `dostepnosc.css`, bo tamten arkusz przeniesiony
	 * jest ze starego motywu bez zmian i ma taki zostać.
	 */
	.klucz-dostepnosc {
		max-width: calc(100vw - 24px);
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-navigation .inside-navigation {
		display: none;
	}

	.main-navigation.toggled .inside-navigation {
		display: block;
		position: absolute;
		top: calc(100% + 10px);
		right: 12px;
		left: auto;
		width: min(320px, calc(100vw - 24px));
		padding: 6px 0;
		border-radius: 20px;
		background-color: #fff;
		box-shadow: 0 26px 55px -22px rgba(23, 23, 23, .5);
		/* Nagłówek ma z-index 99999, więc okienko i tak jest nad treścią;
		   ta wartość porządkuje je tylko wewnątrz nagłówka. */
		z-index: 10;
	}

	.main-navigation.toggled .menu {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Wysokość pozycji liczona dopełnieniem, nie interlinią.
	 *
	 * Interlinia 60 px ma sens w pasku na górze strony, gdzie ustawia wysokość
	 * całego nagłówka. W okienku dokładałaby się do dopełnienia i każda pozycja
	 * rosłaby do ok. 86 px, przez co menu wyglądałoby na porozrzucane.
	 */
	.main-navigation.toggled .menu a {
		margin: 0 6px;
		padding: 12px 16px;
		border-radius: 14px;
		line-height: 1.4;
		font-weight: 700;
	}

	/* Podmenu w okienku nie ma dokąd wysunąć się w bok — zostaje listą wciętą
	   pod swoją pozycją. */
	.main-navigation.toggled .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.main-navigation.toggled .sub-menu a {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 38px;
		font-weight: 400;
	}

	/* W okienku podmenu jest zwinięte, dopóki nie dotknie się pozycji nadrzędnej.
	   Na szerokim ekranie robi to `:hover` — tu najechania nie ma, więc stan
	   niesie klasa dokładana przez `motyw.js`. */
	.main-navigation.toggled .menu-item-has-children:not(.jest-otwarte) > .sub-menu {
		display: none;
	}

	/* ---------------------------------------------------------------------
	   Okienko menu w trybie wysokiego kontrastu

	   `dostepnosc.css` maluje tu okienko przez selektor GeneratePressa
	   `.has-inline-mobile-toggle #site-navigation.toggled`, którego w tym
	   motywie nie ma. Bez tej reguły panel zostawał przezroczysty i pozycje
	   menu nakładały się na treść pod spodem — czarny tekst na czarnym tle,
	   dokładnie dla kogoś, kto włączył kontrast, bo inaczej nie widzi.

	   `!important` jest tu z tego samego powodu, co w całym bloku kontrastu
	   w `dostepnosc.css`: przełącznik użytkownika musi mieć ostatnie słowo.
	   --------------------------------------------------------------------- */
	html.klucz-kontrast .main-navigation.toggled .inside-navigation {
		background-color: #000 !important;
		border: 2px solid #fff !important;
		box-shadow: none !important;
	}

	html.klucz-kontrast .main-navigation.toggled .menu a {
		color: #fff !important;
	}
}