/* style.css - WERSJA POPRAWIONA I FINALNA */

/* Czcionki */
body {
    padding-top: 56px; /* Wysokość nawigacji Bootstrapa */
    font-family: Arial, sans-serif; /* Domyślna czcionka dla reszty tekstu */
    line-height: 1.6;
    overflow-x: hidden; /* Zapobiega poziomemu przewijaniu */
}

/* DODANE: Płynne przewijanie i offset dla przewijania do kotwic */
html {
    scroll-behavior: smooth; /* Zapewnia płynne przewijanie do sekcji */
    /* WAŻNE: Dostosuj tę wartość, aby nawigacja nie zakrywała nagłówków sekcji. */
    /* Eksperymentuj z nią (np. 80px, 100px, 120px) aż uzyskasz idealne wyśrodkowanie. */
    scroll-padding-top: 100px; 
}


/* Nowa czcionka dla nagłówków */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Czcionka Poppins dla wszystkich nagłówków */
}


/* Dostosowanie nawigacji: domyślnie ciemne, ale możesz zrobić przezroczyste na początku */
.navbar {
    transition: background-color 0.3s ease-in-out; /* Płynne przejście koloru tła */
    z-index: 1030; /* Zapewnij, że jest nad innymi elementami */
    /* Dodatkowe dla inteligentnej nawigacji */
    position: fixed;
    top: 0;
    width: 100%;
    transform: translateY(0); /* Domyślnie widoczny */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Płynna animacja */
}

/* Menu staje się nieprzezroczyste po przewinięciu */
.navbar.scrolled {
    background-color: rgba(33, 37, 41, 0.95) !important; /* Ciemne tło z lekką przezroczystością */
}

/* Ukrycie nawigacji przez JavaScript */
.navbar.navbar-hidden {
    transform: translateY(-100%); /* Przesuwa navbar całkowicie poza ekran w górę */
}


/* --- Style dla sekcji paralaksy --- */
.parallax-container {
    position: relative; /* Pozostaje względne dla pozycjonowania content-overlay */
    display: flex; /* Do centrowania treści */
    align-items: center;
    justify-content: center;
    color: white; /* Kolor tekstu nad obrazkiem */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Cień pod tekstem dla lepszej czytelności */

    /* WŁAŚCIWOŚCI PARALAKSY CSS - PRZYWRÓCONE */
    background-size: cover; /* Obrazek pokrywa całą sekcję */
    background-position: center; /* Wyśrodkuj obrazek */
    background-attachment: fixed; /* KLUCZ: OBRAZEK TŁA JEST PRZYKLEJONY DO VIEWPORTU */
    background-repeat: no-repeat; /* Zapobiega powtarzaniu się tła */

    min-height: 100vh; /* Domyślna wysokość sekcji paralaksy. Możesz dostosować */

    /* === DODANE DLA EFEKTU FADE-IN === */
  }




/* Usunięto .hero-bg-img, bo obrazy są teraz w tle CSS */


/* Indywidualne obrazy tła dla każdej sekcji paralaksy - PRZYWRÓCONE */
.parallax-bg-1 {
    background-image: url('tlo1.webp'); 
    min-height: 100vh; 
    background-color: #333; /* Opcjonalnie: kolor zastępczy, który pojawi się przed obrazkiem */
}

.parallax-bg-2 {
    background-image: url('tlo2.webp'); 
    min-height: 120vh; 
    background-color: #333; 
}

.parallax-bg-3 {
    background-image: url('tlo3.webp'); 
    min-height: 90vh; 
    background-color: #333; 
}

.parallax-bg-4 {
    background-image: url('tlo4.webp'); 
    min-height: 110vh;
    background-color: #333; 
}

.content-overlay {
    position: relative; /* Treść nad obrazkiem */
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3); /* Lekkie, ciemne tło dla czytelności tekstu */
    padding: 20px 40px;
    border-radius: 8px;
    max-width: 80%; /* Ogranicz szerokość treści */
}

/* Zmiany dla sekcji "O Nas", "Nasze Usługi" i "Kontakt" */
#sekcja1,
#sekcja2,
#sekcja3 {
    min-height: 75vh; /* Wysokość dla sekcji */
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #2b3035; /* Jaśniejsza, bardzo ciemna szarość */
    color: var(--bs-white); /* Ustawienie domyślnego koloru tekstu na biały */
}

/* Nagłówki h2 w tych sekcjach */
#sekcja1 h2,
#sekcja2 h2,
#sekcja3 h2 {
    color: var(--bs-info); /* Jasnoniebieski z Bootstrapa, żeby dodać akcent */
}

/* Style dla kart usług w ciemnej sekcji */
#sekcja2 .card {
    border: none;
    border-radius: 10px;
    transition: transform 0.2s ease-in-out;
    background-color: var(--bs-body-bg); /* Tło karty - domyślnie białe z Bootstrapa */
    color: var(--bs-body-color); /* Kolor tekstu w karcie - domyślny ciemny */
}

#sekcja2 .card:hover {
    transform: translateY(-5px);
}

/* Zwiększenie rozmiaru kart w sekcji "Usługi" (#sekcja2) */
#sekcja2 .card {
    min-height: 300px; /* Minimalna wysokość karty */
}

#sekcja2 .card-body {
    padding: 2.5rem !important; /* Większy padding wewnątrz karty */
    display: flex; /* Użyj flexbox, aby treść karty była lepiej rozłożona */
    flex-direction: column;
    justify-content: center; /* Wyśrodkuj zawartość pionowo */
    align-items: center; /* Wyśrodkuj zawartość poziomo */
    text-align: center; /* Upewnij się, że tekst jest wyśrodkowany */
}

#sekcja2 .card-title {
    font-size: 1.75rem; /* Zwiększ rozmiar tytułu karty */
    margin-bottom: 1rem;
}

#sekcja2 .card-text {
    font-size: 1.1rem; /* Zwiększ rozmiar tekstu w karcie */
}

/* NOWE STYLE DLA LINKÓW W SEKCJACH TREŚCI - Numer telefonu i Email */
#sekcja1 a,
#sekcja3 a {
    color: var(--bs-info); 
    text-decoration: none; 
    transition: color 0.3s ease; 
}

#sekcja1 a:hover,
#sekcja3 a:hover {
    color: var(--bs-primary); 
    text-decoration: none; 
}


/* --- COOKIE CONSENT BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Ciemne tło, lekko przezroczyste */
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Pozwala na zawijanie elementów na mniejszych ekranach */
    z-index: 9999; /* Zawsze na wierzchu */
    gap: 10px; /* Odstęp między elementami */
    font-size: 0.9em;
    transform: translateY(0); /* Domyślnie widoczny */
    transition: transform 0.5s ease-out; /* Animacja chowania */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.cookie-banner.hidden {
    transform: translateY(100%); /* Przesunięcie poza ekran w dół */
    opacity: 0; /* Dodatkowo: ukrycie wizualne */
    pointer-events: none; /* Kluczowe: wyłącza interakcje myszy */
}

.cookie-banner p {
    margin-bottom: 0;
    margin-right: 15px; /* Odstęp od przycisków */
    text-align: center;
    flex-grow: 1; /* Tekst zajmuje dostępną przestrzeń */
}

.cookie-banner .btn {
    white-space: nowrap; /* Zapobiega łamaniu się tekstu w przycisku */
}

/* --- POLITYKA PRYWATNOŚCI SEKCJA --- */
.privacy-policy-section {
    position: fixed; /* Pozostaje na stałej pozycji, niezależnie od przewijania */
    top: 0; /* Zaczyna się od samej góry viewportu */
    left: 0; /* Zaczyna się od lewej krawędzi viewportu */
    width: 100%; /* Rozciąga się na całą szerokość viewportu */
    height: 100%; /* Rozciąga się na całą wysokość viewportu */
    overflow-y: auto; /* Włącz przewijanie wewnętrzne, jeśli treść jest dłuższa niż viewport */
  background-color: rgba(0, 0, 0, 0.95); /* Ważne: to musi być obecne */
    z-index: 10000; /* Zawsze na wierzchu, ponad wszystkimi innymi elementami */
    display: flex; /* Użyj flexboxa do centrowania zawartości */
    justify-content: center; /* Wyśrodkuj poziomo zawartość */
    padding: 50px 15px; /* Dodatkowy padding, aby treść nie przylegała do krawędzi */
    color: white; /* Kolor tekstu w polityce prywatności */
    /* Dodatkowo dla płynnego pojawiania się, jeśli chcesz */
    opacity: 0; /* Początkowo niewidoczna, gdy d-none zostanie usunięte */
    transition: opacity 0.3s ease-in-out; /* Płynne pojawianie się */
    pointer-events: none; /* Domyślnie brak interakcji, gdy ukryta przez d-none */
}

/* Gdy JS usunie d-none, aktywuj pełną widoczność i interakcje */
.privacy-policy-section:not(.d-none) {
    opacity: 1;
    pointer-events: auto;
}


.privacy-policy-section h2,
.privacy-policy-section h3 {
    color: var(--bs-primary); /* Użyj koloru primary z Bootstrapa */
    margin-bottom: 1rem;
}

.privacy-policy-section ul {
    list-style-type: disc;
    margin-left: 20px;
}

.privacy-policy-section ul li {
    margin-bottom: 0.5rem;
}

/* Stylizacja linku email w polityce prywatności */
.privacy-policy-section #email-display-policy a { /* Poprawiony selektor na link */
    color: var(--bs-primary); 
    text-decoration: underline;
}

/* --- Style dla przycisku "Scroll to Top" --- */
#scroll-to-top {
    position: fixed;
    bottom: 20px; 
    right: 20px; 
    background-color: rgba(0, 123, 255, 0.7); 
    color: white; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; 
    text-decoration: none; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 
    cursor: pointer;
    opacity: 0; /* Domyślnie niewidoczny */
    visibility: hidden; /* Ukryj z DOM, by nie był interaktywny */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
    z-index: 1000; 
}

#scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}


/* --- Responsywność dla urządzeń mobilnych (Poniżej 768px szerokości) --- */
@media (max-width: 768px) { 
    
    body {
        padding-top: 56px; 
    }

    html {
        scroll-padding-top: 80px; /* Może być mniejsza wartość dla mobilnych */
    }

    .content-overlay h1 {
        font-size: 2.2rem !important; 
    }
    .content-overlay p {
        font-size: 0.9rem !important; 
    }
    .lead { 
        font-size: 1rem !important;
    }
    .btn-lg { 
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .content-overlay {
        padding: 15px 25px !important; 
        max-width: 95% !important; 
    }

    /* Kluczowe zmiany dla paralaksy na urządzeniach mobilnych - PRZYWRÓCONE */
    .parallax-container {
        background-attachment: scroll !important; /* Włącz normalne przewijanie na mobile */
        min-height: 60vh !important; /* Zmniejsz wysokość sekcji na mobile */
    }

    /* Sekcje treści na mobile */
    #sekcja1,
    #sekcja2,
    #sekcja3 {
        min-height: auto !important; 
        padding-top: 3rem !important; 
        padding-bottom: 3rem !important;
        background-color: #2b3035 !important; 
        color: var(--bs-white) !important; 
    }
    
    /* Dopasowanie kart na mobile */
    #sekcja2 .card {
        min-height: auto !important; 
        padding: 1.5rem !important; 
    }
    #sekcja2 .card-body {
        padding: 1.5rem !important; 
    }
    #sekcja2 .card-title {
        font-size: 1.5rem !important; 
    }
    #sekcja2 .card-text {
        font-size: 0.9rem !important; 
    }

    /* Responsywność banera cookie */
    .cookie-banner {
        flex-direction: column;
        padding: 10px 15px;
    }
    .cookie-banner p {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Responsywność polityki prywatności */
    .privacy-policy-section {
        padding: 30px 10px; /* Mniejszy padding na mobilnych */
    }
}