/* ======================================================================
   LEWE MENU (sidebar)
   ----------------------------------------------------------------------
   ŹRÓDŁO: ten plik. CSS wyjechał tu z `menu_lewe.php` 19.08.2026, bo
   wypisywany z <body> docierał do przeglądarki PO narysowaniu strony —
   pasek pojawiał się w złym miejscu i przeskakiwał (ok. 70 px w bok,
   30 px w dół). Teraz strony linkują go w <head> przez `style_glowa.php`.
   `menu_lewe.php` linkuje go DODATKOWO u siebie — dla stron, które wstawki
   w <head> jeszcze nie mają. Ten sam adres, więc przeglądarka pobiera raz.
   🔴 ZMIENIASZ TEN PLIK → podbij `?v=` w `style_glowa.php` ORAZ w `menu_lewe.php`,
      inaczej Apache poda starą kopię przez 7 DNI (max-age=604800).
   WYCOFANIE: wklej treść z powrotem jako <style> w `menu_lewe.php`.
   ====================================================================== */

/* ⚠️ Ten arkusz obowiązuje TYLKO gdy sidebar jest włączony. Przy `?menu=gora`
   `menu_lewe.php` kończy się przed wypisaniem czegokolwiek, więc `style_glowa.php`
   też pod tym warunkiem tego linku NIE wypisuje. Inaczej stare menu poziome
   zostałoby ukryte mimo prośby o jego pokazanie. */


/* === 1. Z MENU POZIOMEGO ZOSTAJE TYLKO ADRES I SUWAK ====================
   ⚠️ Ukrywamy SAMĄ SIATKĘ LINKÓW, nie cały pasek. Adres „ryszardy.pl"
   i regulacja głośności zostają na górze każdej strony — dzięki temu
   sidebar jest WSZĘDZIE TAKI SAM (czyste menu, bez doklejanych dodatków),
   a te dwie rzeczy mają jedno stałe miejsce.
   Musi stać PO stylach Prawa1 (plik dołączany po nim), inaczej przegrałoby
   przy równej specyficzności. */
.main-nav-wrapper .nav-grid,
.main-nav-wrapper .nav-divider { display: none !important; }

/* Pasek bez siatki linków jest niski — zbieramy zbędne powietrze. */
.main-nav-wrapper .nav-wrapper { padding-bottom: 0 !important; }
/* 4→19px = suwak 15px NIZEJ (2026-07-29, prosba usera). 🔑 TO JEST MIEJSCE, w ktorym
   ustawia sie wysokosc suwaka przy wlaczonym sidebarze - odpowiednik w Prawa1.php
   (`.volume-control-section { margin }`) jest przykryty przez to !important. */
.main-nav-wrapper .volume-control-section { margin-top: 19px !important; }

/* ⚠️ LOKALNE lewe menu na zespoly.php i zespoly1.php — jedyne dwie strony
   z 432, które dorobiły się własnego `#menu-left` + `#menu-toggle` + `#overlay`
   (wysuwane na telefonie). Sidebar je zastępuje, więc bez tego na telefonie
   byłyby DWA hamburgery i DWA lewe menu.
   ⚠️ Ten plik ładuje się wyłącznie przez Prawa1.php, a strona główna
   (index1.php) Prawa1 NIE dołącza — jej własne #menu-left jest bezpieczne. */
#menu-toggle,
#menu-left,
#overlay { display: none !important; }

/* === 2. SIDEBAR ========================================================= */
/* ⚠️ WYGLĄD = wierna kopia #menu-left ze strony głównej (index1.php).
   Pierwsza wersja była w innej estetyce (Arial 13px, silver, zielone tło)
   i user zgłosił "całkowicie straciło wygląd, brak css" — bo menu, które zna
   od 15 lat, ma brązową fakturę i Times bold 17px. Wygląd jest tu treścią,
   nie dekoracją: sidebar ma być TYM SAMYM menu, tylko na podstronach. */
#menu-lewe {
    position: fixed;
    top: 0; left: 0;
    width: 155px;
    height: 100vh;
    height: 100dvh;           /* kompensuje pasek adresu na mobile */
    z-index: 1500;
    box-sizing: border-box;
    padding: 10px 5px 0 5px;
    /* ⚠️ CAŁE menu przewija się razem ze stopką — jak #menu-left na stronie
       głównej. Pierwsza wersja była flexem: lista przewijana osobno, stopka
       przyklejona na dole. Efekt: menu „urywało się na IFK", a stopka stała
       zamrożona. Układ ma być kopią oryginału, nie ulepszeniem. */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: gray #4A2B11;
    background-image: url('brown062.jpg');
    background-color: #4A2B11;
    /* ⚠️ Font TYLKO na sidebarze, NIGDY na body (Zasada #1 — dziedziczenie
       font-family/line-height z body to najczęstsza przyczyna jumpa). */
    font-family: Times, serif;
    /* 🔴 BARIERA DZIEDZICZENIA INTERLINII (2026-08-04) — nie usuwać.
       Objaw zgłoszony na paradoksy.php: „część menu opuszcza się w dół o kilka
       px od tekstu RYSZARDY". Zmierzone: nagłówek .ml-sekcja 20.8px zamiast
       16.0px, pozycja „INNE GRUPY" 310.8 zamiast 306.0 = 4.8px w dół.
       Przyczyna: .ml-link i .ml-copy mają WŁASNY line-height, a .ml-sekcja
       NIE MA — więc jako jedyna dziedziczyła to, co strona ustawiła na body.
       paradoksy.php ma `body { line-height: 1.6 }` bez media query (wzorzec
       florek_test — patrz jump_potwierdzone_przypadki.md, Zasada #1b).
       Sidebar ma wyglądać IDENTYCZNIE na każdej stronie, niezależnie od tego,
       co ta strona trzyma w body — dlatego bariera jest tutaj, a nie w 11
       stronach osobno. Wartość `normal` = stan na odautora.php (wzorzec).
       Dzieci z własnym line-height (.ml-link 1.3, .ml-copy 1.25) mają
       pierwszeństwo — ta linia ich nie dotyka.
       WYCOFANIE: skasuj tę jedną linię. */
    line-height: normal;
    /* 🔴 ŻADNEGO `transform` NA DESKTOPIE! Menu tu nigdzie się nie wysuwa —
       stoi w miejscu — a `transform` wypycha element na osobną warstwę GPU.
       Taka warstwa bywa przerysowywana z opóźnieniem przy przeliczaniu okna
       (zamknięcie DevTools klawiszem F12 zmienia rozmiar CAŁEGO okna, nie samej
       strony) i przez moment jest przezroczysta — widać przez nią treść, czyli
       aqua tekst .tekstAqua. `transform` zostaje wyłącznie w @media do 860px,
       gdzie faktycznie chowa menu za krawędź. Zgłoszone 2026-07-28: czysto po
       Ctrl+Shift+M, ale duch nadal przy F12. */
    /* 🔴 BEZ `transition` NA STAŁE! Płynne przejście jest TYLKO pod klasą
       .ml-anim, którą JS dokłada wyłącznie na czas kliknięcia hamburgera.
       Powód: gdy okno przechodzi z wąskiego na szerokie (wyjście z widoku
       mobilnego DevTools, obrót telefonu), sidebar przeskakuje ze „schowanego"
       na „widoczny". Z transition na stałe WJEŻDŻAŁ z lewej przez ćwierć
       sekundy, odsłaniając pod sobą treść strony — a że .tekstAqua to
       Arial + aqua, wyglądało to jak obcy tekst wstrzyknięty w menu.
       Gaszenie transition w evencie `resize` NIE POMAGA: zdarzenie przychodzi,
       gdy przeglądarka już przeliczyła style i animacja trwa. */
}
/* ⚠️ CELOWO BEZ adresu u góry i BEZ suwaka na dole — jedno i drugie zostaje
   w pasku Prawa1. Sidebar ma być na każdej stronie identyczny. */

/* Lista się przewija, panel głośności zostaje przyklejony na dole.
   min-height:0 jest konieczne — bez niego element flex nie skróci się
   poniżej swojej zawartości i suwak wypadłby poza ekran. */
#menu-lewe::-webkit-scrollbar { width: 2px; }
#menu-lewe::-webkit-scrollbar-track { background: #4A2B11; }
#menu-lewe::-webkit-scrollbar-thumb { background: gray; border-radius: 1px; }
#menu-lewe::-webkit-scrollbar-thumb:hover { background: #888; }

/* odpowiednik .section-header ze strony głównej

   NAGŁÓWKI „RYSZARDY" I „INNE GRUPY" SĄ MORSKIE (17.08.2026, wybór usera
   z podglądu czterech wariantów). Wcześniej `gray` — zlewał się z brązową
   fakturą i prawie nie odróżniał od srebrnych pozycji menu, więc podział
   na sekcje był niewidoczny.

   ⚠️ #20B2AA, a NIE czysty `teal` (#008080), choć user pytał właśnie
   o teal. Powód ten sam, co przy linku „Statystyki" niżej (linie ok. 240):
   `brown062.jpg` jest jasna i wszystko ciemniejsze niż mniej więcej #8a
   się w niej rozpływa — czysty teal stoi tuż przy tej granicy i na oku
   potrafi zniknąć, choć na zrzucie ekranu widać go dobrze. Ta sama pułapka
   zabrała kiedyś #6f6f6f („link znowu zniknął", 08.08.2026).
   Chcesz inaczej — to jest ta jedna liczba do zmiany. */
#menu-lewe .ml-sekcja {
    font-family: Times, serif;   /* jak wyzej — gole A z Universal/style.css */
    color: #20B2AA;
    padding-left: 5px;
    font-size: 13px;
    margin: 5px 0;
}
/* odpowiednik .spacer */
#menu-lewe .ml-odstep { height: 10px; }

/* odpowiednik .menu-footer ze strony głównej — razem z jej trzema poprawkami */
#menu-lewe .ml-foot {
    padding-bottom: 1px;
    text-align: left;       /* „Kontakt" równo z resztą pozycji menu */
    color: silver;
    /* ⚠️ BEZ border-top. Kreska oddzielała stopkę od menu, a „Kontakt" ma być
       po prostu kolejną pozycją listy — separator znów robiłby z niego obcy
       element. Na stronie głównej kreska jest schowana pod margin-top:-35px. */
    /* ⚠️ Times, NIE sans-serif. Na stronie głównej .menu-footer jest Arialem
       (bo foot.php pisze Kontakt i copyright inline Arialem) — tutaj świadomie
       odchodzimy od tamtego wzoru, żeby dół menu nie odcinał się krojem od
       pozycji nad nim. Zgłoszone 2026-07-28: „czcionka nie z menu". */
    font-family: Times, serif;
}
/* Wymuszenie kroju na całej stopce menu (2026-07-28). Zostawione jako
   zabezpieczenie, choć zgłoszony „Arial" okazał się mylnym wrażeniem: krój był
   Timesem od początku, a obco wyglądał przez inny STYL (cieńszy, mniejszy,
   wyśrodkowany) niż pogrubione pozycje menu obok. */
#menu-lewe .ml-foot,
#menu-lewe .ml-foot * {
    font-family: Times, serif !important;
}
/* „Kontakt" wyśrodkowany i BEZ POGRUBIENIA — rozmiar, krój i hover zostają
   jak w pozostałych pozycjach menu (klasa .ml-link).
   ⚠️ Pogrubienie zdjęte 2026-08-04 na prośbę usera. Świadomie zmieniamy TYLKO
   wagę: w lipcu Kontakt miał własny styl (cieńszy + mniejszy + wyśrodkowany
   naraz) i user zgłosił, że „wygląda na obcą czcionkę" mimo tego samego kroju.
   Sam brak pogrubienia tamtego objawu nie odtwarza — rozmiar i krój dalej są
   wspólne z resztą menu. Gdyby jednak znów odstawał, to jest pierwsza rzecz
   do cofnięcia.
   WYCOFANIE: skasuj linię `font-weight: normal`. */
#menu-lewe .ml-foot .ml-link { text-align: center; font-weight: normal; }
#menu-lewe .ml-foot .ml-link:hover { padding-left: 5px; }  /* bez przesuwania w prawo */

#menu-lewe .ml-copy {
    text-align: center;       /* sam podpis zostaje wyśrodkowany, jak w stopce strony */
    /* ⚠️ Odstępy trzymane krótko: na ekranie 1080px podpis wypadał pod dolną
       krawędź okna i trzeba było przewijać menu, żeby go zobaczyć. */
    padding: 8px 0 6px 0;
    font-family: Times, serif;
    font-size: 13px;
    line-height: 1.25;        /* w menu 155px ten podpis łamie się na 3 wiersze */
    color: silver;
}

/* Statystyki — ostatnia pozycja menu, pod podpisem. Arial 13px jak stopka
   strony (foot.php), tylko ciemniejszy od srebra, żeby nie ciągnął wzroku.

   ⚠️ Element stoi POZA .ml-foot — tamten blok wymusza Times !importantem.
   ⚠️ Ta reguła MUSI stać TUTAJ, poza `@media (max-width: 860px)`. Wpisana
      omyłkowo do środka tamtego bloku (08.08.2026) działała wyłącznie na
      telefonie, a na desktopie link zostawał domyślnie niebieski
      i podkreślony. Regułę widać było grepem — ale nie działała. */
#menu-lewe .ml-stat {
    text-align: center;
    padding: 0 0 10px 0;
}
#menu-lewe .ml-stat a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    /* Ciemny szary — ma być dyskretny, ale ZNAJDOWALNY na brązowym tle menu.
       Historia jednej liczby: #5e5e5e ginął zupełnie, #6f6f6f na zrzucie ekranu
       widać, ale user zgłosił 08.08.2026, że link „znowu zniknął" — czyli w
       praktyce, na oku, nie do znalezienia. Brązowa faktura brown062.jpg jest
       na tyle jasna, że szarość poniżej ~#8a rozpływa się w tle.
       #8f8f8f czyta się od razu i dalej jest wyraźnie ciemniejszy od srebra,
       którym świecą pozycje menu i podpis Copyright.
       Chcesz ciemniej albo jaśniej — to jest ta jedna liczba do zmiany. */
    color: #8f8f8f;
    text-decoration: none;
}
#menu-lewe .ml-stat a:hover { color: #c9c9c9; }
/* ⚠️ Wiersza „Modernizacja strony Claude…" w menu NIE MA w ogóle — na stronie
   głównej jest ukrywany CSS-em, tutaj po prostu go nie wypisujemy. */

#menu-lewe .ml-link {
    display: block;
    color: silver;
    text-decoration: none;
    padding: 1px 5px;
    font-weight: bold;
    line-height: 1.3;
    /* 17px — WARTOŚĆ DOCELOWA. 2026-08-04 była próba z 18px („czcionka
       menu-lewe 1px większa"), user obejrzał ją 2026-08-05 i kazał wrócić.
       Menu ma sztywne 155px szerokości, więc każdy piksel zbliża dłuższe
       pozycje do złamania na dwa wiersze — przy 18px „The Shadows" brakowało
       27,5px zamiast 21,9px. Jeśli kiedyś znów podnosisz: ZMIERZ, czy któraś
       pozycja nie urosła na wysokość. */
    font-size: 17px;
    /* 🔴 2026-08-18: czcionka JAWNIE na pozycji, nie tylko na #menu-lewe.
       Universal/style.css ma gole  A { font-family: verdana,tahoma,arial }  —
       regula trafiajaca wprost w element BIJE dziedziczenie z kontenera, wiec
       na stronach Universalu menu renderowalo sie verdana zamiast Times
       (zmierzone getComputedStyle: galeria.php dawala verdana, index1.php Times).
       Specyficznosc #menu-lewe .ml-link (1,1,0) bije gole A (0,0,1) — bez !important. */
    font-family: Times, serif;
}
#menu-lewe .ml-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: yellow;
    padding-left: 10px;
    transition: 0.2s;
}
#menu-lewe .ml-gold { color: #FFC020; }
#menu-lewe .ml-gold:hover { color: yellow; }

/* === CZERWONY SYGNAŁ: „Co nowego" i „Księga Gości" =======================
   Przeniesione ze strony głównej 2026-08-10 przy scalaniu obu lewych menu
   w ten jeden plik. Wcześniej sygnał działał WYŁĄCZNIE na `index1.php`,
   bo tam mieszkał jego kod — od teraz działa na całym serwisie.
   ⚠️ Kolor zapala JavaScript stylem inline (`style.color='red'`), a nie ta
   reguła — inline bije arkusz, więc srebro pozycji menu nie przeszkadza.
   Tu jest tylko samo miganie.
   Opóźnienie 2 s: na stronie głównej sygnał ma ruszyć PO przesuwie komunikatu.
   Liczba powtórzeń jest różna celowo (3 vs 5) — tak było przed scaleniem. */
@keyframes blink-red   { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes blink-red-5 { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
#menu-lewe .blink-red   { animation: blink-red   0.6s ease-in-out 5; animation-delay: 2s; }
#menu-lewe .blink-red-5 { animation: blink-red-5 0.6s ease-in-out 5; animation-delay: 2s; }

/* ⚠️ Globalny style.css ma w @media 600px regułę `img { width:100% !important;
   display:block !important }` — bez tego gitarka przy „IFK club" rozciągnęłaby się
   na całą szerokość menu i zeszła do osobnej linii. Wygrywamy specyficznością
   (#id + element bije goły element), NIE ruszając globalnego arkusza. */
#menu-lewe img {
    /* ⚠️ Wymiary WPROST, nie `auto` — miejsce ma być zarezerwowane od pierwszej
       klatki, jeszcze zanim gitarka się wczyta (Zasada #9). `auto` zdałoby się
       na atrybuty width/height i wyliczanie proporcji, co bywa zawodne. */
    width: 60px !important;
    height: 21px !important;
    max-width: none !important;
    display: inline !important;
    margin: 0 !important;
}

/* === 3. TREŚĆ ROBI MIEJSCE SIDEBAROWI ===================================
   Sidebar jest position:fixed, czyli poza przepływem — sam z siebie NIC nie
   przesunie i nic nie zepchnie (zero CLS). Miejsce robi mu padding na body.
   ⚠️ padding, nie margin (Zasada #8 — margin na body potrafi dać jump). */
@media (min-width: 861px) {
    /* ⚠️ JUMP POZIOMY: padding-left DOKŁADA SIĘ do marginesu body, a ten jest
       na stronach różny — ciekawe.php ma `margin:5px`, artykuly.php zostawia
       domyślne 8px przeglądarki. Efekt: pasek (adres + suwak) startował raz od
       180px, raz od 183px i przeskakiwał w bok przy zmianie strony.
       Zerujemy TYLKO lewy margines, więc odstęp od krawędzi okna wynosi zawsze
       dokładnie 175px. Górny margines zostaje nietknięty (Zasada #2/#8:
       margin:0 na CAŁYM body potrafi dać jump pionowy). */
    body {
        padding-left: 175px !important;        /* 155px menu + 20px luzu */
        margin-left: 0 !important;
    }
    /* Pasek skrócony w video1.php jest fixed na całą szerokość — cofamy go,
       żeby nie wjeżdżał pod sidebar. */
    #film-nav-mini { left: 155px !important; }
}

/* === 5. TELEFON / TABLET: sidebar wysuwany hamburgerem ================== */
/* ⚠️ Przycisk 1:1 z #menu-toggle ze strony głównej — ten sam brąz, srebrna
   ramka i napis „☰ Menu". Drugi wzór hamburgera byłby kolejnym „nowym menu". */
#ml-burger { display: none; }
#ml-zaslona {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1400;
}
@media (max-width: 860px) {
    /* Stopka menu na telefonie — 1:1 jak .menu-footer na stronie głównej:
       copyright schodzi do 10px, a „Kontakt" przechodzi na Times, żeby pasował
       krojem do pozycji menu nad nim. */
    /* Times jest już ustawiony na desktopie — tu tylko rozmiary. */
    #menu-lewe .ml-copy { font-size: 11px; }
    #menu-lewe .ml-foot-kontakt a { font-size: 16px; }

    /* 2026-08-23, prośba usera: luźniejsza lista na telefonie — 4px przerwy
       między pozycjami. Na desktopie zostaje ciasno (padding: 1px 5px), bo tam
       menu nie jest obsługiwane palcem. Margines, nie padding: padding rozdąłby
       też pierwszą i ostatnią pozycję względem `padding-top: 55px` menu. */
    #menu-lewe .ml-link { margin-bottom: 4px; }

    /* ⚠️ Migający link nie może blokować przewijania menu palcem. Bez tego
       `animation` na opacity potrafi przechwycić gest — przeniesione ze strony
       głównej 2026-08-10 razem z samym sygnałem. */
    #menu-lewe #co-nowego-link,
    #menu-lewe #ksiega-gosci-link {
        touch-action: pan-y !important;
        will-change: opacity;
    }

    #ml-burger {
        display: block;
        position: fixed;
        top: 10px; left: 10px; right: auto;
        z-index: 1600;
        background: #8B4513;
        color: white;
        border: 2px solid silver;
        padding: 8px 20px;
        font-size: 16px;
        line-height: 1;
        border-radius: 5px;
        cursor: pointer;
        touch-action: manipulation;   /* bez 300ms zwłoki na dotyk */
    }
    #menu-lewe {
        width: 135px;                 /* jak na stronie głównej */
        transform: translateX(-100%);
        /* ⚠️ Zapas u góry, żeby przycisk nie zasłaniał pozycji HOME.
           45 -> 55px (2026-08-19, prośba usera): przy 45px HOME stawał na top:45,
           a hamburger kończył się na 46 — stykały się co do piksela (zmierzony
           odstęp -1px). Teraz HOME siada 9px pod przyciskiem. */
        padding-top: 55px;
        padding-bottom: 20px;         /* zapas na pasek adresu przeglądarki */
        box-shadow: 4px 0 14px rgba(0,0,0,0.5);
    }
    #menu-lewe.ml-otwarte { transform: translateX(0); }
    /* Płynne wysuwanie wyłącznie na czas kliknięcia hamburgera — patrz komentarz
       przy #menu-lewe. Klasę zakłada i zdejmuje JS. */
    #menu-lewe.ml-anim { transition: transform 0.25s ease; }
    #ml-zaslona.ml-widoczna { display: block; }
}

/* === 6. PODGLĄD STRONY NA NAJECHANIE (tylko desktop) ==================== */
#ml-preview {
    position: fixed; z-index: 2147483000;
    width: 420px; height: 300px;
    background: #04252b;
    border: 2px solid #FFC020; border-radius: 10px;
    box-shadow: 10px 10px 10px black;
    overflow: hidden;
    opacity: 0; transition: opacity 0.14s ease;
    /* visibility zamiast display:none — brak reflowu przy pokazywaniu */
    pointer-events: none; visibility: hidden;
}
#ml-preview.ml-pv-widoczny { opacity: 1; visibility: visible; }
#ml-preview iframe {
    position: absolute; top: 0; left: 0;
    width: 1280px; height: 853px; border: 0;
    transform: scale(0.328125); transform-origin: 0 0;
    background: #04252b; pointer-events: none;
}
#ml-preview .ml-pv-pasek {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.72); color: #FFC020;
    font: 11px Arial, sans-serif; padding: 3px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}



/* Element przenoszony między stronami — patrz „PŁYNNE PRZEJŚCIE" w prawa1_head.css.
   Nazwa stoi TUTAJ, bo przy `?menu=gora` ten arkusz w ogóle nie dociera,
   a wtedy sidebara nie ma i nie ma czego przenosić. */
#menu-lewe { view-transition-name: menu-lewe; }
