/* --- Responsive Styles --- */

/* --- Tablety i mniejsze desktopy (do 1000px) --- */
@media all and (max-width: 1000px) {
    #strona {
        width: 96%;
        max-width: 732px;
        min-width: initial;
        padding-left: 2%;
        padding-right: 2%;
        box-sizing: border-box;
    }
    #menu {
        width: 100%;
        padding-left: 0;
        float: none;
	}
/* Pokazujemy przycisk hamburgera i stylizujemy go */
    .hamburger-btn {
        display: block;
        color: #ffffff;
        background-color: #002e5a;
        font-size: 28px;
        padding: 10px 20px;
        text-align: right; /* Kreski będą po prawej stronie paska */
        cursor: pointer;
        user-select: none;
    }

    /* Ukrywamy domyślnie główną listę menu na mobile */
    #menu > ul {
        display: none; 
        float: none;
        width: 100%;
        background-color: #002e5a;
    }

    /* KLUCZOWY MOMENT: Kiedy checkbox jest zaznaczony, pokaż listę menu */
    #menu > .menu-checkbox:checked ~ ul {
        display: block;
    }

    /* Przebudowa pozycji menu głównego z poziomego na pionowe */
    #menu > ul > li {
        float: none;
        width: 100%;
        border-bottom: 1px solid #1a436b; /* Subtelna linia między działami */
    }

 	#menu a {
        float: none;
        display: block;
        text-align: left;
        margin: 6px 4px;
        padding: 8px 6px;
        line-height: 1.5;
    }
    /* --- Obsługa podmenu na urządzeniach mobilnych --- */
    /* Ekran dotykowy nie obsługuje najechania myszką (:hover). 
       Najbezpieczniej dla UX jest wyświetlić podmenu na stałe wewnątrz rozwiniętego menu, 
       stosując lekkie wcięcie tekstu. */
    #menu ul ul {
        position: static;   /* Wyłączamy pozycjonowanie absolutne z desktopu */
        display: block;     /* Podmenu jest stale widoczne wewnątrz otwartego menu */
        box-shadow: none;
        padding-left: 20px; /* Wcięcie, aby użytkownik widział, że to podpunkty */
        background-color: #002447; /* Nieco ciemniejszy kolor dla odróżnienia */
    }

    #menu ul ul li {
        border-bottom: none;
    }
    
    #menu ul ul a {
        font-size: 15px;
        padding: 10px 20px;
    }
	
	img.top1, img.top3 {
        clear: both;
        width: 100%;
        height: auto;
        margin: 10px auto;
        float: none;
    }
    img.top1 { max-width: 206px; }
    img.top2 { display: none; }
    #tresc {
        width: 100%;
        padding: 20px 2% 30px 2%;
        margin: 10px 0;
        float: none;
        border: none;
    }
    #tresc p, #tresc li, #tresc a { font-family: Arial, sans-serif; }
    #tresc.rf input[type="text"], #tresc.rf input[type="email"] {
        width: 100%;
        margin: 5px 0;
        padding: 8px 5px;
    }
    #tresc.rf input#submit, #tresc.rf input#reset {
        width: 100%;
        padding: 10px 6px;
        margin: 10px 0 5px 0;
    }
    #stopka {
        float: none;
        width: 100%;
        border: none;
        border-top: 2px solid #002e5a;
        margin: 20px 0 0 0;
        padding: 15px 2%;
        text-align: center;
    }
    #stopka-l, #stopka-r {
        width: 100%;
        float: none;
        padding: 10px 0;
        margin-bottom: 10px;
        text-align: center;
    }
    #stopka-l p, #stopka-l a, #stopka-r p, #stopka-r a {
        color: #002e5a;
    }
    img.logo {
        display: block;
        margin: 0 auto 10px auto;
        width: 50%;
        max-width: 120px;
    }
    /* ... i pozostałe, bardziej szczegółowe style z tej sekcji ... */
}

/* --- Telefony komórkowe (do 767px) --- */
@media all and (max-width: 767px) {
    #strona { padding-left: 1%; padding-right: 1%; }
    #tresc h1 { font-size: 20px; }
    #tresc h2 { font-size: 17px; }
    #tresc p, #tresc li, #tresc div.rf { font-size: 15px; }
    /* ... i pozostałe style z tej sekcji ... */
}

/* --- Małe telefony komórkowe (do 480px) --- */
@media all and (max-width: 480px) {
    #tresc h1 { font-size: 18px; }
    #tresc h2 { font-size: 16px; }
    #tresc p, #tresc li, #tresc div.rf { font-size: 14px; }
    /* ... i pozostałe style z tej sekcji ... */
}

/* --- Style dla orientacji ekranu --- */
@media all and (max-width: 767px) and (orientation: portrait) {
    /* Style tylko dla orientacji pionowej */
}

@media all and (max-width: 767px) and (orientation: landscape) {
    /* Style tylko dla orientacji poziomej */
}