/* Uklad wspolny dla wszystkich stron serwisu.

   Do sierpnia 2026 serwis byl one-pagerem: #contentinner mial szerokosc 1000%,
   a sekcje lezaly obok siebie i byly przesuwane animacja przy kazdym klikniecu
   w menu. Teraz kazdy adres to osobna strona z jedna sekcja, wiec te zalozenia
   sa cofniete tutaj — wspolne arkusze zostaja nietkniete. */
#contentinner {
	width: 100%;
}

#contentinner > section {
	width: 100%;
	height: auto;
}

/* Okruszki nawigacyjne */
.okruszki {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #959595;
	margin: 0 0 28px 0;
}

.okruszki ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.okruszki li {
	display: inline;
}

.okruszki li + li::before {
	content: "/";
	margin: 0 8px;
	color: #c9c9c9;
}

.okruszki a {
	color: #959595;
	text-decoration: none;
}

.okruszki a:hover {
	color: #93582c;
	text-decoration: underline;
}

/* Naglowek uslugi — powtarza uklad z panelu one-pagera (ikona po lewej, nazwa obok) */
.usluga-naglowek {
	margin: 0 0 30px 0;
	overflow: hidden;
}

.usluga-naglowek .icon {
	float: left;
	margin: 0 18px 0 0;
}

.usluga-naglowek .icon img {
	display: block;
	width: 54px;
	height: auto;
}

.usluga-naglowek h1 {
	font-family: georgia, serif;
	font-style: italic;
	font-weight: normal;
	font-size: 30px;
	line-height: 54px;
	margin: 0;
	color: #000;
}

.usluga-tresc {
	max-width: 780px;
}

/* Sekcje w treści usługi.

   Treść od sierpnia 2026 jest znacznie obszerniejsza — po kilkanaście pozycji
   wykazu z odwolaniami do przepisow — wiec potrzebuje wlasnej hierarchii.
   <h1> nalezy do nazwy uslugi, te naglowki sa poziomem nizej.

   Kroj georgia italic powtarza to, co arkusz glowny robi z naglowkami sekcji;
   nie wprowadzamy nowego jezyka typograficznego. */
.usluga-tresc h2 {
	font-family: georgia, serif;
	font-style: italic;
	font-weight: normal;
	font-size: 21px;
	line-height: 28px;
	margin: 34px 0 14px 0;
	color: #1f2d39;
}

.usluga-tresc > h2:first-child {
	margin-top: 0;
}

.usluga-tresc p {
	margin: 0 0 14px 0;
	line-height: 22px;
	text-align: justify;
}

.usluga-tresc ul {
	margin: 0 0 18px 0;
	padding: 0 0 0 20px;
}

.usluga-tresc li {
	margin: 0 0 8px 0;
	line-height: 21px;
}

/* Odwolania w rodzaju "art. 51(1)–51(5) KRO" — indeks gorny nie moze rozpychac
   interlinii, bo wykazy sa dlugie i kazda rozepchana linia rzuca sie w oczy. */
.usluga-tresc sup {
	font-size: 11px;
	line-height: 0;
	vertical-align: super;
}

.usluga-tresc table {
	border-collapse: collapse;
	width: 100%;
	max-width: 640px;
	margin: 0 0 20px 0;
}

.usluga-tresc td {
	border: 1px solid #e0e0e0;
	padding: 7px 10px;
	vertical-align: top;
}

.usluga-tresc td.sub {
	padding-left: 28px;
}

.usluga-powrot {
	margin: 40px 0 0 0;
}

.usluga-powrot a {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #93582c;
	text-decoration: none;
}

.usluga-powrot a:hover {
	text-decoration: underline;
}

/* Byly tu reguly .usluga-kalkulator — pole z odnosnikiem "Przejdz do kalkulatora".
   Odnosnik prowadzil na kalkulatoroplatnotarialnych.pl, ktora przestala odpowiadac,
   wiec caly blok zniknal z podstron uslug razem z tym stylem. */

@media only screen and (max-width: 480px) {
	.usluga-naglowek h1 {
		font-size: 22px;
		line-height: 30px;
	}

	.usluga-naglowek .icon img {
		width: 40px;
	}

	.usluga-tresc table {
		font-size: 13px;
	}
}

/* Tabele cennikowe przeniesione z one-pagera maja inline'owe style="width:500px"
   z dawnego edytora. Kolumna z kwota nie moze sie lamac na dwie linie. */
.usluga-tresc table[style] {
	width: 100% !important;
	max-width: 640px;
}

.usluga-tresc td:last-child {
	white-space: nowrap;
	width: 1%;
	text-align: right;
}

/* --- Przejscia miedzy stronami (View Transitions) ---

   Nawigacja to zwykle odnosniki: przegladarka wczytuje docelowa strone i pokazuje
   ja od razu w koncowym stanie. Zeby przy tym nie bylo bialego mrugniecia,
   wlaczamy przejscia miedzydokumentowe. Elementy wspolne dla wszystkich stron
   (hero, naglowek, pasek boczny, stopka) dostaja wlasne nazwy, dzieki czemu
   trwaja w miejscu zamiast przenikac — animuje sie wylacznie obszar tresci.

   Przegladarki bez obslugi po prostu przechodza natychmiast, bez efektu. */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	#home { view-transition-name: hero; }
	header { view-transition-name: naglowek-serwisu; }
	#sidebar { view-transition-name: pasek-boczny; }
	footer { view-transition-name: stopka-serwisu; }
	#content { view-transition-name: obszar-tresci; }

	::view-transition-group(*) {
		animation-duration: 160ms;
	}

	/* Elementy trwale nie maja sie w co przenikac — utrzymuja pozycje. */
	::view-transition-old(hero),
	::view-transition-new(hero),
	::view-transition-old(naglowek-serwisu),
	::view-transition-new(naglowek-serwisu),
	::view-transition-old(stopka-serwisu),
	::view-transition-new(stopka-serwisu) {
		animation: none;
		mix-blend-mode: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* --- Podstrony: bez pelnoekranowego hero ---

   Na stronie glownej hero zajmuje cale okno: logo, zdjecie notariusza i wezwanie
   "Poznaj kancelarie". Na podstronach ta plansza tylko odsuwala tresc poza ekran —
   uzytkownik wchodzil na /kontakt/ i musial przewijac, zeby cokolwiek zobaczyc.
   Dlatego na podstronach hero znika, a jego role przejmuje pasek z sygnetem i menu.

   Regula .fixed z arkusza glownego zostaje nietknieta — na podstronach naglowek
   jest przyklejony do gory od poczatku (position: sticky), wiec nie ma czego przelaczac. */

.strona-wewnetrzna #home {
	display: none;
}

.strona-wewnetrzna header {
	position: sticky;
	top: 0 !important;
	z-index: 10;
	border-bottom: 1px solid #eee;
}

/* Sygnet w pasku — na stronie glownej logo jest czescia hero.
   position: absolute trzeba podac jawnie: w arkuszu glownym .minilogo dostaje je
   dopiero w media query dla ekranow do 480 px, wiec na desktopie element zostawal
   w przeplywie i spychal menu o wlasna wysokosc poza obszar naglowka. */
.strona-wewnetrzna header .minilogo {
	display: block !important;
	position: absolute;
	top: 11px;
	left: 28px;
	z-index: 33;
}

.strona-wewnetrzna header .minilogo img {
	display: block;
	height: 50px;
	width: auto;
}

/* Miejsce na sygnet po lewej stronie menu. */
.strona-wewnetrzna header nav {
	padding-left: 104px;
}

.strona-wewnetrzna #container {
	border-top: 0;
}

@media only screen and (max-width: 767px) {
	.strona-wewnetrzna header nav {
		padding-left: 0;
	}
	.strona-wewnetrzna header .minilogo {
		top: 7px;
		left: 20px;
	}
	.strona-wewnetrzna header .minilogo img {
		height: 40px;
	}
}

/* Tlo hero w WebP — 169 KB w JPEG, 12 KB w WebP.
   Arkusz glowny podaje wersje JPEG; ta regula ja nadpisuje, a przegladarka bez
   obslugi image-set() po prostu ja zignoruje i zostanie przy JPEG-u. */
#home > section {
	background-image: image-set(url(../gfx/bg.webp) type("image/webp"), url(../gfx/bg.jpg) type("image/jpeg"));
}

/* Zdjecia pracownikow i zdjecie w hero maja teraz wlasne wymiary w znacznikach.
   Arkusz glowny skaluje je szerokoscia, wiec wysokosc musi wrocic do "auto",
   inaczej atrybut height rozciagnalby obraz. */
#kancelaria .pracownicy li img,
#home > section .hg {
	height: auto;
}

/* --- Stopka: dwa zestawy kontaktowe ---

   Kancelaria prowadzi kontakty imienne obu notariuszy. Wpis "kontakt" z arkusza
   glownego mial 180 px, co wystarczalo na jeden adres — m.musialkiewicz@rejent.poznan.pl
   jest dluzszy i lamalby sie w polowie. rozlozStopke() sam dolicza odstepy,
   wiec zmiana szerokosci nie psuje rozkladu. */
footer p.kontakt {
	width: 215px;
}

footer p.kontakt strong {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	color: #6b6b6b;
}

/* --- Strona kontaktowa: kontakty imienne --- */
#kontakt article .notariusz strong {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
	color: #6b6b6b;
}

/* --- Numer telefonu w belce naglowka ---

   Do sierpnia 2026 numer byl wylacznie w stopce i na stronie kontaktowej,
   w dodatku jako zwykly tekst. Kancelaria umawia sie telefonicznie, wiec numer
   stoi teraz na kazdej stronie i jest odnosnikiem tel:.

   Element lezy poza <nav>, bo menuElementsSize() rozklada punkty menu na cala
   szerokosc nav. Wciecie ponizej rezerwuje mu miejsce: jQuery .width() zwraca
   szerokosc tresci, wiec padding zabiera ja rozdzielanym punktom. */
.naglowek-telefon {
	position: absolute;
	right: 28px;
	top: 0;
	height: 100%;
	z-index: 34;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #93582c;
	text-decoration: none;
	font-family: baron_neueregular, arial, sans-serif;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}

.naglowek-telefon:hover .naglowek-telefon__numer {
	text-decoration: underline;
}

.naglowek-telefon__ikona {
	flex-shrink: 0;
}

/* Nazwa odnosnika dla czytnikow ekranu — sam numer nie mowi, dokad prowadzi. */
.naglowek-telefon__czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

header nav {
	padding-right: 200px;
}

.strona-wewnetrzna header nav {
	padding-right: 200px;
}

@media only screen and (max-width: 767px) {
	/* Pasek jest tu przelacznikiem menu, a nav rozciaga sie na 100% szerokosci
	   przy content-box — wciecie wypchneloby liste poza ekran. Numer omija
	   strzalke przelacznika, ktora siedzi przy prawej krawedzi. */
	header nav,
	.strona-wewnetrzna header nav {
		padding-right: 0;
	}

	.naglowek-telefon {
		right: 56px;
		font-size: 14px;
		gap: 6px;
	}

	/* Napis "rozwin menu" zaczyna sie w arkuszu glownym od 30 px, czyli pod
	   sygnetem (20 px + 40 px szerokosci). Na produkcji sygnet pojawial sie
	   w tym pasku tylko po przewinieciu, wiec nikt tego nie zlapal; na
	   podstronach stoi tam od poczatku i litery wchodzily w znak. */
	.strona-wewnetrzna header nav p,
	header.fixed nav p {
		text-indent: 76px;
	}

	/* --- Menu mobilne rozwija sie w dol ---

	   Arkusz glowny otwieral liste w gore: "header nav ul { bottom: 62px }".
	   Zalozenie bylo takie, ze pasek stoi na dole pelnoekranowego hero, wiec
	   jedyne wolne miejsce jest nad nim. Regula "header.fixed nav ul" naprawiala
	   to po przewinieciu strony glownej.

	   W tym serwisie oba zalozenia sie rozsypaly:
	     - na stronie glownej lista przykrywala logotyp w hero,
	     - na podstronach pasek stoi przy gornej krawedzi (position: sticky) i nigdy
	       nie dostaje klasy .fixed, wiec punkty menu wychodzily na top: -189 px —
	       calkowicie poza ekran. Napis zmienial sie na "zwin menu", a menu nie bylo.

	   Teraz lista otwiera sie pod paskiem, niezaleznie od tego, gdzie ten pasek
	   sie znajduje. To zachowanie, ktorego uzytkownik telefonu oczekuje. */
	header nav ul,
	header.fixed nav ul {
		top: 100%;
		bottom: auto;
		border-top: 1px solid #33454f;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
	}

	/* Lista wychodzi poza pasek, wiec pasek musi lezec nad trescia strony.
	   Na podstronach i po przewinieciu arkusz glowny daje mu z-index 10; brakowalo
	   go na stronie glownej przed przewinieciem, gdzie #container — pozycjonowany
	   i pozniejszy w dokumencie — zamalowywal rozwinieta liste. Baner zgody
	   stoi na 999, wiec pozostaje nad wszystkim. */
	header {
		z-index: 20;
	}
}

@media only screen and (max-width: 359px) {
	/* Na najwezszych ekranach zostaje sama ikona — numer nie zmiescilby sie
	   obok napisu "rozwin menu". Sama ikona ma 14 px, czyli za malo, zeby w nia
	   trafic palcem, wiec odnosnik dostaje jawna szerokosc: pole dotyku to
	   40 x 62 px, a znak zostaje na srodku. */
	.naglowek-telefon__numer {
		display: none;
	}

	.naglowek-telefon {
		right: 48px;
		width: 40px;
		justify-content: center;
	}
}

/* --- Wezwanie do kontaktu w hero ---
   Jedyne wezwanie na stronie glownej prowadzilo dotad do opisu kancelarii.
   Ponizej 768 px arkusz glowny chowa caly blok .links — tam numer widac
   w belce naglowka, ktora na podstronach i po przewinieciu jest zawsze na wierzchu. */
#home > section .links a.hero-telefon {
	width: 230px;
	margin-right: 24px;
}

/* --- Wezwanie do kontaktu na koncu podstrony uslugowej --- */
.wezwanie {
	margin: 44px 0 0 0;
	padding: 26px 28px;
	background: #fff;
	border-left: 3px solid #93582c;
	max-width: 640px;
}

.wezwanie__naglowek {
	font-family: georgia, serif;
	font-style: italic;
	font-weight: normal;
	font-size: 22px;
	line-height: 26px;
	margin: 0 0 12px 0;
}

.wezwanie__tresc {
	margin: 0 0 20px 0;
	line-height: 20px;
}

.wezwanie__akcje {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wezwanie__akcje a {
	display: inline-block;
	padding: 12px 22px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.wezwanie__telefon {
	background: #93582c;
	color: #fff;
}

.wezwanie__telefon:hover {
	background: #7d4a24;
}

.wezwanie__mail {
	border: 1px solid #93582c;
	color: #93582c;
}

.wezwanie__mail:hover {
	background: #f4ece5;
}

.wezwanie__stopka {
	margin: 18px 0 0 0;
	font-size: 13px;
	line-height: 19px;
	color: #6b6b6b;
}

.wezwanie__stopka a {
	color: #6b6b6b;
}

@media only screen and (max-width: 480px) {
	.wezwanie {
		padding: 22px 20px;
	}

	.wezwanie__akcje a {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* Zaslona nad mapa zostala usunieta: mapa wczytuje sie razem ze strona,
   bez pytania o zgode (decyzja kancelarii z 8 sierpnia 2026). Razem z nia
   odpadly reguly .mapa-zaslona i .kontakt-opinia. */

/* Kafelek z adresem jest pozycjonowany bezwzglednie nad mapa (20 px od gory)
   i jest od niej wyzszy — mapa ma 460 px, kafelek 526 px. Poniewaz nie liczy
   sie do wysokosci rodzica, wszystko, co postawimy pod mapa, wchodzi pod niego.
   Rezerwujemy wiec miejsce na jego pelna wysokosc.

   Wartosc zalezy od dlugosci tresci kafelka. narzedzia/sprawdz-uklad.mjs pilnuje,
   zeby kafelek nie wystawal poza pojemnik — jesli kancelaria dolozy linie,
   kontrola zglosi to zamiast cicho nasunac elementy na siebie. */
@media only screen and (min-width: 768px) {
	#kontakt .kontaktContainer {
		min-height: 488px;
	}
}

/* Pole dotyku odnosnikow w stopce.

   Adres, e-mail i numery byly wczesniej zwyklym tekstem. Jako odnosniki maja
   wysokosc samej linii — 16 px, czyli ponizej progu, przy ktorym da sie w nie
   trafic palcem. Powiekszamy pole tylko na ekranach dotykowych: rozlozStopke()
   kalibruje uklad stopki na podstawie zmierzonych szerokosci wpisow i konczy
   prace ponizej 860 px, wiec tutaj nie ma jej czego popsuc. */
@media only screen and (max-width: 767px) {
	footer p a {
		display: inline-block;
		padding: 8px 6px;
		margin: 0 -6px;
	}
}

/* --- Baner zgody na statystyki ---
   Dawny pasek informacyjny siedzial w prawym gornym rogu i mial tylko "Zamknij" —
   nie dawal wyboru, a Analytics i tak juz dzialal. Ten baner realnie decyduje
   o uruchomieniu pomiaru, wiec musi byc widoczny i mieć dwie rownorzedne opcje. */

.baner-zgody {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: #172731;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 13px;
	line-height: 19px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.baner-zgody__tresc {
	max-width: 1065px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.baner-zgody p {
	margin: 0;
	flex: 1;
}

.baner-zgody a {
	color: #fff;
	text-decoration: underline;
}

.baner-zgody__przyciski {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.baner-zgody button {
	font-family: arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 20px;
	border: 1px solid #fff;
	cursor: pointer;
	white-space: nowrap;
}

.baner-zgody__odrzuc {
	background: transparent;
	color: #fff;
}

.baner-zgody__odrzuc:hover {
	background: rgba(255, 255, 255, 0.12);
}

.baner-zgody__akceptuj {
	background: #93582c;
	border-color: #93582c;
	color: #fff;
}

.baner-zgody__akceptuj:hover {
	background: #7d4a24;
	border-color: #7d4a24;
}

@media only screen and (max-width: 767px) {
	.baner-zgody__tresc {
		display: block;
		padding: 14px 18px;
	}
	.baner-zgody__przyciski {
		margin-top: 12px;
	}
	.baner-zgody button {
		flex: 1;
	}
}

/* Na podstronach naglowek jest u gory, a baner na dole zaslanialby stopke —
   dokladamy zapas na jego wysokosc. Strona glowna radzi sobie inaczej:
   main.js przesuwa tam naglowek w gore o wysokosc banera. */
.strona-wewnetrzna.z-banerem-zgody #site {
	padding-bottom: 92px;
}

@media only screen and (max-width: 767px) {
	.strona-wewnetrzna.z-banerem-zgody #site {
		padding-bottom: 168px;
	}
}