/* ==========================================================================
   ANBI-TECH - poprawki wizualne
   Clivio, 20.09.2026

   DLACZEGO OSOBNY PLIK:
   Motyw ma piec warstw CSS. Root `style.css` (functions.php:139) jest
   nadpisywany przez `css/style.css` (functions.php:144), ktory NIE jest
   plikiem z nadpisaniami - jego linia 1 to 41 633 znaki pelnego,
   zminifikowanego, STARSZEGO builda tego samego SCSS-a. Do tego root
   `style.css` ma recznie doklejone bloki (2935-3134), ktore rekompilacja
   SCSS skasuje.

   Dlatego wszystkie poprawki ida tutaj, a ten plik laduje sie jako ostatni.
   Nie ruszamy `sass/`, `style.css` ani `css/style.css`. Rekompilacja SCSS -
   czymkolwiek robiona - niczego tu nie nadpisze. Cofniecie calosci to
   usuniecie tego pliku i jednej linii w functions.php.

   PREFIKS `body`:
   Kustomizator (Wyglad > Dostosuj > Dodatkowy CSS, 3763 znaki w bazie)
   drukuje sie w wp_head PO arkuszach, wiec przy rownej wadze wygrywa
   kolejnoscia. Prefiks `body` podnosi wage selektora i wygrywa niezaleznie
   od kolejnosci. To ta sama konwencja, ktora przyjal poprzednik -
   patrz komentarz w style.css:3076-3081.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. WYROWNANIE KOLUMN W PIONIE

   W Kustomizatorze siedzi globalna regula:
       .row.align-items-center.bigger_row{align-items:flex-start !important;}
   Wylacza ona wyrownanie w pionie na KAZDYM wierszu dwukolumnowym w calym
   serwisie. Sadzac po style.css:2749, ktos wzial regule przeznaczona dla
   @media (max-width:992px) i uogolnil ja na wszystko.

   Zmierzone przed poprawka (viewport 1440px):
       /giecie-cnc/     .about_partnership   zdjecie 746 / tekst 388  = 358 px pustki
       /giecie-cnc/     .sub_about           tekst 210 / zdjecie 367  = 157 px pustki
       /polityka-jakosci/ sekcja CMM         certyfikat 991 / tekst 253 = 738 px pustki

   Przywracamy wyrownanie na desktopie, zostawiajac flex-start na mobile,
   gdzie bylo pierwotnie zamierzone.
   -------------------------------------------------------------------------- */
/* KOREKTA 21.09: pierwotnie @media (min-width: 993px). Kolumny col-md-*
   lamia sie u Bootstrapa przy 768 px, wiec w pasmie 768-992 px staly obok
   siebie BEZ wyrownania - zmierzone przy 900 px: align-items flex-start. */
@media (min-width: 768px) {
    body .row.align-items-center.bigger_row {
        align-items: center !important;
    }
}


/* --------------------------------------------------------------------------
   2. ZOLTE PASKI DEKORACYJNE

   Paski sa przypiete do wewnetrznego diva, ktory ma wysokosc TRESCI, ale
   maja wysokosc podana w procentach dobrana kiedys pod konkretna dlugosc
   polskiego tekstu. Efekt: pasek wystaje poza sekcje albo jest za krotki.

   Zmierzone przed poprawka (viewport 1440px):
       .imh_vertical_line::before   pasek 1246 px / kolumna  659 px  = +587 px
       .line_from_above::before     pasek  896 px / kolumna  746 px  = +150 px
       .line_block.lb_right_long    pasek  288 px / kolumna  138 px  = +150 px
       .line_block.lb_left_bottom   pasek  288 px / kolumna  138 px  = +150 px
       .line_block (zwykly)         pasek   96 px / kolumna  138 px  =  -42 px
       .line_title.longer_top_line  pasek  500 px / naglowek  34 px
       .line_title (zwykly)         pasek  108 px / naglowek  34 px

   Dwa ostatnie to dwa znaczniki sekcji na jednym ekranie rozniace sie 4,6x.

   Przypinamy paski do wysokosci ich wlasnego kontenera zamiast do procentow.
   -------------------------------------------------------------------------- */
/* KOREKTA 21.09: `body .line_from_above::before` ma wage (0,1,2) i przegrywal
   z `.about_partnership .line_from_above:before` (0,2,1) ze style.css:2770,
   ktore w @media (max-width:992px) ustawia 150%. Zmierzone przy 900 px:
   pasek 677 px przy zdjeciu 452 px, czyli 226 px ponizej kadru.
   Dokladamy warianty o wadze (0,2,2), ktore wygrywaja w kazdym pasmie. */
body .imh_vertical_line::before,
body .line_from_above::before,
body .about_partnership .line_from_above::before,
body .about_partnership .imh_vertical_line::before {
    height: 100%;
    top: 0;
    bottom: auto;
}

/* Kolumna rozciaga sie na wysokosc wiersza, wiec pasek tez - zamiast
   konczyc sie na wysokosci samego tekstu. */
body .line_block {
    height: 100%;
}

body .line_block::before,
body .line_block.lb_right::before,
body .line_block.lb_right_long::before,
body .line_block.lb_left_bottom::before {
    height: 100%;
    top: 0;
    bottom: auto;
}

/* Znacznik sekcji: 500 px przy naglowku 34 px to pomylka, nie decyzja.
   Zostawiamy `longer_top_line` dluzszy od zwyklego, ale w rozsadnej skali.

   KOREKTA 21.09: pierwsza wersja nie miala media query i nadpisywala regule
   mobilna ze style.css:2833 (`height:100%`), przez co na telefonie pasek
   wychodzil 152 px ponad sekcje i kladl sie na banerze. Ograniczamy do
   desktopu; ponizej 768 px zostaje oryginalne 100%. */
@media (min-width: 768px) {
    body .section_title_cont.line_title.longer_top_line::before {
        height: 180px;
    }
}


/* --------------------------------------------------------------------------
   3. ZDJECIA O SKRAJNYCH PROPORCJACH W UKLADZIE DWUKOLUMNOWYM

   Zamiast przycinac kadr (object-fit: cover obcielby detal albo glowe
   operatora), ograniczamy wysokosc i centrujemy. Zdjecie zostaje w calosci,
   a kolumny przestaja sie rozjezdzac.
   -------------------------------------------------------------------------- */

/* /giecie-cnc/ i pokrewne: ACF `service_section_photo_5` bywa pionowe
   (g-s3-pion.jpg 900x1125), podczas gdy na innych stronach w tym samym
   slocie sa kadry poziome 3:2. Docelowo do podmiany w tresci - to tylko
   zabezpieczenie, zeby jeden pionowy kadr nie rozwalal sekcji. */
body .about_partnership .line_from_above > img.img-fluid {
    max-height: 560px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* /polityka-jakosci/ sekcja "Wyposazenie metrologiczne": dwa zdjecia obok
   siebie o roznych proporcjach (633x423 poziome i 432x648 pionowe)
   renderowaly sie 399 px i 648 px wysokosci, przez co podpisy i listy pod
   nimi startowaly na roznych poziomach. Wspolny limit wysokosci wyrownuje
   je bez przycinania. */
body .light_section .row.bigger_row > [class*="col-"] > img.img-fluid {
    max-height: 400px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Sekcja `.sub_about` na stronach uslug: ACF `service_section_photo_6` tez
   bywa pionowe. Na /frezowanie-cnc/ kadr 590x886 renderowal sie 550x825
   przy 532 px tekstu obok = 293 px pustki. Na /giecie-cnc/ ten sam slot ma
   kadr poziomy i limit go nie dotyka. */
body .sub_about .video_cont_color > img.img-fluid {
    max-height: 560px;
    width: auto;
    display: block;
}

/* Certyfikat ISO w kolumnie 5/12: A4 w pionie renderowal sie 523x732,
   przez co kolumna miala 991 px przy 253 px tekstu obok. */
body .sub_about .col-md-5 > a > img.img-fluid {
    max-height: 480px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------------------------------------------------------
   3b. KAFELKI SPECJALIZACJI NA STRONIE GLOWNEJ

   Kolumny sa juz rownej wysokosci (zmierzone: 506/506/506 w pierwszym rzedzie
   i 458/458/458 w drugim), ale `.specialization_block` to <span> o wysokosci
   TRESCI, wiec bloki mialy 446/422/422 i 392/398/392. Zolty pasek `::before`
   ma height:100% tego bloku, wiec sasiadujace paski mialy rozna dlugosc,
   a dolne krawedzie kafelkow byly postrzepione.

   Wystarczy, ze kolumna stanie sie kontenerem flex - domyslny align-items
   stretch rozciagnie blok na jej wysokosc, a pasek pojdzie za nim.

   Obrazki sa juz zrownane przez anbi-kafelki-proporcja.php (aspect-ratio 3/2 +
   object-fit cover, zmierzone 358x239 we wszystkich szesciu) - tego nie ruszamy.
   -------------------------------------------------------------------------- */
body .specialization .row > [class*="col-"] {
    display: flex;
}


/* --------------------------------------------------------------------------
   4. PRZYCISKI

   `.secondary_border_btn` renderuje sie jako przezroczysty prostokat z
   cienka ramka i bez sciecia rogu, podczas gdy ten sam typ wezwania do
   dzialania w sasiedniej sekcji uzywa zoltego `.primary_btn`. Na
   /giecie-cnc/ obie sekcje sasiaduja ze soba, wiec roznica rzuca sie w oczy.

   Ujednolicamy do dominujacego stylu. Jesli wolisz zachowac hierarchie
   glowny/pomocniczy - wystarczy usunac ten blok, wrocy stara ramka.
   -------------------------------------------------------------------------- */
body .secondary_border_btn {
    background: #d4d910;
    color: #1a1a19;
    border: none;
    border-radius: 3px;
    clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px);
}

/* KOREKTA 21.09: pierwotnie biel na #85880a = 3,80:1, ponizej progu AA.
   Zostajemy przy ciemnym tekscie na zoltym - tak jak w stanie podstawowym. */
body .secondary_border_btn:hover,
body .secondary_border_btn:focus {
    background: #bcc00e;
    color: #1a1a19;
}


/* --------------------------------------------------------------------------
   5. PODPISY POD ZDJECIAMI

   Bylo #999 na tle #EDF2F0 - kontrast 2,4:1, ponizej progu WCAG AA (4,5:1).
   Klasa zastepuje style wpisane w atrybucie `style` w szablonie.
   -------------------------------------------------------------------------- */
.anbi_caption {
    font-size: 0.85rem;
    color: #5a5f5d;
    margin-top: 0.5rem;
    font-style: italic;
}


/* --------------------------------------------------------------------------
   6. LISTY DWUKOLUMNOWE

   `columns:2` wpisane w atrybut `style` przezywalo kazde media query i na
   telefonie scisikalo pozycje listy do kolumn po ~137 px.
   -------------------------------------------------------------------------- */
.anbi_cols_2 {
    columns: 2;
    column-gap: 2rem;
}

@media (max-width: 767px) {
    .anbi_cols_2 {
        columns: 1;
    }
}


/* --------------------------------------------------------------------------
   7. PLYWAJACY PRZYCISK "WYSLIJ ZAPYTANIE"

   `position:fixed`, 240x54 px, 45 px od lewej i 38 px od dolu - zaslania
   lewy dolny rog ekranu. Na koncu strony potrafil zakryc ostatnie wiersze
   tresci. Rezerwujemy na niego miejsce na dole dokumentu.

   UWAGA: to nie usuwa nachodzenia w trakcie przewijania - element
   przyklejony do okna zawsze przykryje to, co pod nim przeplywa. Zmiana
   jego pozycji to decyzja projektowa, nie poprawka bledu.
   -------------------------------------------------------------------------- */
/* KOREKTA 21.09 - pierwsza wersja tej sekcji miala dwa bledy, oba wykryte
   pomiarem i oba wprowadzone przeze mnie 20.09:

   1) `body { padding-bottom: 110px }` dokladalo miejsce pod CALYM dokumentem,
      wiec pod ciemna stopka zostawal bialy pas 110 px (zmierzone na 390 px).
      Rezerwe trzeba dodac WEWNATRZ stopki, zeby przykrylo ja jej tlo.

   2) `.home_contact` i `footer` z position:relative i z-index:10 znalazly sie
      NAD przyciskiem `.popup_form_toggle`, ktory ma z-index 9 - czyli glowne
      wezwanie do dzialania znikalo na koncu kazdej strony. Odwrotnie do
      zamiaru. Regula usunieta w calosci.

   Zmierzona mapa warstw: #trust-bar 20, #btt 99, #header 6,
   .popup_form_toggle 9, .popup_form 9, stopka i .home_contact - bez z-index. */
@media (max-width: 767px) {
    body #footer {
        padding-bottom: 110px;
    }
}


/* --------------------------------------------------------------------------
   7b. MODAL FORMULARZA PONAD RESZTA

   `.popup_form` ma z-index 9, czyli mniej niz pasek certyfikatow (20) i
   strzalka powrotu do gory (99) - po otwarciu formularza te elementy leza
   na nim. Okno modalne musi byc nad wszystkim.
   -------------------------------------------------------------------------- */
body .popup_form {
    z-index: 1000;
}

body .popup_form_toggle {
    z-index: 998;
}


/* --------------------------------------------------------------------------
   9. SZABLONY POMOCNICZE: 404, WYSZUKIWARKA, ARCHIWA

   #trust-bar (42 px) i #header (168 px) sa oba position:fixed i koncza sie
   na 204 px od gory (168 px na telefonie). Szablony 404.php, search.php,
   archive.php, tag.php, author.php i index.php otwieraja tresc bez zadnego
   odstepu, wiec pierwsze 181 px tresci chowalo sie POD nagłowkiem.
   Zmierzone: dol naglowka 204 px, pierwszy naglowek tresci na 23 px.

   Kontener tresci w tych szablonach jest bezposrednim dzieckiem <body>
   (sprawdzone: body > DIV.container, obok HEADER, SECTION i FOOTER), wiec
   selektor potomka bezposredniego nie dotknie pozostalych szesciu
   kontenerow na stronie, w tym tych w stopce.
   -------------------------------------------------------------------------- */
body.error404 > .container,
body.search > .container,
body.archive > .container,
body.author > .container,
body.error404 > .main-content,
body.search > .main-content,
body.archive > .main-content,
body.author > .main-content {
    padding-top: 240px;
}

@media (max-width: 767px) {
    body.error404 > .container,
    body.search > .container,
    body.archive > .container,
    body.author > .container,
    body.error404 > .main-content,
    body.search > .main-content,
    body.archive > .main-content,
    body.author > .main-content {
        padding-top: 200px;
    }
}

/* archive.php, tag.php, author.php i index.php otwieraja tresc jako
   `<div class="main-content col-md-8">` bezposrednio pod <body> - bez
   .container i bez .row. Kolumna Bootstrapa bez wiersza rozkladala sie na
   66% szerokosci OKNA, przyklejona do lewej krawedzi. */
body > .main-content {
    float: none;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}


/* --------------------------------------------------------------------------
   10. KONTRAST ODNOSNIKOW NA JASNYM TLE

   Globalna regula `a{color:#d4d910}` daje na bialym tle kontrast 1,53:1
   (policzone wg WCAG; prog AA dla zwyklego tekstu to 4,5:1). Ten zolty jest
   zaprojektowany pod ciemne tlo - tam ma 9,91:1 i jest w porzadku.

   Zawezamy poprawke do szablonow pomocniczych, gdzie tresc lezy na bialym.
   NIE ruszamy zoltych odnosnikow w nagłowku, stopce i sekcjach na ciemnym tle.
   -------------------------------------------------------------------------- */
body.search .entry-header a,
body.search .entry-content a,
body.search .pagination a,
body.archive .entry-header a,
body.archive .entry-content a,
body.archive .pagination a,
body.author .entry-header a,
body.author .entry-content a,
body.error404 > .container a {
    color: #1a1a19;
    text-decoration: underline;
}

body.search .entry-header a:hover,
body.search .entry-content a:hover,
body.archive .entry-header a:hover,
body.archive .entry-content a:hover,
body.author .entry-header a:hover,
body.author .entry-content a:hover,
body.error404 > .container a:hover {
    color: #6b6e08;
}


/* --------------------------------------------------------------------------
   11. PAGINACJA

   `.pagination`, `.page-numbers` i `.blog_pagination` nie maja ani jednej
   reguly w zadnym arkuszu, wiec numery stron sklejaly sie w jeden ciag
   ("123...5Nastepna »"), a na /blog/ renderowaly sie jako pionowa lista
   wypunktowana.
   -------------------------------------------------------------------------- */
.pagination,
.blog_pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 2.5rem;
}

.blog_pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination .page-numbers,
.blog_pagination .page-numbers {
    display: inline-block;
    min-width: 2.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #d5dbd8;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    color: #262625;
    line-height: 1.2;
}

.pagination a.page-numbers:hover,
.blog_pagination a.page-numbers:hover {
    background: #d4d910;
    border-color: #d4d910;
    color: #1a1a19;
}

.pagination .page-numbers.current,
.blog_pagination .page-numbers.current {
    background: #262625;
    border-color: #262625;
    color: #fff;
}

.pagination .page-numbers.dots,
.blog_pagination .page-numbers.dots {
    border-color: transparent;
}


/* --------------------------------------------------------------------------
   12. KAFELKI BLOGA - rowna wysokosc

   `.bt_title_content` nie ma zadnej reguly, a `.blog_tile` ma wysokosc
   tresci, wiec kafelki o roznej dlugosci tytulu konczyly sie na roznych
   wysokosciach, a odnosnik "Czytaj wiecej" plywal.

   UWAGA: nie dalo sie tego zweryfikowac pomiarem - polska wersja bloga jest
   CELOWO pusta ("W polskiej wersji bloga nie ma obecnie opublikowanych
   artykulow"), a 4 istniejace wpisy sa w wersji angielskiej. Regula jest
   zapobiegawcza i oparta na markupie page-blog.php:85-107.
   -------------------------------------------------------------------------- */
body .blog .row.bigger_row > [class*="col-"],
body .blog_slider .row.bigger_row > [class*="col-"] {
    display: flex;
}

body .blog_tile {
    display: flex;
    flex-direction: column;
    width: 100%;
}

body .blog_tile .bt_text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body .bt_title_content {
    flex: 1 1 auto;
}


/* --------------------------------------------------------------------------
   8. LITEROWKA W SZABLONIE - patrz page-home.php:117

   Klasa `ceneter` nie istnieje w zadnym arkuszu, wiec naglowek
   "Branze przemyslowe" wyrownywal sie do lewej zamiast na srodku.
   Poprawione w szablonie; ta regula to tylko siatka bezpieczenstwa na
   wypadek, gdyby literowka wrocila z tresci ACF.
   -------------------------------------------------------------------------- */
body .section_title_cont.ceneter {
    text-align: center;
}


/* ==========================================================================
   CZESC II - poprawki z pelnego audytu, 21.09.2026
   Wchodzi tu wylacznie to, co jest jednoznacznym bledem. Rzeczy bedace
   decyzja projektowa (np. zolte naglowki sekcji na jasnym tle) celowo
   zostaja bez zmian - czekaja na decyzje.
   ========================================================================== */


/* --------------------------------------------------------------------------
   13. ZOLTY PASEK BANERA PRZECINA PIERWSZE WIERSZE TRESCI

   `.mb_text:before` (style.css:1274) ma height:240% liczone od wysokosci
   bloku tekstu banera i jest kotwiczony gora. `.sub_banner .container` ma
   z-index:4, a nastepna sekcja jest statyczna, wiec pasek maluje sie NAD
   trescia i zaslania pierwsze znaki wierszy.

   Zmierzone niezaleznie, viewport 1400x900 - ile pasek wychodzi poza baner:
       /branze/                    +260 px
       /o-firmie/                  +229 px
       /ogolne-warunki-sprzedazy/  +209 px, 5 wierszy tekstu przecietych
       /giecie-cnc/                +185 px
       /realizacje/                +172 px
       /polityka-prywatnosci/      +128 px, 3 wiersze przeciete
   Naddatek nie jest staly, bo 240% liczy sie od zmiennej wysokosci tekstu -
   to wyklucza celowy zabieg.

   Strony glownej (.main_banner) NIE ruszamy - tam uklad jest inny.
   -------------------------------------------------------------------------- */
body .sub_banner .mb_text::before {
    height: 100%;
    top: 0;
    bottom: auto;
}


/* --------------------------------------------------------------------------
   14. WIDOCZNY FOKUS KLAWIATURY

   Piec miejsc w motywie jawnie kasuje kontur fokusu (style.css:2474-2478 pola
   formularza, :2232-2235 akordeon FAQ, :1134-1136 odnosniki i dalsze), przez
   co nawigacja klawiatura jest niemozliwa do sledzenia.

   Uzywamy :focus-visible, wiec kontur pojawia sie przy klawiaturze, a nie
   przy kliknieciu myszka - wyglad dla myszy sie nie zmienia.
   -------------------------------------------------------------------------- */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body [tabindex]:focus-visible,
body .accordion-button:focus-visible {
    outline: 3px solid #1a1a19;
    outline-offset: 2px;
}

/* Na ciemnym tle czarny kontur bylby niewidoczny */
body .white_p a:focus-visible,
body .white_p button:focus-visible,
body #footer a:focus-visible,
body #header a:focus-visible,
body .popup_form input:focus-visible,
body .popup_form textarea:focus-visible {
    outline-color: #fff;
}


/* --------------------------------------------------------------------------
   15. PRZYCISK POWROTU DO GORY BYL NIEWIDOCZNY

   #btt (style.css:1150-1159) ma dokladnie ten sam kolor co stopka i ciemne
   sekcje - kontrast 1,00:1. Przycisk istnieje, ale zlewa sie z tlem.
   -------------------------------------------------------------------------- */
body #btt {
    background: #d4d910;
    color: #1a1a19;
    border: 1px solid rgba(26, 26, 25, 0.35);
}

body #btt:hover,
body #btt:focus {
    background: #bcc00e;
    color: #1a1a19;
}


/* --------------------------------------------------------------------------
   16. TRESC DOTYKA PRAWEJ KRAWEDZI EKRANU NA TELEFONIE

   `.container.half_limited` (style.css:63-67) ma zerowy margines z prawej,
   podczas gdy reszta strony ma 23 px. Dotyczy sekcji .about i .sub_about,
   czyli praktycznie kazdej strony.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body .container.half_limited {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}


/* --------------------------------------------------------------------------
   17. PRZYCISK "USUN" W FORMULARZU ZNIKAL POD KURSOREM

   `.secondary_btn:hover` (style.css:197-200) daje biel na zoltym - 1,5:1.
   Napis praktycznie znika. Ciemny tekst na zoltym rozwiazuje problem.
   -------------------------------------------------------------------------- */
body .secondary_btn:hover,
body .secondary_btn:focus {
    color: #1a1a19;
}


/* --------------------------------------------------------------------------
   18. KONTRAST ZOLTEGO NA JASNYCH TLACH

   `#d4d910` jest zaprojektowany pod ciemne tlo - tam ma 11,39:1 i zostaje
   nietkniety. Na jasnych tlach ma 1,53:1 (biale) i 1,35:1 (#EDF2F0), czyli
   ponizej kazdego progu WCAG.

   Przyciemniamy TEN SAM odcien (proporcje kanalow bez zmian) do minimum,
   ktore przechodzi prog - wyliczone, nie dobrane na oko:
       #8d900b  duzy tekst / naglowki  -> 3,43:1 biale | 3,03:1 #EDF2F0  (prog 3:1)
       #707208  zwykly tekst i linki   -> 5,12:1 biale | 4,53:1 #EDF2F0  (prog 4,5:1)

   Zakres: 465 naglowkow H2, 316 przyciskow FAQ na 65 stronach, 106 linkow
   bez klasy na 31 stronach, kwadracik zgody RODO.
   -------------------------------------------------------------------------- */

/* --- naglowki sekcji --- */
body .section_title_cont h2 {
    color: #8d900b;
}

/* KOREKTA: pierwsza wersja wylaczala poprawke wewnatrz `.white_p`, zakladajac
   ze ta klasa oznacza ciemna sekcje. Pomiar to obalil - `.specialization.white_p`
   i `.quality_policy` maja tlo BIALE, wiec zolty wracal tam przy 1,53:1.

   Zmierzone, ktore kontenery maja faktycznie ciemne tlo (luminancja < 0,2):
       .content_section   .about_quality   .ibc_cont
   Tylko w nich zolty zostaje. `.stc_white` ma wlasna regule (bialy) o wadze
   (0,2,1), ktora bije moja (0,1,2) - nie ruszamy jej. */
body .content_section .section_title_cont h2,
body .about_quality .section_title_cont h2,
body .ibc_cont .section_title_cont h2 {
    color: #d4d910;
}

/* --- FAQ: otwarte pytanie bylo zolte na jasnoszarym (1,37:1),
       a pierwsze pytanie jest domyslnie otwarte --- */
body .faq .accordion-button:not(.collapsed),
body .faq .accordion-button:not(.collapsed):hover,
body .faq .accordion-button:not(.collapsed):focus {
    color: #707208;
}

/* --- linki w tresci bez wlasnej klasy, na jasnych sekcjach ---
       `a:not([class])` celuje dokladnie w te linki, ktore policzyl audyt,
       i omija przyciski, menu oraz stopke */
body section a:not([class]) {
    color: #707208;
    text-decoration: underline;
}

body section a:not([class]):hover {
    color: #1a1a19;
}

/* KOREKTA: `:not(.white_p)` nie chronilo `.content_section`, ktore ma tlo
   #1a1a19 i nie jest sekcja z ta klasa - linki spadaly tam do 2,96:1.
   W ciemnych kontenerach zolty zostaje (11,39:1). */
body .content_section a:not([class]),
body .about_quality a:not([class]),
body .ibc_cont a:not([class]) {
    color: #d4d910;
}

body .content_section a:not([class]):hover,
body .about_quality a:not([class]):hover,
body .ibc_cont a:not([class]):hover {
    color: #fff;
}

/* --- kwadracik wymaganej zgody RODO: 1,42:1 na tle formularza --- */
body .home_contact input[type="checkbox"],
body .popup_form input[type="checkbox"] {
    accent-color: #707208;
    outline: 1px solid #707208;
    outline-offset: 1px;
}

/* --- plywajacy przycisk pod kursorem: biel na szarozielonym 2,16:1 --- */
body .popup_form_toggle:hover,
body .popup_form_toggle:focus {
    color: #1a1a19;
}


/* ==========================================================================
   CZESC III - uwagi z przegladu 20.09 wieczorem
   ========================================================================== */


/* --------------------------------------------------------------------------
   19. NAGLOWEK ODERWANY OD SWOJEGO TEKSTU W .service_3

   W tej sekcji naglowek stoi NAD wierszem (page-service.php:135), a kolumna
   z tekstem byla wyrownana do srodka wzgledem wysokiego zdjecia. Zmierzone na
   /branze/elektronika-i-elektrotechnika/: naglowek konczy sie na 1935,
   wiersz zaczyna na 1965, ale tekst dopiero na 2183 - czyli 248 px dziury
   miedzy tytulem a jego wlasna trescia.

   To skutek uboczny globalnego wyrownania do srodka z 20.09. Tam, gdzie
   naglowek jest POZA wierszem, tekst musi zaczynac sie u gory - inaczej
   wizualnie nie nalezy do tytulu.

   Dotyczy 59 stron na page-service.php.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .service_3 .row.align-items-center.bigger_row {
        align-items: flex-start !important;
    }
}


/* --------------------------------------------------------------------------
   20. SEKCJA CERTYFIKATU CMM - tekst przestaje plywac

   /polityka-jakosci/: kolumna z certyfikatem ma 729 px, kolumna z tekstem
   253 px. Wysrodkowany tekst wisial w polowie wysokosci certyfikatu.
   Przy dokumencie i jego opisie wlasciwe jest wyrownanie do gory - naglowek
   staje obok gornej krawedzi certyfikatu.

   Celujemy przez :has(), zeby trafic wylacznie w ten uklad (col-md-5 wystepuje
   tylko tutaj), a nie we wszystkie sekcje .sub_about.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .sub_about .row.align-items-center:has(> .col-md-5) {
        align-items: flex-start !important;
    }
}


/* --------------------------------------------------------------------------
   21. ZDJECIE JEDZIE OBOK TEKSTU PODCZAS PRZEWIJANIA

   /tworzywa-konstrukcyjne/pom-c/, sekcja "Zastosowania i komponenty POM":
   zdjecie 597x397 stoi obok listy o wysokosci 670 px. Zamiast wisiec
   posrodku, moze towarzyszyc tekstowi.

   Rozciagamy TYLKO kolumne ze zdjeciem (align-self na niej, nie na calym
   wierszu), zeby zdjecie mialo po czym jechac. Kolumna z tekstem zostaje
   wysrodkowana, wiec tam, gdzie to zdjecie jest WYZSZE od tekstu
   (np. /giecie-cnc/), nic sie nie zmienia - kolumna i tak jest najwyzsza.

   top: 224px - tuz pod przyklejonym naglowkiem, ktory konczy sie na 204 px.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .about_partnership .row.align-items-center > [class*="col-"]:has(> .line_from_above) {
        align-self: stretch;
    }

    body .about_partnership .line_from_above {
        position: sticky;
        top: 224px;
    }
}


/* --------------------------------------------------------------------------
   22. PIONOWE ZDJECIA ROZPYCHAJACE SEKCJE .service_3

   Sekcja jest projektowana pod kadr poziomy 3:2 - tak jest na 17 z 24
   podstron i zdjecie ma tam 427 px wysokosci. Piec podstron dostalo kadry
   pionowe (proporcja 0,75-0,83), wiec przy szerokosci 640 px zdjecie roslo
   do 853 px. Zmierzone na /branze/przemysl-obronny-i-zbrojeniowy/:
   kolumna ze zdjeciem 883 px, kolumna z tekstem 396 px - ponad dwukrotnie.

   Kadrowanie do 3:2 odpada: na wszystkich piciu zdjeciach detal zajmuje cala
   wysokosc klatki (sprawdzone maska tla), wiec kazde obciecie ucina czesc
   przedmiotu. Zamiast tego skalujemy cale zdjecie w dol do 480 px wysokosci
   i pozwalamy zoltemu blokowi zwezic sie razem z nim - nic nie ginie,
   a wysokosc sekcji wraca do poziomu reszty serwisu.

   Klase sp_tall nadaje page-service.php na podstawie proporcji zalacznika,
   wiec przyszle wgrane zdjecia beda obsluzone same z siebie.

   Ponizej 768 px kolumny i tak ida jedna pod druga - regula tam nie dziala.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .service_3 .services_photos.sp_tall {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
    }

    body .service_3 .services_photos.sp_tall img {
        width: auto;
        max-height: 480px;
        /* Sama wysokosc 480 px daje staloa szerokosc zdjecia niezaleznie od okna,
           wiec na tablecie zdjecie zabieralo tekstowi miejsce - przy 800 px
           kolumny wychodzily 416/336. Wiersz ma okolo 92vw, wiec 40vw trzyma
           zdjecie ponizej polowy szerokosci na kazdym ekranie. Na desktopie
           warunek nie dziala: przy 1440 px to 576 px, a zdjecie ma 360 px. */
        max-width: 40vw;
    }

    /* Zwezone zdjecie zostawialo 310 px bialej przerwy do tekstu, bo kolumny
       sa po polowie. Dlatego w wierszu z pionowym zdjeciem kolumna ze zdjeciem
       zwezona jest do jego szerokosci, a cala reszta przypada tekstowi.
       Szerokosci nie sa wpisane na sztywno - kolumna dobiera sie do konkretnego
       kadru, wiec przerwa wychodzi 30 px, czyli tyle samo co na podstronach
       ze zdjeciem poziomym. */
    body .service_3 .row.bigger_row:has(.services_photos.sp_tall) > [class*="col-"]:first-child {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    body .service_3 .row.bigger_row:has(.services_photos.sp_tall) > [class*="col-"]:last-child {
        flex: 0 0 auto;
        width: -moz-fit-content;
        width: fit-content;
    }
}


/* --------------------------------------------------------------------------
   23. LOGO SCISNIETE - PROPORCJA GUBIONA W DWOCH MIEJSCACH

   Plik 227x143 (proporcja 1,587). W <style id="wp-custom-css"> stoja reguly
   img.logo[width][height]{height:138px;width:auto} oraz - ponizej 768 px -
   {height:108px;width:auto}. Sztywna wysokosc z width:auto dziala dopoki
   kolumna miesci wyliczona szerokosc; gdy jest wezsza, max-width:100% ucina
   szerokosc, a wysokosc zostaje na swoim. Zmierzone:

       390 px -> 154,5 x 108  = 1,431  (logo wezsze o 10%)
       768 px -> 149,9 x 138  = 1,086  (logo wezsze o 32%)

   Zamieniamy sztywna wysokosc na gorna granice - drugi wymiar dobiera juz
   przegladarka, wiec proporcja nie ma jak sie zepsuc przy zadnej szerokosci.
   Reguly z Customizera maja waga (0,2,1), stad prefiks body: (0,2,2).
   -------------------------------------------------------------------------- */
body img.logo[width][height] {
    height: auto;
    max-height: 138px;
}

body #header.header_scrolled img.logo[width][height] {
    height: auto;
    max-height: 60px;
}

@media (max-width: 767px) {
    body img.logo[width][height] {
        max-height: 108px;
    }
}


/* --------------------------------------------------------------------------
   24. BIALA PRZERWA MIEDZY TEKSTEM A PIONOWYM ZDJECIEM (pozostale sekcje)

   Ten sam mechanizm co w §22, tyle ze poza .service_3. Ograniczenia wysokosci
   z §3 (560 px w .about_partnership i .sub_about, 400 px w .light_section)
   zwezaja kadry pionowe, a kolumny sa po polowie - wiec miedzy tekstem
   a zdjeciem zostawala dziura. Zmierzone na 73 podstronach: 9 wierszy ze 115
   mialo przerwe 105-120 px, reszta miesci sie w 30 px.

   Kolumna ze zdjeciem zweza sie do jego szerokosci, tekst dostaje reszte.
   Atrybut data-pion nadaje anbi-obrazki-cls.php kadrom wezszym niz 4:3.

   Warunki - kazdy wynika ze zmierzonej wpadki przy dochodzeniu do tej wersji:

   1. :nth-child(2):last-child - tylko wiersze dwukolumnowe, zeby nie ruszyc
      siatek kafelkow w tych samych sekcjach.

   2. :only-child - w kolumnie ze zdjeciem nie moze byc nic poza nim.
      Na /polityka-jakosci/ zdjecia maja obok siebie podpisy (.anbi_caption)
      albo caly blok tekstu; kolumna zwezala sie wtedy do tresci, nie do
      zdjecia, i wiersz sie rozjezdzal - 1985 px zamiast 583 px.

   3. :not(:has(img:not([data-pion]))) - w wierszu nie moze byc drugiego
      zdjecia. Wiersze ze zdjeciem po obu stronach maja zostac rowne.

   Kolumne z tekstem trzeba wskazac na dwa sposoby, bo w .about_partnership
   zdjecie jest pierwsze, a w .sub_about drugie, i CSS nie ma kombinatora
   "poprzednie rodzenstwo". Warunek siedzi wiec na wierszu. Uwaga na przyszlosc:
   :has() NIE moze byc zagniezdzone w :has() - taki selektor jest niepoprawny
   i przegladarka wyrzuca CALA regule.

   Szerokosc to fit-content, a nie auto, i nie zdejmujemy max-width
   z Bootstrapa: width:auto daje szerokosc max-content, wiec kolumna z dluga
   trescia rozpychala sie do 2710 px. Kolumna tekstu dostaje flex: 1 1 0
   (basis zero) z tego samego powodu.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body :is(.about_partnership, .sub_about, .light_section) .row:has(> [class*="col-"]:nth-child(2):last-child):not(:has(img:not([data-pion]))) > [class*="col-"]:has(> :only-child img[data-pion]) {
        flex: 0 0 auto;
        width: -moz-fit-content;
        width: fit-content;
    }

    body :is(.about_partnership, .sub_about, .light_section) .row:has(> [class*="col-"]:nth-child(2):last-child):not(:has(img:not([data-pion]))):has(> [class*="col-"]:first-child > :only-child img[data-pion]) > [class*="col-"]:last-child,
    body :is(.about_partnership, .sub_about, .light_section) .row:has(> [class*="col-"]:nth-child(2):last-child):not(:has(img:not([data-pion]))):has(> [class*="col-"]:last-child > :only-child img[data-pion]) > [class*="col-"]:first-child {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}


/* --------------------------------------------------------------------------
   25. PRZELACZNIK JEZYKA W PASKU ZAUFANIA

   W prawym gornym rogu stal sam globus i slowo "Jezyk" - napis bez zadnego
   dzialania (header.php:91). Teraz jest tam rozwijana lista jezykow.

   Rozwijana, a nie kody obok siebie, bo docelowo jezykow ma byc dziewiec
   (pl, en, de, se, dk, fr, cz, nl, ua) i w pasku by sie nie zmiescily.

   Otwieranie: :hover dla myszy oraz klasa .otwarty nadawana klikiem (header.php).
   NIE uzywamy :focus-within - przy Escape skrypt oddaje focus przyciskowi, a wtedy
   :focus-within natychmiast otwieral liste z powrotem. Zmierzone.

   Markup: header.php, sekcja .trust-bar-lang.
   -------------------------------------------------------------------------- */
body .trust-bar-lang {
    position: relative;
    padding-right: 7px;
}

body .clv-lang {
    position: relative;
}

body .clv-lang-przycisk {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: #d4d910;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

body .clv-lang-przycisk:hover,
body .clv-lang-przycisk:focus-visible {
    color: #e8ee2a;
}

body .clv-lang-strzalka {
    font-size: 10px;
    transition: transform 200ms;
}

body .clv-lang:hover .clv-lang-strzalka,
body .clv-lang.otwarty .clv-lang-strzalka {
    transform: rotate(180deg);
}

/* Lista: chowana bez display:none, zeby dalo sie ja animowac i zeby czytniki
   ekranu mialy ja w drzewie dopiero po otwarciu (visibility). */
body .clv-lang-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 132px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #1a1a19;
    border: 1px solid #d4d910;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 200ms, transform 200ms, visibility 200ms;
}

body .clv-lang:hover .clv-lang-lista,
body .clv-lang.otwarty .clv-lang-lista {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body .clv-lang-lista li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .clv-lang-lista a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: #f2f2f2;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

body .clv-lang-lista a:hover,
body .clv-lang-lista a:focus-visible {
    background: #d4d910;
    color: #1a1a19;
}

body .clv-lang-kod {
    font-weight: 700;
    letter-spacing: 0.04em;
}

body .clv-lang-lista .clv-lang-kod {
    min-width: 24px;
    color: #d4d910;
}

body .clv-lang-lista a:hover .clv-lang-kod,
body .clv-lang-lista a:focus-visible .clv-lang-kod {
    color: #1a1a19;
}

/* Telefon: przelacznik BYL calkiem ukryty (header.php: .trust-bar-lang{display:none}),
   wiec na telefonie nie dalo sie zmienic jezyka w ogole. Zmierzone przy 360, 390
   i 430 px: wersja skrocona zajmuje 70 px, pasek zostaje przy 32 px wysokosci
   i nie pojawia sie poziome przewijanie. Lista otwiera sie do prawej krawedzi. */
@media (max-width: 768px) {
    body .trust-bar-lang {
        display: flex !important;
        padding-right: 4px;
    }

    body .clv-lang-przycisk {
        gap: 4px;
        padding: 2px;
        font-size: 11px;
    }

    body .clv-lang-lista {
        min-width: 120px;
    }
}