/* --- 1. PODSTAWOWE STYLE (BEZ ZMIAN) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, li { list-style: none; padding: 0; margin: 0; }

:root {
    --kolor-top: rgba(74, 93, 35, 0.9);
    --kolor-nav: rgba(91, 112, 49, 0.95);
    --akcent: #6b8e23;
}

.sticky-header { 
    position: fixed; top: 0; width: 100%; z-index: 1000; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.top-banner { 
    background: var(--kolor-top); color: #ffffff; text-align: center; 
    padding: 16px 0; font-size: 18px; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 2px;
}

.nav-wrapper { background: var(--kolor-nav); display: flex; justify-content: center; }

.menu-container { 
    width: 100%; max-width: 1000px; display: flex; 
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item { position: relative; flex: 1; border-right: 1px solid rgba(255, 255, 255, 0.15); }
.menu-item:last-child { border-right: none; }
.menu-item:first-child { display: none; } 

/* --- 2. STYLE LINKÓW I STRZAŁEK --- */
.menu-link { 
    display: block; position: relative; padding: 18px 45px 18px 20px; 
    color: #fdfdfa; text-decoration: none; font-weight: 500; 
    cursor: pointer; transition: 0.3s; line-height: 1.2;
}

/* Kolor tła po kliknięciu - dodajemy wszystkie możliwe klasy używane w skryptach */
.menu-link.is-open, 
.menu-link.active-link, 
.menu-link.active-parent { 
    background: var(--akcent) !important; 
    color: #ffffff !important; 
}

.arrow { 
    position: absolute; right: 12px; top: 50%; 
    transform: translateY(-50%); font-size: 18px; 
    opacity: 0.8; transition: transform 0.3s; pointer-events: none;
}

/* Obrót strzałki po kliknięciu */
.is-open .arrow, 
.active-link .arrow,
.active-parent .arrow { 
    transform: translateY(-50%) rotate(180deg); 
}

/* --- 3. DROPDOWNS (UKRYTE DOMYŚLNIE) --- */
.dropdown, .sub-dropdown { 
    display: none; /* UWAGA: Brak !important tutaj, aby JS mógł to zmienić */
    position: absolute; 
    top: 100%; 
    left: 0; 
    min-width: 320px; 
    background: #ffffff; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); 
    border-radius: 0 0 6px 6px; 
    z-index: 2000;
    max-height: 80vh; 
    overflow-y: auto; 
}

/* WYMUSZENIE POKAZANIA PRZEZ JS - dodajemy !important, aby wygrać z ukryciem */
.dropdown.active, 
.sub-dropdown.active, 
.dropdown.active-list, 
.sub-dropdown.active-list { 
    display: block !important; 
}

/* Styl elementów wewnątrz listy */
.dropdown li a { 
    display: block; padding: 15px 20px; color: #3e4c26; 
    border-bottom: 1px solid #eee; text-decoration: none;
    font-size: 14px; line-height: 1.4;
}

.dropdown li a:hover { background: #f4f6f0; }

/* Sub-dropdown (drugi poziom) */
.sub-dropdown { 
    position: static; 
    width: 100%; 
    background: #f9f9f9; 
    border-left: 4px solid var(--akcent); 
    box-shadow: none;
}

/* --- 4. RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 768px) {
    .menu-container { flex-direction: column; }
    .menu-item:first-child { display: block !important; background: var(--akcent); }
    .menu-item:not(:first-child) { display: none; }
    
    /* Pokaż belki gdy menu główne jest otwarte */
    .menu-container.open, 
    .menu-container.open-main { display: block; }
    
    .menu-container.open .menu-item, 
    .menu-container.open-main .menu-item { display: block !important; }

    .dropdown {
        position: static; width: 100%; min-width: 100%;
        box-shadow: none; max-height: none;
    }
    .dropdown li a { padding-left: 30px; }
}

/* Pasek przewijania */
.dropdown::-webkit-scrollbar { width: 8px; }
.dropdown::-webkit-scrollbar-thumb { background: #4a5d23; border-radius: 4px; }



/* Wymuszenie pokazania menu po kliknięciu na KAŻDYM ekranie */
.dropdown.active, 
.dropdown.active-list, 
.sub-dropdown.active, 
.sub-dropdown.active-list { 
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important;
}

/* Styl dla aktywnego odnośnika (tło i strzałka) */
.menu-link.is-open, 
.menu-link.active-link, 
.menu-link.active-parent { 
    background: var(--akcent) !important; 
    color: #ffffff !important; 
}

.is-open .arrow, 
.active-link .arrow, 
.active-parent .arrow { 
    transform: translateY(-50%) rotate(180deg) !important; 
}

/* Wyłączenie hovera, który mógłby psuć klikanie na komputerze */
@media (min-width: 769px) {
    .menu-item:hover > .dropdown {
        display: none; /* Blokujemy hover, czekamy na klasę .active ze skryptu */
    }
}
 
 @media (max-width: 768px) {
    /* 1. Ograniczamy wysokość menu i włączamy wewnętrzny scroll */
    .menu-container.open {
        display: block !important;
        max-height: calc(100vh - 120px); /* Dopasuj do wysokości swojego headera */
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Upewnij się, że dropdowny nie mają własnego scrolla na mobile */
    .dropdown {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 3. Naprawa 'przeskakiwania' tła */
    body.menu-open {
        position: fixed;
        width: 100%;
    }
}