/* --- 1. PODSTAWOWE STYLE (BEZ ZMIAN) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, 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: 
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 8px), /* Cień na górze */
        linear-gradient(to top, rgba(0,0,0,0.2) 0%, transparent 8px),    /* Cień na dole */
        var(--kolor-top);
    color: #ffffff; 
    text-align: center; 
    padding: 20px 0; 
    font-size: 19px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 3px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
	
}

.nav-wrapper { 
    /* Łączymy gradienty i bazowy kolor w jednej deklaracji background */
    background: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 5px), 
        linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, transparent 5px),           
        var(--kolor-nav); 
    
    display: flex; 
    justify-content: center;
    
    /* Precyzyjne krawędzie dla efektu wypukłości */
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);     
}

.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); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); 
 }
.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;
}

/* Styl dla przycisku, który otworzył menu (stan aktywny) */
.menu-link.is-open, 
.menu-link.active-link, 
.menu-link.active-parent { 
    background: var(--akcent) !important; 
    color: #ffffff !important; 
    
    /* 1. Efekt wewnętrznego cienia - daje wrażenie głębi/wciśnięcia */
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); 
    
    /* 2. Ciemniejsza krawędź na dole, żeby odciąć go od listy */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    
    /* 3. Subtelne wzmocnienie tekstu */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Opcjonalnie: lekki ruch strzałki, żeby menu "żyło" */
.menu-item:hover .arrow {
    opacity: 1;
    transform: translateY(-50%) translateY(2px); /* Delikatne drgnięcie w dół */
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.05); /* Minimalne rozjaśnienie tła */
    color: #ffffff; /* Pełna biel dla tekstu */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* Delikatna poświata tekstu */
}


.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; 
	 border-top: 2px solid rgba(0, 0, 0, 0.1); /* "Cień" rzucany przez guzik na listę */
}

/* 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%;
    }
}
.top-banner { 
    background: linear-gradient(to bottom, #546928, #4a5d23); /* Naturalny gradient */
    color: #ffffff; 
    text-align: center; 
    padding: 20px 0; 
    font-size: 19px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 3px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

@media (max-width: 480px) {
    /* 1. Zmniejszamy czcionkę, żeby tekst zmieścił się w jednej linii */
    .top-banner { 
        font-size: 1.0rem !important; 
    }

}