/* ============================================================
   layout.css - responsywny układ zamiast frameset + starych CSS
   ============================================================
   Podejście: mobile-first. Domyślnie jedna kolumna (menu chowane
   za przyciskiem), od 700px w górę - dwie kolumny jak w starym
   układzie (menu 230px + treść).
   ============================================================ */

:root {
    --tlo-menu: #2F4F4F;
    --tekst-menu: #F5F5F5;
    --akcent: #4caf82;
    --tekst-tresc: #222;
    --tlo-tresc: #fff;
    --czcionka: Verdana, Arial, Helvetica, sans-serif;
    /* kolory linków w treści (spisy, artykuły) - zwiazane z motywem strony */
    --link: #2F4F4F;         /* = --tlo-menu, ta sama ciemna zieleń co sidebar */
    --link-odwiedzony: #7FA8A0; /* jaśniejszy, wyraźnie odróżnialny odcień */
    --link-hover: #4caf82;   /* = --akcent, ten sam zielony co przycisk Drukuj */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* do_pmk.css narzuca na body max-width:600pt (~800px) - to trzeba
       jawnie skasowac, bo inaczej ogranicza CALA strone (sidebar+tresc
       razem), niezaleznie od max-width ustawionego na .tresc-glowna */
    max-width: none;
    /* do_pmk.css ma tez "border-right: 9px dotted" na body - dekoracyjna
       kropkowana linia z konca starego, waskiego layoutu. Przy szerokim
       body ladowala daleko po prawej, wygladajac jak rozrzucone kropki. */
    border-right: none;
    font-family: var(--czcionka);
    color: var(--tekst-tresc);
    background: var(--tlo-tresc);
}

/* --- najważniejsza pojedyncza reguła w całym pliku ---
   To ona naprawia większość problemów z obrazkami w starych
   artykułach (align=right, hspace, vspace) na wąskich ekranach:
   obrazek nigdy nie będzie szerszy niż jego kontener. */
img {
    max-width: 100%;
    height: auto;
}

/* stare artykuły mają sztywną szerokość 600px na dwa sposoby:
   - inline style="width:600px" (bezpośrednio w pliku artykułu)
   - klasy div.tresc / div.artykul zdefiniowane w do_pmk.css
   (div.artykul ma tam nawet własne !important - stąd też tu !important,
   inaczej by nie wygrało). Łapiemy oba przypadki, żeby nic nie blokowało
   responsywności niezależnie od tego, którym sposobem dany artykuł był
   pisany. */
.tresc-glowna div[style*="width"],
.tresc-glowna div.tresc,
.tresc-glowna div.artykul {
    width: 100% !important;
    max-width: 100%;
}

/* ---------- przycisk menu (mobile) ---------- */
.menu-toggle { display: none; }

.menu-button {
    display: block;
    background: var(--tlo-menu);
    color: var(--tekst-menu);
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
}

/* ---------- układ ---------- */
.uklad {
    display: flex;
    flex-direction: column;
}

.menu {
    background: var(--tlo-menu);
    color: var(--tekst-menu);
    padding: 16px;
    font-size: 11px;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.menu-toggle:checked ~ .uklad .menu {
    max-height: 2000px; /* wystarczająco dużo, żeby zmieściła się cała lista */
}

.menu a {
    color: var(--tekst-menu);
    display: inline-block;
    text-decoration: underline;
    font-weight: bold;
    margin: 2px 4px 2px 0;
}
.menu a:hover { color: #9be3bf; }

.menu .logo { max-width: 160px; display: block; margin-bottom: 12px; }
.menu .etykieta { margin: 12px 0 4px; font-weight: bold; }
.menu .lista-numerow a { display: inline; }
.menu .drukuj,
.menu .szukaj button {
    background: var(--akcent);
    color: #fff;
    border: 0;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.menu .szukaj { margin: 12px 0; display: flex; gap: 4px; }
.menu .szukaj input {
    flex: 1;
    /* bez tego flex-item domyslnie nie chce sie skurczyc ponizej
       szerokosci swojej tresci (placeholder "Szukane słowo") - to
       wypychalo przycisk lupy poza sidebar */
    min-width: 0;
    padding: 4px;
    border: 0;
    border-radius: 4px;
}
.menu .stopka { font-size: 10px; opacity: 0.7; margin-top: 16px; }

/* do_pmk.css ma bardzo ogolna regule "div { margin: 2em 2em 2em 2em; }",
   ktora dotyczy KAZDEGO zagniezdzonego <div> w artykule (naglowek,
   kontener tresci, podpisy pod zdjeciami...). W starym, plaskim ukladzie
   to nie mialo znaczenia, ale marginesy z zagniezdzonych divow sie
   kumuluja i zjadaja szerokosc kolumny w nowym szablonie. Zerujemy
   POZIOME marginesy (lewy/prawy) w calej tresci artykulu - pionowe
   (odstepy miedzy akapitami/sekcjami) zostawiamy bez zmian.
   !important, bo do_pmk.css ma tez div.artykul z wlasnym !important. */
.tresc-glowna div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tresc-glowna {
    padding: 20px;
    max-width: 800px; /* bylo 800px - wiecej powietrza na duzych ekranach */
    margin: 0 auto;
    line-height: 1.5;
}

.tresc-glowna a {
    color: var(--link);
    text-decoration: underline;
    font-weight: bold;
}
.tresc-glowna a:visited {
    color: var(--link-odwiedzony);
}
.tresc-glowna a:hover {
    color: var(--link-hover);
}
.tresc-glowna h3 { color: var(--tlo-menu); }

/* ---------- od 700px: menu widoczne na stałe, obok treści ---------- */
/* ---------- od 700px: menu widoczne na stałe, obok treści ---------- */
@media (min-width: 700px) {
    .menu-button { display: none; }

    .uklad {
        flex-direction: row;
        align-items: flex-start;
    }

    .menu {
        max-height: none;
        overflow: visible;
        width: 270px; /* bylo 250px - troche wiecej miejsca, m.in. dla szukajki */
        flex-shrink: 0;
        min-height: 100vh;
    }

    .tresc-glowna {
        flex: 1;
    }
}

/* ---------- podswietlenie slowa znalezionego przez wyszukiwarke ---------- */
.tresc-glowna mark.podswietlenie {
    background: #fff3a3;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ---------- lightbox-lekki.js - okno powiekszonego zdjecia ---------- */
.ll-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.ll-overlay.ll-widoczny { display: flex; }
body.ll-blokada-scrolla { overflow: hidden; }

.ll-tresc {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ll-obraz {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.ll-podpis {
    color: #eee;
    font-size: 14px;
    text-align: center;
    margin: 0;
    max-width: 80vw;
}

.ll-zamknij,
.ll-poprzedni,
.ll-nastepny {
    position: fixed;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
.ll-zamknij:hover,
.ll-poprzedni:hover,
.ll-nastepny:hover { background: rgba(255, 255, 255, 0.28); }

.ll-zamknij { top: 16px; right: 16px; }
.ll-poprzedni { left: 16px; top: 50%; transform: translateY(-50%); }
.ll-nastepny { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
    .ll-poprzedni, .ll-nastepny { width: 38px; height: 38px; font-size: 18px; }
}