/* * ============================================================================ * MEGA-MENU "MIASTA" — WARSTWA MOBILNA (2026-09-06) * ============================================================================ * * Ładowany PO css/megamenu-desktop.css i zależny od niego w kolejce enqueue. * * ZASADA NADRZĘDNA TEGO PLIKU: desktop jest zamknięty i nietykalny. * css/megamenu-desktop.css pozostaje JEDYNYM źródłem prawdy dla ≥992px i nie * został w ogóle zmieniony. Wszystko tutaj żyje w `@media (max-width:991px)` * — CAŁY plik, bez wyjątku. * * OD 2026-09-08 (optymalizacja Core Web Vitals): ten arkusz jest kolejkowany * z atrybutem `media="(max-width: 991px)"` (piąty parametr wp_enqueue_style() * w mobilet_pl_enqueue_megamenu_assets(), inc/megamenu.php) — przeglądarka * nadal go pobiera, ale NIE blokuje na nim renderu strony, gdy viewport nie * pasuje (czyli na desktopie). WARUNEK KONIECZNY tego mechanizmu: plik NIE * MOŻE zawierać żadnej reguły spoza `@media (max-width:991px)` — na desktopie * przeglądarka może w ogóle nie wziąć go pod uwagę przy pierwszym renderze. * Z tego powodu trzy reguły niegdyś tu bazowe (poza media query), neutralizujące * markup mobilny na desktopie — `.mega-menu__toolbar{display:contents}`, * `.mega-menu__filters{display:none}`, `.mega-menu__char-hint{display:none}` — * zostały PRZENIESIONE do css/megamenu-desktop.css (sekcja "REGUŁY BAZOWE — * neutralizacja markupu mobilnego", ładowana bezwarunkowo, bez atrybutu * media). Każda PRZYSZŁA reguła dodana do TEGO pliku musi trafić do wnętrza * `@media (max-width:991px)`; jeśli coś ma obowiązywać także na desktopie, * miejsce na to jest w megamenu-desktop.css, nie tutaj. * * --------------------------------------------------------------------------- * PUŁAPKA `.menu-mobile #main-menu a`/`li` — DO PILNOWANIA PRZY KAŻDEJ * KOLEJNEJ ZMIANIE TUTAJ, KLUCZOWE PRZY PRZYSZŁEJ MIGRACJI NA PRODUKCJĘ * --------------------------------------------------------------------------- * `.menu-mobile #main-menu a` I `.menu-mobile #main-menu li` (obie w * nowymobilet.css, `@media(max-width:991px)`) to PRODUKCYJNE reguły (ID * `#main-menu` w selektorze, specyficzność (1,1,1)) — pierwsza ustawia * `font-size:1.2rem`+`padding:.25rem 2rem .25rem 0` na KAŻDYM `` * wewnątrz `#main-menu`, druga `padding:.25rem 0` na KAŻDYM `
  • ` — a cały * ten panel JEST potomkiem `#main-menu`. Żaden klasowy selektor w TYM pliku * (bez względu na liczbę klas) nie przebije ich bez `!important` — dokładnie * ten sam, wielokrotnie już udokumentowany w CLAUDE.md pitfall co * desktopowe `#main-menu a` (megamenu-desktop.css), tylko w mobilnej odsłonie * tych reguł, i nie ograniczony do samych linków. Znalezione i naprawione * 2026-09-07, na żywym podglądzie, w DWÓCH rundach: (1) ``-owa wersja — * computed style pokazał `font-size:19.1875px` zamiast zadeklarowanego * `.875rem` na przycisku "Zobacz wszystkie miasta"; naprawione we * WSZYSTKICH trzech miejscach, gdzie `` dostaje własny font-size/ * padding/line-height (`.mega-menu__all-link.button`, * `.mega-menu__column-list a`, `.mega-menu__result`). (2) `
  • `-owa wersja * — zgłoszony "kilkupikselowy pasek szary nad panelem, znikający przy * scrollu" — `.25rem` górnego paddingu z tej reguły na `.mega-menu__inner-item` * (jedyny `
  • ` w tym panelu, opakowujący całą treść) odsłaniało szare tło * `.sub-menu` nad białym sticky toolbarem; naprawione tam jednym * `padding:0!important`, patrz jej reguła niżej. **PRZY KAŻDYM KOLEJNYM * ``/`
  • ` dodawanym do tego panelu z własnym font-size/padding/ * line-height/margin: dodać `!important` OD RAZU, nie czekać na zgłoszenie * buga na żywo — i sprawdzić obie reguły (`a` ORAZ `li`), nie tylko jedną.** * Obie reguły są PRODUKCYJNE — i od migracji 2026-09-07 ten plik też jest * produkcyjny, więc pułapka nie jest już hipotetyczna: `#main-menu` i * `.menu-mobile` to na żywo dokładnie te same selektory co na stagingu. * * --------------------------------------------------------------------------- * CO BYŁO NIE TAK W WERSJI MOBILNEJ PRZED TĄ WARSTWĄ * --------------------------------------------------------------------------- * `.mega-menu--test .mega-menu__columns { grid-template-columns: repeat(3,1fr) }` * w css/megamenu-desktop.css jest zadeklarowane POZA jakimkolwiek media query, * więc telefon próbował zmieścić trzy kolumny miast w szerokości ekranu. * Panel nie miał też żadnego innego przystosowania: pole wyszukiwania było * pierwszym elementem PRZEWIJANEJ listy ~230 pozycji i po kilku ekranach * scrolla przestawało istnieć. */ /* ========================================================================== MOBILE ≤991px — CAŁA zawartość pliku, bez wyjątku (patrz komentarz wyżej) ========================================================================== */ @media (max-width: 991px) { /* Panel przewija się jako całość. GÓRNY padding `.sub-menu` zostaje `0` (przeniesiony na elementy wewnętrzne nie jest tu potrzebny — górnej krawędzi treści i tak nie ma czym "podbić" — kluczowe jest, żeby pasek sticky mógł przykleić się do samej krawędzi scrollportu, bez prześwitu treści nad sobą). DOLNY padding, SUPERSEDED 2026-09-07 — patrz obszerny komentarz przy tej regule niżej — wrócił NA `.sub-menu` samo (nie na elementy wewnętrzne), bo to jedyne miejsce gwarantujące przestrzeń jako naprawdę ostatnią rzecz przed końcem scrolla. */ /* * POPRAWKA 2026-09-07 (zgłoszona ponownie jako "nadal dolna krawędź * listy jest przycinana" — poprzednia próba, `padding-bottom` na * WEWNĘTRZNYCH `.mega-menu__columns`/`.mega-menu__search-results`, * najwyraźniej niewystarczająca) — dolny odstęp przeniesiony na TEN * kontener, czyli element, na którym FAKTYCZNIE dzieje się scroll * (`overflow-y:auto` z bazowej `.sub-menu`, nowymobilet.css) — to * jedyne miejsce, gdzie dodatkowa przestrzeń jest GWARANTOWANA jako * ostatnia rzecz przed naturalnym końcem scrollowalnego obszaru, * niezależnie od tego, która wewnętrzna treść (kolumny czy wyniki) jest * akurat widoczna — poprzednia poprawka na dwóch OSOBNYCH wewnętrznych * kontenerach była bardziej pośrednia. `padding-top`/`-right`/`-left` * ZOSTAJĄ `0` (bez zmian, wciąż potrzebne, żeby sticky pasek mógł * przykleić się bez prześwitu u góry — patrz komentarz niżej), tylko * `padding-bottom` dostaje realną wartość, tą samą technikę * `env(safe-area-inset-bottom)` co już wcześniej dodana (bezskutecznie * samodzielnie) na wewnętrznych kontenerach. */ .sub-menu.mega-menu--test { padding: 0 0 calc(4rem + env(safe-area-inset-bottom, 0)) 0 !important; overscroll-behavior: contain; } /* * `padding:0 !important` (2026-09-07) — NAPRAWA prawdziwego buga * zgłoszonego na żywym podglądzie: "kilkupikselowy pasek szary nad * panelem wyszukiwania, znikający przy scrollu, gdy sticky pasek * przykleja się do nagłówka". Przyczyna: TA SAMA rodzina bugów co przy * `#main-menu a` (patrz obszerny komentarz na górze pliku) — tym razem * `.menu-mobile #main-menu li` (nowymobilet.css, `@media(max-width:991px)`, * specyficzność ID (1,1,1)) ustawia `padding:.25rem 0` na KAŻDYM `
  • ` * wewnątrz `#main-menu`, w tym na tym `
  • ` (jedyny bezpośredni potomek * `