header {
    position: absolute; /* Ustawia nagłówek w pozycji absolutnej względem najbliższego pozycjonowanego przodka */
    top: 0; /* Ustawia odległość od górnej krawędzi na 0 (przykleja do góry) */
    left: 0; /* Ustawia odległość od lewej krawędzi na 0 */
    width: 100%; /* Ustawia szerokość nagłówka na 100% szerokości okna/przodka */
    min-width: 1000px; /* Minimalna szerokość nagłówka to 1000 pikseli */
    height: 90px; /* Wysokość nagłówka to 90 pikseli */
    z-index: 1; /* Ustawia warstwę (nad innymi elementami) — im wyższa wartość, tym bliżej przodu */
    background: #6196ad; /* Kolor tła nagłówka */
}

#header_contact {
    width: 100%; /* Pełna szerokość kontenera */
    height: 30px; /* Wysokość kontaktowego paska nagłówka */
}

.header_block {
    width: 100%; /* Pełna szerokość */
    max-width: 1200px; /* Maksymalna szerokość kontenera to 1200 pikseli */
    height: 100%; /* Taka sama wysokość jak kontener nadrzędny */
    margin: 0 auto; /* Wyśrodkowanie poziome (auto marginesy z lewej i prawej) */
}

.header_content_element_1 {
    height: 100%; /* Wysokość równa kontenerowi nadrzędnemu */
    margin-left: 10px; /* Lewy margines 10 pikseli */
    float: left; /* Ustawia element do lewej strony (pływający) */
}

.header_content_element_1:first-of-type {
    margin-left: 0; /* Jeśli to pierwszy taki element, nie stosuj lewego marginesu */
}

.header_content_element_1 > img {
    height: calc(100% - 8px); /* Oblicza wysokość jako 100% minus 8 pikseli (np. na marginesy) */
    margin: 4px; /* Margines dookoła obrazka 4 piksele */
    display: block; /* Obrazek jest blokowy (bez dodatkowego miejsca pod spodem) */
    float: left; /* Obrazek przylega do lewej strony */
}

.header_content_element_1 > a {
    height: 100%; /* Wysokość linku to 100% rodzica */
    font: 0.8em/30px "OpenSans"; /* Czcionka o rozmiarze 0.8em, wysokość linii 30px, font "OpenSans" */
    text-decoration: none; /* Bez podkreślenia */
    color: #fff; /* Biały kolor tekstu */
    display: block; /* Link jako element blokowy */
    float: left; /* Przylega do lewej strony */
}

.header_content_element_1 > a:hover {
    text-decoration: underline; /* Podkreślenie linku po najechaniu */
    color: #0000ff; /* Zmiana koloru tekstu na niebieski po najechaniu */
}

.header_content_element_2 {
    height: 100%; /* Pełna wysokość względem kontenera */
    display: block; /* Element blokowy */
    float: right; /* Element przylega do prawej strony */
}

.header_content_element_2 > img {
    height: 100%; /* Obrazek zajmuje całą wysokość kontenera */
    cursor: pointer; /* Kursor zmienia się na "klikający" (rączkę) */
    transition: transform 0.2s; /* Animacja transformacji w czasie 0.2s (płynne przesunięcie) */
}

.header_content_element_2 > img:hover {
    transform: translateY(3px); /* Po najechaniu obrazek przesuwa się o 3px w dół */
}

.header_content_element_3 {
    position: relative; /* Pozycjonowanie względem normalnego położenia */
    top: 4px; /* Przesunięcie o 4 piksele w dół */
    height: 100%; /* Pełna wysokość */
    float: right; /* Element przylega do prawej strony */
    margin-right: 5px; /* Prawy margines 5 pikseli */
}

#header_navigation {
    width: 100%; /* Pełna szerokość */
    height: 60px; /* Wysokość nawigacji 60 pikseli */
    box-shadow: 0 0 5px 1px #4e8197; /* Cień dookoła paska nawigacji */
}

#header_block_logo {
    height: 100%; /* Pełna wysokość w ramach paska nawigacji */
    display: inline-block; /* Element liniowo-blokowy (działa jak tekst, ale można ustawiać wymiary) */
    text-decoration: none; /* Bez podkreślenia (jeśli to link) */
}

#header_block_logo > img {
    width: 60px; /* Obrazek logo ma szerokość 60px */
    height: 60px; /* I wysokość 60px */
    margin-right: 6px; /* Odstęp po prawej stronie obrazka */
    display: block; /* Blokowy obrazek */
    float: left; /* Przylega do lewej strony */
}

#header_block_logo_text {
    height: 60px; /* Wysokość napisu obok logo */
    float: left; /* Ustawia go po lewej stronie obok logo */
}

#header_block_logo_text > p {
    height: 30px; /* Wysokość paragrafu (głównego napisu) */
    display: block; /* Blokowy element */
    font: 1.2em/43px "OpenSans"; /* Większy tekst, wysokość linii 43px */
    color: #fff; /* Biały kolor tekstu */
}

#header_block_logo_text > span {
    height: 30px; /* Wysokość drugiej linii tekstu */
    display: block; /* Blokowy element */
    font: 0.8em/23px "OpenSans"; /* Mniejsza czcionka, niższa linia */
    color: #e3e3e3; /* Jasnoszary kolor tekstu */
}

#header_block_nav {
    height: 100%; /* Pełna wysokość w ramach nawigacji */
    float: right; /* Przylega do prawej strony */
}

#header_block_nav > a {
    height: 100%; /* Wysokość linku = wysokość kontenera */
    font: 1em/60px "OpenSans"; /* Czcionka 1em, linia 60px (dopasowana do wysokości paska) */
    color: #fff; /* Biały tekst */
    text-decoration: none; /* Bez podkreślenia */
    padding: 0 20px; /* Brak odstępu z góry i dołu, zero z lewej i prawej (tu może być literówka – domyślnie daje się np. 0 20px) */
    cursor: pointer; /* Zmienia kursor na rączkę przy najechaniu */
}

#header_block_nav > a:hover {
    color: #2b4854; /* Zmienia kolor tekstu po najechaniu na ciemny niebiesko-szary */
}