/*
Theme Name:   Divi Strażak
Theme URI:    https://strazak-kudowa.pl/
Description:  Motyw potomny Divi 4 dla firmy Strażak z Kudowy-Zdroju. Cały własny CSS strony jest w tym pliku, klasy mają przedrostek sz-.
Author:       Jerzy Czajkowski
Author URI:   https://idefi.pl/
Template:     Divi
Version:      1.0.0
Text Domain:  divi-strazak
*/

/* =========================================================================
   SPIS BLOKÓW
   1. Fonty lokalne
   2. Zmienne: kolory, odstępy, zaokrąglenia
   3. Podstawa: tło, tekst, nagłówki, linki, tabele
   4. Siatka sekcji i wierszy Divi
   5. Przyciski
   6. Pasek górny i nagłówek globalny
   7. Mega menu: panele Usługi i Dla kogo
   8. Menu mobilne: hamburger, wysuwany panel, przyciemnione tło
   9. Pierwszy ekran i okruszki
   10. Pasek zaufania
   11. Kafle usług i typów obiektów
   12. Pakiety
   13. Jak pracujemy
   14. Opinie
   15. Obszar działania
   16. Pytania i odpowiedzi
   17. Formularze
   18. Prostokąty zastępcze zdjęć i mapy
   19. Listy realizacji i artykułów
   20. Wpisy: realizacje i poradnik
   21. Stopka
   22. Stały pasek na telefonie
   23. Strona 404 i drobne elementy
   24. Dostępność i ograniczenie animacji
   ========================================================================= */


/* === 1. Fonty lokalne: Barlow 600 do nagłówków, Inter 400 i 600 do tekstu, bez łączenia z Google === */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/barlow-latin-600-normal.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;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/barlow-latin-ext-600-normal.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: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter-latin-400-normal.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;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter-latin-ext-400-normal.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: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/inter-latin-600-normal.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;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/inter-latin-ext-600-normal.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;
}


/* === 2. Zmienne: te same wartości co w Global Colors Divi === */
:root {
	--sz-grafit: #1F2933;
	--sz-czerwien: #C8102E;
	--sz-czerwien-ciemna: #A00D25;
	--sz-tlo-jasne: #F4F5F7;
	--sz-linia: #D9DDE3;
	--sz-tekst-2: #52606D;
	--sz-bialy: #FFFFFF;
	--sz-zastepczy: #E4E7EB;

	--sz-8: 8px;
	--sz-16: 16px;
	--sz-24: 24px;
	--sz-32: 32px;
	--sz-48: 48px;
	--sz-64: 64px;
	--sz-96: 96px;

	--sz-radius: 8px;
	--sz-max: 1200px;
	--sz-font-naglowki: "Barlow", "Arial Narrow", Arial, sans-serif;
	--sz-font-tekst: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
	--sz-cien: 0 8px 24px rgba(31, 41, 51, .10);
}


/* === 3. Podstawa: tło, tekst, nagłówki, linki i tabele w całej witrynie === */
.sz-btn,
.sz-topbar *, .sz-header *, .sz-mega *, .sz-mobilebar__inner *, .sz-form *, .sz-tile, .sz-pakiet, .sz-opinia { box-sizing: border-box; } /* wysokość 48 px liczona razem z obramowaniem */
body,
body #page-container {
	background: var(--sz-bialy);
	color: var(--sz-grafit);
	font-family: var(--sz-font-tekst);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
}
body #page-container .et_pb_module,
body #page-container .et_pb_module p,
body #page-container .et_pb_module li,
body #page-container .et_pb_module td,
body #page-container .et_pb_module th {
	font-family: var(--sz-font-tekst);
	font-size: 18px;
	line-height: 1.6;
	color: inherit;
}
body #page-container p { padding-bottom: 0; margin-bottom: var(--sz-16); }
body #page-container p:last-child { margin-bottom: 0; }

body #page-container h1,
body #page-container h2,
body #page-container h3,
body #page-container h4,
body #page-container .et_pb_module h1,
body #page-container .et_pb_module h2,
body #page-container .et_pb_module h3,
body #page-container .et_pb_module h4,
body #page-container .et_pb_module_header {
	font-family: var(--sz-font-naglowki);
	font-weight: 600;
	color: var(--sz-grafit);
	letter-spacing: 0;
	padding-bottom: 0;
	margin: 0 0 var(--sz-16);
}
body #page-container h1, body #page-container .et_pb_module h1 { font-size: 44px; line-height: 1.15; }
body #page-container h2, body #page-container .et_pb_module h2 { font-size: 32px; line-height: 1.2; margin-bottom: var(--sz-24); }
body #page-container h3, body #page-container .et_pb_module h3,
body #page-container .et_pb_module h4.et_pb_module_header { font-size: 24px; line-height: 1.3; }
body #page-container h4, body #page-container .et_pb_module h4 { font-size: 20px; line-height: 1.35; }

body #page-container a { color: var(--sz-czerwien); text-decoration: underline; text-underline-offset: 3px; }
body #page-container a:hover { color: var(--sz-czerwien-ciemna); }

body #page-container .et_pb_text ul,
body #page-container .et_pb_text ol { padding: 0 0 0 1.2em; margin: 0 0 var(--sz-16); }
body #page-container .et_pb_text li { margin-bottom: var(--sz-8); }

/* Wyróżniony wstęp pod nagłówkiem sekcji */
.sz-lead p { font-size: 20px !important; color: var(--sz-tekst-2) !important; }
.sz-maly, body #page-container .sz-maly p { font-size: 15px !important; color: var(--sz-tekst-2) !important; }
.sz-znacznik { display: inline-block; background: #FFF4CC; color: #5C4A00; padding: 0 6px; border-radius: 4px; font-size: .9em; }

/* Tabele w treści: obowiązki, ceny, terminy */
.sz-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--sz-24); }
table.sz-tabela { width: 100%; border-collapse: collapse; border: 1px solid var(--sz-linia); border-radius: var(--sz-radius); background: var(--sz-bialy); }
table.sz-tabela th,
table.sz-tabela td { text-align: left; vertical-align: top; padding: 12px 16px !important; border-bottom: 1px solid var(--sz-linia); font-size: 16px !important; }
table.sz-tabela th { background: var(--sz-grafit); color: var(--sz-bialy) !important; font-weight: 600; }
table.sz-tabela tr:last-child td { border-bottom: 0; }
table.sz-tabela tr:nth-child(even) td { background: var(--sz-tlo-jasne); }


/* === 4. Siatka sekcji i wierszy Divi: odstępy 48, 64 i 96 px, kontener 1200 px z marginesem 16 px === */
.sz-sec.et_pb_section { padding: var(--sz-64) 0; background-color: var(--sz-bialy); }
.sz-sec.sz-sec--light.et_pb_section { background-color: var(--sz-tlo-jasne); }
.sz-sec.sz-sec--dark.et_pb_section { background-color: var(--sz-grafit); }
.sz-sec.sz-sec--tight.et_pb_section { padding: var(--sz-32) 0; }
.sz-sec.sz-sec--hero.et_pb_section { padding: var(--sz-48) 0 var(--sz-64); }
.sz-sec .et_pb_row,
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row {
	width: calc(100% - 32px);
	max-width: var(--sz-max);
	padding: 0;
}
.sz-sec .et_pb_row + .et_pb_row { margin-top: var(--sz-32); }
.sz-sec .et_pb_row.sz-row--head { margin-bottom: 0; }
.sz-sec .et_pb_row.sz-row--narrow { max-width: 820px; }
.sz-sec .et_pb_column { margin-bottom: 0; }
.sz-sec .et_pb_module { margin-bottom: var(--sz-24); }
.sz-sec .et_pb_column .et_pb_module:last-child { margin-bottom: 0; }
/* Kolumny o równej wysokości dla kart */
.sz-sec .et_pb_row.sz-row--cards { display: flex; flex-wrap: wrap; gap: var(--sz-24); }
.sz-sec .et_pb_row.sz-row--cards::after { display: none; }
.sz-sec .et_pb_row.sz-row--cards > .et_pb_column { margin: 0 !important; float: none; display: flex; flex-direction: column; }
.sz-sec .et_pb_row.sz-row--cards > .et_pb_column > .et_pb_module { flex: 1 1 auto; }
.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_3 { width: calc((100% - 48px) / 3); }
.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_4 { width: calc((100% - 72px) / 4); }
.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_2 { width: calc((100% - 24px) / 2); }

/* Sekcja ciemna: tekst i nagłówki białe */
.sz-sec--dark,
.sz-sec--dark p,
.sz-sec--dark li,
body #page-container .sz-sec--dark h2,
body #page-container .sz-sec--dark h3,
body #page-container .sz-sec--dark .et_pb_module p { color: var(--sz-bialy) !important; }
body #page-container .sz-sec--dark a:not(.sz-btn):not(.et_pb_button) { color: var(--sz-bialy); }


/* === 5. Przyciski: główny czerwony i drugi z grafitowym obrysem, wysokość co najmniej 48 px === */
.sz-btn,
body #page-container .et_pb_button,
body #page-container .et_pb_contact_submit,
body #page-container .et_pb_button.sz-btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px !important;
	border: 2px solid var(--sz-czerwien) !important;
	border-radius: var(--sz-radius) !important;
	background: var(--sz-czerwien) !important;
	color: var(--sz-bialy) !important;
	font-family: var(--sz-font-tekst) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	cursor: pointer;
}
body #page-container .et_pb_button::after,
body #page-container .et_pb_button::before,
body #page-container .et_pb_contact_submit::after { display: none !important; }
.sz-btn:hover,
.sz-btn:focus-visible,
body #page-container .et_pb_button:hover,
body #page-container .et_pb_contact_submit:hover {
	background: var(--sz-czerwien-ciemna) !important;
	border-color: var(--sz-czerwien-ciemna) !important;
	color: var(--sz-bialy) !important;
	padding: 12px 24px !important;
}
.sz-btn--secondary,
body #page-container .et_pb_button.sz-btn--secondary {
	background: transparent !important;
	border-color: var(--sz-grafit) !important;
	color: var(--sz-grafit) !important;
}
.sz-btn--secondary:hover,
body #page-container .et_pb_button.sz-btn--secondary:hover {
	background: var(--sz-grafit) !important;
	border-color: var(--sz-grafit) !important;
	color: var(--sz-bialy) !important;
}
.sz-sec--dark .sz-btn--secondary,
body #page-container .sz-sec--dark .et_pb_button.sz-btn--secondary { border-color: var(--sz-bialy) !important; color: var(--sz-bialy) !important; }
.sz-sec--dark .sz-btn--secondary:hover,
body #page-container .sz-sec--dark .et_pb_button.sz-btn--secondary:hover { background: var(--sz-bialy) !important; color: var(--sz-grafit) !important; }
.sz-btn img, .sz-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
/* Dwa przyciski obok siebie w pierwszym ekranie */
.sz-btns { display: flex; flex-wrap: wrap; gap: var(--sz-16); margin-top: var(--sz-24); }
body #page-container .et_pb_button_module_wrapper.sz-inline { display: inline-block; margin: 0 var(--sz-16) var(--sz-16) 0 !important; }


/* === 6. Pasek górny i nagłówek globalny w Theme Builder === */
.et-l--header .et_pb_section.sz-header-sec { padding: 0 !important; background: var(--sz-bialy); }
.et-l--header .sz-header-sec .et_pb_row { width: 100%; max-width: none; }
.et-l--header .sz-header-sec .et_pb_code { margin: 0; }
.sz-wrap { width: calc(100% - 32px); max-width: var(--sz-max); margin: 0 auto; }

.sz-topbar { background: var(--sz-grafit); color: var(--sz-bialy); font-size: 15px; line-height: 1.4; }
.sz-topbar .sz-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sz-16); min-height: 40px; flex-wrap: wrap; }
.sz-topbar a { color: var(--sz-bialy) !important; text-decoration: none !important; }
.sz-topbar a:hover { text-decoration: underline !important; }
.sz-topbar__tel { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.sz-topbar__tel svg { width: 16px; height: 16px; }
.sz-topbar__godz { color: #CBD2D9; margin-left: var(--sz-16); }

.sz-header { position: relative; background: var(--sz-bialy); border-bottom: 1px solid var(--sz-linia); z-index: 100; }
.sz-header .sz-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sz-24); min-height: 80px; }
.sz-logo { display: block; flex: 0 0 auto; line-height: 0; }
.sz-logo img { width: 150px; height: auto; aspect-ratio: 1708 / 740; display: block; }

.sz-nav { flex: 1 1 auto; }
.sz-nav__list { list-style: none; margin: 0; padding: 0 !important; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sz-nav__list > li { position: static; margin: 0; padding: 0; list-style: none; }
.sz-nav__link,
.sz-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--sz-radius);
	background: transparent;
	color: var(--sz-grafit) !important;
	font-family: var(--sz-font-tekst);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
}
.sz-nav__link:hover,
.sz-nav__toggle:hover,
.sz-nav__toggle[aria-expanded="true"] { background: var(--sz-tlo-jasne); color: var(--sz-grafit) !important; }
.sz-nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sz-czerwien); border-radius: 0; }
.sz-nav__toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.sz-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sz-nav__cta { margin-left: var(--sz-8); }
.sz-nav__cta .sz-btn { min-height: 48px; padding: 10px 20px !important; font-size: 16px !important; }
.sz-nav__mobile-extra { display: none; }

.sz-burger { display: none; }


/* === 7. Mega menu: panel Usługi (3 kolumny i kafel z telefonem) oraz panel Dla kogo (4 kolumny) === */
.sz-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--sz-bialy);
	border-top: 1px solid var(--sz-linia);
	box-shadow: var(--sz-cien);
	padding: var(--sz-32) 0;
	display: none;
}
.sz-mega.is-open { display: block; }
.sz-mega__inner { width: calc(100% - 32px); max-width: var(--sz-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 280px; gap: var(--sz-32); }
.sz-mega--4 .sz-mega__inner { grid-template-columns: 1fr; }
.sz-mega__grid { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sz-8) var(--sz-16); }
.sz-mega--4 .sz-mega__grid { grid-template-columns: repeat(4, 1fr); }
.sz-mega__grid li { list-style: none; margin: 0; padding: 0; }
.sz-mega__item { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 4px var(--sz-16); padding: var(--sz-16); border-radius: var(--sz-radius); text-decoration: none !important; color: var(--sz-grafit) !important; height: 100%; }
.sz-mega__item:hover,
.sz-mega__item:focus-visible { background: var(--sz-tlo-jasne); }
.sz-mega__item img { grid-row: 1 / span 2; width: 40px; height: 40px; }
.sz-mega__name { align-self: center; }
.sz-mega__name { font-weight: 600; font-size: 16px; line-height: 1.3; }
.sz-mega__desc { font-size: 14px; line-height: 1.45; color: var(--sz-tekst-2); }
.sz-mega__tile { background: var(--sz-grafit); color: var(--sz-bialy); border-radius: var(--sz-radius); padding: var(--sz-24); display: flex; flex-direction: column; gap: var(--sz-8); }
.sz-mega__tile p { color: #CBD2D9 !important; font-size: 15px !important; margin: 0 !important; }
.sz-mega__tile .sz-mega__tel { color: var(--sz-bialy) !important; font-family: var(--sz-font-naglowki); font-size: 26px; font-weight: 600; text-decoration: none !important; }
.sz-mega__tile .sz-btn { margin-top: var(--sz-8); }
.sz-mega__all { grid-column: 1 / -1; font-weight: 600; font-size: 16px; }


/* === 8. Menu mobilne i tablet do 1100 px: hamburger zmienia się w krzyżyk, panel wysuwa się z prawej === */
@media (max-width: 1100px) {
	.sz-topbar__godz { display: none; }
	.sz-header .sz-wrap { min-height: 64px; }
	.sz-logo img { width: 120px; }
	.sz-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 0;
		border-radius: var(--sz-radius);
		background: transparent;
		cursor: pointer;
		position: relative;
		z-index: 1003;
	}
	.sz-burger span,
	.sz-burger span::before,
	.sz-burger span::after {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--sz-grafit);
		border-radius: 2px;
		position: relative;
		transition: transform .28s ease, background-color .28s ease, top .28s ease;
	}
	.sz-burger span::before,
	.sz-burger span::after { content: ""; position: absolute; left: 0; }
	.sz-burger span::before { top: -7px; }
	.sz-burger span::after { top: 7px; }
	.sz-burger[aria-expanded="true"] span { background: transparent; }
	.sz-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
	.sz-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

	.sz-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 85%;
		max-width: 420px;
		background: var(--sz-bialy);
		z-index: 1002;
		transform: translateX(100%);
		transition: transform .3s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 72px var(--sz-16) var(--sz-32);
		visibility: hidden;
	}
	.sz-menu-open .sz-nav { transform: translateX(0); visibility: visible; }
	.sz-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.sz-nav__list > li { border-bottom: 1px solid var(--sz-linia); }
	.sz-nav__link,
	.sz-nav__toggle { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 8px; font-size: 17px; border-radius: 0; }
	.sz-nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sz-czerwien); }
	.sz-nav__cta { margin: var(--sz-24) 0 0; border-bottom: 0 !important; }
	.sz-nav__cta .sz-btn { width: 100%; }
	.sz-mega { position: static; box-shadow: none; border: 0; padding: 0 0 var(--sz-16); }
	.sz-mega__inner { grid-template-columns: 1fr; gap: var(--sz-16); width: 100%; }
	.sz-mega__grid,
	.sz-mega--4 .sz-mega__grid { grid-template-columns: 1fr; gap: 0; }
	.sz-mega__item { grid-template-columns: 28px 1fr; padding: 10px 8px; align-items: center; }
	.sz-mega__item img { grid-row: auto; width: 28px; height: 28px; }
	.sz-mega__desc { display: none; }
	.sz-mega__tile { display: none; }
	.sz-nav__mobile-extra { display: block; margin-top: var(--sz-24); font-size: 16px; }
	.sz-nav__mobile-extra p { margin: 0 0 var(--sz-8) !important; font-size: 16px !important; }
	.sz-nav__mobile-extra a { font-weight: 600; }

	.sz-overlay {
		position: fixed;
		inset: 0;
		background: rgba(31, 41, 51, .55);
		z-index: 1001;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
	}
	.sz-menu-open .sz-overlay { opacity: 1; visibility: visible; }
	.sz-menu-open { overflow: hidden; }
	.sz-menu-open .et-l--footer .sz-mobilebar { display: none !important; } /* pasek nie zasłania dołu menu */
	.sz-menu-open .sz-header { z-index: 1002; } /* nagłówek ma własny kontekst warstw, więc podnosimy go nad przyciemnione tło */
	.sz-menu-open .et-l--header { position: relative; z-index: 1002; }
	.sz-menu-open .sz-burger { position: fixed; top: 12px; right: 12px; background: var(--sz-bialy); }
}
@media (min-width: 1101px) {
	.sz-overlay { display: none; }
}


/* === 9. Pierwszy ekran strony i nagłówki podstron, okruszki Rank Math === */
.sz-hero h1 { max-width: 22ch; }
.sz-hero--sub h1 { max-width: 24ch; }
.sz-hero .sz-lead { max-width: 60ch; }
.sz-okruszki,
.sz-okruszki p,
.sz-okruszki .rank-math-breadcrumb { font-size: 14px !important; color: var(--sz-tekst-2) !important; margin: 0 0 var(--sz-16) !important; }
.sz-okruszki a { color: var(--sz-tekst-2) !important; }
.sz-okruszki .separator { margin: 0 6px; }
.sz-hero .et_pb_row { display: flex; align-items: center; flex-wrap: wrap; }
.sz-hero .et_pb_row::after { display: none; }
.sz-hero .et_pb_column { float: none; }
.sz-eyebrow { font-size: 15px !important; font-weight: 600; color: var(--sz-czerwien) !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sz-8) !important; }


/* === 10. Pasek zaufania pod pierwszym ekranem i w treści === */
.sz-trust { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sz-16); }
.sz-trust li { list-style: none; margin: 0 !important; padding: 0 0 0 var(--sz-16); border-left: 3px solid var(--sz-czerwien); }
.sz-trust strong { display: block; font-family: var(--sz-font-naglowki); font-size: 22px; font-weight: 600; line-height: 1.2; }
.sz-trust span { display: block; font-size: 15px; color: var(--sz-tekst-2); line-height: 1.4; }


/* === 11. Kafle usług i typów obiektów (moduł Blurb z presetem kafla), cała karta jest klikalna === */
body #page-container .sz-tile.et_pb_blurb {
	position: relative;
	background: var(--sz-bialy);
	border: 1px solid var(--sz-linia);
	border-radius: var(--sz-radius);
	padding: var(--sz-24);
	height: 100%;
	transition: box-shadow .2s ease, border-color .2s ease;
}
body #page-container .sz-tile.et_pb_blurb:hover,
body #page-container .sz-tile.et_pb_blurb:focus-within { box-shadow: var(--sz-cien); border-color: #C3C9D1; }
.sz-tile .et_pb_main_blurb_image { margin-bottom: var(--sz-16) !important; text-align: left; }
.sz-tile .et_pb_main_blurb_image img,
.sz-tile .et_pb_image_wrap img { width: 48px !important; height: 48px !important; }
.sz-tile .et_pb_main_blurb_image .et_pb_image_wrap { display: inline-block; }
.sz-tile .et_pb_blurb_content { max-width: none; text-align: left; }
body #page-container .sz-tile .et_pb_module_header { font-size: 22px; margin-bottom: var(--sz-8); }
body #page-container .sz-tile .et_pb_module_header a { color: var(--sz-grafit); text-decoration: none; }
body #page-container .sz-tile .et_pb_module_header a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sz-radius); }
body #page-container .sz-tile .et_pb_module_header a:focus-visible { outline: none; }
body #page-container .sz-tile .et_pb_module_header a:focus-visible::after { outline: 3px solid var(--sz-czerwien); outline-offset: 2px; }
body #page-container .sz-tile .et_pb_blurb_description p { font-size: 16px !important; color: var(--sz-tekst-2) !important; }
.sz-tile .et_pb_blurb_description p:last-child::after { content: " →"; color: var(--sz-czerwien); font-weight: 600; }
/* Kafel typu obiektu ze zdjęciem zastępczym zamiast ikony */
.sz-tile--foto .et_pb_main_blurb_image { margin: calc(var(--sz-24) * -1) calc(var(--sz-24) * -1) var(--sz-16) !important; }
.sz-tile--foto .et_pb_main_blurb_image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border-radius: var(--sz-radius) var(--sz-radius) 0 0; }
.sz-tile--foto .et_pb_main_blurb_image,
.sz-tile--foto .et_pb_main_blurb_image .et_pb_image_wrap { display: block !important; width: auto !important; max-width: none !important; }


/* === 12. Pakiety roczne Start, Obiekt, Pełna opieka === */
body #page-container .sz-pakiet {
	background: var(--sz-bialy);
	border: 1px solid var(--sz-linia);
	border-radius: var(--sz-radius);
	padding: var(--sz-32) var(--sz-24);
	height: 100%;
}
body #page-container .sz-pakiet--polecany { border: 2px solid var(--sz-czerwien); }
.sz-pakiet__badge { display: inline-block; background: var(--sz-czerwien); color: var(--sz-bialy); font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; margin-bottom: var(--sz-8); }
body #page-container .sz-pakiet h3 { margin-bottom: var(--sz-8); }
.sz-pakiet__cena { font-family: var(--sz-font-naglowki); font-size: 20px; font-weight: 600; margin-bottom: var(--sz-16) !important; }
body #page-container .sz-pakiet ul { list-style: none; padding: 0 !important; margin: 0 0 var(--sz-16); }
body #page-container .sz-pakiet li { position: relative; padding-left: 28px; font-size: 16px !important; margin-bottom: var(--sz-8); }
body #page-container .sz-pakiet li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--sz-czerwien); border-bottom: 2px solid var(--sz-czerwien); transform: rotate(-45deg); }


/* === 13. Jak pracujemy: cztery kroki z numerami === */
body #page-container .sz-krok { border-top: 3px solid var(--sz-grafit); padding-top: var(--sz-16); }
.sz-krok__nr { display: block; font-family: var(--sz-font-naglowki); font-size: 40px; font-weight: 600; color: var(--sz-czerwien); line-height: 1; margin-bottom: var(--sz-8); }
body #page-container .sz-krok h3 { font-size: 22px; margin-bottom: var(--sz-8); }
body #page-container .sz-krok p { font-size: 16px !important; color: var(--sz-tekst-2) !important; }


/* === 14. Opinie z Google (moduł Testimonial z presetem) === */
body #page-container .sz-opinia.et_pb_testimonial {
	background: var(--sz-bialy) !important;
	border: 1px solid var(--sz-linia);
	border-radius: var(--sz-radius);
	padding: var(--sz-24) !important;
}
.sz-opinia .et_pb_testimonial_description { margin-left: 0 !important; }
body #page-container .sz-opinia .et_pb_testimonial_description_inner p { font-size: 17px !important; }
body #page-container .sz-opinia .et_pb_testimonial_author { font-weight: 600; margin-top: var(--sz-16); display: block; }
.sz-opinia.et_pb_testimonial::before { display: none; }
.sz-opinia-pusta { border: 2px dashed var(--sz-linia); border-radius: var(--sz-radius); padding: var(--sz-24); color: var(--sz-tekst-2); }


/* === 15. Obszar działania: schemat i lista miejscowości === */
.sz-schemat svg { width: 100%; height: auto; display: block; background: var(--sz-bialy); border: 1px solid var(--sz-linia); border-radius: var(--sz-radius); }
.sz-miejscowosci { list-style: none; padding: 0 !important; margin: 0 0 var(--sz-24); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sz-8) var(--sz-24); }
.sz-miejscowosci li { list-style: none; margin: 0 !important; padding: 10px 0; border-bottom: 1px solid var(--sz-linia); font-weight: 600; }
.sz-miejscowosci li span { display: block; font-weight: 400; font-size: 15px; color: var(--sz-tekst-2); }


/* === 16. Pytania i odpowiedzi (moduł Toggle z presetem) === */
body #page-container .sz-faq.et_pb_toggle {
	background: var(--sz-bialy) !important;
	border: 1px solid var(--sz-linia) !important;
	border-radius: var(--sz-radius);
	padding: 0 !important;
	margin-bottom: var(--sz-8) !important;
}
body #page-container .sz-faq .et_pb_toggle_title {
	font-family: var(--sz-font-tekst) !important;
	font-size: 18px !important;
	font-weight: 600;
	color: var(--sz-grafit) !important;
	padding: var(--sz-16) 56px var(--sz-16) var(--sz-24) !important;
	min-height: 56px;
	line-height: 1.4;
	cursor: pointer;
}
body #page-container .sz-faq .et_pb_toggle_title::before {
	content: "+" !important;
	font-family: var(--sz-font-tekst) !important;
	font-size: 26px !important;
	color: var(--sz-czerwien) !important;
	right: 20px !important;
	top: 50% !important;
	margin-top: -14px !important;
	line-height: 1 !important;
}
body #page-container .sz-faq.et_pb_toggle_open .et_pb_toggle_title::before { content: "\2212" !important; }
body #page-container .sz-faq .et_pb_toggle_content { padding: 0 var(--sz-24) var(--sz-24) !important; }
body #page-container .sz-faq .et_pb_toggle_content p { font-size: 17px !important; }


/* === 17. Formularze Divi Contact Form: widoczne etykiety, pola 48 px, klauzula pod formularzem === */
body #page-container .sz-form .et_pb_contact_form_label {
	display: block !important;
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-grafit);
	margin-bottom: 6px;
}
.sz-sec--dark .sz-form .et_pb_contact_form_label { color: var(--sz-bialy); }
body #page-container .sz-form .input,
body #page-container .sz-form select,
body #page-container .sz-form textarea {
	background: var(--sz-bialy) !important;
	border: 1px solid #9AA5B1 !important;
	border-radius: var(--sz-radius) !important;
	color: var(--sz-grafit) !important;
	font-family: var(--sz-font-tekst) !important;
	font-size: 17px !important;
	padding: 12px 14px !important;
	min-height: 48px;
}
body #page-container .sz-form textarea { min-height: 120px; }
body #page-container .sz-form .input:focus,
body #page-container .sz-form select:focus,
body #page-container .sz-form textarea:focus { border-color: var(--sz-grafit) !important; outline: 3px solid rgba(200, 16, 46, .25); }
body #page-container .sz-form .input::placeholder { color: #7B8794; }
body #page-container .sz-form p.et_pb_contact_field { margin-bottom: var(--sz-16) !important; }
/* pole zgody: tytuł opcji wystarczy, ukrywamy dublującą się etykietę */
body #page-container .sz-form .et_pb_contact_field[data-type="checkbox"] > .et_pb_contact_form_label { display: none !important; }
body #page-container .sz-form .et_contact_bottom_container { float: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sz-16); margin-top: var(--sz-8); }
body #page-container .sz-form .et_pb_contact_right p { color: var(--sz-grafit); }
body #page-container .sz-form .et_pb_contact_captcha { min-height: 48px; width: 64px !important; }
body #page-container .sz-form .et_pb_contact_field_options_title { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
body #page-container .sz-form .et_pb_contact_field_checkbox label,
body #page-container .sz-form .et_pb_contact_field_radio label { font-size: 16px; color: var(--sz-grafit); }
.sz-sec--dark .sz-form .et_pb_contact_field_checkbox label,
.sz-sec--dark .sz-form .et_pb_contact_right p { color: var(--sz-bialy) !important; }
body #page-container .sz-form .et_pb_contact_field_checkbox i,
body #page-container .sz-form .et_pb_contact_field_radio i { background: var(--sz-bialy) !important; border: 1px solid #9AA5B1 !important; width: 20px; height: 20px; }
.sz-klauzula,
body #page-container .sz-klauzula p { font-size: 14px !important; line-height: 1.5 !important; color: var(--sz-tekst-2) !important; margin-top: var(--sz-16) !important; }
.sz-sec--dark .sz-klauzula,
body #page-container .sz-sec--dark .sz-klauzula p { color: #CBD2D9 !important; }
body #page-container .sz-form-box { background: var(--sz-bialy); border: 1px solid var(--sz-linia); border-radius: var(--sz-radius); padding: var(--sz-32); }


/* === 18. Prostokąty zastępcze zdjęć i mapy w docelowych proporcjach === */
.sz-ph img { display: block; width: 100%; height: auto; border-radius: var(--sz-radius); background: var(--sz-zastepczy); }
.sz-ph .et_pb_image_wrap { display: block; }
.sz-mapa { position: relative; border-radius: var(--sz-radius); overflow: hidden; }
.sz-mapa img { display: block; width: 100%; height: auto; }
.sz-mapa .sz-btn { position: absolute; left: 50%; bottom: var(--sz-24); transform: translateX(-50%); }


/* === 19. Listy realizacji i artykułów (moduł Blog z presetem) === */
/* Moduł Blog w trybie listy, układany siatką CSS zamiast skryptu salvattore */
body #page-container .sz-lista .et_pb_ajax_pagination_container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sz-24); }
body #page-container .sz-lista .et_pb_ajax_pagination_container > div:not(.et_pb_post) { grid-column: 1 / -1; }
body #page-container .sz-lista .et_pb_post { margin-bottom: 0 !important; }
@media (max-width: 980px) { body #page-container .sz-lista .et_pb_ajax_pagination_container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { body #page-container .sz-lista .et_pb_ajax_pagination_container { grid-template-columns: 1fr; } }
body #page-container .sz-lista.et_pb_blog_grid_wrapper .et_pb_blog_grid { background: transparent; }
body #page-container .sz-lista .et_pb_post {
	background: var(--sz-bialy);
	border: 1px solid var(--sz-linia) !important;
	border-radius: var(--sz-radius);
	padding: 0 0 var(--sz-24) !important;
	overflow: hidden;
}
body #page-container .sz-lista .et_pb_post .et_pb_image_container { margin: 0 0 var(--sz-16) !important; }
body #page-container .sz-lista .et_pb_post .entry-featured-image-url { margin-bottom: 0; }
body #page-container .sz-lista .et_pb_post .entry-title,
body #page-container .sz-lista .et_pb_post .post-meta,
body #page-container .sz-lista .et_pb_post .post-content { padding: 0 var(--sz-24); }
body #page-container .sz-lista .et_pb_post .entry-title { font-size: 22px !important; line-height: 1.3; }
body #page-container .sz-lista .et_pb_post .entry-title a { color: var(--sz-grafit); text-decoration: none; }
body #page-container .sz-lista .et_pb_post .post-content p { font-size: 16px !important; color: var(--sz-tekst-2); }
body #page-container .sz-lista .more-link { font-weight: 600; color: var(--sz-czerwien); }
.sz-pusto { border: 2px dashed var(--sz-linia); border-radius: var(--sz-radius); padding: var(--sz-24); color: var(--sz-tekst-2); font-size: 16px; }


/* === 20. Wpisy realizacji i poradnika (szablony Theme Builder) === */
.sz-hero--sub .et_pb_column_4_4 .sz-ph { max-width: 760px; } /* zdjęcie artykułu w szerokości tekstu */
.sz-hero--sub .et_pb_column_4_4 .sz-wpis-tytul, .sz-hero--sub .et_pb_column_4_4 .sz-okruszki { max-width: 760px; }
.sz-wpis .et_pb_post_content { max-width: 760px; }
body #page-container .sz-wpis .et_pb_post_content h2 { font-size: 28px; margin-top: var(--sz-32); }
body #page-container .sz-wpis .et_pb_post_content h3 { font-size: 22px; margin-top: var(--sz-24); }
body #page-container .sz-wpis-tytul h1 { max-width: 26ch; }
.sz-wpis-meta { font-size: 15px; color: var(--sz-tekst-2); }
.sz-wpis-zakres { background: var(--sz-tlo-jasne); border-radius: var(--sz-radius); padding: var(--sz-24); }


/* === 21. Stopka globalna w Theme Builder === */
.et-l--footer .sz-stopka.et_pb_section { background: var(--sz-grafit); padding: var(--sz-64) 0 var(--sz-24); }
.et-l--footer .sz-stopka,
.et-l--footer .sz-stopka p,
.et-l--footer .sz-stopka li,
body #page-container .et-l--footer .sz-stopka .et_pb_module p { color: #CBD2D9 !important; font-size: 16px !important; line-height: 1.6; }
body #page-container .et-l--footer .sz-stopka h2,
body #page-container .et-l--footer .sz-stopka h3,
body #page-container .et-l--footer .sz-stopka h4 { color: var(--sz-bialy) !important; font-size: 18px; font-family: var(--sz-font-tekst); font-weight: 600; margin-bottom: var(--sz-16); }
body #page-container .et-l--footer .sz-stopka a { color: var(--sz-bialy) !important; text-decoration: none; }
body #page-container .et-l--footer .sz-stopka a:hover { text-decoration: underline; }
.et-l--footer .sz-stopka ul { list-style: none; padding: 0 !important; margin: 0; }
.et-l--footer .sz-stopka li { margin: 0 0 6px !important; padding: 0; list-style: none; }
.sz-stopka__logo img { width: 160px; height: auto; display: block; margin-bottom: var(--sz-16); }
.et-l--footer .sz-stopka .sz-stopka__dol { border-top: 1px solid #3E4C59; padding-top: var(--sz-24) !important; margin-top: var(--sz-48) !important; }
body #page-container .et-l--footer .sz-stopka .sz-stopka__dol p { font-size: 14px !important; }


/* === 22. Stały pasek na telefonie z przyciskami Zadzwoń i Wycena (sekcja sticky w stopce) === */
.et-l--footer .sz-mobilebar.et_pb_section { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 !important; background: transparent; z-index: 990; } /* stały pasek bez skryptu sticky Divi */
.et-l--footer .sz-mobilebar .et_pb_row { width: 100%; max-width: none; }
.sz-mobilebar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; background: var(--sz-bialy); border-top: 1px solid var(--sz-linia); box-shadow: 0 -4px 16px rgba(31, 41, 51, .12); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.sz-mobilebar__inner .sz-btn { width: 100%; min-height: 52px; padding: 10px 12px !important; }
@media (min-width: 768px) {
	.et-l--footer .sz-mobilebar { display: none !important; }
}


/* === 23. Strona 404, wyszukiwarka i drobne elementy === */
body #page-container .sz-404 .et_pb_search { max-width: 560px; border-radius: var(--sz-radius); border-color: #9AA5B1; }
body #page-container .sz-404 .et_pb_search input.et_pb_s { min-height: 48px; font-size: 17px; padding: 12px 14px; }
.sz-linki { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sz-8) var(--sz-24); }
.sz-linki li { list-style: none; margin: 0 !important; }
.sz-uwaga { background: #FFF8E1; border-left: 4px solid #B7791F; padding: var(--sz-16) var(--sz-24); border-radius: 0 var(--sz-radius) var(--sz-radius) 0; font-size: 16px; }
.sz-check { list-style: none; padding: 0 !important; }
.sz-check li { position: relative; padding-left: 30px; list-style: none; }
.sz-check li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 14px; height: 8px; border-left: 2px solid var(--sz-czerwien); border-bottom: 2px solid var(--sz-czerwien); transform: rotate(-45deg); }
.sz-kontakt-lista p { margin-bottom: var(--sz-8) !important; }
.sz-kontakt-lista strong { display: inline-block; min-width: 9em; }
@media (max-width: 767px) { .sz-kontakt-lista strong { display: block; min-width: 0; margin-top: var(--sz-8); } }


/* === Telefon i tablet: mniejsze nagłówki, jedna kolumna kart, mniejsze odstępy === */
@media (max-width: 980px) {
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_3,
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_4 { width: calc((100% - 24px) / 2); }
	.sz-trust { grid-template-columns: repeat(2, 1fr); gap: var(--sz-24) var(--sz-16); }
	.sz-hero .et_pb_column { width: 100% !important; margin-right: 0 !important; }
	.sz-hero .et_pb_column + .et_pb_column { margin-top: var(--sz-32); }
	.sz-linki { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	body #page-container h1, body #page-container .et_pb_module h1 { font-size: 32px; }
	body #page-container h2, body #page-container .et_pb_module h2 { font-size: 26px; }
	body #page-container h3, body #page-container .et_pb_module h3 { font-size: 22px; }
	.sz-sec.et_pb_section { padding: var(--sz-48) 0; }
	.sz-sec.sz-sec--hero.et_pb_section { padding: var(--sz-32) 0 var(--sz-48); }
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_3,
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_4,
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column_1_2 { width: 100%; }
	.sz-sec .et_pb_column { margin-bottom: var(--sz-24) !important; }
	.sz-sec .et_pb_column:last-child { margin-bottom: 0 !important; }
	.sz-sec .et_pb_row.sz-row--cards > .et_pb_column { margin-bottom: 0 !important; }
	.sz-lead p { font-size: 18px !important; }
	.sz-btns .sz-btn { flex: 1 1 100%; }
	.sz-miejscowosci, .sz-linki { grid-template-columns: 1fr; }
	body #page-container .sz-form-box { padding: var(--sz-24) var(--sz-16); }
	.sz-topbar__serwis { display: none; }
	.et-l--footer .sz-stopka.et_pb_section { padding-bottom: 96px; }
	.sz-mapa .sz-btn { position: static; transform: none; margin-top: var(--sz-16); width: 100%; }
}
@media (max-width: 400px) {
	.sz-trust { grid-template-columns: 1fr; }
}


/* === 24. Dostępność: widoczny fokus z klawiatury, link do treści, ograniczenie animacji === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--sz-czerwien); outline-offset: 2px; }
.sz-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--sz-grafit); color: var(--sz-bialy) !important; padding: 12px 16px; }
.sz-skip:focus { left: 16px; top: 8px; }
.screen-reader-text, .sz-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
