/* PWiK Orneta – style motywu (projekt „Wariant C”). Kontrast kolorów sprawdzony pod WCAG 2.1 AA. */

@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat.woff") format("woff"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans.woff") format("woff"); font-weight: 400 700; font-display: swap; }

:root {
	--granat: #0B3A78;
	--niebieski: #0F4FA0;
	--niebieski-2: #1565C0;
	--blekit: #2AA3DF;
	--zielony: #2E7D32;
	--zielony-2: #3A9A3A;
	--czerwony: #C62828;
	--czerwony-2: #E5312B;
	--bordo: #8C1D18;
	--tekst: #1F2A37;
	--tekst-2: #3D4752;
	--szary: #5A6470;
	--linia: #E3EAF2;
	--tlo: #FFFFFF;
	--tlo-jasne: #F2F8FD;
	--promien: 20px;
	--nag: "Montserrat", system-ui, sans-serif;
	--txt: "Open Sans", system-ui, sans-serif;
	--rozmiar: 16px;
}
html.aplus { --rozmiar: 19px; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: var(--rozmiar); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--txt); font-size: 1rem; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--niebieski); text-underline-offset: 2px; }
a:hover { color: var(--granat); }
:focus-visible { outline: 3px solid #F9A825; outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--nag); line-height: 1.2; }
p { margin: 0 0 .75em; }
button { font: inherit; cursor: pointer; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--granat); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 12px; font-weight: 700; }
.pomin:focus { top: 0; color: #fff; }

.kontener { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.kontener--waski { max-width: 860px; }
.sekcja { padding-top: 64px; padding-bottom: 64px; }
.sekcja-mala { padding-top: 40px; padding-bottom: 40px; }
.tlo-jasne { background: var(--tlo-jasne); }
.szary { color: var(--szary); }
.drobny { font-size: .82rem; color: var(--szary); margin: 0; }
.mocny { font-weight: 700; }
.h1 { margin: 0 0 20px; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--niebieski); }
.h2 { margin: 0 0 32px; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.25rem); color: var(--niebieski); }
.h2--srodek { text-align: center; margin-bottom: 6px; }
.podtytul { text-align: center; color: var(--szary); margin: 0 0 36px; }
.naglowek-sekcji { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.naglowek-sekcji .h2 { margin: 0; }

.kolko { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex: none; width: 40px; height: 40px; color: #fff; font-family: var(--nag); font-weight: 800; }
.kolko--44 { width: 44px; height: 44px; }
.kolko--48 { width: 48px; height: 48px; }
.kolko--56 { width: 56px; height: 56px; }
.kolko--64 { width: 64px; height: 64px; }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid transparent; font-family: var(--nag); font-weight: 700; font-size: .94rem; text-decoration: none; line-height: 1.2; text-align: center; }
.btn--maly { min-height: 44px; padding: 0 16px; font-size: .875rem; }
.btn--niebieski { background: var(--niebieski); border-color: var(--niebieski); color: #fff; }
.btn--niebieski:hover { background: var(--granat); color: #fff; }
.btn--czerwony { background: var(--czerwony); border-color: var(--czerwony); color: #fff; }
.btn--czerwony:hover { background: #B71C1C; color: #fff; }
.btn--zielony { background: var(--zielony); border-color: var(--zielony); color: #fff; align-self: flex-start; }
.btn--obrys { background: #fff; border-color: var(--niebieski); color: var(--niebieski); }
.btn--obrys-czerw { background: #fff; border-color: var(--bordo); color: var(--bordo); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Pasek górny */
.pasek-gorny { background: var(--granat); color: #fff; font-size: .875rem; }
.pasek-gorny a { color: #fff; }
.pasek-gorny__in { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.pasek-gorny__narz { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pasek-gorny__narz a { text-decoration: none; }
.pasek-gorny__narz a:hover { text-decoration: underline; }
.pasek-gorny__etr { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.przel { height: 30px; min-width: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid #8FA9D0; background: transparent; color: #fff; font-weight: 700; }
.przel--kontrast { background: #fff; color: var(--granat); border-color: #fff; }
.przel[aria-pressed="true"] { background: #F9A825; color: #1F2A37; border-color: #F9A825; }

/* PILNE */
.pilne { background: var(--czerwony); color: #fff; }
.pilne__in { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.pilne__znak { background: #fff; color: #B71C1C; font-family: var(--nag); font-weight: 800; font-size: .8rem; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; }
.pilne__tekst { flex: 1 1 420px; font-size: 1.06rem; }
.pilne__btn { background: #fff; color: #B71C1C; text-decoration: none; font-family: var(--nag); font-weight: 700; font-size: .94rem; padding: 10px 18px; border-radius: 999px; }
.pilne__btn:hover { color: var(--bordo); }

/* Nagłówek */
.naglowek { background: #fff; border-bottom: 1px solid var(--linia); position: relative; z-index: 20; }
.naglowek__in { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
.logo { display: block; flex: none; width: 126px; }
.logo img { display: block; width: 126px; height: auto; }
.menu-glowne { order: 3; flex: 1 1 100%; display: flex; border-top: 1px solid var(--linia); }
.menu-glowne .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; font-family: var(--nag); font-weight: 700; font-size: .94rem; }
.menu-glowne .menu a { display: block; padding: 10px 0; color: var(--niebieski); text-decoration: none; border-bottom: 3px solid transparent; }
.menu-glowne .menu a:hover, .menu-glowne .current-menu-item > a { border-bottom-color: var(--blekit); }
.menu-glowne .sub-menu { list-style: none; margin: 0; padding: 8px 16px; position: absolute; background: #fff; border: 1px solid var(--linia); border-radius: 14px; box-shadow: 0 10px 24px rgba(11, 58, 120, .12); display: none; z-index: 30; }
.menu-glowne li { position: relative; }
.menu-glowne li:hover > .sub-menu, .menu-glowne li:focus-within > .sub-menu { display: block; }
.naglowek__akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.naglowek__akcje--pc { margin-left: auto; }
.naglowek__akcje--tel { display: none; }
.naglowek__opis { font-family: var(--nag); font-weight: 700; color: var(--niebieski); }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--niebieski); background: #fff; color: var(--niebieski); font-family: var(--nag); font-weight: 700; }

@media (max-width: 1100px) {
	.naglowek__in { flex-wrap: nowrap; }
	.naglowek__akcje--pc { display: none; }
	.naglowek__akcje--tel { display: flex; margin-top: 12px; }
	.menu-btn { display: inline-flex; }
	.menu-glowne { display: none; border-top: 0; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linia); box-shadow: 0 12px 24px rgba(11, 58, 120, .12); padding: 12px 24px 24px; flex-direction: column; align-items: stretch; }
	.menu-glowne.otwarte { display: flex; }
	.menu-glowne .menu { flex-direction: column; margin: 0; font-size: 1.06rem; }
	.menu-glowne .menu a { padding: 14px 0; border-bottom: 1px solid var(--linia); }
	.menu-glowne .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 16px; }
	.naglowek__akcje .btn { flex: 1; }
}

/* Baner */
.baner { position: relative; background: var(--tlo-jasne); overflow: hidden; }
.baner__obraz { position: absolute; top: 0; right: 0; width: 46%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.baner__tresc { position: relative; min-height: 400px; display: flex; align-items: center; padding-top: 48px; padding-bottom: 44px; }
.baner__kol { flex: 0 1 700px; display: flex; flex-direction: column; gap: 18px; }
.baner__nad { font-family: var(--nag); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zielony); }
.baner__h1 { margin: 0; font-weight: 800; font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em; color: var(--niebieski); }
.baner__h1 span { font-weight: 500; color: #1667B0; }
.baner__lead { margin: 0; font-size: 1.19rem; color: var(--tekst-2); max-width: 500px; }
.baner__wartosci { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.baner__wartosci li { display: flex; align-items: center; gap: 8px; }
.baner__wart { font-family: var(--nag); font-weight: 800; font-size: .75rem; text-transform: uppercase; color: var(--niebieski); line-height: 1.25; }
@media (max-width: 760px) {
	.baner__obraz { position: static; width: 100%; height: 180px; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
	.baner__tresc { min-height: 0; padding-top: 4px; padding-bottom: 24px; }
}

/* Ważne komunikaty */
.kom { padding-top: 40px; }
.kom__ramka { border: 2px solid var(--czerwony-2); border-radius: 24px; overflow: hidden; background: #fff; }
.kom__glowa { background: #FDECEC; padding: 18px 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.kom__tytul { display: flex; gap: 14px; align-items: center; }
.kom__tytul h2 { margin: 0; font-weight: 800; font-size: 1.6rem; color: var(--bordo); }
.kom__tytul span { font-size: .94rem; color: #6B2420; }
.kom__dzwonek { width: 48px; height: 48px; border-radius: 999px; background: var(--czerwony); display: flex; align-items: center; justify-content: center; flex: none; }
.kom__akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.kom__lista { list-style: none; margin: 0; padding: 0; }
.kom__poz { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 20px 28px; border-top: 1px solid #F1D4D2; }
.kom__mapa { flex: none; border-radius: 12px; border: 1px solid var(--linia); width: 150px; height: 92px; }
.kom__opis { flex: 1 1 380px; min-width: 0; }
.kom__opis h3 { margin: 0 0 2px; font-size: 1.19rem; font-weight: 700; }
.kom__opis h3 a { color: var(--tekst); text-decoration: none; }
.kom__opis h3 a:hover { text-decoration: underline; }
.kom__opis p { margin: 0; font-size: .94rem; color: var(--tekst-2); }
.kom__osm { font-size: .875rem; font-weight: 700; }
.kom__kiedy { font-size: .94rem; font-weight: 600; color: var(--tekst-2); }
.kom-brak { background: #EEF7EE; color: #1E5A22; border-radius: 16px; padding: 18px 22px; font-weight: 600; max-width: 1192px; margin: 0 auto; }
.status { flex: none; display: inline-block; min-width: 130px; font-family: var(--nag); font-weight: 800; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; text-align: center; padding: 6px 10px; border-radius: 999px; }
.status--trwa { background: var(--czerwony); color: #fff; }
.status--dzis { background: #F9A825; color: #3B2600; }
.status--plan { background: #E3F0FB; color: var(--niebieski); }
.status--koniec { background: #EEF1F4; color: var(--tekst-2); }
.archiwum { list-style: none; padding: 0; margin: 0; }
.archiwum li { padding: 10px 0; border-bottom: 1px solid var(--linia); }

/* Kafelki */
.kafelki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kafelek { height: 100%; background: #fff; border: 1px solid var(--linia); border-radius: var(--promien); padding: 26px 16px; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transition: box-shadow .15s, transform .15s; }
.kafelek:hover { box-shadow: 0 10px 24px rgba(11, 58, 120, .12); transform: translateY(-2px); }
.kafelek__ikona { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.kafelek__tytul { font-family: var(--nag); font-weight: 800; font-size: .875rem; letter-spacing: .03em; text-transform: uppercase; color: var(--niebieski); line-height: 1.3; }
.kafelek__opis { font-size: .875rem; color: var(--szary); }

/* Karty informacyjne */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; }
.karta { background: #fff; border-radius: var(--promien); padding: 26px; display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--akcent, var(--niebieski-2)); }
.karta h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--niebieski); }
.karta p, .karta ol { margin: 0; font-size: .94rem; color: var(--tekst-2); }
.karta ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabela th { text-align: left; color: var(--szary); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--linia); }
.tabela td { padding: 9px 0; border-bottom: 1px solid var(--linia); }
.tabela th:last-child, .tabela td:last-child { text-align: right; }
.tabela td:last-child { font-weight: 700; }
.tabela tr:last-child td { border-bottom: 0; }
.rachunek { font-family: var(--nag); font-weight: 700; font-size: 1.12rem; background: var(--tlo-jasne); border-radius: 10px; padding: 12px 14px; word-break: break-word; }
.wiersze { margin: 0; }
.wiersze > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linia); font-size: .94rem; }
.wiersze > div:last-child { border-bottom: 0; }
.wiersze dt { margin: 0; }
.wiersze dd { margin: 0; font-weight: 700; text-align: right; }

/* Aktualności + jakość wody */
.dwie-kol { display: flex; flex-wrap: wrap; gap: 32px; }
.dwie-kol__glowna { flex: 999 1 560px; min-width: 0; }
.dwie-kol__boczna { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.aktualnosci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.aktualnosc { background: #fff; border: 1px solid var(--linia); border-radius: 18px; padding: 18px 22px; text-decoration: none; color: var(--tekst); display: flex; gap: 18px; align-items: flex-start; }
.aktualnosc:hover { border-color: var(--niebieski); color: var(--tekst); }
.aktualnosc__tresc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aktualnosc__tytul { font-family: var(--nag); font-weight: 700; font-size: 1.12rem; }
.data-kafel { flex: none; width: 64px; text-align: center; border-radius: 14px; background: var(--tlo-jasne); padding: 8px 0; display: flex; flex-direction: column; }
.data-kafel__d { font-family: var(--nag); font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--niebieski); }
.data-kafel__m { font-size: .8rem; color: var(--szary); }
.etykieta { align-self: flex-start; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; background: #E3F0FB; color: var(--niebieski); }
.jakosc { background: var(--niebieski); color: #fff; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.jakosc__glowa { display: flex; align-items: center; gap: 12px; }
.jakosc h2 { margin: 0; font-weight: 800; font-size: 1.5rem; }
.jakosc p { margin: 0; color: #DCE8F7; }
.jakosc a { color: #fff; font-weight: 700; }
.jakosc__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jakosc__siatka div { background: #1A5DB0; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.jakosc__siatka span { font-size: .8rem; color: #DCE8F7; }
.sms-karta { background: #EEF7EE; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.sms-karta h3 { margin: 0; font-size: 1.19rem; color: var(--zielony); }
.sms-karta p { margin: 0; font-size: .94rem; color: var(--tekst-2); }

/* Przyłącze */
.kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.krok { background: #fff; border-radius: var(--promien); padding: 24px; display: flex; flex-direction: column; gap: 10px; font-size: .94rem; }
.krok__tytul { font-family: var(--nag); font-weight: 700; font-size: 1.06rem; color: var(--niebieski); }

/* Cmentarz */
.cm__tytul { display: flex; gap: 16px; align-items: center; }
.cm__tytul .h2 { margin: 0; }
.cm__rzad { display: flex; flex-wrap: wrap; gap: 18px; }
.cm__szukaj { flex: 2 1 560px; min-width: 0; background: #F4F5F7; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cm__szukaj h3, .cm__godziny h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tekst); }
.cm__szukaj p { margin: 0; font-size: .94rem; color: var(--tekst-2); }
.cm__godziny { flex: 1 1 300px; background: #fff; border: 1px solid var(--linia); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.cm__karty { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cm__karta { height: 100%; background: #fff; border: 1px solid var(--linia); border-top: 5px solid #4A5563; border-radius: var(--promien); padding: 24px; text-decoration: none; color: var(--tekst-2); display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.cm__karta .mocny { color: var(--niebieski); margin-top: auto; }
.cm__karta-tytul { font-family: var(--nag); font-weight: 700; font-size: 1.12rem; color: var(--niebieski); }

/* Kontakt i mapa */
.kontakt { flex: 1 1 400px; }
.kontakt .h2 { margin-bottom: 18px; }
.kontakt__pogotowie { background: #FDECEC; border-radius: 14px; padding: 14px 16px; color: var(--bordo); }
.kontakt__pogotowie a { color: var(--bordo); font-weight: 700; }
.mapa { flex: 1 1 520px; min-height: 380px; position: relative; border-radius: 22px; overflow: hidden; background: #EEF1EA; border: 1px solid var(--linia); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__zgoda { position: absolute; inset: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.mapa__zgoda p { max-width: 380px; margin: 0; color: var(--tekst-2); font-size: .94rem; }
.mapa__adres { position: absolute; left: 16px; right: 16px; bottom: 16px; background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; box-shadow: 0 4px 14px rgba(11, 58, 120, .12); }
.mapa__adres > div:first-child { display: flex; flex-direction: column; line-height: 1.4; }
.mapa__adres strong { font-family: var(--nag); color: var(--niebieski); }
.mapa__btny { display: flex; flex-wrap: wrap; gap: 8px; }

/* Treść stron i wpisów */
.okruszki ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .875rem; color: var(--szary); }
.okruszki li + li::before { content: "›"; margin-right: 8px; }
.tresc-wpisu { font-size: 1.06rem; }
.tresc-wpisu h2 { color: var(--niebieski); font-size: 1.6rem; margin: 1.6em 0 .5em; }
.tresc-wpisu h3 { color: var(--niebieski); font-size: 1.25rem; margin: 1.4em 0 .4em; }
.tresc-wpisu table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.tresc-wpisu th, .tresc-wpisu td { border: 1px solid var(--linia); padding: 10px 12px; text-align: left; }
.tresc-wpisu th { background: var(--tlo-jasne); }
.tresc-wpisu .wp-block-button__link { background: var(--niebieski); color: #fff; border-radius: 999px; font-family: var(--nag); font-weight: 700; padding: 12px 22px; }
.tresc-wpisu .wp-block-file a:not(.wp-block-file__button) { font-weight: 700; }
.wpis__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wpis__obraz { margin: 0 0 24px; }
.wpis__obraz img { border-radius: var(--promien); }
.search-form { display: flex; gap: 8px; margin: 0 0 24px; flex-wrap: wrap; }
.search-form label { flex: 1 1 240px; }
.search-field, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea { width: 100%; min-height: 48px; border: 2px solid #8792A0; border-radius: 12px; padding: 10px 14px; font: inherit; background: #fff; color: var(--tekst); }
textarea { min-height: 120px; }
.search-submit, input[type="submit"] { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--niebieski); color: #fff; font-family: var(--nag); font-weight: 700; }
.nav-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.nav-links .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linia); border-radius: 12px; padding: 0 12px; text-decoration: none; }
.nav-links .current { background: var(--niebieski); color: #fff; border-color: var(--niebieski); }
.e404 { text-align: center; }
.e404__kod { font-family: var(--nag); font-weight: 800; font-size: 6rem; line-height: 1; color: #DCE8F7; margin: 0; }
.e404__linki { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.e404 .search-form { max-width: 520px; margin: 24px auto; }

/* ETR */
.etr { padding-top: 40px; padding-bottom: 64px; max-width: 900px; }
.etr__glowa { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.etr__glowa .h1 { margin: 0; }
.etr__wstep { font-size: 1.25rem; }
.etr__bloki { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.etr__blok { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--linia); border-left: 6px solid var(--akcent); border-radius: var(--promien); padding: 24px; font-size: 1.19rem; line-height: 1.7; }
.etr__blok h2 { margin: 0 0 10px; font-size: 1.6rem; color: var(--niebieski); }
.etr__blok p { margin: 0 0 6px; }
.etr__slowo { background: #FFF8E1; border-radius: 12px; padding: 12px 16px; margin-top: 12px !important; }
.etr__blok .btn { margin-top: 12px; font-size: 1.06rem; }
@media (max-width: 600px) { .etr__blok { flex-direction: column; } }

/* Stopka */
.stopka { background: var(--granat); color: #DCE8F7; font-size: .94rem; }
.stopka a, .stopka .link-btn { color: #DCE8F7; }
.stopka a:hover, .stopka .link-btn:hover { color: #fff; }
.stopka p { margin: 0 0 6px; }
.stopka__pasy { display: flex; height: 6px; }
.stopka__pasy span:nth-child(1) { flex: 2; background: var(--czerwony-2); }
.stopka__pasy span:nth-child(2) { flex: 1; background: var(--zielony-2); }
.stopka__pasy span:nth-child(3) { flex: 3; background: var(--blekit); }
.stopka__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 28px; }
.stopka__nazwa { font-family: var(--nag); font-weight: 800; font-size: 1.25rem; color: #fff; }
.stopka__tytul { margin: 0 0 8px; font-family: var(--txt); font-size: 1rem; font-weight: 700; color: #fff; }
.stopka__lista, .stopka__linki { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stopka__dol { border-top: 1px solid #2B5A94; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding-top: 16px; padding-bottom: 28px; font-size: .875rem; }
.stopka__linki { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }

/* Dolny pasek (telefon) */
.dolny-pasek { display: none; }
@media (max-width: 760px) {
	body { padding-bottom: 72px; }
	.dolny-pasek { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--linia); box-shadow: 0 -4px 16px rgba(11, 58, 120, .1); padding-bottom: env(safe-area-inset-bottom); }
	.dolny-pasek > * { flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--niebieski); text-decoration: none; font-family: var(--nag); font-weight: 700; font-size: .75rem; background: none; border: 0; }
	.dolny-pasek > [hidden] { display: none; }
	.dolny-pasek__awaria { color: var(--czerwony) !important; }
	.czat-btn { display: none !important; }
	.pasek-gorny__in > span { width: 100%; }
	.kom__glowa, .kom__poz { padding-left: 18px; padding-right: 18px; }
	.kom__mapa { display: none; }
	.sekcja { padding-top: 44px; padding-bottom: 44px; }
	.kontener { padding-left: 16px; padding-right: 16px; }
}

/* Czat „Zapytaj PWiK” */
.czat { position: fixed; right: 24px; bottom: 112px; z-index: 60; width: 400px; max-width: calc(100% - 32px); height: 620px; max-height: calc(100vh - 140px); background: #fff; border: 1px solid #D5E2EF; border-radius: 24px; box-shadow: 0 16px 40px rgba(11, 58, 120, .22); display: flex; flex-direction: column; overflow: hidden; }
.czat[hidden] { display: none; }
.czat__glowa { background: var(--niebieski); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex: none; }
.czat__ikona { width: 42px; height: 42px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.czat__nazwa { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.czat__nazwa h2 { margin: 0; font-weight: 800; font-size: 1.12rem; }
.czat__nazwa span { font-size: .8rem; color: #DCE8F7; }
.czat__zamknij { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #7FA2D3; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
.czat__lista { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #F7FAFD; }
.czat__msg { max-width: 86%; border-radius: 18px; padding: 10px 14px; font-size: .94rem; white-space: pre-line; }
.czat__msg--ja { align-self: flex-end; background: var(--niebieski); color: #fff; border-bottom-right-radius: 4px; }
.czat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--linia); border-bottom-left-radius: 4px; }
.czat__msg--pisze { color: var(--szary); font-style: italic; }
.czat__alert { align-self: flex-start; max-width: 86%; background: #FDECEC; border: 1px solid var(--czerwony-2); border-radius: 14px; padding: 10px 12px; font-size: .875rem; color: var(--bordo); }
.czat__linki { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; }
.czat__linki a { text-decoration: none; font-family: var(--nag); font-weight: 700; font-size: .8rem; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--niebieski); color: var(--niebieski); background: #fff; }
.czat__linki a:first-child { background: var(--niebieski); color: #fff; }
.czat__podpowiedzi { flex: none; padding: 10px 14px 6px; border-top: 1px solid var(--linia); display: flex; gap: 6px; overflow-x: auto; }
.czat__podpowiedzi button { flex: none; min-height: 36px; border-radius: 999px; border: 1px solid #A9BBD0; background: #fff; color: var(--niebieski); font-size: .8rem; font-weight: 600; padding: 0 12px; white-space: nowrap; }
.czat__pole { flex: none; padding: 8px 14px 4px; display: flex; gap: 8px; margin: 0; }
.czat__pole input { flex: 1; min-width: 0; border-radius: 999px; }
.czat__pole button { width: 48px; height: 48px; flex: none; border-radius: 999px; border: 0; background: var(--niebieski); color: #fff; display: flex; align-items: center; justify-content: center; }
.czat__uwaga { flex: none; margin: 0; padding: 0 14px 12px; font-size: .75rem; color: var(--szary); }
.czat-btn { position: fixed; right: 24px; bottom: 24px; z-index: 61; height: 64px; padding: 0 22px 0 16px; border-radius: 999px; border: 0; background: var(--niebieski); color: #fff; box-shadow: 0 8px 24px rgba(11, 58, 120, .3); font-family: var(--nag); font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.czat-btn[hidden] { display: none; }
@media (max-width: 760px) { .czat { right: 0; left: 0; bottom: 0; top: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; z-index: 70; } }

/* Zgoda na cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 65; max-width: 980px; margin: 0 auto; background: #fff; border: 2px solid var(--granat); border-radius: 20px; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; box-shadow: 0 8px 28px rgba(11, 58, 120, .18); }
.cookies[hidden] { display: none; }
.cookies__tekst { flex: 1 1 420px; min-width: 0; }
.cookies h2 { margin: 0 0 6px; font-weight: 800; font-size: 1.19rem; color: var(--niebieski); }
.cookies p { margin: 0; font-size: .94rem; color: var(--tekst-2); }
.cookies__ustawienia { border: 1px solid var(--linia); border-radius: 12px; margin: 12px 0 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.cookies__ustawienia[hidden] { display: none; }
.cookies__ustawienia label { display: flex; gap: 10px; align-items: center; }
.cookies__ustawienia input { width: 22px; height: 22px; }
.cookies__przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .cookies { bottom: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } .cookies__przyciski .btn { flex: 1 1 100%; } }

/* Wysoki kontrast (przełącznik „Kontrast”) */
html.kontrast body, html.kontrast .naglowek, html.kontrast .karta, html.kontrast .kafelek, html.kontrast .krok, html.kontrast .cm__karta, html.kontrast .cm__godziny, html.kontrast .cm__szukaj, html.kontrast .aktualnosc, html.kontrast .tlo-jasne, html.kontrast .baner, html.kontrast .kom__ramka, html.kontrast .kom__glowa, html.kontrast .etr__blok, html.kontrast .czat, html.kontrast .czat__lista, html.kontrast .czat__msg--bot, html.kontrast .cookies, html.kontrast .menu-glowne, html.kontrast .dolny-pasek, html.kontrast .mapa__adres, html.kontrast .data-kafel, html.kontrast .rachunek, html.kontrast .sms-karta, html.kontrast .kontakt__pogotowie { background: #000 !important; color: #fff !important; border-color: #FFEB3B !important; }
html.kontrast * { color: #fff !important; box-shadow: none !important; }
html.kontrast a, html.kontrast .link-btn, html.kontrast a * { color: #FFEB3B !important; text-decoration: underline !important; }
html.kontrast .btn, html.kontrast .pilne__btn, html.kontrast .pilne__znak, html.kontrast .menu-btn, html.kontrast .etykieta, html.kontrast .czat__podpowiedzi button, html.kontrast .czat__linki a, html.kontrast .czat-btn, html.kontrast .status, html.kontrast .przel, html.kontrast .czat__pole button, html.kontrast .czat__msg--ja { background: #000 !important; border: 2px solid #FFEB3B !important; color: #FFEB3B !important; }
html.kontrast .pasek-gorny, html.kontrast .pilne, html.kontrast .stopka, html.kontrast .jakosc, html.kontrast .czat__glowa, html.kontrast .jakosc__siatka div, html.kontrast .kolko, html.kontrast .kafelek__ikona, html.kontrast .kom__dzwonek { background: #000 !important; border: 1px solid #FFEB3B; }
html.kontrast .baner__obraz { display: none; }
html.kontrast input, html.kontrast select, html.kontrast textarea { background: #000 !important; color: #fff !important; border-color: #FFEB3B !important; }
html.kontrast svg [stroke]:not([stroke="none"]) { stroke: #FFEB3B; }

/* Druk */
@media print {
	.pasek-gorny, .naglowek, .dolny-pasek, .czat, .czat-btn, .cookies, .stopka, .mapa { display: none !important; }
	body { padding: 0; }
	a { color: #000; }
}

/* Mapa utrudnień w „Ważnych komunikatach” */
.kom-mapa { border-top: 1px solid #F1D4D2; padding: 16px 28px 18px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.kom-mapa__widok { position: relative; height: 340px; border-radius: 14px; overflow: hidden; background: #EEF1EA; border: 1px solid var(--linia); touch-action: none; cursor: grab; }
.kom-mapa__kafle img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.kom-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kom-mapa__svg a { cursor: pointer; }
.kom-mapa__svg a:hover path, .kom-mapa__svg a:focus path { stroke-opacity: 1; stroke-width: 13; }
.kom-mapa__atr { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.85); font-size: 11px; padding: 1px 6px; }
.kom-mapa__zoom { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.kom-mapa__zoom button { width: 36px; height: 36px; border: 1px solid #8792A0; border-radius: 8px; background: #fff; font-size: 20px; font-weight: 700; color: var(--tekst); }
.kom-mapa__zgoda { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.kom-mapa__zgoda p { max-width: 420px; margin: 0; font-size: .94rem; color: var(--tekst-2); }
.kom-mapa__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kom-mapa__legenda button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--linia); border-radius: 10px; padding: 10px 12px; font-weight: 600; color: var(--tekst); min-height: 44px; }
.kom-mapa__legenda button:hover { border-color: var(--niebieski); }
.kom-mapa__kolor { flex: none; width: 14px; height: 14px; border-radius: 999px; margin-top: 4px; }
@media (max-width: 760px) { .kom-mapa { grid-template-columns: 1fr; padding: 14px 16px; } .kom-mapa__widok { height: 280px; } }
html.kontrast .kom-mapa__legenda button, html.kontrast .kom-mapa__zoom button { background: #000 !important; color: #FFEB3B !important; border-color: #FFEB3B !important; }

/* Beczkowóz z wodą pitną */
.beczka { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; padding: 10px 12px; background: #E8F1FB; border: 1px solid #B9D3EF; border-radius: 10px; font-size: .9375rem; }
.beczka ul { margin: 2px 0 0; padding: 0; list-style: none; }
.beczka li { margin: 2px 0; }
.beczka a { font-weight: 700; }
.beczka__ik { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #0B5CAD; }
.beczka__rada { margin: 4px 0 0; font-size: .8125rem; color: #5A6470; }
.kom-mapa__beczka { display: flex; gap: 10px; align-items: center; padding: 6px 4px; font-size: .875rem; }
.kom-mapa__beczka .beczka__ik { width: 22px; height: 22px; }
.kom-mapa__bk { cursor: pointer; }
.kom-mapa__bk g { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
html.kontrast .beczka { background: #000 !important; color: #FFEB3B !important; border-color: #FFEB3B !important; }
html.kontrast .beczka__rada { color: #FFEB3B !important; }