/* =========================================================
   1. STYLEDLA MOBILNYCH (Ekrany poniżej 992px)
   ========================================================= */
@media (max-width: 991.98px) {
    /* W wersji mobilnej podmenu rozszerza się w pionie, przesuwając kolejne pozycje w dół */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background-color: transparent !important;
        padding-left: 1.5rem !important; /* Wcięcie dla pozycji podmenu */
        white-space: normal !important;   /* Pozwala na zawijanie bardzo długich nazw na telefonach */
    }

    .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-nav .dropdown-menu .nav-link {
        padding: 0.5rem 1rem !important;
    }
}

/* =========================================================
   2. STYLE DLA DESKTOPA (Ekrany 992px i wyższe)
   ========================================================= */
@media (min-width: 992px) {
    /* Pozycjonowanie i najechanie myszką (hover) tylko na komputerach */
    .nav-item.dropdown {
        position: relative;
    }

    .nav-item.dropdown .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        white-space: nowrap !important; /* Unikanie zwijania w 2 linie na desktopie */
        width: auto !important;
        min-width: 220px;
    }

    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
}