/* /assets/css/tokens.css */
/* ==========================================================================
   Niebo-dent - design tokens
   Wyciagniete z zywego CSS Oxygena (rebuild/assets/css/oxygen-live.css)
   wg rzeczywistej czestotliwosci uzycia. Nie zmieniac wartosci bez powodu -
   sa zgodne 1:1 z obecna produkcja.
   ========================================================================== */

:root {
	/* --- marka ---------------------------------------------------------
	   02.09.2026: --c-brand i --c-cta przyciemnione wobec pierwotnej palety
	   (#7590c5 -> #4b6eb3, #ff6b35 -> #cf3700). Powod: audyt dostepnosci
	   wykryl 33 elementy ponizej progu kontrastu WCAG AA - stare kolory
	   dawaly 2,8-3,2:1 przy wymaganych 4,5:1. Nowe daja 5,0:1 na bialym
	   i na --c-brand-bg. Nie przywracac starych wartosci bez przeliczenia. */
	--c-brand:            #4b6eb3;  /* niebieski marki - naglowki, linki, panele */
	--c-brand-dark:       #113b69;  /* navy - stopka, mocne akcenty */
	--c-brand-light:      #c9d6ed;  /* jasny niebieski - obramowania, karty */
	--c-brand-bg:         #eff3ff;  /* tlo sekcji */

	/* --- CTA ----------------------------------------------------------- */
	--c-cta:              #cf3700;  /* pomaranczowy - przyciski glowne */
	--c-cta-hover:        #a82c00;

	/* --- neutralne ---------------------------------------------------- */
	--c-text:             #282828;
	--c-text-muted:       #606e79;
	--c-text-soft:        #5a5959;
	--c-white:            #ffffff;
	--c-off-white:        #fafafa;
	--c-border:           #e5e5e5;

	/* --- akcenty poboczne --------------------------------------------- */
	--c-accent-yellow:    #e8c900;
	--c-accent-yellow-dk: #c4ab09;

	/* --- typografia --------------------------------------------------- */
	--f-heading: "Ranade", "Poppins", "Poppins-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--f-body:    "Poppins", "Poppins-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--fs-h1:    clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--fs-h2:    clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	--fs-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	--fs-body:  1rem;
	--fs-small:  0.875rem;

	--lh-tight: 1.15;
	--lh-body:  1.65;

	/* --- rytm --------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* --- ksztalty ----------------------------------------------------- */
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-pill: 999px;

	/* Jeden cien, nie drabinka elevation. Uzywany WYLACZNIE dla elementow
	   fizycznie unoszacych sie nad trescia: panel mega menu i sticky pasek. */
	--shadow-panel: 0 12px 32px rgba(17, 59, 105, 0.14);

	/* --- layout ------------------------------------------------------- */
	--w-container: 1240px;
	--w-narrow:    760px;
	--h-header:    84px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fonty self-hosted. 25.09.2026: dodane woff2 (fontTools, ok. 51 KB zamiast
   ok. 155 KB na odmiane), .ttf zostaje jako fallback dla starych przegladarek.
   DO ZROBIENIA: pobranie
   Ranade z Fontshare; na produkcji Ranade jest wczytywany z innego arkusza,
   ktorego nie ma w oxygen-live.css.

   font-display:swap - w tracie produkcji FontDisplay pokazywal 1030 ms
   oszczednosci na FCP. */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

/* Font zastepczy z dopasowanymi metrykami. Przy `font-display: swap`
   podmiana kroju zmienia szerokosc tekstu i przesuwa layout - w nawigacji
   dawalo to CLS 0,0065. `size-adjust` zbliza metryki systemowego kroju do
   Poppins, wiec podmiana jest niewidoczna.
   Wartosc wyliczona z proporcji wysokosci x obu krojow. */
@font-face {
	font-family: "Poppins-fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 106%;
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
}

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

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--f-heading);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
	color: var(--c-brand-dark);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--c-brand); }

/* Kazdy obraz ma zarezerwowane miejsce. To bylo zrodlo CLS 0,854 na
   obecnej stronie: 53/53 obrazow Oxygena bez width/height. */
img, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--cta { background: var(--c-cta); color: var(--c-white); }
.btn--cta:hover { background: var(--c-cta-hover); transform: translateY(-1px); }
.btn--brand { background: var(--c-brand); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-brand); border: 1.5px solid var(--c-brand-light); }

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Tresc z bazy WordPressa zawiera wklejone, pelne URL-e (np. w polityce
   prywatnosci linki do polityk Apple i Facebooka). Bez tego dlugie slowa
   bez spacji rozpychaja strone - przy 320 px bylo +75 px. */
.prose a,
.prose p,
.prose li,
.prose td,
.prose th {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* /assets/css/mega-menu.css */
/* ==========================================================================
   Mega menu - zastepuje kaskadowy dropdown Oxygena
   Problem obecnej wersji: 11 pozycji w jednej kolumnie zaslania cale hero,
   a trzeci poziom wysuwa sie w prawo i naklada na formularz kontaktowy.
   Rozwiazanie: jeden panel na pelna szerokosc, 4 kolumny tematyczne,
   wszystkie 23 podstrony oferty widoczne od razu - zero hovera na 3. poziomie.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--h-header);
}

.site-logo { flex: 0 0 auto; margin-right: auto; }
.site-logo img { width: 148px; height: 48px; }

/* --- pasek nawigacji ------------------------------------------------- */
.nav { display: none; }

@media (min-width: 1200px) {
	.nav { display: block; }
	.nav__list {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		margin: 0; padding: 0;
		list-style: none;
	}
	.nav__link {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--fs-small);
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--c-text-muted);
		border-radius: var(--r-sm);
		white-space: nowrap;
		transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
	}
	.nav__link:hover,
	.nav__link[aria-expanded="true"] { color: var(--c-brand); background: var(--c-brand-bg); }
	.nav__link[aria-current="page"] { color: var(--c-brand); }

	.nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
}

/* Rozmiar chevronu MUSI byc globalny - inline SVG bez width/height
   rozdyma sie do szerokosci kontenera. */
.nav__chevron {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	transition: transform 0.2s var(--ease);
}

/* --- panel mega menu ------------------------------------------------- */
.mega {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--c-white);
	border-top: 1px solid var(--c-border);
	box-shadow: var(--shadow-panel);
	/* domyslnie schowane, bez display:none - zeby dalo sie animowac
	   i zeby czytniki ekranu widzialy strukture przy otwarciu */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

/* Ponizej progu desktopu panel nie istnieje. Bez tego jego 4-kolumnowa siatka
   renderuje sie (niewidocznie) na mobile i rozpycha strone w poziomie -
   layout viewport rosnie z 390 do 422 px i tresc szuflady wychodzi za ekran. */
@media (max-width: 1199.98px) {
	.mega { display: none; }
}

.mega__grid {
	display: grid;
	/* 4 kolumny tematyczne + waska kolumna kontaktowa z prawej */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-5);
	padding-block: var(--sp-6) var(--sp-7);
	align-items: start;
}

@media (min-width: 1280px) {
	.mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(210px, 250px); }
	/* karta kontaktowa trzyma sie prawej krawedzi przez cala wysokosc panelu */
	.mega__aside { grid-column: 5; grid-row: 1 / -1; }
}

/* 1080-1279 px: brak miejsca na piata kolumne, karta idzie pod spod
   i rozklada sie w poziomie, zeby nie wydluzac panelu */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	.mega__aside {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		gap: var(--sp-5);
	}
	.mega__aside p { margin: 0; flex: 1 1 auto; }
	.mega__phone { margin: 0; }
	.mega__aside .btn { width: auto; }
	.mega__aside .btn + .btn { margin-top: 0; }
}

.mega__col-title {
	font-family: var(--f-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-brand);
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--c-brand-light);
}

.mega__group { margin-bottom: var(--sp-5); }
.mega__group:last-child { margin-bottom: 0; }

.mega__parent {
	display: block;
	font-family: var(--f-heading);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-brand-dark);
	text-decoration: none;
	margin-bottom: var(--sp-2);
}
.mega__parent:hover { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

.mega__children { margin: 0; padding: 0 0 0 var(--sp-4); list-style: none; }
.mega__children li + li { margin-top: 2px; }
.mega__child {
	display: block;
	padding: var(--sp-1) 0;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--c-text-muted);
	text-decoration: none;
}
.mega__child:hover { color: var(--c-cta); }

/* czwarta kolumna: skrot kontaktowy zamiast kolejnej listy linkow */
.mega__aside {
	background: var(--c-brand-bg);
	padding: var(--sp-5);
	align-self: start;
}
.mega__aside p { margin: 0 0 var(--sp-3); font-size: 0.86rem; color: var(--c-text-muted); }
.mega__phone {
	display: block;
	font-family: var(--f-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--c-cta);
	text-decoration: none;
	margin-bottom: var(--sp-4);
}
.mega__aside .btn { width: 100%; justify-content: center; }
.mega__aside .btn + .btn { margin-top: var(--sp-2); }

/* --- mobile ----------------------------------------------------------- */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	margin-left: var(--sp-2);
	background: var(--c-brand-bg);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--c-brand-dark);
	cursor: pointer;
}
@media (min-width: 1200px) { .nav-toggle { display: none; } }

.drawer {
	position: fixed;
	inset: var(--h-header) 0 0 auto;
	width: min(420px, 100%);
	background: var(--c-white);
	border-left: 1px solid var(--c-border);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.24s var(--ease);
	z-index: 99;
	padding-bottom: var(--sp-9);
}
.drawer[data-open="true"] { transform: none; }
@media (min-width: 1200px) { .drawer { display: none; } }

/* Akordeon zamiast plaskiej listy 30 pozycji. Domyslnie wszystko zwiniete,
   wiec pierwszy ekran menu miesci sie bez przewijania. */
.drawer__item { border-bottom: 1px solid var(--c-border); }
.drawer__link,
.drawer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	min-height: 56px;         /* touch target */
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--f-heading);
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	color: var(--c-brand-dark);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}
.drawer__summary[aria-expanded="true"] { color: var(--c-brand); background: var(--c-brand-bg); }
.drawer__summary .nav__chevron { flex: 0 0 auto; transition: transform 0.2s var(--ease); }
.drawer__summary[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.drawer__panel { display: none; padding: 0 var(--sp-5) var(--sp-4); }
.drawer__panel[data-open="true"] { display: block; }

.drawer__group { padding-block: var(--sp-3); }
.drawer__group + .drawer__group { border-top: 1px dashed var(--c-brand-light); }
.drawer__parent {
	display: block;
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--c-brand-dark);
	text-decoration: none;
	padding-block: var(--sp-2);
}
.drawer__children { margin: 0; padding-left: var(--sp-4); list-style: none; border-left: 2px solid var(--c-brand-bg); }
.drawer__child {
	display: block;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 0.88rem;
	color: var(--c-text-muted);
	text-decoration: none;
}

.drawer__cta { padding: var(--sp-5); }
.drawer__cta .btn { width: 100%; justify-content: center; }
.drawer__cta .btn + .btn { margin-top: var(--sp-2); }

.mega-backdrop {
	position: fixed;
	inset: var(--h-header) 0 0 0;
	background: rgba(17, 59, 105, 0.28);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--ease), visibility 0.2s;
	z-index: 98;
}
.mega-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

/* 1200-1379 px: menu, logo i numer telefonu ledwo sie mieszcza w jednej linii.
   Sciskamy odstepy nawigacji, zeby naglowek nie wypychal strony w poziomie. */
@media (min-width: 1200px) and (max-width: 1379.98px) {
	.site-header__inner { gap: var(--sp-3); }
	.nav__list { gap: 0; }
	.nav__link { padding-inline: var(--sp-2); font-size: 0.8rem; letter-spacing: 0.01em; }
}

/* /assets/css/layout.css */
/* ==========================================================================
   Layout wspolny: skip link, CTA w naglowku, wskaznik otwarcia, okruszki,
   stopka, mapa na zadanie, sticky CTA.
   ========================================================================== */

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 200;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-brand-dark);
	color: var(--c-white);
	border-radius: var(--r-sm);
	text-decoration: none;
	transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* Widoczny focus na calej stronie - obecna wersja opiera sie na domyslnym
   zachowaniu przegladarki, a punkt B7 audytu nie byl w ogole testowany. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--c-cta);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* --- kotwice ---------------------------------------------------------- */
/* Naglowek jest sticky (85 px), wiec bez tego cel kotwicy laduje POD nim -
   przy #umow chowalo sie 86 px sekcji, a pierwszy tekst wypadal na 64 px.
   Dotyczy kazdego celu fragmentu URL: #umow, #faq, #cennik, #tresc. */
:target {
	scroll-margin-top: calc(var(--h-header) + var(--sp-6));
}

/* Lagodne przewijanie do kotwicy - ale nie dla osob, ktore wylaczyly animacje */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --- CTA w naglowku --------------------------------------------------- */
/* Flex column, a nie blok z elementami inline-level: telefon i wskaznik
   otwarcia sa oba inline-flex, wiec bez tego ustawialy sie w jednej linii
   i wychodzily poza kontener, dajac poziomy scroll calej strony. */
.header-cta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
}

/* Sam numer, bez etykiety nad nim - stad jedna linia i wieksze
   wypelnienie w pionie, zeby przycisk zachowal wage w naglowku. */
.header-cta__phone {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-3) var(--sp-6);
	background: var(--c-cta);
	color: var(--c-white);
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.header-cta__phone:hover { background: var(--c-cta-hover); transform: translateY(-1px); }

.header-cta__number {
	font-family: var(--f-heading);
	font-size: 1.02rem;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.header-cta__phone { padding-inline: var(--sp-4); }
	.header-cta__number { font-size: 0.94rem; }
}

/* Ponizej 600 px logo + numer + hamburger nie mieszcza sie w jednej linii
   (przy 360 px wychodzilo 71 px za krawedz). Numer w naglowku jest tu zbedny,
   bo sticky pasek u dolu ekranu ma telefon widoczny caly czas. */
@media (max-width: 599.98px) {
	.header-cta { display: none; }
	.site-logo img { width: 124px; height: 40px; }
	.site-header__inner { gap: var(--sp-3); }
}

/* --- wskaznik "otwarte teraz" ---------------------------------------- */
.open-now {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--c-text-muted);
}
.open-now__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-text-muted);
	flex: 0 0 auto;
}
.open-now[data-state="open"] { color: #1a7f4b; }
.open-now[data-state="open"] .open-now__dot { background: #22a45d; box-shadow: 0 0 0 3px rgba(34, 164, 93, 0.18); }
.open-now[data-state="closed"] { color: var(--c-text-soft); }


/* --- okruszki --------------------------------------------------------- */
.breadcrumbs { background: var(--c-brand-bg); padding-block: var(--sp-3); }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0; padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: var(--c-text-muted);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs__item a { color: var(--c-brand); text-decoration: none; }
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__sep { color: var(--c-brand-light); }

/* --- stopka ----------------------------------------------------------- */
.site-footer {
	margin-top: var(--sp-9);
	padding-top: var(--sp-8);
	background: var(--c-brand-bg);
	color: var(--c-text);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-6);
	padding-bottom: var(--sp-7);
}
.site-footer__logo { margin-bottom: var(--sp-3); }
.site-footer__legal { margin: 0 0 var(--sp-3); font-size: 0.82rem; color: var(--c-text-muted); }

.site-footer__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: var(--sp-4);
	color: var(--c-brand-dark);
}
.site-footer__address { font-style: normal; margin-bottom: var(--sp-3); line-height: 1.55; }
.site-footer__phone {
	display: inline-block;
	font-family: var(--f-heading);
	font-size: 1.28rem;
	font-weight: 700;
	color: var(--c-cta);
	text-decoration: none;
}
.site-footer__rating {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-size: 0.84rem;
	color: var(--c-text-muted);
}
.site-footer__rating strong {
	font-family: var(--f-heading);
	font-size: 1.15rem;
	color: var(--c-brand-dark);
}

/* Wiersz: przycisk opinii + link do Facebooka. Oba wyrownane do wspolnej
   osi pionowej - stad flex-container zamiast polegania na baseline dwoch
   osobnych elementow inline-flex. */
.site-footer__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

/* Link do fanpage'a. min-height 44px - wytyczna WCAG 2.5.5 (punkt audytu
   o elementach dotykowych), zeby nie wprowadzac z powrotem celu ponizej progu. */
.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	color: var(--c-text-muted);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
}
.site-footer__social:hover { color: var(--c-brand); }
.site-footer__social svg { flex: 0 0 auto; }

.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li + li { margin-top: var(--sp-2); }
.site-footer__links a { color: var(--c-text-muted); text-decoration: none; font-size: 0.86rem; }
.site-footer__links a:hover { color: var(--c-brand); text-decoration: underline; }

.hours { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.hours th { text-align: left; font-weight: 500; color: var(--c-text-muted); padding: 3px 0; }
.hours td { text-align: right; font-weight: 600; color: var(--c-brand-dark); padding: 3px 0; }

.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: 0.75rem; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-5);
	border-top: 1px solid var(--c-brand-light);
	padding-block: var(--sp-4);
	font-size: 0.8rem;
	color: var(--c-text-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__autor a {
	color: var(--c-brand-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--c-brand-light);
}
.site-footer__autor a:hover { color: var(--c-cta); border-bottom-color: var(--c-cta); }

/* --- mapa na zadanie -------------------------------------------------- */
.map-lazy {
	/* JEDNA zmienna na wysokosc: uzywa jej i placeholder, i wstawiony iframe.
	   Bez tego iframe kurczyl sie do 150 px, bo globalna regula
	   `iframe { height: auto }` z tokens.css bije atrybut height="380"
	   ustawiany w JS - placeholder zostawal 460 px, a widok 150 px. */
	--map-h: 380px;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	/* wysokosc zarezerwowana z gory - podmiana placeholdera na iframe
	   nie przesuwa layoutu (zero CLS) */
	min-height: var(--map-h);
	margin-bottom: var(--sp-7);
	background: var(--c-brand-light);
	overflow: hidden;
}
.map-lazy[data-loaded="true"] { display: block; background: none; }

/* Wysokosc MUSI byc tutaj, nie w atrybucie iframe'a - patrz komentarz wyzej. */
.map-lazy[data-loaded="true"] iframe {
	display: block;
	width: 100%;
	height: var(--map-h);
	border: 0;
}
.map-lazy__btn {
	padding: var(--sp-3) var(--sp-6);
	background: var(--c-white);
	border: 1.5px solid var(--c-brand);
	border-radius: var(--r-pill);
	font-family: var(--f-heading);
	font-weight: 600;
	color: var(--c-brand-dark);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.map-lazy__hint { font-family: var(--f-body); font-size: 0.75rem; font-weight: 400; color: var(--c-text-muted); }
.map-lazy__direct { font-size: 0.84rem; color: var(--c-brand-dark); }

/* --- mapa w stopce ---------------------------------------------------- */
.mapa-stopka {
	/* Wysokosc z gory: iframe wstawia sie w gotowe miejsce, layout nie skacze. */
	--map-h: clamp(260px, 30vw, 420px);
	margin-bottom: var(--sp-6);
}
.mapa-stopka iframe {
	display: block;
	width: 100%;
	height: var(--map-h);
	border: 0;
	background: var(--c-brand-light);   /* widoczne, zanim mapa sie pobierze */
}
.mapa-stopka__link {
	display: inline-block;
	margin-top: var(--sp-3);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--c-brand-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--c-brand-light);
}
.mapa-stopka__link:hover { color: var(--c-cta); border-bottom-color: var(--c-cta); }

/* --- sticky CTA (mobile) --------------------------------------------- */
.sticky-cta {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 90;
	display: flex;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
	/* Pelne biale tlo, bez blura - blur jest znakiem rozpoznawczym szablonow
	   i obecna strona go nie ma. */
	background: var(--c-white);
	border-top: 1px solid var(--c-brand-light);
	box-shadow: var(--shadow-panel);
}
@media (min-width: 1200px) { .sticky-cta { display: none; } }

/* Telefon dominuje, mapa to maly przycisk obok. Na obecnej stronie oba CTA
   maja rowna wage, a rozmowa z recepcja konwertuje lepiej niz dojazd. */
.sticky-cta__call {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 52px;
	padding-inline: var(--sp-4);
	background: var(--c-cta);
	color: var(--c-white);
	border-radius: var(--r-pill);
	font-size: 0.92rem;
	text-decoration: none;
}
.sticky-cta__call strong { font-family: var(--f-heading); }
.sticky-cta__map {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	background: var(--c-brand-bg);
	color: var(--c-brand-dark);
	border-radius: var(--r-pill);
	text-decoration: none;
}

/* sticky pasek nie moze zaslaniac konca tresci */
body { padding-bottom: 68px; }
@media (min-width: 1200px) { body { padding-bottom: 0; } }

/* ==========================================================================
   Dotyk: WCAG 2.5.5 chce 44x44 px dla celu dotykowego. Audyt (scripts/audyt_ui.py)
   wykrywal ~13 elementow ponizej progu na stronie glownej i mapie strony.
   Linki wewnatrz akapitow sa wyjatkiem wg standardu - ich nie ruszamy.
   ========================================================================== */
@media (pointer: coarse), (max-width: 768px) {
	.btn,
	.site-footer__phone,
	.map-lazy__direct,
	.mapa-stopka__link,
	.ocena__link,
	.arch-powrot a,
	.site-footer__links a,
	.mapa-lista a,
	.usluga__wiecej a,
	.oferta-karta__pod a,
	.blok-boczny__lista a,
	.arch-filtry__lista a,
	.powiazane__lista a,
	.usluga__title a,
	.mapa-podtytul a,
	.oferta-karta__title a,
	.karta-kontakt__phone,
	.kontakt-glowny__tel,
	.umow__tel,
	.umow__adres a,
	.kontakt-mail,
	.karta-kontakt__adres a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Checkbox zgody: powiekszony obszar klikalny bez zmiany wygladu pola */
	.form-szybki__zgoda input[type="checkbox"] {
		width: 22px;
		height: 22px;
		margin-top: 0;
	}
	.form-szybki__zgoda { align-items: flex-start; gap: var(--sp-3); }

	/* Listy z linkami: odstep zamiast scisku, zeby sasiednie cele
	   nie stykaly sie krawedziami */
	.mapa-lista li,
	.site-footer__links li,
	.blok-boczny__lista li { margin-bottom: 0; }
}

/* Naglowek sekcji: tytul po lewej, KONKRET po prawej.
   Zastapilo etykiety-ozdobniki ("ZABIEGI DENTYSTYCZNE" nad "Nowoczesny
   gabinet") - male wersaliki nad tytulem to wzorzec z kazdego szablonu
   i powtarzaly ta sama mysl mniejszym pismem. Liczba niesie informacje,
   ktorej tytul nie ma, i daje asymetrie zamiast wysrodkowanej ozdoby. */
.sekcja__glowa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-6);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-brand-light);
}
.sekcja__glowa .sekcja__title,
.sekcja__glowa h1 { margin-bottom: 0; }

.sekcja__licznik {
	margin: 0;
	font-size: 0.92rem;
	color: var(--c-text-muted);
	white-space: nowrap;
}
.sekcja__licznik strong {
	font-family: var(--f-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--c-cta);
	margin-right: 2px;
}

/* ==========================================================================
   Banner zgody na cookies - wlasny CMP (bez CookieYes, ktory wymagalby
   nowej rejestracji konta specjalnie dla tej domeny).
   ========================================================================== */
.consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 200;
	padding: var(--sp-4);
	display: flex;
	justify-content: center;
}

/* KONIECZNE: `display: flex` wyzej ma wyzsza specyficznosc niz wbudowana
   regula przegladarki `[hidden] { display: none }`, wiec ja nadpisuje.
   Bez tej linii ustawienie `element.hidden = true` w JS NIE ukrywa bannera -
   stan sie zmienia, ale uzytkownik dalej widzi go na ekranie. */
.consent[hidden] { display: none; }
.consent__karta {
	width: 100%;
	max-width: 640px;
	background: var(--c-white);
	box-shadow: var(--shadow-panel);
	padding: var(--sp-5);
}
.consent__tekst {
	margin: 0 0 var(--sp-4);
	font-size: 0.9rem;
	color: var(--c-text-soft);
}
.consent__tekst a { text-decoration: underline; }
.consent__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}
.consent__przyciski .btn { flex: 1 1 auto; justify-content: center; }

.consent__kategoria {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--c-border);
	cursor: pointer;
}
.consent__kategoria:last-of-type { border-bottom: 0; }
.consent__kategoria-nazwa {
	display: block;
	font-family: var(--f-heading);
	font-weight: 600;
	color: var(--c-brand-dark);
	margin-bottom: 2px;
}
.consent__kategoria-opis { display: block; font-size: 0.84rem; color: var(--c-text-muted); }
.consent__kategoria input {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--c-cta);
}
.consent__ustawienia .consent__przyciski { margin-top: var(--sp-4); }

@media (max-width: 480px) {
	.consent { padding: var(--sp-2); }
	.consent__karta { padding: var(--sp-4); }
	.consent__przyciski { flex-direction: column; }
}

/* --- tabele z tresci WordPressa (blog, oferty, cennik, strony statyczne) ---
   Komorki NIE zawijaja tekstu - dzieki temu tabela ma naturalna szerokosc
   i to KONTENER (.tabela-scroll, dodawany przez filtr `tresc`) przewija sie
   w bok, a nie tekst sciska sie do nieczytelnosci w waskich komorkach. */
.tabela-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--sp-5);
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}
.prose th,
.prose td {
	padding: var(--sp-3);
	text-align: left;
	border-bottom: 1px solid var(--c-border);
	white-space: nowrap;
}
.prose thead th {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-brand);
	border-bottom: 2px solid var(--c-brand-light);
}

/* --- FAQ: dzielony przez ACF ofert i przez tresc WP (blog) - klasy .faq__*
   sa globalne, zeby dzialaly identycznie niezaleznie od szablonu. */
.faq { margin-top: var(--sp-8); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 56px;
	padding: var(--sp-3) 0;
	font-family: var(--f-heading);
	font-weight: 600;
	color: var(--c-brand-dark);
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--c-brand);
	line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding-bottom: var(--sp-4); }

/* /assets/css/oferta.css */
/* Podstrona oferty: hero ze scrimem, tresc + lipnaca kolumna kontaktowa. */

.oferta-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(280px, 34vw, 420px);
	overflow: hidden;
	background: var(--c-brand-dark);
}
.oferta-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Kadr trzymany na gorze obrazu - na mobile wazna czesc kompozycji
	   nie ucieka za krawedz (punkt B1 audytu). */
	object-position: center 30%;
}
/* Gradient jest STALY, nie zalezy od tego, jakie zdjecie wstawiono
   na danej podstronie. To gwarantuje kontrast tekstu, a nie liczy na szczescie. */
.oferta-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(17, 59, 105, 0.92) 0%,
		rgba(17, 59, 105, 0.72) 45%,
		rgba(17, 59, 105, 0.30) 100%
	);
}
.oferta-hero__inner { position: relative; padding-block: var(--sp-6) var(--sp-7); }
.oferta-hero__title { color: var(--c-white); margin-bottom: var(--sp-3); max-width: 22ch; }
.oferta-hero__lead {
	color: rgba(255, 255, 255, 0.92);
	max-width: 58ch;
	margin: 0 0 var(--sp-5);
}
.oferta-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: 0.95rem; }
.btn--on-dark { color: var(--c-white); border-color: rgba(255, 255, 255, 0.55); }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.12); }

.oferta-hero__trust {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-5) 0 0;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.9);
}

/* --- uklad --- */
.oferta-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-7);
	padding-block: var(--sp-7);
}
@media (min-width: 992px) {
	.oferta-layout { grid-template-columns: minmax(0, 1fr) 340px; }
	.oferta-aside { position: sticky; top: calc(var(--h-header) + var(--sp-4)); align-self: start; }
}

.prose { max-width: 68ch; }
.prose p { margin: 0 0 var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose--lead p { font-size: 1.08rem; color: var(--c-text-soft); }

/* Zdjecia w tresci: portretowe zdjecia z telefonu nie moga zajmowac
   dwoch ekranow przewijania (punkt B8 audytu). */
.prose img {
	max-height: 460px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--r-md);
	margin-block: var(--sp-5);
}

/* --- cennik --- */
.cennik { margin-top: var(--sp-8); }
.cennik__tabela { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cennik__tabela thead th {
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-brand);
	padding: var(--sp-3) var(--sp-3);
	border-bottom: 2px solid var(--c-brand-light);
}
.cennik__tabela tbody th {
	text-align: left;
	font-weight: 500;
	padding: var(--sp-3);
	border-bottom: 1px solid var(--c-border);
}
.cennik__tabela tbody td {
	text-align: right;
	font-family: var(--f-heading);
	font-weight: 600;
	white-space: nowrap;
	color: var(--c-brand-dark);
	padding: var(--sp-3);
	border-bottom: 1px solid var(--c-border);
}
.cennik__tabela tbody tr:nth-child(odd) { background: var(--c-off-white); }
.cennik__nota { margin-top: var(--sp-4); font-size: 0.86rem; color: var(--c-text-muted); }

/* FAQ (.faq / .faq__*) przeniesione do layout.css - dzielone z blokiem FAQ
   w tresci wpisow blogowych (patrz filtr `tresc` w eleventy.config.js). */

/* --- powiazane --- */
.powiazane { margin-top: var(--sp-8); }
.powiazane__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-6);
	margin: 0; padding: 0;
	list-style: none;
}
.powiazane__lista a {
	display: inline-block;
	padding: var(--sp-2) 0;
	font-size: 0.92rem;
	border-bottom: 2px solid var(--c-brand-light);
	color: var(--c-brand-dark);
	text-decoration: none;
}
.powiazane__lista a:hover { border-bottom-color: var(--c-cta); color: var(--c-cta); }

/* --- karta kontaktowa --- */
/* Pole tla zamiast ramki z zaokragleniem - oddzielenie robi kolor i odstep.
   Bez linii u gory - akcent zostal tylko na formularzu na glownej. */
.karta-kontakt {
	background: var(--c-brand-bg);
	padding: var(--sp-6) var(--sp-5);
}
.karta-kontakt__title { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.karta-kontakt p { margin: 0 0 var(--sp-3); font-size: 0.88rem; color: var(--c-text-muted); }
.karta-kontakt__phone {
	display: block;
	font-family: var(--f-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-cta);
	text-decoration: none;
}
.karta-kontakt__sep { border: 0; border-top: 1px solid var(--c-brand-light); margin-block: var(--sp-5); }

.form-szybki__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-text-muted);
	margin-bottom: var(--sp-1);
}
.form-szybki__input {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-3);
	background: var(--c-white);
	border: 0;
	border-bottom: 2px solid var(--c-brand-light);
	font: inherit;
	font-size: 1rem;   /* 16px - mniej powoduje auto-zoom w Safari na iOS */
}
.form-szybki__input:focus { border-bottom-color: var(--c-cta); }
.form-szybki__zgoda {
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--c-text-muted);
}
.form-szybki__zgoda input { margin-top: 3px; flex: 0 0 auto; }
.form-szybki .btn { width: 100%; justify-content: center; }
/* Znaczek reCAPTCHA ukryty - Google na to pozwala, o ile przy formularzu
   stoi informacja o reCAPTCHA z linkami do polityk (.form-szybki__recaptcha). */
.grecaptcha-badge { visibility: hidden; }
.form-szybki__recaptcha {
	margin: 0 0 var(--sp-3);
	font-size: 0.7rem;
	line-height: 1.4;
	color: var(--c-text-muted);
}

.oferta-aside__adres {
	margin-top: var(--sp-4);
	font-size: 0.84rem;
	color: var(--c-text-muted);
	text-align: center;
}

/* Honeypot - poza ekranem, ale nie display:none (czesc botow to wykrywa).
   Wyjety z kolejnosci Tab i z drzewa dostepnosci. */
.honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}