body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

header.site-header {
    background-color: #0d0d0d !important; /* Czerń absolutna */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Sztywna wysokość, żeby się nie zapadał */
    z-index: 99999 !important; /* Musi być nad wszystkim */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
}

/* 2. WEWNĘTRZNY UKŁAD */
.header-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Rozrzuca elementy: Lewo - Środek - Prawo */
    align-items: center;
    height: 100%;
}

/* 3. LOGO (Wymuszamy biały kolor i układ) */
.logo-wrapper a.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    gap: 15px;
    color: #ffffff !important; /* BIAŁY NA SIŁĘ */
}

.logo-wrapper img.logo-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin-top: 15px;
}

.logo-wrapper span.logo-text {
    text-transform: none;
}

/* 4. MENU ŚRODKOWE (Linki) */
nav.static-navigation {
    display: block; /* Pokazujemy na desktopie */
}

nav.static-navigation ul.nav-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 30px;
}

nav.static-navigation ul.nav-links li a {
    color: black !important; 
    font-size: 20px;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: uppercase; /* Opcjonalnie: wielkie litery jak w projekcie */
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

nav.static-navigation ul.nav-links li a:hover {
    color: #00C853 !important; /* Zielony po najechaniu */
}

/* 5. PRZYCISK "ZAPISY TRWAJĄ" */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

a.btn-header {
    background-color: #00C853 !important; /* Twój zielony */
    color: #000000 !important; /* Czarny tekst na przycisku */
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none !important;
    font-size: 14px;
    text-transform: uppercase;
    transition: transform 0.2s;
    display: inline-block;
}

a.btn-header:hover {
    background-color: #00e660 !important;
    transform: scale(1.05);
}

/* 6. HAMBURGER (Ukryty na dużych ekranach) */
button.mobile-menu-toggle {
    display: none; /* Domyślnie ukryty */
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

button.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff !important; /* Białe paski */
    border-radius: 2px;
}

/* =========================================
   RESPONSYWNOŚĆ (Mobile/Tablet)
   ========================================= */
@media (max-width: 1100px) {
    /* Ukrywamy środkowe menu tekstowe */
    nav.static-navigation {
        display: none !important;
    }

    /* Pokazujemy hamburgera */
    button.mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Zmniejszamy trochę padding na telefonach */
    .header-container {
        padding: 0 15px;
    }
}

/* ==============================================
   FIX: NAPRAWA WYCIEKAJĄCEGO MENU MOBILNEGO
   ============================================== */

/* 1. Na komputerach (powyżej 1100px) menu mobilne ma nie istnieć */
@media (min-width: 1101px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ====================================================
   NOWE MENU MOBILNE - WYSZUWANE Z BOKU (PRAWA STRONA)
   ==================================================== */

.mobile-menu-overlay {
    /* Pozycjonowanie na sztywno */
    position: fixed;
    top: 0;
    right: 0; /* Przyklejone do prawej krawędzi */
    width: 100%; /* Na start szerokość 100% ekranu (możesz zmienić np. na 80%) */
    height: 100vh; /* Pełna wysokość */
    background-color: #0d0d0d; /* Twoje czarne tło */
    z-index: 998; /* Pod hamburgerem, ale nad resztą strony */
    
    /* Kluczowe dla animacji z boku */
    transform: translateX(100%); /* Domyślnie schowane za prawą krawędzią ekranu */
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Płynna, nowoczesna animacja */
    
    /* Ukrywamy, żeby nie dało się kliknąć, jak jest schowane */
    visibility: hidden;
    
    /* Wyśrodkowanie linków w środku */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stan AKTYWNY - kiedy JS doda klasę 'active' */
.mobile-menu-overlay.active {
    transform: translateX(0); /* Wsuń menu na ekran */
    visibility: visible;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5); /* Cień, żeby oddzielić menu od strony */
}

/* Stylizacja linków w środku */
.mobile-nav-links {
    list-style: none;
    padding: 0;
    text-align: center;
    width: 100%;
}

.mobile-nav-links li {
    margin: 25px 0;
    opacity: 0; /* Ukrywamy linki na start, żeby wjechały z opóźnieniem */
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.mobile-nav-links a {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    display: block;
}

.mobile-nav-links a:hover {
    color: #00C853; /* Twój zielony kolor */
}

/* Animacja wjazdu samych linków (mały efekt "wow") */
.mobile-menu-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

/* Opóźnienia dla kolejnych linków, żeby wjeżdżały jeden po drugim */
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(5) { transition-delay: 0.5s; }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(6) { transition-delay: 0.6s; }

/* Poprawka dla Hamburgera - musi być ZAWSZE na wierzchu */
.mobile-menu-toggle {
    position: relative;
    z-index: 999; /* Wyżej niż menu (998) */
}

/* =========================================
   HEADER TRANSPARENTNY -> CIEMNY (SCROLL)
   ========================================= */

body {
    padding-top: 0 !important; /* USUWAMY PADDING */
}


header.site-header {
    background-color: transparent !important; /* Przezroczyste tło */
    border-bottom: none !important; /* USUWAMY TĘ KRESKĘ */
    box-shadow: none !important;    /* Usuwamy ewentualny cień */
    
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 9999;
    display: flex;
    align-items: center;
    transition: all 0.4s ease; /* Płynna animacja wszystkiego */
}

/* 2. Stan po przewinięciu (Gdy JS doda klasę .scrolled) */
header.site-header.scrolled {
    background-color: #0d0d0d !important; /* Ciemne tło */
    border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Dopiero tu dodajemy delikatną linię */
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important; /* Dodajemy cień dla głębi */
    height: 100px; /* Lekkie zmniejszenie wysokości */
    
}


/* Stylizacja tekstów (bez zmian, musi być czytelnie) */
.logo-wrapper a.logo-link,
nav.static-navigation ul.nav-links li a {
    color: rgb(40, 40, 40) !important;
}
/* =======================================================
   KOLOR TEKSTU PO PRZEWINIĘCIU (SCROLL)
   Wklej to na samym końcu pliku style.css
   ======================================================= */

header.site-header.scrolled nav.static-navigation ul.nav-links li a,
header.site-header.scrolled .logo-wrapper a.logo-link,
header.site-header.scrolled .logo-wrapper span.logo-text {
    color: #ffffff !important; /* Zmienia kolor na BIAŁY */
    text-shadow: none !important; /* Opcjonalnie: usuwa cień, bo na czarnym tle jest zbędny */
}