/* 1. Ustawienia bazowe dla elementu nadrzędnego */
#menu li.level2 {
    position: relative;
}


/* 2. Ukrycie podmenu 2-go poziomu w stanie spoczynku */
#menu ul li ul.submenutop {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; 
    min-width: 220px;
    background: #4a4a4a; 
    z-index: 100;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    padding: 0;
}

/* 3. Wyświetlanie po najechaniu (Desktop) */
#menu ul li:hover > ul.submenutop {
    display: block !important;
}

/* Stylizacja elementu "FAN GEAR" */
/*
#menu ul li:not(:has(a)) {
    padding: 10px 15px;
    cursor: default;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}
*/

/* Stylizacja linków wewnątrz drugiego poziomu */
ul.submenutop li a {
    display: block;
    padding: 10px 15px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 4. Wsparcie dla urządzeń mobilnych (Responsive Design) */
@media screen and (max-width: 768px) {
    #menu ul li ul.submenutop {
        position: static; /* Powrót do przepływu dokumentu */
        display: block;   /* Na mobile lepiej od razu pokazać lub obsłużyć kliknięciem */
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.05); /* Lekkie wyróżnienie tła na mobile */
        box-shadow: none;
        padding-left: 15px; /* Wcięcie dla hierarchii */
    }

    #menu ul li:hover > ul.submenutop {
        display: block;
    }
    
    /* Na mobile "FAN GEAR" może potrzebować większego odstępu */
    /*#menu ul li {
        border-bottom: 1px solid #ddd;
    }
    */
}

/* rozwijanie mobilnego */
@media screen and (min-width: 769px) {
    .level2:hover .submenutop {
        display: block !important;
    }
}

/* Stylizacja na Mobile */
@media screen and (max-width: 768px) {
    /* Ukrywamy podmenu domyślnie */
    .level2 .submenutop {
        display: none !important;
        position: static !important;
        width: 100% !important;
        background: #3a3a3a !important; /* Nieco inny odcień dla odróżnienia */
        padding-left: 20px !important;
    }

    /* Klasa, którą doda JS po kliknięciu */
    .level2.active .submenutop {
        display: block !important;
    }

    /* Animacja strzałki */
    .level2 a span {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .level2.active a span {
        transform: rotate(90deg); /* Obraca ▸ w dół */
    }
}

/* Rozwijanie na stronie głównej bez JS */

/* koniec Rozwijanie na stronie głównej bez JS */