/* ==========================================================================
   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);
}

.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);
	border-top: 3px solid var(--c-brand);
	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; }
}