/* Poprawki wygladu - Silvery Bird, 23.09.2026.
   Nakladka na main.css (zrodlo SCSS motywu nietkniete). Cel: czytelnosc i drobne bledy, bez zmiany projektu.
   --nb-niebieski-tekst = ten sam odcien co marka #9BB6D1, tylko ciemniejszy:
   #9BB6D1 na bialym ma kontrast 2,1:1 (za malo do czytania), #4a6682 ma 5,98:1 (WCAG AA). */
:root {
	--nb-niebieski-tekst: #4a6682;
	--nb-grafit: #3C4A54;
}

/* 1. Niebieski tekst na BIALYM tle - ciemniejszy odcien tego samego koloru.
      Na ciemnych tlach (naglowek, pas "Potrzebujesz pomocy?") zostaje jasny. */
#oferta .text-primary,
#newsy .text-primary,
#accordion-ask .text-primary,
#archiwa .text-primary {
	color: var(--nb-niebieski-tekst) !important;
}
#newsy h3 a,
#archiwa h2 a {
	color: var(--nb-niebieski-tekst);
}
#newsy .btn-outline-primary,
#archiwa .btn-outline-primary {
	color: var(--nb-niebieski-tekst);
	border-color: var(--nb-niebieski-tekst);
}
#newsy .btn-outline-primary:hover,
#archiwa .btn-outline-primary:hover {
	background-color: var(--nb-niebieski-tekst);
	border-color: var(--nb-niebieski-tekst);
	color: #fff;
}
/* linki w tresci stron i wpisow (telefon, mail, odnosniki) */
.type-post a:not(.btn),
section.container.my-5 a:not(.btn),
.container.my-5 > .row a:not(.btn),
#strona-404 a {
	color: var(--nb-niebieski-tekst);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 2. Formularz kontaktowy: link do polityki prywatnosci w zgodzie byl niewidoczny
      (jasnoniebieski na jasnoniebieskim tle) */
#formularz a {
	color: var(--nb-grafit);
	text-decoration: underline;
}

/* 3. Karty "Baza wiedzy" na stronie glownej - rowne wysokosci, przycisk i zdjecie
      zawsze na tej samej linii (kolejnosc elementow bez zmian) */
#newsy .post-tin {
	display: flex;
	flex-direction: column;
}
#newsy .post-tin .btn {
	margin-top: auto;
	align-self: flex-start;
}
#newsy .post-tin img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 768px) {
	#newsy .post-tin .btn {
		align-self: center;
	}
}

/* 4. Pytania (akordeony) na telefonie - 26 px dawalo 3-4 linie na pytanie */
@media (max-width: 768px) {
	#accordion-ask a {
		font-size: 19px;
		line-height: 1.35;
	}
}

/* 5. Tresc akordeonow w Ofercie - odstepy miedzy akapitami i listy */
#oferty [id^="collapse"] p {
	margin-bottom: .75rem;
}
#oferty [id^="collapse"] ul {
	margin: 0 0 .75rem 1.1rem;
	padding: 0;
}
#oferty [id^="collapse"] li {
	margin-bottom: .2rem;
}

/* 6. Telefon w naglowku na telefonie komorkowym - numer chowa sie ponizej 1400 px,
      a przycisk "umow sie" na waskim ekranie nie miesci sie w kolumnie */
.nb-tel-mobile {
	display: none;
}
@media (max-width: 767.98px) {
	.nb-tel-mobile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--bs-primary, #9BB6D1);
		border-radius: 50%;
		color: var(--bs-primary, #9BB6D1);
		float: right;
	}
	.nb-tel-mobile svg {
		width: 20px;
		height: 20px;
	}
	.nb-tel-mobile:hover,
	.nb-tel-mobile:focus {
		background: var(--bs-primary, #9BB6D1);
		color: var(--nb-grafit);
	}
}

/* 7. Mapa na stronie Kontakt - nizsza, zeby nie zajmowala calego ekranu */
#mapa iframe {
	display: block;
	height: 450px;
}
#mapa p {
	margin: 0;
}

/* 8. Tekst grafitowy na niebieskim tle ("O mnie", stopka): #3C4A54 dawal 4,35:1,
      o wlos ponizej progu 4,5:1 - odrobine ciemniejszy grafit, wizualnie ta sama barwa */
.bg-primary,
.bg-primary p,
.bg-primary strong,
.bg-primary a,
.bg-primary span,
#formularz,
#formularz h2,
#formularz label,
#formularz a,
footer .navbar-nav-footer a {
	color: #313d46;
}

/* 9. Podstrony czynnosci i wpisy - ramka "W skrocie", mniejsze H2 w tresci (motyw ma h2 64 px) */
.nb-wskrocie {
	background: #f3f6f9;
	border-left: 4px solid #9BB6D1;
	padding: 18px 22px;
	margin: 24px 0 32px;
}
.nb-podstrona h2 {
	font-size: 34px;
	margin-top: 40px;
}
.nb-podstrona h3 {
	font-size: 22px;
	margin-top: 24px;
}
.nb-termin {
	border-top: 1px solid #d7e0e8;
	padding-top: 18px;
	margin-top: 36px;
}

/* 10. Pasek praw w stopce na telefonie - napisy jeden pod drugim zamiast dwoch waskich kolumn */
@media (max-width: 575.98px) {
	#copyright {
		flex-direction: column;
		align-items: center;
		padding: 10px 0;
	}
	#copyright span {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
}

/* 11. Baner podstron (25.09.2026): kreska pod tytulem byla przyklejona do pierwszego slowa
       (strong::before, top:100%), wiec przy dwulinijkowym tytule ("Oplaty notarialne / taksa...",
       "Darowizna / mieszkanie...") albo zawinietym na telefonie przecinala druga linie.
       Teraz kreska jest pod calym tytulem, zawsze na srodku. Szary obrys 1 px wokol zdjecia usuniety. */
#baner-top h1 strong::before {
	display: none;
}
#baner-top h1::after {
	content: "";
	display: block;
	width: 120px;
	height: 5px;
	margin: 18px auto 0;
	background-color: var(--nb-grafit);
}
#baner-top .image::before,
#baner-main-top .image::before {
	border: 0;
}
@media (max-width: 575.98px) {
	#baner-top h1 {
		font-size: 34px;
		line-height: 1.15;
	}
	#baner-top h1::after {
		width: 90px;
		height: 4px;
		margin-top: 14px;
	}
}

/* 12. Tresc podstron czynnosci, Oplat i wpisow: kolumna do czytania zamiast linii na 1300 px */
.nb-podstrona,
.single .type-post,
.single .container.my-5 > h1,
.single .nb-daty {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.nb-podstrona,
.single .type-post {
	font-size: 17px;
	line-height: 1.7;
}
.nb-podstrona p,
.single .type-post p {
	margin-bottom: 1rem;
}
.nb-podstrona ul,
.nb-podstrona ol,
.single .type-post ul,
.single .type-post ol {
	padding-left: 1.3rem;
	margin-bottom: 1.2rem;
}
.nb-podstrona li,
.single .type-post li {
	margin-bottom: .45rem;
}
.nb-podstrona h2,
.single .type-post h2 {
	font-size: 34px;
	line-height: 1.2;
	margin: 48px 0 16px;
}
.nb-podstrona h3,
.single .type-post h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 28px 0 10px;
}
.nb-podstrona > p:first-child {
	margin-top: 0;
}
.nb-podstrona table,
.single .type-post table {
	width: 100%;
	font-size: 15px;
	line-height: 1.5;
	margin: 12px 0 24px;
	border-collapse: collapse;
}
.nb-podstrona th,
.nb-podstrona td,
.single .type-post th,
.single .type-post td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid #d7e0e8;
	vertical-align: top;
}
.nb-podstrona th,
.single .type-post th {
	border-bottom: 2px solid #9BB6D1;
}
.nb-wskrocie {
	font-size: 16px;
	line-height: 1.6;
}
.nb-daty {
	color: #5f6b74;
	font-size: 14px;
}
@media (max-width: 575.98px) {
	.nb-podstrona,
	.single .type-post {
		font-size: 16px;
	}
	.nb-podstrona h2,
	.single .type-post h2 {
		font-size: 28px;
		margin-top: 36px;
	}
	.nb-podstrona table,
	.single .type-post table {
		font-size: 14px;
	}
}

/* 13. Oferta - "Opisy czynnosci krok po kroku": ta sama szerokosc (1100 px jak #accordion-ask w main.css) i uklad co akordeon wyzej */
.nb-czynnosci {
	max-width: 1100px;
	margin: 24px auto 0;
}
.nb-czynnosci h2 {
	text-align: center;
	font-size: 34px;
	margin: 0 0 24px;
}
.nb-czynnosci ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nb-czynnosci li {
	border-bottom: 1px solid rgba(60, 74, 84, .25);
	padding: 16px 0;
	margin: 0;
}
section.container.my-5 .nb-czynnosci li a:not(.btn) {
	display: block;
	font-size: 22px;
	line-height: 1.3;
	color: var(--nb-niebieski-tekst);
	text-decoration: none;
}
section.container.my-5 .nb-czynnosci li a:not(.btn):hover,
section.container.my-5 .nb-czynnosci li a:not(.btn):focus {
	text-decoration: underline;
}
.nb-czynnosci li span {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: #5f6b74;
}
@media (max-width: 768px) {
	section.container.my-5 .nb-czynnosci li a:not(.btn) {
		font-size: 19px;
	}
}

/* 15. Karty "Baza wiedzy" na glownej: ostatnia karta miala zbedna kreske po prawej,
       a na telefonie kreska po prawej rysowala sie przy krawedzi ekranu */
#newsy .post-tin:last-child {
	border-right: 0 !important;
}
@media (max-width: 991.98px) {
	#newsy .post-tin {
		border-right: 0 !important;
		border-bottom: 1px solid #d7e0e8;
		padding-bottom: 40px !important;
	}
	#newsy .post-tin:last-child {
		border-bottom: 0;
	}
}

/* 16. Ikony Lucide zamiast etykiet adres/tel./godziny/e-mail (stopka i Kontakt), 25.09.2026.
       Maska CSS z plikow lucide-static (bez <svg> w tresci ACF), kolor = kolor tekstu.
       Etykieta slowna zostaje dla czytnikow ekranu w .visually-hidden. */
.nb-ik {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: .45em;
	vertical-align: -.17em;
	background-color: currentColor;
	-webkit-mask: var(--nb-ik) center / contain no-repeat;
	mask: var(--nb-ik) center / contain no-repeat;
}
.nb-ik-adres { --nb-ik: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22 /%3E %3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E %3C/svg%3E"); }
.nb-ik-tel { --nb-ik: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384%22 /%3E %3C/svg%3E"); }
.nb-ik-godziny { --nb-ik: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22M12 6v6l4 2%22 /%3E %3C/svg%3E"); }
.nb-ik-mail { --nb-ik: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7%22 /%3E %3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22 /%3E %3C/svg%3E"); }

/* 17. Linki w ODPOWIEDZIACH akordeonu (np. "Oplaty notarialne" w FAQ) dziedziczyly rozmiar pytania
       (#accordion-ask a = 38 px) - w tresci maja rozmiar tekstu */
#accordion-ask [id^="collapse"] a {
	font-size: inherit !important;
	line-height: inherit;
}

/* 18. BEZ PODKRESLEN (25.09.2026). Bootstrap ma `a { text-decoration: underline }`, a pkt 1-2 tej
       nakladki dokladaly podkreslenie w tresci - stad kreski pod kazdym telefonem, mailem i linkiem.
       Teraz: link = kolor marki + pogrubienie, podkreslenie tylko pod kursorem i przy nawigacji
       klawiatura (sam kolor #4a6682 ma wzgledem tekstu #3C4A54 kontrast 1,5:1, wiec cos musi zostac). */
a {
	text-decoration: none;
}
a:hover,
a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.type-post a:not(.btn),
section.container.my-5 a:not(.btn),
.container.my-5 > .row a:not(.btn),
#strona-404 a,
#formularz a,
.nb-podstrona a:not(.btn),
#accordion-ask [id^="collapse"] a,
footer a,
#kontakt-footer a {
	text-decoration: none;
	font-weight: 600;
}
.type-post a:not(.btn):hover,
.type-post a:not(.btn):focus-visible,
section.container.my-5 a:not(.btn):hover,
section.container.my-5 a:not(.btn):focus-visible,
.container.my-5 > .row a:not(.btn):hover,
.container.my-5 > .row a:not(.btn):focus-visible,
#strona-404 a:hover,
#formularz a:hover,
#formularz a:focus-visible,
.nb-podstrona a:not(.btn):hover,
.nb-podstrona a:not(.btn):focus-visible,
#accordion-ask [id^="collapse"] a:hover,
#accordion-ask [id^="collapse"] a:focus-visible,
footer a:hover,
footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* menu i przyciski pogrubienia nie dostaja */
.navbar-nav a,
.navbar-nav-footer a,
.btn {
	font-weight: inherit;
}

/* 19. Sekcja "Rejestry i urzedy" (Oplaty notarialne) - dwie kolumny, opis pod nazwa */
.nb-rejestry {
	list-style: none;
	padding: 0;
	margin: 18px 0 32px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 32px;
}
.nb-rejestry li {
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid #d7e0e8;
}
.nb-podstrona .nb-rejestry a {
	display: block;
	font-size: 17px;
	line-height: 1.3;
}
.nb-rejestry span {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.5;
	color: #5f6b74;
}
@media (max-width: 767.98px) {
	.nb-rejestry {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* 20. Wykaz czynnosci na stronie glownej (template-parts/czynnosci-glowna.php) */
.nb-czynnosci-lista {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}
.nb-czynnosci-lista li {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(60, 74, 84, .2);
}
#czynnosci-glowna .nb-czynnosci-lista a {
	display: block;
	font-size: 21px;
	line-height: 1.3;
	color: var(--nb-niebieski-tekst);
	font-weight: 600;
}
.nb-czynnosci-lista span {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
	color: #5f6b74;
}
.nb-czynnosci-wiecej {
	max-width: 1100px;
	margin: 22px auto 0;
	text-align: center;
}
#czynnosci-glowna .nb-czynnosci-wiecej a {
	color: var(--nb-niebieski-tekst);
	font-weight: 600;
}
@media (max-width: 767.98px) {
	.nb-czynnosci-lista {
		grid-template-columns: 1fr;
	}
	#czynnosci-glowna .nb-czynnosci-lista a {
		font-size: 19px;
	}
}

/* 21. ODDECH (25.09.2026). Motyw wszedzie daje `my-5` (48 px) i ciasne wiersze - strona sklejala
       sie w jeden blok. Wieksze odstepy miedzy sekcjami, luzniejsze akapity i wiersze akordeonu. */
#o-mnie,
#oferta,
#newsy,
#czynnosci-glowna,
section.container.my-5,
section.container.my-4 {
	margin-top: 5.5rem !important;
	margin-bottom: 5.5rem !important;
}
#baner-top + section,
#baner-main-top + section {
	margin-top: 4.5rem !important;
}
.title-border {
	line-height: 1.15;
}
section .text-center > .title-border {
	display: inline-block;
	margin-bottom: 1.2rem;
}
/* akapity w tresci - wiecej swiatla miedzy wierszami */
#o-mnie .text p,
#newsy .post-excerpt p,
#accordion-ask [id^="collapse"] p,
#accordion-ask [id^="collapse"] li {
	line-height: 1.65;
}
#o-mnie .text p + p {
	margin-top: 1.1rem;
}
/* wiersze akordeonu: pytanie ma 38 px, a odstep byl 16 px */
#accordion-ask > div {
	padding-top: 1.35rem !important;
	padding-bottom: 1.35rem !important;
}
#accordion-ask [id^="collapse"] {
	padding-top: .4rem;
}
/* karty Bazy wiedzy */
#newsy .post-tin {
	padding-left: 1.75rem !important;
	padding-right: 1.75rem !important;
}
#newsy .post-tin h3 {
	line-height: 1.25;
	margin-bottom: .6rem !important;
}
#newsy .post-tin .post-excerpt {
	margin-bottom: 1.1rem;
}
/* stopka */
footer .container {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
#kontakt-footer {
	min-height: 260px;
}
@media (max-width: 767.98px) {
	#o-mnie,
	#oferta,
	#newsy,
	#czynnosci-glowna,
	section.container.my-5,
	section.container.my-4 {
		margin-top: 3.5rem !important;
		margin-bottom: 3.5rem !important;
	}
	#baner-top + section,
	#baner-main-top + section {
		margin-top: 2.75rem !important;
	}
	#accordion-ask > div {
		padding-top: 1.1rem !important;
		padding-bottom: 1.1rem !important;
	}
	#kontakt-footer {
		min-height: 200px;
	}
}

/* 22. Pierwszy ekran: pod nazwiskiem adres i godziny (dane z listy § 2 ust. 2), dwa przyciski */
.nb-hero-dane {
	margin: 2.2rem 0 0;
	font-size: 17px;
	letter-spacing: .02em;
	color: #313d46;
}
.nb-hero-dane span + span::before {
	content: "·";
	margin: 0 .7em;
	opacity: .55;
}
.nb-hero-przyciski {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 1.8rem 0 0;
}
.nb-hero-przyciski .btn {
	margin: 0;
}
.nb-hero-drugi {
	background: rgba(255, 255, 255, .55);
}
@media (max-width: 575.98px) {
	.nb-hero-dane {
		margin-top: 1.4rem;
		font-size: 15px;
		line-height: 1.7;
	}
	.nb-hero-dane span {
		display: block;
	}
	.nb-hero-dane span + span::before {
		content: none;
	}
	.nb-hero-przyciski {
		margin-top: 1.4rem;
		gap: 10px;
	}
	.nb-hero-przyciski .btn {
		width: 100%;
		max-width: 320px;
	}
}

/* 23. Okruszki nawigacyjne na podstronach */
.nb-okruszki {
	max-width: 860px;
	margin: 0 auto 1.6rem;
	font-size: 14px;
	color: #5f6b74;
}
.nb-okruszki a {
	color: #5f6b74;
	font-weight: 400;
}
.nb-okruszki .breadcrumb_last {
	color: #3C4A54;
}

/* 25. Karty Bazy wiedzy - zdjecie na gorze, przycisk na dole (bylo: tytul, tekst, przycisk, zdjecie) */
#newsy .post-tin > .text-center {
	order: -1;
	margin-bottom: 1.2rem;
}

/* 26. Skladniki kosztu czynnosci - schemat zamiast samego wyliczenia */
.nb-koszt {
	list-style: none;
	padding: 0;
	margin: 22px 0 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}
.nb-koszt li {
	flex: 1 1 0;
	min-width: 122px;
	margin: 0;
	padding: 16px 12px;
	text-align: center;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	color: #3C4A54;
	background: #f3f6f9;
	border-bottom: 3px solid #9BB6D1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nb-koszt li + li::before {
	content: "+";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	font-weight: 400;
	color: #9BB6D1;
}
@media (max-width: 575.98px) {
	.nb-koszt {
		gap: 8px 14px;
	}
	.nb-koszt li {
		flex: 1 1 44%;
		min-width: 0;
		padding: 13px 8px;
		font-size: 14px;
	}
	.nb-koszt li + li::before {
		left: -11px;
	}
}

/* 27. Kreska w tytule strony GLOWNEJ - to samo co pkt 11 dla podstron. Motyw wiesza ja na
       `strong::before` (top: 200-300%), wiec po wydluzeniu nadtytulu do "NOTARIUSZ W BYTOWIE"
       na telefonie ladowala na nazwisku. Teraz pod calym tytulem, tak jak na podstronach. */
#baner-main-top h1 strong::before {
	display: none;
}
#baner-main-top h1::after {
	content: "";
	display: block;
	width: 260px;
	max-width: 70%;
	height: 5px;
	margin: 20px auto 0;
	background-color: var(--nb-grafit);
}
@media (max-width: 575.98px) {
	#baner-main-top h1::after {
		width: 180px;
		height: 4px;
		margin-top: 14px;
	}
}

/* 28. FONT: HANKEN GROTESK (25.09.2026, wybor Danusi z 4 wariantow) - zastepuje IvyPresto + Poppins z Adobe.
       Pliki w motywie (fonts/), oś wagi 100-900. latin NIE ma polskich ogonkow, latin-ext NIE ma podstawowych
       liter - dzialaja tylko w parze przez unicode-range. */
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-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;
}
:root {
	--nb-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
body,
button,
input,
textarea,
select,
.btn {
	font-family: var(--nb-font);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--nb-font);
	font-weight: 500;
	letter-spacing: -.02em;
}
h1, .h1 { font-size: 56px; line-height: 1.1; }
h2, .h2 { font-size: 46px; line-height: 1.12; }
h3, .h3 { font-weight: 600; letter-spacing: -.01em; }

/* pierwszy ekran: nadtytul jako maly wersalikowy napis nad nazwiskiem */
#baner-main-top h1 {
	font-size: 54px;
	line-height: 1.1;
}
#baner-main-top h1 br {
	display: none;
}
#baner-main-top h1 strong {
	display: block;
	margin-bottom: .45em;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .18em;
}
#baner-top h1 {
	font-size: 52px;
	line-height: 1.12;
}

/* pytania akordeonu - 38 px Poppinsa to w tym kroju za duzo */
#accordion-ask a {
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -.01em;
}
/* pas nad stopka */
#kontakt-footer .col-xl-8 {
	font-size: 58px;
	font-weight: 400;
	letter-spacing: -.02em;
}
#newsy .post-tin h3 {
	font-size: 22px;
	font-weight: 600;
}

/* 29. "Jak przebiega wizyta?" - nowy uklad: numer, tytul, tekst, bez ikon i strzalek */
.nb-kroki {
	list-style: none;
	margin: 3.4rem auto 0;
	padding: 0;
	max-width: 1140px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px;
	text-align: left;
	position: relative;
	z-index: 1;
}
.nb-kroki li {
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid #c7d4e0;
	position: relative;
}
.nb-kroki li::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 3px;
	background: #9BB6D1;
}
.nb-kroki__nr {
	display: block;
	margin-bottom: 18px;
	font-size: 52px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.03em;
	color: #9BB6D1;
}
.nb-kroki__tytul {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.25;
	color: #3C4A54;
}
.nb-kroki__tekst,
.nb-kroki__tekst p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #4b5963;
}
.nb-kroki__tekst p + p {
	margin-top: .8rem;
}
section.container.my-5 .nb-kroki__tekst a:not(.btn),
.nb-kroki__tekst a {
	color: var(--nb-niebieski-tekst);
	font-weight: 600;
}

@media (max-width: 991.98px) {
	.nb-kroki {
		grid-template-columns: 1fr;
		gap: 34px;
		max-width: 560px;
	}
}
@media (max-width: 768px) {
	h1, .h1 { font-size: 40px; }
	h2, .h2 { font-size: 36px; }
	#baner-main-top h1 { font-size: 34px; }
	#baner-main-top h1 strong { font-size: 14px; letter-spacing: .16em; }
	#baner-top h1 { font-size: 36px; }
	#kontakt-footer .col-xl-8 { font-size: 30px; }
	.nb-kroki__nr { font-size: 44px; margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
	h2, .h2 { font-size: 32px; }
	#baner-main-top h1 { font-size: 30px; }
	#baner-top h1 { font-size: 32px; }
}

/* 30. Pierwszy ekran na telefonie: motyw centruje tresc absolutnie w pasie 40vh, a po dodaniu adresu
       i przyciskow tresc byla wyzsza niz pas - napis wchodzil pod okragle logo, przycisk na krawedz.
       Na telefonie pas rosnie z trescia, zdjecie lezy pod spodem. Kroki wyrownane do listy czynnosci. */
@media (max-width: 767.98px) {
	#baner-main-top {
		height: auto !important;
		min-height: 0;
	}
	#baner-main-top .image {
		position: absolute;
		inset: 0;
		height: auto;
	}
	#baner-main-top .content {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		padding: 104px 16px 44px;
	}
	#baner-main-top h1 {
		margin-top: 0 !important;
	}
}
.nb-kroki {
	max-width: 1100px;
}

/* 31. Kroki wizyty: ikony wracaja (rysowane recznie dla kancelarii) - numer po lewej, ikona po prawej.
       Pkt 17/21: reguly odpowiedzi akordeonu przepiete z .collapse na [id^="collapse"] - w trakcie animacji
       Bootstrap zamienia .collapse na .collapsing i link w odpowiedzi dostawal na chwile rozmiar pytania. */
.nb-kroki__glowa {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 18px;
}
.nb-kroki__glowa .nb-kroki__nr {
	margin-bottom: 0;
}
.nb-kroki__ikona {
	width: auto;
	height: 60px;
	max-width: 72px;
	object-fit: contain;
}
@media (max-width: 768px) {
	.nb-kroki__ikona {
		height: 52px;
	}
}

/* 32. Typografia: przegladarka sama unika samotnych slow w ostatnim wierszu (Chrome/Edge/Safari),
       naglowki rownowazone; serwer dodatkowo wiaze ostatnie slowo akapitu (mu-plugin, nb_sieroty_bufor).
       Pogrubienia kwot i terminow (mu-plugin nb-typografia.php) - ta sama waga co reszta pogrubien. */
p, li, dd, .nb-kroki__tekst, .nb-czynnosci-lista span, .nb-rejestry span {
	text-wrap: pretty;
}
h1, h2, h3, .nb-kroki__tytul, .nb-czynnosci-lista a, #accordion-ask a {
	text-wrap: balance;
}
.nb-pogr {
	font-weight: 700;
	color: inherit;
}

/* 33. Dekoracyjne linie (fragment logo) za krokami wizyty - na waskim ekranie przechodzily przez tekst */
@media (max-width: 991.98px) {
	#oferta .svg-bg {
		display: none;
	}
}

/* 34. Link do Bazy wiedzy pod pytaniami - odstep i wyrownanie do akordeonu */
.nb-faq-wiecej {
	max-width: 1100px;
	margin: 2.6rem auto 0;
	text-align: center;
	font-size: 17px;
}

/* 35. Kontakt: nazwa kancelarii, trasa, formularz z etykietami, mapa po kliknieciu,
       bez pasa "Kontakt z kancelaria" (na tej stronie odsylal do samej siebie) */
.page-id-77 #kontakt-footer {
	display: none;
}
.page-id-77 .container.my-5 > .row > .col-md-6:first-child p {
	margin-bottom: 1rem;
	line-height: 1.6;
}
.nb-kontakt-osoba {
	font-size: 18px;
	color: #3C4A54;
	margin: -.2rem 0 1.4rem !important;
}
.nb-trasa {
	display: inline-block;
	margin: .35rem 0 0 1.6em;
	font-size: 15px;
}
#formularz {
	padding-bottom: 2rem;
}
#formularz label {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: #313d46;
}
#formularz .row > div {
	margin-bottom: 16px;
}
#formularz input[type="text"],
#formularz input[type="email"],
#formularz input[type="tel"],
#formularz textarea {
	width: 100%;
	padding: 11px 12px;
	font-size: 16px;
	color: #3C4A54;
	background: #fff;
	border: 1px solid #c7d4e0;
	border-radius: 0;
}
#formularz input:focus-visible,
#formularz textarea:focus-visible {
	outline: 2px solid #3C4A54;
	outline-offset: 1px;
}
#formularz .nb-zgoda {
	font-size: 14px;
	line-height: 1.55;
}
#formularz .nb-zgoda input {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: -3px;
}
#formularz .nb-form-info {
	font-size: 14px;
	margin: 0 0 12px;
}
#formularz .wpcf7-submit {
	padding: 12px 34px;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.nb-mapa {
	background: #f3f6f9;
	border-top: 1px solid #d7e0e8;
	border-bottom: 1px solid #d7e0e8;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 16px;
}
.nb-mapa__zaslona p {
	margin: 0 0 .6rem;
}
.nb-mapa__tytul {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #3C4A54;
}
.nb-mapa__przyciski {
	margin: 1.4rem 0 1rem !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: center;
	align-items: center;
}
.nb-mapa__info {
	font-size: 13px;
	color: #5f6b74;
	max-width: 440px;
	margin: 0 auto !important;
}
.nb-mapa--wczytana {
	display: block;
	padding: 0;
	min-height: 0;
	border: 0;
}
.nb-mapa iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

/* 36. Nazwisko dwuczlonowe nie lamie sie na lacznik (zasada PWN [196]: gdyby jednak, lacznik trzeba
       powtorzyc na poczatku wiersza - przegladarka tego nie umie). Span dodaje bufor w mu-pluginie. */
.nb-nazwisko {
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	#baner-main-top h1 {
		font-size: min(30px, 8.2vw);
	}
}

/* 37. Kontakt - tekst zgody zwykla waga (label w formularzu jest pogrubiony), odstep etykieta-pole,
       linki pod mapa w ciemniejszym odcieniu marki (jasnoniebieski na jasnym tle byl nieczytelny) */
#formularz .nb-zgoda label,
#formularz .wpcf7-acceptance label,
#formularz .wpcf7-list-item-label {
	display: inline;
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	color: #313d46;
}
#formularz .wpcf7-list-item {
	margin: 0;
}
#formularz .row > div > br {
	display: none;
}
.nb-mapa a:not(.btn),
section .nb-mapa a:not(.btn) {
	color: var(--nb-niebieski-tekst);
	font-weight: 600;
}

/* 38. Mapa dojazdu jako obraz z OpenStreetMap na serwerze strony (25.09.2026) - widoczna od razu,
       zero polaczen z zewnetrznymi serwisami; klik otwiera Mapy Google. Zastepuje .nb-mapa (pkt 35). */
.nb-mapa-stat {
	position: relative;
	background: #eef2f6;
}
.nb-mapa-stat__obraz,
.nb-mapa-stat__obraz picture,
.nb-mapa-stat__obraz img {
	display: block;
	width: 100%;
}
.nb-mapa-stat__obraz img {
	height: 480px;
	object-fit: cover;
	object-position: 64% 50%;
}
.nb-mapa-stat__karta {
	position: absolute;
	top: 50%;
	left: max(16px, calc((100% - 1320px) / 2 + 12px));
	transform: translateY(-50%);
	width: 340px;
	padding: 26px 28px 22px;
	background: #fff;
	border-top: 4px solid #9BB6D1;
	box-shadow: 0 10px 30px rgba(60, 74, 84, .14);
}
.nb-mapa-stat__karta p {
	margin: 0 0 .6rem;
	line-height: 1.55;
}
.nb-mapa-stat__tytul {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #3C4A54;
}
.nb-mapa-stat__linki {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 1rem 0 0 !important;
}
#mapa .nb-mapa-stat a:not(.nb-mapa-stat__obraz) {
	color: var(--nb-niebieski-tekst);
	font-weight: 600;
}
.nb-mapa-stat__zrodlo {
	position: absolute;
	right: 8px;
	bottom: 6px;
	margin: 0;
	padding: 1px 6px;
	font-size: 11px;
	color: #5f6b74;
	background: rgba(255, 255, 255, .8);
}
@media (max-width: 767.98px) {
	.nb-mapa-stat__obraz img {
		height: 340px;
		object-position: 50% 50%;
	}
	.nb-mapa-stat__karta {
		position: static;
		transform: none;
		width: auto;
		margin: 0;
		box-shadow: none;
		border-top: 0;
		border-bottom: 1px solid #d7e0e8;
	}
	.nb-mapa-stat__zrodlo {
		bottom: auto;
		top: 314px;
	}
}