/* =========================================================================
   components.css - Kan-Fix / Ovigo
   Style komponentow przeniesione 1:1 z makiet 04_layouty/*.html.
   Kolory i tokeny ukladu pochodza z Design Variables Divi, wypisywanych
   przez kanfix_component_tokens() w functions.php.
   ========================================================================= */

/* --- naglowek --- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #E7E8EA;}
.header-inner{max-width:var(--maxw,1180px);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px;}

/* --- stopka --- */
.site-footer{background:var(--navy-900);color:var(--footer-muted);padding:60px 0 24px;font-size:.92rem;}
.site-footer .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.site-footer p{color:var(--footer-muted);}
.site-footer h4{color:#fff;font-family:var(--font-head);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:10px;}
.site-footer a{color:var(--footer-muted);text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--footer-muted);}

/* --- pasek CTA --- */
.contact-cta{background:var(--primary-800);padding:64px 0;}

@media (max-width:960px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .site-footer .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-bottom{flex-direction:column;}
}
/* --- poprawki po pierwszej weryfikacji na zywo (runda 58) --- */
.contact-cta a{color:#fff;text-decoration:underline;}
.contact-cta a:hover{color:#fff;}

/* =========================================================================
   Naglowek i stopka zbudowane natywnymi modulami Divi (Theme Builder).
   Ponizsze reguly doprowadzaja domyslna strukture Divi do wygladu makiety.
   ========================================================================= */

/* --- naglowek --- */
.et_pb_section.site-header{z-index:100;background:#fff;border-bottom:1px solid #E7E8EA;padding:0;} /* position:sticky zdjete 2026-09-01 (runda 86) - test natywnego sticky Divi 5 */
/* .admin-bar .et_pb_section.site-header{top:32px;} - nieaktualne po zdjeciu position:sticky */
.et_pb_section.site-header .et_pb_row.header-inner{max-width:var(--maxw,1180px);width:100%;padding:10px 24px;display:flex;align-items:center;gap:24px;}
.et_pb_section.site-header .et_pb_row.header-inner .et_pb_column{margin:0;display:flex;align-items:center;}
.et_pb_section.site-header .kf-col-nav{flex:1 1 auto;width:auto;}
.et_pb_section.site-header .kf-col-cta{flex:0 0 auto;width:auto;justify-content:flex-end;}
.et_pb_section.site-header .et_pb_module{margin-bottom:0;}

.kf-nav .et_pb_menu__wrap{justify-content:flex-start;gap:24px;}
.kf-nav .et_pb_menu__logo-wrap{width:150px;margin-right:24px;}
.kf-nav .et_pb_menu__logo img{width:100%;height:auto;display:block;}
.kf-nav .et-menu{gap:2px;}
.kf-nav .et-menu > li > a{padding:10px 12px;color:var(--neutral-900);font-family:var(--font-body);font-weight:500;font-size:.96rem;border-radius:6px;text-decoration:none;}
.kf-nav .et-menu > li > a:hover{background:var(--neutral-100);color:var(--primary-800);opacity:1;}
.kf-nav .et-menu li.current-menu-item > a,.kf-nav .et-menu li.current-menu-ancestor > a{color:var(--primary-800);font-weight:600;}
.kf-nav .et-menu li li a{width:250px;padding:9px 12px;font-size:.92rem;}
.kf-nav .et-menu .sub-menu{border-radius:8px;padding:8px;border:1px solid #E7E8EA;box-shadow:var(--shadow-lg);border-top:none;}
/* pierwszy element podmenu NIE jest wyrozniony na stale (usuniete 2026-09-01, runda 86)
   - wyroznienie tylko dla biezacej strony, regula .current-menu-item / .current-menu-ancestor wyzej.
   Jesli kiedys ma wrocic pozycja 'wiodaca' jak w makiecie - klasa CSS na konkretnej pozycji w Wyglad > Menu. */
.kf-nav .et_pb_menu__icon{display:none;}

.kf-header-cta .et_pb_button,.kf-header-cta a.et_pb_button{background:var(--accent-700);color:#fff;border:2px solid transparent;border-radius:8px;font-family:var(--font-head);font-weight:600;font-size:.98rem;padding:13px 22px;min-height:44px;display:inline-flex;align-items:center;}
.kf-header-cta .et_pb_button:hover,.kf-header-cta a.et_pb_button:hover{background:#8f4712;color:#fff;padding:13px 22px;}
.kf-header-cta .et_pb_button:after,.kf-header-cta a.et_pb_button:after{display:none;}

/* --- stopka --- */
.et_pb_section.site-footer{background:var(--navy-900);color:var(--footer-muted);padding:60px 0 24px;}
.et_pb_section.site-footer .et_pb_row{max-width:var(--maxw,1180px);width:100%;padding:0 24px;}
.et_pb_section.site-footer .et_pb_row.footer-grid-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.et_pb_section.site-footer .et_pb_row.footer-grid-row .et_pb_column{width:auto;margin:0;}
.et_pb_section.site-footer .et_pb_module{margin-bottom:0;}
.et_pb_section.site-footer p,.et_pb_section.site-footer li,.et_pb_section.site-footer span{color:var(--footer-muted);font-size:.92rem;}
.et_pb_section.site-footer h4{color:#fff;font-family:var(--font-head);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;}
.et_pb_section.site-footer h4.footer-h4-spaced{margin-top:22px;}
.et_pb_section.site-footer a{color:var(--footer-muted);text-decoration:none;}
.et_pb_section.site-footer a:hover{color:#fff;text-decoration:underline;}
.et_pb_section.site-footer .footer-lead{max-width:32ch;}

.kf-footer-menu .et_pb_menu__wrap{justify-content:flex-start;}
.kf-footer-menu .et_pb_menu__menu{width:100%;}
.kf-footer-menu .et-menu{flex-direction:column;align-items:flex-start;gap:0;}
.kf-footer-menu .et-menu > li{margin:0 0 10px 0;padding:0;float:none;}
.kf-footer-menu .et-menu > li > a{padding:0;font-size:.92rem;color:var(--footer-muted);font-family:var(--font-body);font-weight:400;}
.kf-footer-menu .et-menu > li > a:hover{color:#fff;text-decoration:underline;opacity:1;}
.kf-footer-menu .et_pb_menu__icon,.kf-footer-menu .et_pb_menu__logo-wrap{display:none;}

.et_pb_section.site-footer .footer-bottom-row{border-top:1px solid rgba(255,255,255,.18);padding-top:20px;}

@media (max-width:980px){
  .et_pb_section.site-header .et_pb_row.header-inner{flex-wrap:wrap;}
  .et_pb_section.site-header .kf-col-cta{display:none;}
  .et_pb_section.site-footer .et_pb_row.footer-grid-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .et_pb_section.site-footer .et_pb_row.footer-grid-row{grid-template-columns:1fr;gap:28px;}
}
/* --- poprawki po weryfikacji Theme Buildera (runda 58) --- */

/* tresc strony w szablonie: sekcja opakowujaca ma byc przezroczysta */
.et_pb_section.kf-body-wrap{padding:0;background:transparent;}
.et_pb_section.kf-body-wrap > .et_pb_row{width:100%;max-width:none;padding:0;margin:0;}
.et_pb_section.kf-body-wrap > .et_pb_row > .et_pb_column{width:100%;margin:0;}
.et_pb_section.kf-body-wrap .et_pb_module{margin-bottom:0;}

/* naglowek: szerokosci kolumn i logo */
.et_pb_section.site-header .et_pb_row.header-inner > .et_pb_column.kf-col-nav{width:auto;flex:1 1 auto;}
.et_pb_section.site-header .et_pb_row.header-inner > .et_pb_column.kf-col-cta{width:auto;flex:0 0 auto;}
.kf-nav .et_pb_menu_inner_container{display:flex;align-items:center;gap:24px;width:100%;}
.kf-nav .et_pb_menu__logo-wrap{width:150px;max-width:150px;flex:0 0 150px;margin:0;}
.kf-nav .et_pb_menu__logo{width:150px;}
.kf-nav .et_pb_menu__logo img,.kf-nav .et_pb_menu__logo a img{width:150px;max-width:150px;height:auto;display:block;}
.kf-nav .et_pb_menu__wrap{flex:1 1 auto;justify-content:flex-start;}

/* stopka: chowamy elementy menu mobilnego Divi, ktore inaczej rysuja biale prostokaty */
.kf-footer-menu .et_mobile_nav_menu,.kf-footer-menu .et_mobile_menu,.kf-footer-menu .et_pb_menu__icon,.kf-footer-menu .et_pb_menu__logo-wrap,.kf-footer-menu .et_pb_menu__search-container{display:none!important;}
.kf-footer-menu .et_pb_menu_inner_container{background:transparent;}
.kf-footer-menu .et_pb_menu__menu{display:block!important;}
.kf-footer-menu .et-menu-nav,.kf-footer-menu .et-menu-nav > ul{width:100%;}
/* .kf-nav .et_mobile_nav_menu{display:none;} - zdjete 2026-09-01 (runda 86): hamburger byl ukryty, przez co na telefonie nie bylo zadnego menu */

/* stopka: naglowki kolumn i plakietki certyfikatow */
.et_pb_section.site-footer h4,.et_pb_section.site-footer .et_pb_text h4{color:#ffffff;font-size:.92rem;}
.et_pb_section.site-footer .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;}
/* --- poprawki: tlo modulu menu i kolor naglowkow w stopce --- */
.et_pb_menu.kf-footer-menu,.et_pb_menu.kf-nav{background-color:transparent;}
.et_pb_menu.kf-footer-menu .et_pb_menu_inner_container{background:transparent;}
.et-db #et-boc .et-l .site-footer h4,.et-db #et-boc .et-l .site-footer h4.footer-h4-spaced,body .site-footer h4{color:#ffffff;}
.et-db #et-boc .et-l .site-footer p,.et-db #et-boc .et-l .site-footer li,body .site-footer p,body .site-footer li{color:var(--footer-muted);}
.et-db #et-boc .et-l .site-footer a,body .site-footer a{color:var(--footer-muted);}
.et-db #et-boc .et-l .site-footer a:hover,body .site-footer a:hover{color:#ffffff;}
.et_pb_section.site-footer .kf-footer-menu .et-menu > li{margin-bottom:10px;}
.et_pb_section.site-footer .kf-footer-menu .et-menu > li > a{line-height:1.4;}
/* --- przycisk CTA w naglowku i zwezenie menu, zeby nie lamalo sie na dwie linie --- */
.et-db #et-boc .et-l .kf-header-cta .et_pb_button,
.et-db #et-boc .et-l .kf-header-cta a.et_pb_button,
.kf-header-cta .et_pb_button{
  background-color:var(--accent-700);
  background-image:none;
  color:#ffffff;
  border:2px solid transparent;
  border-radius:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.95rem;
  padding:12px 20px;
  line-height:1.2;
  white-space:nowrap;
}
.et-db #et-boc .et-l .kf-header-cta .et_pb_button:hover,
.kf-header-cta .et_pb_button:hover{
  background-color:#8f4712;
  color:#ffffff;
  padding:12px 20px;
  border-color:transparent;
}
.et-db #et-boc .et-l .kf-header-cta .et_pb_button:after,
.kf-header-cta .et_pb_button:after{display:none;content:none;}

.kf-nav .et-menu{flex-wrap:nowrap;}
.kf-nav .et-menu > li > a{padding:10px 9px;font-size:.93rem;white-space:nowrap;}
.kf-nav .et-menu li li a{white-space:normal;}
.et_pb_section.site-header .et_pb_row.header-inner{gap:16px;}
@media (max-width:1200px){
  .kf-nav .et-menu > li > a{padding:10px 7px;font-size:.9rem;}
  .et-db #et-boc .et-l .kf-header-cta .et_pb_button,.kf-header-cta .et_pb_button{font-size:.9rem;padding:11px 16px;}
}
/* --- poprawka: modul Menu Divi ma wlasna, biala klase per instancja
   (np. .et_pb_menu_0_tb_footer), ktora wygrywa specyficznoscia.
   Nadpisanie zawezone wylacznie do sekcji stopki tego projektu. --- */
.et_pb_section.site-footer .et_pb_menu{background-color:transparent!important;}
.et_pb_section.site-footer .et_pb_menu .et_pb_menu_inner_container{background:transparent!important;}
.et_pb_section.site-footer .kf-footer-menu .et-menu > li{margin-bottom:8px;}
.et_pb_section.site-footer .kf-footer-menu .et-menu > li > a{padding:0;line-height:1.35;}
/* =========================================================================
   Przycisk CTA w menu glownym - wstawiany przez Divi Pixel
   (Ustawienia > Header & Navigation > Add CTA Button to Main Menu).
   Divi Pixel wstrzykuje go filtrem wp_nav_menu_items jako pozycje <li>,
   wiec dziala takze w module Menu w szablonie Theme Buildera i pojawia
   sie w menu mobilnym.
   Ponizej tylko zwiazanie kolorow z paleta projektu - reszta wygladu
   pochodzi z panelu Divi Pixel.
   ========================================================================= */
.kf-nav .et-menu li.dipi-cta-button-menu-item{margin-left:10px;display:flex;align-items:center;}
.et-db #et-boc .et-l .kf-nav a.dipi-cta-button.kf-cta,
.kf-nav a.dipi-cta-button.kf-cta{
  background-color:var(--accent-700);
  background-image:none;
  color:#ffffff;
  border:2px solid transparent;
  border-radius:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.93rem;
  padding:11px 18px;
  line-height:1.2;
  white-space:nowrap;
}
.et-db #et-boc .et-l .kf-nav a.dipi-cta-button.kf-cta:hover,
.kf-nav a.dipi-cta-button.kf-cta:hover{
  background-color:#8f4712;
  color:#ffffff;
  padding:11px 18px;
  border-color:transparent;
}
.kf-nav a.dipi-cta-button.kf-cta:after{display:none;content:none;}
.kf-nav a.dipi-cta-button.kf-cta span{color:inherit;}
/* --- naglowek: wiecej miejsca w poziomie, zeby menu z przyciskiem CTA
   miescilo sie w jednej linii --- */
.kf-nav .et_pb_menu__logo-wrap,.kf-nav .et_pb_menu__logo{width:132px;max-width:132px;flex:0 0 132px;}
.kf-nav .et_pb_menu__logo img,.kf-nav .et_pb_menu__logo a img{width:132px;max-width:132px;}
.et-db #et-boc .et-l .kf-nav ul.et-menu,.kf-nav ul.et-menu{flex-wrap:nowrap!important;align-items:center;}
.et-db #et-boc .et-l .kf-nav ul.et-menu > li > a{padding:10px 7px;font-size:.9rem;}
.et_pb_section.site-header .et_pb_row.header-inner{padding:8px 24px;}
@media (max-width:1240px){
  .et-db #et-boc .et-l .kf-nav ul.et-menu > li > a{padding:10px 5px;font-size:.86rem;}
}
/* =========================================================================
   Pasek CTA: uklad dwukolumnowy z biala karta formularza (wg makiety).
   ========================================================================= */
/* biala karta formularza */
.kf-cta-form .kf-form{background:#ffffff;border-radius:var(--radius,10px);padding:28px;box-shadow:var(--shadow-lg);}
.kf-cta-form .kf-form .et_pb_contact_main_title{display:none;}
.kf-cta-form .kf-form p,.kf-cta-form .kf-form label{color:var(--neutral-900);}
.kf-cta-form .kf-form label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px;font-family:var(--font-body);}
.kf-cta-form .kf-form input[type=text],
.kf-cta-form .kf-form input[type=email],
.kf-cta-form .kf-form select,
.kf-cta-form .kf-form textarea{
  width:100%;
  background:#ffffff;
  border:1px solid #D6D8DB;
  border-radius:8px;
  padding:11px 13px;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--neutral-900);
}
.kf-cta-form .kf-form input:focus,.kf-cta-form .kf-form select:focus,.kf-cta-form .kf-form textarea:focus{border-color:var(--primary-600);outline:2px solid rgba(56,113,193,.18);outline-offset:1px;}
.kf-cta-form .kf-form .et_pb_contact_field{padding:0 0 14px 0;}
.kf-cta-form .kf-form .et_pb_button,.kf-cta-form .kf-form button[type=submit]{
  background:var(--primary-700);
  color:#ffffff;
  border:2px solid transparent;
  border-radius:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.98rem;
  padding:13px 22px;
  width:100%;
}
.kf-cta-form .kf-form .et_pb_button:hover{background:var(--primary-800);color:#fff;}
.kf-cta-form .kf-form .et_pb_button:after{display:none;content:none;}

/* --- kreator krokow: kolory z palety projektu zamiast domyslnych wtyczki --- */

.kf-form .stepper__progress-fill,.kf-form .stepper__progress--has-fill span{background-color:var(--primary-700)!important;}
.kf-form .stepper__label-top,.kf-form .stepper__title{color:var(--neutral-900);font-family:var(--font-head);font-size:.9rem;}
.kf-form .stepper__description{color:var(--neutral-700);font-size:.82rem;}
.kf-form .et_pb_contact_field_options_title{display:none;}
/* --- kreator krokow: wlasciwe klasy to stepper__item i stepper__label-bottom --- */
.kf-form .stepper__step .stepper__item{background-color:#ffffff;border:2px solid #D6D8DB;color:var(--neutral-700);font-family:var(--font-head);font-weight:700;}
.kf-form .stepper__step.active .stepper__item,
.kf-form .stepper__step.completed .stepper__item,
.kf-form .stepper__step.done .stepper__item{background-color:var(--primary-700);border-color:var(--primary-700);color:#ffffff;}
.kf-form .stepper__label-bottom h3.heading{color:var(--primary-800);font-family:var(--font-head);font-size:.92rem;margin:0 0 4px;line-height:1.25;}
.kf-form .stepper__label-bottom p.description{color:var(--neutral-700);font-size:.8rem;margin:0;line-height:1.3;}
.kf-form .stepper__progress span,.kf-form .stepper__progress-fill{background-color:var(--primary-700);}
/* pole page-break nie ma juz tytulu, wiec nie zajmuje miejsca */
.kf-form .et_pb_contact_field:has(> .stepper__step){padding:0;}
/* --- przyciski nawigacji kreatora: Wstecz jako drugoplanowy, Dalej i Wyslij
   jako glowne. Wczesniejsza regula robila wszystkie na pelna szerokosc. --- */
.kf-cta-form .kf-form .stepper_back_btn.et_pb_button{
  width:auto;
  background:transparent;
  color:var(--primary-700);
  border:2px solid var(--primary-700);
}
.kf-cta-form .kf-form .stepper_back_btn.et_pb_button:hover{background:var(--primary-700);color:#fff;}
.kf-cta-form .kf-form .stepper_next_btn.et_pb_button{width:auto;min-width:180px;}
.kf-cta-form .kf-form .et_pb_contact_submit{width:auto;min-width:200px;}
.kf-cta-form .kf-form .et_pb_contact_right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.kf-cta-form .kf-form .et_pb_contact_captcha_question{color:var(--neutral-700);font-size:.9rem;}
.kf-cta-form .kf-form input.et_pb_contact_captcha{width:80px;text-align:center;}
.kf-cta-form .kf-form .et_pb_contact_field_last{margin-top:8px;}
.kf-cta-form .kf-form .et-pb-contact-message{color:var(--neutral-900);font-size:1.02rem;}
/* =========================================================================
   Formularz w pasku CTA - dociagniecie do makiety (runda 60).
   Wzorzec: .form-mock w 04_layouty/kontakt.html.
   ========================================================================= */

/* 1. Tresc w bialej karcie nie moze dziedziczyc bieli z sekcji CTA */
.et-db #et-boc .et-l .contact-cta .kf-cta-form p,
.et-db #et-boc .et-l .contact-cta .kf-cta-form label,
.et-db #et-boc .et-l .contact-cta .kf-cta-form span,
.et-db #et-boc .et-l .contact-cta .kf-cta-form h1,
.et-db #et-boc .et-l .contact-cta .kf-cta-form h2,
.et-db #et-boc .et-l .contact-cta .kf-cta-form h3,
body .contact-cta .kf-cta-form p,
body .contact-cta .kf-cta-form label,
body .contact-cta .kf-cta-form h3{color:var(--neutral-900);}
.et-db #et-boc .et-l .contact-cta .kf-cta-form .et-pb-contact-message,
body .contact-cta .kf-cta-form .et-pb-contact-message{color:var(--neutral-900);font-size:1.02rem;text-align:left;}
.kf-cta-form .kf-form .et-pb-contact-message p{color:var(--neutral-900);}

/* 2. Zwarte odstepy jak w makiecie */
.kf-cta-form .kf-form .et_pb_contact_field{padding:0 0 16px 0;margin:0;}
.kf-cta-form .kf-form label{font-size:.86rem;font-weight:600;margin-bottom:6px;}
.kf-cta-form .kf-form input[type=text],
.kf-cta-form .kf-form input[type=email],
.kf-cta-form .kf-form select,
.kf-cta-form .kf-form textarea{border:1.5px solid #D6D8DB;border-radius:7px;padding:11px 12px;font-size:.95rem;}
.kf-cta-form .kf-form textarea{min-height:96px;}
.kf-cta-form .kf-form input:focus,.kf-cta-form .kf-form select:focus,.kf-cta-form .kf-form textarea:focus{outline:3px solid var(--accent-700);outline-offset:1px;border-color:var(--accent-700);}
/* pola bez zadnej kontrolki (przerwy stron) nie zajmuja miejsca */
.kf-cta-form .kf-form .et_pb_contact_field:not(:has(input,select,textarea)){display:none;}
.kf-cta-form .kf-form .et_pb_contact_form{margin:0;}

/* 3. Wskaznik krokow: trzy cienkie paski zamiast numerowanych kol */
.kf-cta-form .kf-form .et_pb_form_top_stepper_container{margin-bottom:20px;}
.kf-cta-form .kf-form .stepper__progress{display:flex;gap:8px;position:relative;padding-bottom:26px;margin:0;}
.kf-cta-form .kf-form .stepper__progress::before,
.kf-cta-form .kf-form .stepper__progress::after{display:none;}
.kf-cta-form .kf-form .stepper__step{flex:1 1 0;height:5px;min-height:5px;border-radius:3px;background:#E7E8EA;position:static;padding:0;margin:0;display:block;}
.kf-cta-form .kf-form .stepper__step.active,
.kf-cta-form .kf-form .stepper__step.completed,
.kf-cta-form .kf-form .stepper__step.done{background:var(--primary-700);}
.kf-cta-form .kf-form .stepper__item,
.kf-cta-form .kf-form .stepper__label-top,
.kf-cta-form .kf-form .stepper__line,
.kf-cta-form .kf-form .stepper__progress-fill{display:none;}
.kf-cta-form .kf-form .stepper__label-bottom{display:none;}
.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom{display:block;position:absolute;left:0;right:0;top:15px;text-align:left;}
.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom h3.heading{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--neutral-700);
  margin:0;
  line-height:1.3;
}
.kf-cta-form .kf-form .stepper__label-bottom p.description{display:none;}
/* etykieta kroku do lewej, jak w makiecie */
.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom,
.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom h3.heading{text-align:left;}

.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom{text-align:left!important;}
.kf-cta-form .kf-form .stepper__step.active .stepper__label-bottom h3.heading{text-align:left!important;}

/* --- PRZYCZYNA rozjezdzajacych sie odstepow w formularzu ---
   Divi 5 renderuje pojedyncze pole jako kontener flex w kolumnie z gap:30px.
   Zaden margines na etykiecie tego nie zmieni, bo odstep robi wlasnie gap.
   Makieta ma 6px miedzy etykieta a polem i 16px miedzy polami. */
.kf-cta-form .kf-form .et_pb_contact_field{
  display:flex;
  flex-direction:column;
  gap:6px;
  row-gap:6px;
  padding:0 0 16px 0;
  margin:0;
}
.kf-cta-form .kf-form label.et_pb_contact_form_label,
.kf-cta-form .kf-form .et_pb_contact_field > label{
  font-size:.86rem;
  font-weight:600;
  line-height:1.35;
  margin:0;
  padding:0;
}
/* kontener wszystkich pol nie moze dokladac wlasnego odstepu */
.kf-cta-form .kf-form .et_pb_contact_fields{gap:0;row-gap:0;}
/* --- przyciski nawigacji na pelna szerokosc, jak w makiecie (.btn-block) --- */
.kf-cta-form .kf-form .stepper_next_btn.et_pb_button,
.kf-cta-form .kf-form .et_pb_contact_submit{width:100%;min-width:0;margin-top:4px;}

.kf-cta-form .kf-form .et_pb_contact_right{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.kf-cta-form .kf-form .et_pb_contact_captcha_question{align-self:flex-start;}
/* --- PRZYCISKI NA ROWNEJ WYSOKOSCI ---
   Kontener przyciskow kreatora to flex w wierszu (align-items:center).
   Wczesniejsze marginesy (Wstecz margin-bottom, Dalej margin-top) byly
   pisane pod uklad pionowy, ktory nigdy sie nie wlaczyl, i przesuwaly
   przyciski wzgledem siebie o 6px. Zerujemy je. */
.kf-cta-form .kf-form .et_pb_form_bottom_stepper_container{align-items:stretch;gap:12px;}
.kf-cta-form .kf-form .stepper_back_btn.et_pb_button,
.kf-cta-form .kf-form .stepper_next_btn.et_pb_button,
.kf-cta-form .kf-form .et_pb_contact_submit{
  margin:0;
  padding:13px 22px;
  line-height:1.2;
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* flex:0 0 auto, nie 1 1 0 - inaczej w kroku 3 przycisk Wstecz rozpycha sie
   na caly wiersz i spycha Wyslij zgloszenie do nastepnej linii */
.kf-cta-form .kf-form .stepper_back_btn.et_pb_button{flex:0 0 auto;width:auto;}
.kf-cta-form .kf-form .stepper_next_btn.et_pb_button{flex:1 1 0;width:auto;}
.kf-cta-form .kf-form .et_pb_contact_submit{width:100%;}

/* --- ODSTEP NAD ETYKIETA O POLOWE MNIEJSZY (16px -> 8px) --- */
.kf-cta-form .kf-form .et_pb_contact_field{padding:0 0 8px 0;}
/* --- WLASCIWY winowajca odstepow miedzy polami ---
   To nie marginesy ani padding pola, tylko sam formularz: kontener
   .et_pb_contact_form jest flexem z gap:15px. Do tego dochodzil padding
   pola, wiec realny odstep wynosil 15 + 8 px. Zerujemy gap i zostawiamy
   jedno zrodlo odstepu: padding-bottom pola (8px). */
.kf-cta-form .kf-form .et_pb_contact_form,
.kf-cta-form .kf-form .et_pb_contact_form.et_flex_module{gap:0;row-gap:0;}
.kf-cta-form .kf-form .et_pb_contact_field{padding:0 0 8px 0;margin:0;}

/* =========================================================================
   Pole zgody RODO: Divi oznacza blad klasa .et_contact_error na UKRYTYM
   inpucie, wiec uzytkownik nie widzi ani czerwieni, ani komunikatu -
   formularz po prostu sie nie wysyla. Przenosimy sygnal na widoczna czesc.
   ========================================================================= */
.kf-form .et_pb_contact_field:has(input.et_contact_error) .et_pb_contact_field_options_list,
.kf-bramka-materialy .et_pb_contact_field:has(input.et_contact_error) .et_pb_contact_field_options_list{
  outline:2px solid var(--error,#C1392B);
  outline-offset:4px;
  border-radius:4px;
}
.kf-form .et_pb_contact_field:has(input.et_contact_error)::after,
.kf-bramka-materialy .et_pb_contact_field:has(input.et_contact_error)::after{
  content:"Zaznaczenie zgody jest wymagane, aby wysłać zgłoszenie.";
  display:block;
  margin-top:8px;
  font-size:.8rem;
  font-weight:600;
  color:var(--error,#C1392B);
}
/* znacznik obecnosci regul: kf-blad-zgody */


/* =========================================================================
   Krok 3: kontener kreatora i kontener wysylki to dwa osobne elementy flex
   w tym samym formularzu. Bez flex-basis:0 kontener kreatora bierze cala
   szerokosc i spycha przycisk wysylki do nastepnej linii.
   znacznik: kf-rzad-przyciskow
   ========================================================================= */
.kf-form .et_pb_form_bottom_stepper_container{flex:1 1 0;align-self:center;}
.kf-form .et_contact_bottom_container{flex:0 0 auto;margin-left:12px;align-self:center;}
@media (max-width:767px){
  .kf-form .et_pb_form_bottom_stepper_container,
  .kf-form .et_contact_bottom_container{flex:1 0 100%;margin-left:0;}
}


/* wyrownanie obu przyciskow w kroku 3 do jednej linii bazowej */
.kf-form .et_pb_form_bottom_stepper_container,
.kf-form .et_contact_bottom_container{
  align-items:center;
  margin-top:0;
  margin-bottom:0;
}


/* --- miejsce na wskaznik rozwijanego menu (runda 86) ---
   Divi rysuje strzalke jako ::after w pozycji absolutnej, a reguly wyzej ustawiaja
   padding pozycji na 10px 7px (i 5px ponizej 1240px), wiec strzalka wchodzila na tekst.
   Sama strzalka (pozycja, rozmiar, kolor, obrot przy hover) jest ustawiona w module Menu
   w szablonie naglowka 92 (css.freeForm) - tutaj tylko rezerwacja miejsca, z ta sama
   specyficznoscia co reguly paddingu, inaczej nie wygraja. */
.et-db #et-boc .et-l .kf-nav ul.et-menu > li.menu-item-has-children > a,
.kf-nav .et-menu > li.menu-item-has-children > a{padding-right:24px;}
@media (max-width:1240px){
  .et-db #et-boc .et-l .kf-nav ul.et-menu > li.menu-item-has-children > a{padding-right:20px;}
}


/* --- przyklejony naglowek (runda 86) ---
   position:sticky na samej sekcji nie dziala: jej rodzice (.et_builder_inner_content
   i header.et-l--header) maja wysokosc naglowka, wiec nie ma w czym sie przykleic.
   Przyklejamy caly wrapper szablonu naglowka - jego rodzicem jest #et-boc o wysokosci strony.
   Natywny sticky modulu Divi 5 ustawia position:sticky na sekcji i z tego samego powodu nie dziala. */
.et-l--header{position:sticky;top:0;z-index:100;}
.admin-bar .et-l--header{top:32px;}
@media (max-width:782px){.admin-bar .et-l--header{top:46px;}}


/* /* ========================================================================
   Menu mobilne (runda 86) - hamburger Divi odsloniety; wyglad panelu (pelny ekran,
   animowany hamburger, skladane podmenu, typografia i kolory) pochodzi z Divi Pixel:
   Divi > Divi Pixel > Mobile oraz Kreator wygladu > Divi Pixel > Mobile Menu.
   Ponizej zostaje tylko uklad paska i to, czego Divi Pixel nie obsluguje.
   ======================================================================== */
@media (max-width:980px){
  .kf-nav .et_pb_menu_inner_container{justify-content:space-between;gap:12px;}
  .kf-nav .et_pb_menu__wrap{flex:0 0 auto;justify-content:flex-end;}
  .kf-nav .et_mobile_nav_menu{display:flex;align-items:center;margin:0;}
  /* nakladka pelnoekranowa Divi Pixel jest dzieckiem naglowka, wiec przykrywa logo -
     podnosimy logo, zeby pozostalo widoczne i klikalne przy otwartym menu */
  .kf-nav .et_pb_menu__logo-wrap{position:relative;z-index:100;}

  /* Divi wygasza pozycje biezacej sekcji (opacity .7) - to czyta sie jak wylaczona; wyrozniamy ja zamiast wygaszac */
  .kf-nav .et_mobile_menu li.current-menu-item > a,
  .kf-nav .et_mobile_menu li.current-menu-ancestor > a{opacity:1 !important;color:var(--primary-800) !important;font-weight:700 !important;}
  /* Divi Pixel ustawia grubosc pozycji z wlasna specyficznoscia - dokladamy prefiks klasy body i wrappera */
  .dipi-mobile-menu-fullscreen .et-l--header .kf-nav .et_mobile_menu li.current-menu-item > a,
  .dipi-mobile-menu-fullscreen .et-l--header .kf-nav .et_mobile_menu li.current-menu-ancestor > a{font-weight:700 !important;}

  /* przycisk CTA nie jest potrzebny w menu mobilnym - na dole ekranu jest staly pasek telefon + wycena */
  .kf-nav .et_mobile_menu li.dipi-cta-button-menu-item{display:none;}
  /* Divi Pixel rysuje obramowanie pozycji ze wszystkich stron - zostawiamy tylko dolne */
  .kf-nav .et_mobile_menu li a{border-width:0 0 1px 0 !important;}
  .kf-nav .et_mobile_menu > li:last-child > a{border-bottom:none !important;}

}
/* hamburger do prawej krawedzi paska (runda 86) */
@media (max-width:980px){
  .et_pb_section.site-header .kf-col-nav{width:100%;flex:1 1 100%;}
  .kf-nav{width:100%;}
  .kf-nav .et_pb_menu_inner_container{width:100%;}
  .kf-nav .et_pb_menu__logo-wrap{margin-right:auto;}
}


/* Tabele porownawcze: kolory i tla przeniesione do atrybutow modulow (runda 117).
   Bylo tu 15 regul stylujacych modul dipi/table-maker na stronie 36. Marcin ustalil,
   ze modul Pixel Table Maker Child ma wlasne ustawienie tla komorki - moja wczesniejsza
   diagnoza, ze sie nie da, byla bledna. Tlo siedzi teraz w atrybucie modulu jako
   zmienna koloru globalnego z kryciem 6%, a nie jako zapisana na sztywno wartosc rgba.
   Reszta regul okazala sie zbedna - te same kolory i grubosci daja domyslne ustawienia
   modulu, co potwierdzil pomiar na stronie glownej, ktorej ten blok nigdy nie obejmowal. */

/* --- kotwice pod przyklejonym naglowkiem (runda 89) ---
   Naglowek jest przyklejony (64 px + pasek admina), wiec cel kotwicy chowalby sie pod nim. */
#wycena,#kontakt,#formularz,[id]:target{scroll-margin-top:88px;}
/* UWAGA: bez html{scroll-behavior:smooth} - w tym srodowisku plynne przewijanie bywa
   pomijane przez przegladarke, a wtedy skok do kotwicy w ogole nie dziala (pomiar: scrollTo
   z behavior 'instant' przewija, z 'smooth' nie rusza strony). Plynnosc obsluguje skrypt
   kanfix-analytics.php z awaryjnym przewinieciem natychmiastowym. */

.admin-bar #wycena,.admin-bar #kontakt,.admin-bar #formularz{scroll-margin-top:120px;}

/* --- Dostepnosc: widoczny fokus klawiatury (runda 93) ---
   Divi wypisuje w arkuszu inline globalna regule :focus{outline:0}, przez co fokus
   klawiatury byl niewidoczny na calym serwisie. Selektor html :focus-visible ma wyzsza
   specyficznosc (0,1,1 vs 0,1,0), wiec przebija ja bez !important. :focus-visible
   pokazuje obrys tylko przy nawigacji klawiatura, nie po kliknieciu myszka. */
html :focus-visible{outline:3px solid var(--accent-700);outline-offset:2px;border-radius:2px;}
html .kf-nav :focus-visible,html .kf-footer-menu :focus-visible{outline-color:var(--primary-700);}
html .kf-pasek-mobilny :focus-visible,html .site-footer :focus-visible{outline-color:#fff;}

/* Podmenu otwierane klawiatura - Divi otwiera je tylko na :hover.
   Podmenu jest display:block z opacity:0 i visibility:hidden, wiec wystarcza te dwie wlasciwosci. */
.kf-nav ul.et-menu > li.menu-item-has-children:focus-within > ul.sub-menu{opacity:1;visibility:visible;}

/* Blokada przewijania tla przy otwartym menu mobilnym.
   Klase kf-menu-otwarte ustawia skrypt kanfix-dostepnosc.php, sledzac klase
   .mobile_nav.opened, ktora przelacza Divi. */
body.kf-menu-otwarte{overflow:hidden;}
/* samo overflow na body nie wystarcza - kontenerem przewijania jest element html */
html:has(body.kf-menu-otwarte){overflow:hidden;}

/* --- Tabela ciasteczek CookieYes w polityce prywatnosci (runda 104) ---
   Tabele wypelnia skrypt CookieYes juz w przegladarce. Dopoki lista ciasteczek
   w panelu jest pusta, div zostaje pusty - i wtedy chowamy caly blok razem ze
   zdaniem wprowadzajacym, zeby na stronie prawnej nie wisialo puste miejsce.
   Gdy CookieYes wypelni tabele, warunek :empty przestaje pasowac i blok pojawia
   sie sam, bez naszej ingerencji. */
.kf-tabela-cookies:has(.cky-audit-table-element:empty){display:none;}
.kf-tabela-cookies .cky-audit-table-element{margin-top:12px;overflow-x:auto;}

/* --- Ikona zgod CookieYes nad paskiem CTA (runda 102) ---
   Na 390 px ikona (36x36 px, lewy dolny rog) nachodzila na dolny pasek z telefonem
   i wycena. CookieYes ustawia pozycje stylem wlasnym, wiec potrzebne !important. */
@media (max-width:980px){
  .cky-btn-revisit-wrapper.cky-revisit-bottom-left{bottom:76px !important;}
}

/* --- Link "przejdz do tresci" (runda 102) ---
   Pierwszy element w tabulacji. Schowany poza ekranem, pokazuje sie dopiero przy fokusie.
   position:fixed i z-index ponad przyklejonym naglowkiem (ten ma 100), inaczej link
   pokazalby sie pod nim. */
/* UWAGA: styl linku "przejdz do tresci" NIE jest juz tutaj. Zostal przeniesiony
   do kanfix-dostepnosc.php i jest wypisywany razem ze znacznikiem, bo przy
   nieprzeczytanym lub przeterminowanym arkuszu link pokazywal sie na stronie
   (zgloszone z telefonu 2026-09-02). Jedno zrodlo prawdy jest w PHP. */
.kf-skip-link{font-family:var(--font-body);}
#main-content:focus{outline:none;}

/* --- Mapa OpenStreetMap na stronie Kontakt (runda 99) ---
   Ramka OSM nie ustawia ciasteczek sledzacych, wiec laduje sie bez zgody.
   Wymiary trzymamy tutaj, bo modul kodu nie przyjmuje stylow w tresci
   (inline style bylby niewidoczny dla kontrolek Kreatora). */
.kf-mapa{line-height:0;}
.kf-mapa iframe{display:block;width:100%;height:260px;border:0;border-radius:10px;}

/* --- Stopka: odnosniki jako prawdziwe <a> (runda 98) ---
   Pozycje kolumn byly "linkami modulu" Divi, czyli klikalnymi divami. Teraz sa
   zwyklymi odnosnikami w tresci, wiec musza dziedziczyc kolor i stan hover po module,
   zamiast brac domyslny kolor linku Divi. */
.et-l--footer .et_pb_text a{color:inherit;text-decoration:none;}
.et-l--footer .et_pb_text a:hover{color:inherit;text-decoration:underline;}

/* Hamburger jest w Divi zwyklym <span> - skrypt dodaje mu role przycisku,
   tu tylko powiekszamy pole klikniecia do minimum 44x44 px (WCAG 2.5.8). */
.kf-nav .mobile_nav .mobile_menu_bar{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;}



/* === Poprawki mobilne wykryte 2026-09-02 (runda 116) ===
   Trzy usterki widoczne przy szerokosci telefonu, wykryte pomiarem po zgloszeniu
   Marcina. Wszystkie dotycza modulow Divi Pixel (dipi/*): sa niewidoczne dla
   abilities Novamiry i nie maja odpowiednikow w atrybutach Divi, wiec arkusz motywu
   potomnego jest wlasciwym miejscem - to znaczniki wtyczki obcej, poza zasiegiem Divi.

   UWAGA o !important: pierwsza wersja tych regul BEZ !important trafila do arkusza,
   ale przegrala specyficznoscia z wlasnym CSS-em Divi Pixel (zmierzone: padding-right
   pozostal 4px, wysokosc komorki 56px). To swiadome nadpisanie wtyczki trzeciej strony,
   nie skrot. */

/* 1. FAQ: tekst pytania wchodzil pod ikone rozwijania.
   Ikona .dipi-faq-icon-* jest pozycjonowana absolutnie w obszarze 283-303 px, a tytul
   mial padding-right 4px, wiec tekst siegal do 319 px. Zmierzone nachodzenie: 8-9 px
   na dluzszych pytaniach. Rezerwujemy pas 48 px, zeby tekst lamal sie przed ikona.
   Bez media query celowo: ikona siedzi przy prawej krawedzi na kazdej szerokosci,
   wiec nie ma szerokosci, przy ktorej tekst powinien pod nia wchodzic.
   Dotyczy 23 pytan na 4 stronach. */
.dipi-faq-title{padding-right:48px !important;}

/* 2. Tabela porownawcza: dlugi token nie mial gdzie sie zlamac.
   'mieszkanca/wspolnoty' nie jest lamany na ukosniku - potrzebowal 169 px, dostawal
   111 px, a TD ma overflow-x:hidden, wiec 50 px tekstu bylo obcinane. break-word
   lamie wylacznie wtedy, gdy wyraz sie nie miesci. POTWIERDZONE JAKO DZIALAJACE. */
.dipi-content-heading,.dipi-content-text{overflow-wrap:break-word;}

/* 3. Tabela porownawcza: etykiety obcinane w pionie o 6 px - NIE NAPRAWIONE,
   swiadomie zostawione do ustawien modulu. Zapis, zeby nie probowac tego samego drugi raz.

   Objaw: przy 375 px szesc komorek tabeli na stronie glownej i na /porownanie-metod/
   ma dolna linie etykiety przycieta o 6 px. TD ma overflow:hidden.

   TRZY PROBY, WSZYSTKIE NIEUDANE - nie powtarzac:
   a) grid-auto-rows na TR: auto-rows dotyczy wylacznie wierszy NIEJAWNYCH,
      a w tej tabeli wszystkie sciezki sa jawne. Bez efektu.
   b) grid-template-rows:auto oraz height:auto z !important: bez efektu. Dodatkowa
      pulapka pomiarowa - getComputedStyle na kontenerze siatki zwraca sciezki UZYTE,
      nie zadeklarowane, wiec sam odczyt nie rozstrzyga, czy regula w ogole zadzialala.
   c) zmniejszenie odstepow pionowych .dipi-cell z 16 na 13 px: POGORSZYLO obciecie
      z 6 do 9 px. Wysokosc komorki nie jest bowiem stala - zmniejszenie odstepu
      sciagnelo takze wysokosc pudelka, a tresc zostala ta sama.

   Wniosek: wysokosciami wierszy zarzadza silnik ukladu Divi Pixel i nie da sie tego
   rozsadnie nadpisac z arkusza. Wlasciwe miejsce to ustawienia modulu dipi_table_maker
   w Kreatorze (wysokosc wiersza albo odstepy komorki na breakpoincie telefonu)
   lub skrocenie etykiety, zeby miescila sie w jednej linii. Do decyzji Marcina. */


/* === Naprawa przyklejonego naglowka na stronach z animacja (runda 118) === kf-naprawa-sticky
   Objaw zgloszony przez Marcina: na /technologia/porownanie-metod/ menu traci przyklejenie
   i odjezdza razem z trescia. Zmierzone: po przewinieciu o 1200 px naglowek mial pozycje
   -1200 zamiast 0.

   PRZYCZYNA - konflikt w samym Divi, nie w naszym kodzie. Plik script-library-animation.js
   zawiera bezwarunkowo:
       jQuery('body').css('overflow-x','hidden');
       jQuery('#page-container').css('overflow-y','hidden');
   i wykonuje to za kazdym razem, gdy na stronie jest CHOCBY JEDEN modul z animacja wejscia
   (niepusta tablica et_animation_data albo diviElementAnimationData).

   Dlaczego to psuje sticky: gdy overflow-y przestaje byc visible, przegladarka ZGODNIE
   ZE SPECYFIKACJA zamienia rowniez overflow-x z visible na auto. #page-container staje sie
   wtedy kontenerem przewijania, a position:sticky przykleja sie do najblizszego takiego
   kontenera, nie do okna. Ze overflow-y jest hidden, ten kontener nigdy nie przewija -
   wiec naglowek po prostu odjezdza z trescia.

   Pomiar potwierdzajacy: na / i /renowacja-pionow-kanalizacyjnych/ obie tablice animacji
   sa puste, #page-container nie ma atrybutu style i menu dziala. Na stronie z problemem
   jest dokladnie jeden animowany element (obraz w et_pb_blurb_0, styl slideTop).

   Dlaczego to jest bezpieczne: Divi ustawia tam overflow, zeby animacje wjezdzajace z boku
   nie tworzyly poziomego paska przewijania. Ten sam skrypt ustawia jednak takze
   body{overflow-x:hidden}, ktore samo w sobie zalatwia sprawe - i to nadpisanie zostawiamy.
   Zdejmujemy wylacznie regule na #page-container. Zweryfikowane na zywo: po zmianie
   naglowek trzyma pozycje 0 po przewinieciu, a animacja dziala dalej.

   Regula celowo bez ograniczenia do jednej strony - zabezpiecza kazda przyszla strone,
   na ktorej ktos wlaczy animacje modulu. !important jest konieczne, bo Divi ustawia to
   stylem bezposrednio na elemencie. */
#page-container{overflow-y:visible !important;}


/* === Tlo komorki na pelna wysokosc wiersza (runda 118) === kf-tlo-pelna-wysokosc
   Objaw zgloszony przez Marcina na /technologia/porownanie-metod/: gdy w wierszu
   ktoras komorka lamie tekst na dwie linie, wiersz jest wyzszy, a kolorowe tlo
   sasiednich komorek nie siega do dolu wiersza.

   Zmierzone: TD ma 78 px, a malowana tlem .dipi-cell w srodku 55 px - zostawalo
   23 px wiersza bez tla. Modul Divi Pixel maluje tlo na .dipi-cell, ktora nie
   rozciaga sie na wysokosc komorki tabeli.

   Ograniczone do 768 px w gore celowo: ponizej tej szerokosci tabela przechodzi
   w uklad pionowy, w ktorym TD zawiera DWIE komorki - ukryta etykiete kolumny
   i wartosc - a rozciaganie obu na 100% zepsuloby ten uklad.

   Zweryfikowane na zywo przed zapisem: luki 24 px zeszly do 1 px, czyli do grubosci
   obramowania. */
@media (min-width:768px){
  .dipi_table_maker tbody td > .dipi-cell{height:100%;}
}