/* dobre.audio — wyróżnienie hover w górnym mega-menu (.ps-mainmenu),
   na wszystkich poziomach zagnieżdżenia. Sprawdzone na żywo, sierpień 2026.

   Stan PRZED poprawką (natywny CSS motywu Hummingbird, theme-*.css):
   1) Poziom 1 (kategoria główna, wyzwalacz rozwijania menu) — hover
      zmieniał tylko kolor tekstu (".ps-mainmenu__tree-link:hover"),
      BEZ tła. Reguła była oparta wyłącznie o :hover na samym <a>, więc
      gdy mysz zjeżdżała z tego linku w głąb już rozwiniętego panelu
      (".js-sub-menu", który w DOM jest potomkiem TEGO SAMEGO <li> co
      link), sam link przestawał być hoverowany i podświetlenie znikało
      — mimo że menu wciąż było otwarte i użytkownik dalej je przeglądał.
   2) Poziom 2 (lewa kolumna, ".submenu__left-item") — miał już tło na
      hover (var(--bs-tertiary-bg), jasny szary) — bez zmian, działa
      poprawnie.
   3) Poziom 3 (prawa kolumna, ".submenu__right-items .menu-item") —
      hover zmieniał TYLKO kolor tekstu, bez tła — stąd wrażenie "braku
      wyróżnika" na najgłębszym poziomie w porównaniu do poziomu 2.
      Element w spoczynku nie miał w ogóle "boksu" (border-radius:0,
      padding:0 — sprawdzone przez getComputedStyle na żywo) — w
      przeciwieństwie do poziomu 2 (".submenu__left-item", który MA
      elegancko dopracowany box: border-radius:8px, padding:12px 16px).
      Samo dodanie background-color bez paddingu/zaokrąglenia dawało
      płaski, "surowy" prostokąt przyklejony do tekstu — stąd ta
      poprawka dodaje też box-model, nie tylko kolor.

   Poprawki poniżej:
   (1) podświetlenie poziomu 1 oparte o :hover na całym <li> (a nie
       samym linku) — trwa przez cały czas, gdy mysz jest gdziekolwiek
       wewnątrz otwartej kategorii, łącznie z rozwiniętym panelem.
   (3) poziom 3 dostaje TEN SAM rodzaj "boksu" co poziom 2 (padding +
       border-radius:8px), z ujemnymi marginesami kompensującymi
       padding, żeby nie przesunąć tekstu ani nie zmienić odstępów
       między pozycjami (sprawdzone na żywo, też na dwuwierszowych
       nazwach — nic się nie rozjeżdża). Tło na hover — celowo w innym
       odcieniu (delikatny niebieski, zamiast szarego jak poziom 2),
       żeby było od razu widać, że to kolejny poziom w głąb, a nie to
       samo co poziom 2.

   4) DODATEK (zgłoszenie użytkownika po wdrożeniu powyższego — "a jakby
      wyglądał taki kolor na menu głównym"): poziom 1 sam w sobie miał
      TYLKO zmianę koloru tekstu, bez żadnego tła — user chciał zobaczyć
      wariant z kolorowym, zaokrąglonym "znacznikiem" tła również na
      poziomie 1, tak jak jest teraz na poziomie 3.

   Naprawa dla (4) — WAŻNE, sprawdzone na żywo (pierwsza próba się nie
   udała): NIE wolno dawać `position: relative` bezpośrednio na `<li>`
   (`.ps-mainmenu__tree-item`) — to ten sam element, względem którego
   pozycjonuje się CAŁY panel rozwijanego dropdownu (`.js-sub-menu`, jego
   potomek w DOM). Ustawienie tam `position:relative` przypadkiem
   podmienia punkt odniesienia dla pozycjonowania dropdownu, przez co
   panel (zwłaszcza w kategoriach z wieloma kolumnami, np. "Technika
   sceniczna") renderuje się ściśnięty i nachodzący na siebie — sprawdzone
   na żywo, że to dokładnie ten efekt. Zamiast tego `position:relative`
   idzie na WEWNĘTRZNY wrapper linku (`.ps-mainmenu__tree-item-wrapper`),
   który nie jest kontenerem pozycjonującym dla dropdownu — bezpieczne.
   Tło samo w sobie to `::before` (position:absolute, nie wpływa na
   layout w ogóle), skrócony pionowo (top/bottom:14px) względem pełnej
   64px wysokości belki, żeby wyglądał jak "pigułka" wokół tekstu, a nie
   pasek na całą wysokość nagłówka.

   5) TEST v2 (zgłoszenie użytkownika, wrzesień 2026 — "jak klikam na
      kategorię w menu głównym to pojawia się niebieska ramka, ale ma
      zupełnie inny kształt niż podświetlenie pod napisem"): doprecyzowane
      na żywo — ramka pokazuje się WYŁĄCZNIE w ułamku sekundy, gdy
      przycisk myszy jest wciśnięty i jeszcze nietrzymany (mousedown),
      tuż przed nawigacją na stronę kategorii — to natywny, domyślny
      obrys fokusu przeglądarki na linku poziomu 1 (i/lub na przycisku
      strzałki rozwijającej podmenu — ".ps-mainmenu__tree-dropdown-toggle"
      — dla kategorii, które go mają), którego dotąd nic w CSS nie
      nadpisywało.

      Pierwsza wersja poprawki (v1) wyłączała ten prostokąt tylko dla
      ":focus-visible" — okazało się (zgłoszenie użytkownika: "bez zmian,
      nadal ramka") że Chrome NIE klasyfikuje fokusu powstałego z
      wciśnięcia myszy na linku jako ":focus-visible" w tym przypadku, więc
      reguła w ogóle się nie uruchamiała i domyślna ramka zostawała bez
      zmian. Naprawione przez oparcie się o zwykłe ":focus" (a nie
      ":focus-visible") — dzięki temu reguła działa niezależnie od tego,
      jak przeglądarka klasyfikuje rodzaj interakcji (mysz czy klawiatura),
      i zawsze podstawia tę samą pigułkę co na hover zamiast domyślnego
      prostokąta. Dodatkowo objęty też przycisk strzałki rozwijania
      podmenu (".ps-mainmenu__tree-dropdown-toggle"), bo miał ten sam
      problem, tylko z innym (niebieskim, zaokrąglonym) domyślnym obrysem
      przeglądarki.

      OZNACZONE JAKO TEST v2: do potwierdzenia po wgraniu na serwer —
      efekt trwa ułamek sekundy (moment trzymania wciśniętego przycisku
      myszy przed nawigacją), więc sprawdź przytrzymując klik na
      kategorii z menu głównego bez puszczania przycisku myszy.

   Ładowane globalnie przez hookDisplayHeader() w dobre_audio_assets.php
   (ten sam wzorzec co header-redesign.css, product-listing-tweaks.css
   itd. w tym module) — NIE edytujemy plików motywu Hummingbird
   bezpośrednio. */

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li:hover > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link {
  color: var(--bs-link-hover-color);
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li > .ps-mainmenu__tree-item-wrapper {
  position: relative;
  z-index: 1;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li:hover > .ps-mainmenu__tree-item-wrapper::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -10px;
  right: -10px;
  background-color: rgba(11, 105, 246, 0.08);
  border-radius: 8px;
  z-index: -1;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu__right-items .menu-item {
  padding: 8px 12px;
  margin: -8px -12px 0 -12px;
  border-radius: 8px;
  transition: background-color .15s ease;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu__right-items .menu-item:hover {
  background-color: rgba(11, 105, 246, 0.07);
}

/* TEST v2 — patrz punkt 5) w komentarzu na górze pliku. Zamienia domyślny
   obrys fokusu przeglądarki na poziomie 1 (zarówno na linku, jak i na
   przycisku strzałki rozwijania podmenu) na tę samą pigułkę, która już
   jest na hover. Oparte o zwykłe ":focus" (nie ":focus-visible") — v1
   oparty o ":focus-visible" nie zadziałał, bo Chrome nie kwalifikował
   fokusu z kliknięcia myszą jako "widocznego". */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree-link:focus,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:focus {
  outline: none;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper:focus-within::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -10px;
  right: -10px;
  background-color: rgba(11, 105, 246, 0.08);
  border-radius: 8px;
  z-index: -1;
}