/* Używamy nowoczesnych reguł resetujących i czcionek */
body {
    font-family: 'Arial', sans-serif; /* Prosta nowoczesna czcionka */
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Jasne, nowoczesne tło */
    color: #333;
    transition: background-color 0.5s ease; /* Płynne przejście koloru tła */
}

.header {
    /* Utrzymanie paska na górze ekranu */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    
    background-color: #214f87; /* Ciemne tło paska */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    
    /* Użycie Flexbox do układu */
    display: flex;
    justify-content: space-between; /* Rozmieszczenie elementów na końcach */
    align-items: center; /* Wyśrodkowanie w pionie */
    padding: 10px 0px;
    height: 70px; /* Stała wysokość paska */
    z-index: 1000; /* Zapewnia, że pasek jest na wierzchu */
}

.hamburger {
    display: none; 
}

/* KONTEINER NA ZDJĘCIA (Lewa strona) */
.logo-container {
    display: flex; /* Flexbox dla ułożenia zdjęć obok siebie */
    gap: 10px; /* Odstęp między zdjęciami */
}

.title {
    display: block;
    margin: auto;
    height: fit-content;
    font-size: 26px;
    font-family: "Relay", Ariel;
    color: white;
}

.square-image {
    width: 70px;
    height: 70px;
    overflow: hidden; /* Ukrycie części obrazu wystającej poza kwadrat */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.square-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Upewnia się, że obrazek wypełni cały kwadrat */
    display: block;
}

/* LINKI NAWIGACYJNE (Prawa strona) */
.nav-links {
    display: flex;
    gap: 0px; /* Odstęp między zakładkami */
}

.nav-item {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    padding: 35px 25px;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.nav-item:hover {
    color: #97defa; /* Niebieski kolor po najechaniu */
    background-color: rgba(255, 255, 255, 0.1);
}

.container {
    width: 100%;
    /*margin: 40px auto;*/
    padding-top: 100px;
    background-color: white;
    border-radius: 8px; /* Zaokrąglone rogi - nowoczesny akcent */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.kontener-kolumn {
    display: flex; 
}

.column {
    flex: 1; /* Pozwala kolumnom równo się rozciągnąć */
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

#image {
    width: 75%;
    height: 75%;
    display: block; /* KLUCZOWE: Obraz musi stać się elementem blokowym */
    margin-left: auto;
    margin-right: auto;
    /*margin: 0px 90px;*/
    /*overflow: hidden;  Ukrycie części obrazu wystającej poza kwadrat
    border-radius: 5px; */
    --x-pos: 50%;
    --y-pos: 50%;
    overflow: hidden;
    position: relative;  
}

#image img {
    width: 100%;
    height: 100%;
   /* object-fit: cover;  Upewnia się, że obrazek wypełni cały kwadrat 
    display: block;*/
}

#image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    /* KLUCZOWE: Początkowo jest niewidoczny */
    opacity: 0; 
    /* KLUCZOWE: Płynne przejście dla efektu wejścia/wyjścia */
    transition: opacity 0.3s ease-out; 

    /* Używamy zmiennych CSS do ustawienia pozycji gradientu */
    background: radial-gradient(
        circle 120px at var(--x-pos) var(--y-pos),
        rgba(255, 255, 255, 1.0) 0%,
        rgba(255, 255, 255, 0.0) 70%
    );
    
    mix-blend-mode: overlay;
}

/* KLUCZOWE: Stan hover. Gdy myszka wejdzie na kontener, refleks staje się widoczny */
#image:hover::after {
    opacity: 1;
}

#image2 {
    width: 25%;
    height: 25%;
    display: block; /* KLUCZOWE: Obraz musi stać się elementem blokowym */
    margin-left: auto;
    margin-right: auto;
    /*margin: 0px 90px;*/
    /*overflow: hidden;  Ukrycie części obrazu wystającej poza kwadrat
    border-radius: 5px; */
    --x-pos: 50%;
    --y-pos: 50%;
    overflow: hidden;
    position: relative;  
}

#image2 img {
    width: 100%;
    height: 100%;
   /* object-fit: cover;  Upewnia się, że obrazek wypełni cały kwadrat 
    display: block;*/
}

#image3 {
    width: 50%;
    height: 50%;
    display: block; /* KLUCZOWE: Obraz musi stać się elementem blokowym */
    margin-left: auto;
    margin-right: auto;
    /*margin: 0px 90px;*/
    /*overflow: hidden;  Ukrycie części obrazu wystającej poza kwadrat
    border-radius: 5px; */
    --x-pos: 50%;
    --y-pos: 50%;
    overflow: hidden;
    position: relative;  
}

#image3 img {
    width: 80%;
    height: 80%;
   /* object-fit: cover;  Upewnia się, że obrazek wypełni cały kwadrat 
    display: block;*/
}

#image3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    /* KLUCZOWE: Początkowo jest niewidoczny */
    opacity: 0; 
    /* KLUCZOWE: Płynne przejście dla efektu wejścia/wyjścia */
    transition: opacity 0.3s ease-out; 

    /* Używamy zmiennych CSS do ustawienia pozycji gradientu */
    background: radial-gradient(
        circle 120px at var(--x-pos) var(--y-pos),
        rgba(255, 255, 255, 1.0) 0%,
        rgba(255, 255, 255, 0.0) 70%
    );
    
    mix-blend-mode: overlay;
}

/* KLUCZOWE: Stan hover. Gdy myszka wejdzie na kontener, refleks staje się widoczny */
#image3:hover::after {
    opacity: 1;
}

.text {
    
    font-size: 26px;
    font-family: "Relay", Ariel;
    color: black;
}

/* Styl dla interaktywnego przycisku */
#zmienKolorBtn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efekt najechania */
    margin-top: 20px;
}

#zmienKolorBtn:hover {
    background-color: #1e7e34;
}

.message {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-left: 5px solid #007bff;
    background-color: #e9ecef;
}

footer {
    text-align: center;
    padding: 10px;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 0.9em;
}

/* Zmień szerokość całego paska przewijania */
body::-webkit-scrollbar {
    width: 8px; /* Zmniejszona szerokość - domyślnie jest ok. 15-17px */
    height: 8px; 
}

/* Zmień kolor tła ścieżki (track) */
body::-webkit-scrollbar-track {
    background: #f1f1f1; /* Bardzo jasne tło */
    border-radius: 10px;
}

/* Zmień kolor samego "uchwytu" (thumb) */
body::-webkit-scrollbar-thumb {
    background: #888; /* Ciemniejszy, ale neutralny kolor */
    border-radius: 10px;
}

/* Kolor po najechaniu myszą na uchwyt */
body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ================================================= */
/* ZAPYTANIE MEDIÓW: WERSJA NA TELEFON      */
/* ================================================= */
@font-face {
    font-family: 'Relay'; /* Nadajesz własną nazwę */
    src: url('fonts/Relay/Relay-Regular.ttf') format('truetype'); /* Dodajemy format TTF */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Pomaga zapobiec migotaniu tekstu podczas ładowania */
}

@media (max-width: 1000px) {
    
    /* 1. Uwidocznienie przycisku hamburgera i zmiana układu header */
    .header {
        justify-content: space-between; /* Logo z lewej, hamburger z prawej */
    }

    .hamburger {
        display: block; /* Uwidocznij przycisk hamburgera */
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        margin-right: 40px;
    }

    .logo-do-schowania {
        display: none !important; /* Ukrywa cały kontener jednego logo */
    }

    .kontener-kolumn {
        /* KLUCZOWA ZMIANA: Zmień kierunek układu z rzędu na kolumnę */
        flex-direction: column; 
    }

    .column {
        /* W układzie kolumnowym element domyślnie zajmuje 100% szerokości, 
           ale możemy to jawnie ustawić, jeśli użyliśmy flex-grow */
        flex: auto;
    }
    
    /* 2. Ukrycie normalnych zakładek i zmiana ich położenia */
    .nav-links {
        /* Przekształcenie z paska poziomego na menu pionowe/rozwijane */
        position: fixed;
        top: 85px; /* Poniżej paska nawigacyjnego */
        right: 0;
        width: 50%;
        /*height: 25vh;  1/4 wysokości widocznego ekranu */
        background-color: #214f87;
        flex-direction: column; /* Linki jeden pod drugim */
        
        /* Domyślnie przesunięte poza ekran (ukryte) */
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out; 
    }

    /* Klasa dodawana przez JavaScript po kliknięciu */
    .nav-links.active {
        transform: translateX(0); /* Przesuń menu na ekran (widoczne) */
    }

    .nav-item {
        padding: 10px 10px;
        border-bottom: 1px solid #444;
        text-align: center;
        width: 100%;
    }
}