/*
Theme Name: Kancelaria BSP
Description: Motyw klasyczny strony Kancelarii Radcy Prawnego Barbara Skalska-Pater. Caly uklad mieszka w tym katalogu, nie w bazie danych.
Author: Kancelaria BSP
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: kancelariabsp
*/

/* ==========================================================================
   Kroje pisma

   Pliki leza w katalogu motywu i sa wersjonowane razem z nim. Font jest czescia
   projektu, nie trescia - nie moze zalezec od tego, co ktos skasuje w bibliotece
   mediow. Subsety: latin i latin-ext (polskie znaki diakrytyczne).
   ========================================================================== */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url( 'fonty/manrope-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url( 'fonty/manrope-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url( 'fonty/nunito-sans-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url( 'fonty/nunito-sans-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Zmienne

   Jedno miejsce, w ktorym mieszkaja kolory, skala typograficzna i rytm pionowy.
   Wartosci sa przepisane ze starej strony (docs/uklady-stron.md) - to ona jest
   wzorcem wygladu. Breakpointy sa nasza decyzja, nie skutkiem ubocznym.
   ========================================================================== */

:root {
	/* Kolory */
	--navy: #2d3192;
	--navy-dark: #232766;
	--white: #ffffff;
	--text: #222222;
	--text-muted: #555555;
	--bg: #ffffff;
	--bg-muted: #f5f6fa;
	--border: #ededed;

	/* Kroje */
	--font-heading: 'Manrope', system-ui, sans-serif;
	--font-body: 'Nunito Sans', system-ui, sans-serif;

	/* Skala typograficzna */
	--font-size-base: 1.0625rem; /* 17px */
	--font-size-small: 0.875rem; /* 14px - zgoda w formularzu, stopka, menu */
	--font-size-caption: 0.8125rem; /* 13px - podpisy zdjec */
	--font-size-button: 0.75rem; /* 12px - przyciski */
	--font-size-h4: 1.125rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 1.875rem;
	--font-size-h1: 2.75rem;
	--line-height: 1.7;
	--line-height-heading: 1.2;

	/* Naglowek sekcji rosnie z szerokoscia okna - tak, jak na starej stronie. */
	--font-size-section-heading: clamp( 1.875rem, 3.6vw, 3.4375rem );

	/* Uklad */
	--container-width: 1200px;
	--container-reading-width: 46rem; /* ~75 znakow w wierszu - dlugi tekst prawny */
	--container-padding: 4vw;
	--gutter: 1.25rem;
	--logo-width: 31.25rem; /* 500px - tyle samo, co na starej stronie */

	/* Rytm pionowy sekcji */
	--space-section: 3.75rem; /* 60px - pionowy oddech pasa */
	--space-element: 1.5rem;
	--space-columns: 2rem; /* odstep miedzy kolumna tekstu a zdjeciem */

	/* Przyciski - stara strona ma je kanciaste */
	--radius: 0;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var( --bg );
	color: var( --text );
	font-family: var( --font-body );
	font-size: var( --font-size-base );
	line-height: var( --line-height );
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Typografia
   ========================================================================== */

h1,
h2,
h3,
h4 {
	margin: 0 0 var( --space-element );
	font-family: var( --font-heading );
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: var( --line-height-heading );
	color: var( --navy );
}

h1 {
	font-size: var( --font-size-h1 );
}

h2 {
	font-size: var( --font-size-h2 );
}

h3 {
	font-size: var( --font-size-h3 );
}

h4 {
	font-size: var( --font-size-h4 );
}

p,
ul,
ol {
	margin: 0 0 var( --space-element );
}

a {
	color: var( --navy );
}

a:hover,
a:focus {
	color: var( --navy-dark );
}

/* ==========================================================================
   Uklad: kontener, pasy i kolumny

   Strona to stos pasow na pelna szerokosc okna. Tresc pasa siedzi w kontenerze
   szerokim najwyzej na 1200 px, z marginesem 4vw po bokach. Stara strona puszczala
   tresc do 1600 px, ale na szerokim monitorze kolumna tekstu robila sie za dluga
   w wierszu, a zdjecie obok niej za duze - stad wezszy kontener.
   ========================================================================== */

.container {
	width: 100%;
	max-width: calc( var( --container-width ) + 2 * var( --container-padding ) );
	margin-inline: auto;
	padding-inline: var( --container-padding );
}

/* Kontener dokumentu prawnego. Wezszy od reszty serwisu swiadomie: przy pelnej
   szerokosci wiersz mialby ponad 150 znakow i oko gubiloby poczatek nastepnego. */
.container--reading {
	max-width: calc( var( --container-reading-width ) + 2 * var( --container-padding ) );
}

/* Sekcja bez zdjecia. Sam tekst rozciagniety na cala szerokosc pasa dawalby wiersze
   po ponad 150 znakow, wiec kolumna tresci zatrzymuje sie na szerokosci, ktora sie
   czyta - przy lewej krawedzi pasa, tam gdzie tekst zaczyna sie na reszcie stron. */
.container--text > * {
	max-width: var( --container-reading-width );
}

.section {
	padding-block: var( --space-section );
}

/* Pas granatowy. Pasy ida naprzemiennie - bialy, granatowy, bialy - a tekst
   w granatowym odwraca sie na bialy razem z przyciskami i podpisami zdjec. */
.section--navy {
	background-color: var( --navy );
	color: var( --white );
}

.section--navy :is( h1, h2, h3, h4 ) {
	color: var( --white );
}

/* Naglowek sekcji tresci rosnie z szerokoscia okna. Naglowek FAQ i naglowki
   dokumentow prawnych zostaja przy zwyklej skali - to strony do czytania. */
.section .container > h2,
.columns__text > h2 {
	font-size: var( --font-size-section-heading );
	line-height: 1.08;
}

.section--faq .container > h2 {
	font-size: var( --font-size-h2 );
	line-height: var( --line-height-heading );
}

/* Dwie kolumny pasa: tekst po jednej stronie, zdjecie po drugiej. O tym, ktora
   strona jest ktora, decyduje kolejnosc w szablonie - redaktorka wymienia plik,
   a nie decyduje o stronie ekranu. Ponizej progu kolumny schodza pod siebie
   w tej samej kolejnosci, w jakiej stoja w dokumencie. */
.columns {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-columns );
	align-items: start;
}

.columns--center {
	align-items: center;
}

.columns__text > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Przyciski
   ========================================================================== */

.button {
	display: inline-block;
	padding: 0.7rem 1rem;
	border: 1px solid var( --navy );
	border-radius: var( --radius );
	background-color: var( --navy );
	color: var( --white );
	font-family: var( --font-body );
	font-size: var( --font-size-button );
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.button:focus {
	background-color: var( --navy-dark );
	border-color: var( --navy-dark );
	color: var( --white );
}

/* Na granacie przycisk odwraca sie: bialy prostokat z granatowym napisem. */
.section--navy .button {
	background-color: var( --white );
	border-color: var( --white );
	color: var( --navy );
}

.section--navy .button:hover,
.section--navy .button:focus {
	background-color: transparent;
	border-color: var( --white );
	color: var( --white );
}

/* ==========================================================================
   Dokument prawny

   Tresc pisana w zwyklym edytorze, wiec stylujemy tu znaczniki, a nie klasy:
   redaktorka wklei akapity, naglowki i listy, i ma to wygladac dobrze bez
   dopisywania czegokolwiek do arkusza.
   ========================================================================== */

.entry__content > :last-child {
	margin-bottom: 0;
}

.entry__content h2,
.entry__content h3 {
	margin-top: 2.5rem;
}

/* Numeracja punktow prowadzi wzrok, wiec wciecie ma byc na tyle duze,
   zeby dwucyfrowy numer nie wchodzil pod tekst. */
.entry__content ol,
.entry__content ul {
	padding-left: 1.75rem;
}

.entry__content li {
	margin-bottom: 0.5rem;
}

.entry__content li:last-child {
	margin-bottom: 0;
}

.entry__content a {
	text-decoration: underline;
}

/* ==========================================================================
   Naglowek i stopka
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var( --border );
	padding-block: 1.25rem;
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

/* Logo w tej samej szerokosci co na starej stronie. Atrybuty width i height sa
   w znaczniku, wiec przegladarka rezerwuje miejsce, zanim plik dojedzie - naglowek
   nie podskakuje przy wczytywaniu. */
.site-header__logo {
	display: block;
	max-width: var( --logo-width );
}

/* ==========================================================================
   Menu glowne

   Na szerokim ekranie menu stoi otwarte w jednym wierszu. Na telefonie chowa sie
   pod przyciskiem, a rozwija je zaznaczenie ukrytego pola wyboru - zaden skrypt.
   Regula bazowa pokazuje liste bezwarunkowo, wiec nawet gdyby zapytanie medialne
   przestalo dzialac, menu zostaje widoczne. Odwrotna kolejnosc (chowanie w regule
   bazowej) kosztowalaby menu na kazdym ekranie, ktorego nie przewidzielismy.
   ========================================================================== */

/* Przelacznik jest sprawa telefonu - na szerokim ekranie nie ma go w ukladzie. */
.site-nav__toggle {
	display: none;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__link {
	font-family: var( --font-heading );
	font-size: var( --font-size-small );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --text );
	transition: color 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus {
	color: var( --navy );
}

/* Biezaca strona. Podkreslenie, a nie sam kolor - kolor nie jest jedynym nosnikiem
   informacji, wiec znacznik widzi takze osoba nierozrozniajaca barw. */
.current-menu-item > .site-nav__link {
	color: var( --navy );
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

/* Obwodka skupienia nalezy sie etykiecie: samo pole wyboru stoi poza ekranem,
   wiec osoba idaca klawiatura nie zobaczylaby, gdzie jest. */
.site-nav__switch:focus-visible + .site-nav__toggle {
	outline: 2px solid var( --navy );
	outline-offset: 2px;
}

.site-footer {
	padding-block: 2.5rem;
	background-color: var( --navy );
	color: var( --white );
	font-size: var( --font-size-small );
}

.site-footer a {
	color: var( --white );
}

.site-footer__name {
	font-family: var( --font-heading );
	font-weight: 700;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

/* ==========================================================================
   Dostepnosc
   ========================================================================== */

/* Tresc czytana przez czytnik ekranu, niewidoczna na ekranie. Swiadomie nie
   display:none ani visibility:hidden - te wycinaja element takze z czytnika,
   czyli kasuja caly sens tej klasy. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var( --navy );
	outline-offset: 2px;
}

.section--navy :focus-visible {
	outline-color: var( --white );
}

@media ( prefers-reduced-motion: reduce ) {
	* {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   Tresc sekcji

   Kazda sekcja to ten sam rytm: naglowek, tekst, zdjecie, wezwanie do dzialania.
   Uklad wynika z tych regul, a nie z tego, co ktos ustawil w edytorze.
   ========================================================================== */

.section__text > :last-child {
	margin-bottom: 0;
}

/* Tekst sekcji jest granatowy, nie czarny - tak, jak na starej stronie.
   Czarny zostaje tam, gdzie sie czyta dlugo: w dokumentach prawnych i w FAQ. */
.section__text :is( p, li ) {
	color: var( --navy );
}

.section--navy .section__text :is( p, li ) {
	color: var( --white );
}

.section__text ul {
	padding-left: 1.25rem;
}

.section__text li {
	margin-bottom: 0.5rem;
}

/* Zdjecie wypelnia swoja kolumne - to ono trzyma podzial pasa na pol. */
.photo {
	margin: 0;
}

/* Zdjecie idzie w calosci, w swoich proporcjach - nic sie nie kadruje. */
.photo img {
	width: 100%;
}

.photo__caption {
	margin-top: 0.375rem;
	color: var( --text-muted );
	font-size: var( --font-size-caption );
}

.section--navy .photo__caption {
	color: rgba( 255, 255, 255, 0.8 );
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var( --space-element );
	margin-bottom: 0;
}

/* Wezwanie do dzialania w sekcji kontaktowej zajmuje polowe kolumny - dokladnie
   taka szerokosc ustawiala mu stara strona. */
.section--kontakt .buttons {
	display: grid;
	grid-template-columns: minmax( 0, 50% );
}

.section--kontakt .button {
	text-align: center;
}

/* Profile spolecznosciowe: same ikony, nazwa serwisu zostaje dla czytnika ekranu.
   Odstep nad lista jest wiekszy niz zwykly rytm - tak samo jak na starej stronie,
   gdzie ikony odsuwal od przycisku osobny odstep. */
.profiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 2.875rem 0 0;
	padding: 0;
}

.profile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var( --navy );
	color: var( --white );
	text-decoration: none;
	transition: transform 0.15s ease;
}

.profile:hover,
.profile:focus {
	color: var( --white );
	transform: scale( 1.1 );
}

.profile__icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.section--navy .profile {
	background-color: var( --white );
	color: var( --navy );
}

.section--navy .profile:hover,
.section--navy .profile:focus {
	color: var( --navy );
}

/* ==========================================================================
   Formularz kontaktowy

   Prawa kolumna pasa kontaktowego. Pole nie idzie za kolumna do konca: szersze
   niz 640 px czyta sie gorzej, niz wyglada.
   ========================================================================== */

.columns__form {
	max-width: 40rem;
}

.contact-form__field,
.contact-form__consent,
.contact-form__submit {
	margin: 0 0 var( --space-element );
}

.contact-form__submit {
	margin-bottom: 0;
}

.contact-form__field label {
	display: block;
	margin-bottom: 0.5rem;
	color: var( --navy );
	font-weight: 600;
}

.contact-form input[ type='text' ],
.contact-form input[ type='email' ],
.contact-form textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var( --navy );
	border-radius: var( --radius );
	background-color: var( --white );
	color: var( --text );
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.contact-form textarea {
	min-height: 8.125rem;
	resize: vertical;
}

.contact-form :is( input, textarea ):focus-visible {
	border-color: var( --navy );
}

/* Pole z bledem: obwodka i komunikat pod polem. Sam kolor nie wystarcza -
   komunikat mowi, co poprawic, takze temu, kto koloru nie rozroznia. */
.contact-form [ aria-invalid='true' ] {
	border-color: #b3261e;
}

.contact-form__error {
	display: block;
	margin-top: 0.35rem;
	color: #b3261e;
	font-size: var( --font-size-small );
}

/* Zgoda RODO: pole wyboru obok tekstu, ktory jest dluzszy niz jeden wiersz. */
.contact-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.6rem;
	align-items: start;
	color: var( --navy );
	font-size: var( --font-size-small );
}

.contact-form__consent input {
	margin: 0.35rem 0 0;
}

.contact-form__consent .contact-form__error {
	grid-column: 2;
}

/* Pulapka na boty. Nie display:none - czesc automatow pomija pola tak ukryte,
   a to wlasnie one maja ja wypelnic. */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Komunikat po wyslaniu formularza: potwierdzenie albo prosba o poprawke. */
.form-notice {
	margin: 0 0 var( --space-element );
	padding: 1rem 1.25rem;
	border-left: 4px solid var( --navy );
	background-color: var( --bg-muted );
	color: var( --text );
}

.form-notice--error {
	border-left-color: #b3261e;
}

/* ==========================================================================
   FAQ

   Harmonijka na natywnym <details>. Zadnego skryptu - rozwijanie obsluguje
   przegladarka, wiec dziala takze z wylaczonym JavaScriptem.
   ========================================================================== */

.faq__item {
	border-bottom: 1px solid var( --border );
}

.faq__item:first-of-type {
	border-top: 1px solid var( --border );
}

/* Wlasny wskaznik zamiast systemowego trojkata - ten sam po obu stronach
   silnika. list-style zdejmuje go w Firefoksie, ::-webkit-details-marker
   w silnikach WebKit. */
.faq__question {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var( --gutter );
	align-items: start;
	padding: 0.875rem 0.25rem 0.875rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var( --font-heading );
	font-size: var( --font-size-h4 );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var( --navy );
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question:hover {
	color: var( --navy-dark );
}

/* Wskaznik: krzyzyk skladany z dwoch kresek, po rozwinieciu zostaje sama pozioma.
   Ksztalt, nie sam kolor - rozroznialny takze bez rozpoznawania barw. */
.faq__question::after {
	content: '';
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.3rem;
	background-image: linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor );
	background-size: 100% 2px, 2px 100%;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.15s ease;
}

.faq__item[ open ] .faq__question::after {
	background-size: 100% 2px, 0 100%;
	transform: rotate( 180deg );
}

.faq__answer {
	padding-bottom: 1.1rem;
}

.faq__answer > :first-child {
	margin-top: 0;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

.faq__answer ul {
	margin: 0 0 var( --space-element );
	padding-left: 1.25rem;
}

.faq__answer li {
	margin-bottom: 0.35rem;
}

/* ==========================================================================
   Breakpointy - nasza decyzja, nie skutek uboczny

   Jeden prog: ponizej 782px uklad przechodzi w jedna kolumne. Skala typograficzna
   i rytm pionowy schodza razem z nim. Reguly stoja na koncu arkusza, bo maja te
   sama szczegolowosc co bazowe - o wyniku decyduje kolejnosc, nie zapytanie medialne.
   ========================================================================== */

@media ( max-width: 781px ) {
	:root {
		--font-size-h1: 2rem;
		--font-size-h2: 1.625rem;
		--font-size-h3: 1.3125rem;
		--container-padding: 1.375rem; /* 22px - tyle miala stara strona na telefonie */
		--space-section: 2.25rem; /* 36px */
		--logo-width: 20rem;
	}

	/* minmax( 0, 1fr ), a nie 1fr: samo 1fr daje kolumnie minimalna szerokosc
	   rowna szerokosci wlasnej zdjecia, wiec pas wychodzilby poza ekran telefonu. */
	.columns {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Menu chowa sie pod przyciskiem. Trzy kreski rysuje CSS, wiec przycisk nie
	   sciaga ani ikony, ani skryptu - a napis "Menu" mowi, co sie pod nim kryje.
	   Rozwinieta lista to panel na cala szerokosc naglowka, zaczepiony pod jego
	   dolna krawedzia: pozycje stoja wtedy przy lewej krawedzi strony, a nie
	   w waskiej kolumnie pod samym przyciskiem. */
	.site-header {
		position: relative;
	}

	.site-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.5rem 0;
		cursor: pointer;
		font-family: var( --font-heading );
		font-size: var( --font-size-small );
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var( --navy );
	}

	.site-nav__toggle::before {
		content: '';
		width: 1.375rem;
		height: 0.875rem;
		background-image:
			linear-gradient( currentColor, currentColor ),
			linear-gradient( currentColor, currentColor ),
			linear-gradient( currentColor, currentColor );
		background-size: 100% 2px;
		background-position: left top, left center, left bottom;
		background-repeat: no-repeat;
	}

	/* Rozwiniete menu: trzy kreski ustepuja krzyzykowi, czyli "zamknij".
	   Ksztalt niesie stan takze temu, kto nie rozroznia barw. */
	.site-nav__switch:checked + .site-nav__toggle::before {
		width: 0.875rem;
		background-image:
			linear-gradient( 45deg, transparent calc( 50% - 1px ), currentColor calc( 50% - 1px ) calc( 50% + 1px ), transparent calc( 50% + 1px ) ),
			linear-gradient( -45deg, transparent calc( 50% - 1px ), currentColor calc( 50% - 1px ) calc( 50% + 1px ), transparent calc( 50% + 1px ) );
		background-size: 100% 100%;
		background-position: center;
	}

	.site-nav__list {
		display: none;
	}

	.site-nav__switch:checked ~ .site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 10;
		padding: 1.25rem var( --container-padding );
		background-color: var( --bg );
		border-bottom: 1px solid var( --border );
	}

	.section--kontakt .buttons {
		grid-template-columns: minmax( 0, 100% );
	}
}

/* ==========================================================================
   Menu glowne: drugi poziom (Oferta > podstrony)

   Podmenu wysuwa sie po najechaniu albo po wejsciu klawiatura (:focus-within) -
   bez skryptu, tak jak reszta serwisu. Schowane podmenu znika przez visibility,
   a nie display, zeby dalo sie animowac wysuniecie. Mostek (::before) wypelnia
   szczeline miedzy pozycja a panelem, wiec kursor nie gubi podmenu po drodze.
   ========================================================================== */

.site-nav__list > li {
	position: relative;
}

.site-nav .sub-menu {
	position: absolute;
	top: calc( 100% + 0.9rem );
	left: -1.25rem;
	z-index: 20;
	min-width: 16.5rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background-color: var( --bg );
	border: 1px solid var( --border );
	border-top: 2px solid var( --navy );
	box-shadow: 0 18px 32px -16px rgba( 35, 39, 102, 0.22 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -0.5rem );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.site-nav .sub-menu::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 1rem;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.site-nav .sub-menu .site-nav__link {
	display: block;
	padding: 0.6rem 1.25rem;
	white-space: nowrap;
}

.site-nav .sub-menu .site-nav__link:hover,
.site-nav .sub-menu .site-nav__link:focus {
	background-color: var( --bg-muted );
}

/* Pozycja nadrzedna biezacej podstrony dostaje ten sam znacznik co biezaca strona. */
.current-menu-parent > .site-nav__link,
.current-menu-ancestor > .site-nav__link {
	color: var( --navy );
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

/* Podmenu w otwartym panelu nie dostaje podkreslenia rodzica - ma wlasne. */
.sub-menu .site-nav__link {
	text-decoration: none;
}

.sub-menu .current-menu-item > .site-nav__link {
	text-decoration: underline;
}

@media ( max-width: 781px ) {
	/* Na telefonie podmenu stoi otwarte w rozwinietym panelu, z wcieciem pod rodzicem. */
	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		margin-top: 0.75rem;
		padding: 0 0 0 1rem;
		border: 0;
		border-left: 2px solid var( --border );
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.site-nav .sub-menu::before {
		content: none;
	}

	.site-nav .sub-menu .site-nav__link {
		padding: 0.4rem 0;
		white-space: normal;
	}
}

/* Etykieta z podmenu (bez href) nie wyglada na klikalny link. */
.site-nav__link:not( [href] ) {
	cursor: default;
}