/* styl pre navigaciu */
nav {
    padding: 1rem; /* vnutorne odsadenie */
    background-color: #003366; /* farba pozadia */
    z-index: 1; /* nastavi vrstvu navigacie nad ostatnymi prvkami */
}

/* styl pre navigacny zoznam */
#navigacnyzoznam {
    margin: 0; /* odstrani vonkajsie okraje */
    display: flex; /* pouzije flexbox na usporiadanie prvkov */
    width: 100%; /* sirka na celu sirku rodica */
    padding: 0; /* odstrani vnutorne odsadenie */
    list-style: none; /* odstrani odrazky zo zoznamu */
    gap: 25px; /* medzery medzi prvkami */
    justify-content: center; /* zarovna prvky na stred */
    align-items: center; /* zarovna prvky vertikalne na stred */
    height: 100%; /* vyska na celu vysku rodica */
}

/* styl pre odkazy v navigacnom zozname */
#navigacnyzoznam li a {
    color: white; /* farba textu */
    text-decoration: none; /* odstrani podciarknutie odkazu */
    font-size: 20px; /* velkost pisma */
    font-weight: bold; /* hrubost pisma */
    transition: all 0.2s; /* animacia pre hover efekt */
}

/* styl pre logo v navigacii */
#logohore {
    height: 55px; /* vyska obrazka */
}

/* styl pre navigacne prvky */
#navigacnyzoznam .navigacne_prvky {
    padding: 6px 12px; /* vnutorne odsadenie */
    border-radius: 10px; /* zaoblenie rohov */
    transition: all 0.2s; /* animacia pre hover efekt */
}

/* hover efekt pre navigacne prvky (okrem #livyhladavanie) */
#navigacnyzoznam .navigacne_prvky:not(#livyhladavanie):hover {
    background: white; /* zmeni farbu pozadia pri hoveri */
}

/* hover efekt pre odkazy v navigacii */
#navigacnyzoznam li:hover a {
    color: #1b1a55; /* zmeni farbu textu pri hoveri */
}

/* styl pre vyhladavaci prvok */
#navigacnyzoznam #livyhladavanie {
    position: relative; /* relativna pozicia pre absolutne pozicionovanie vysledkov */
}

/* styl pre vysledky vyhladavania */
#navigacnyzoznam li > #vysledky {
    margin-top: 2rem; /* horny okraj */
    position: absolute; /* absolutna pozicia */
    bottom: 0; /* zarovnanie na spodok */
    transform: translatey(100%); /* posunie vysledky nadol */
    background: #194775; /* farba pozadia */
    border-radius: 17px; /* zaoblenie rohov */
}

/* styl pre jednotlive vysledky */
#navigacnyzoznam li > #vysledky .vysledok {
    padding: 0.25rem 0.5rem; /* vnutorne odsadenie */
}

/* styl pre vstupne pole vyhladavania */
#navigacnyzoznam input {
    padding: 8px 16px; /* vnutorne odsadenie */
    background: white; /* farba pozadia */
    border-radius: 20px; /* zaoblenie rohov */
    outline: none; /* odstrani ohranicenie pri focus */
    border: none; /* odstrani okraje */
}

.jedna_polozka {
    display: none; /* zobrazi prvok ako flex */
}

/* responzivne styly pre obrazovky s max. sirkou 1000px */
@media screen and (max-width: 1000px) {
    #txtnavokn {
        display: none; /* skryje text v navigacii */
    }

    #navigacnyzoznam {
        justify-content: space-between; /* rozlozi prvky s medzerami medzi nimi */
    }

    .jedna_polozka {
        padding: 1rem; /* vnutorne odsadenie */
        display: flex; /* zobrazi prvok ako flex */
    }

    #obrazkuvod > img {
        display: none; /* skryje obrazok */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 520px */
@media screen and (max-width: 520px) {
    #logohore {
        height: 40px; /* zmensi vysku obrazka */
    }

    #navigacnyzoznam {
        gap: 10px; /* zmensi medzery medzi prvkami */
    }

    .jedna_polozka {
        padding: 0; /* odstrani vnutorne odsadenie */
        display: flex;
    }
}

/* responzivne styly pre obrazovky s max. sirkou 420px */
@media screen and (max-width: 420px) {
    #vyhladavanie {
        max-width: 120px; /* obmedzi sirku vyhladavacieho pola */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 375px */
@media screen and (max-width: 375px) {
    #vyhladavanie {
        max-width: 100px; /* dalej obmedzi sirku vyhladavacieho pola */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 355px */
@media screen and (max-width: 355px) {
    #navigacnyzoznam {
        gap: 5px; /* zmensi medzery medzi prvkami */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 340px */
@media screen and (max-width: 340px) {
    #vyhladavanie {
        max-width: 75px; /* dalej obmedzi sirku vyhladavacieho pola */
    }
}



/* styl pre off-screen menu (mobilna navigacia) */
.off-screen-menu {
    background-color: #003366; /* farba pozadia */
    height: 100vh; /* vyska na celu vysku obrazovky */
    width: 80%; /* sirka na 80% obrazovky */
    max-width: 450px; /* maximalna sirka */
    position: fixed; /* fixna pozicia */
    top: 0; /* zarovnanie na vrch */
    right: -450px; /* posunie menu mimo obrazovku */
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    align-items: center; /* zarovna prvky na stred */
    justify-content: center; /* zarovna obsah na stred */
    text-align: center; /* zarovna text na stred */
    font-size: 3rem; /* velkost pisma */
    transition: 0.3s ease; /* animacia pre otvorenie/zatvorenie */
}

/* styl pre zoznam v off-screen menu */
.off-screen-menu > ul {
    list-style: none; /* odstrani odrazky zo zoznamu */
    padding: 0; /* odstrani vnutorne odsadenie */
    text-align: left; /* zarovna text vlavo */
}

/* styl pre polozky v off-screen menu */
.off-screen-menu > ul > li {
    text-align: center; /* zarovna text na stred */
    justify-items: center; /* zarovna prvky na stred */
    align-items: center; /* zarovna prvky vertikalne na stred */
    display: flex; /* pouzije flexbox na usporiadanie */
    margin: 25px 0; /* medzery medzi polozkami */
}

/* aktivny stav off-screen menu */
.off-screen-menu.active {
    right: 0; /* posunie menu do obrazovky */
}

/* styl pre hamburger menu */
.ham-menu {
    height: 50px; /* vyska */
    width: 40px; /* sirka */
    margin-left: auto; /* zarovna napravo */
    position: relative; /* relativna pozicia pre absolutne pozicionovanie */
}

/* styl pre ciary v hamburger menu */
.ham-menu span {
    height: 5px; /* vyska ciary */
    width: 100%; /* sirka ciary */
    background-color: #ffffff; /* farba ciary */
    border-radius: 25px; /* zaoblenie rohov */
    position: absolute; /* absolutna pozicia */
    left: 50%; /* zarovnanie na stred */
    top: 50%; /* zarovnanie na stred */
    transform: translate(-50%, -50%); /* posunie ciary na stred */
    transition: 0.3s ease; /* animacia pre otvorenie/zatvorenie */
}

/* styl pre prvu ciaru v hamburger menu */
.ham-menu span:nth-child(1) {
    top: 25%;
}

/* styl pre tretiu ciaru v hamburger menu */
.ham-menu span:nth-child(3) {
    top: 75%; /* posunie ciaru nadol */
}

/* aktivny stav hamburger menu */
.ham-menu.active span {
    background-color: white; /* farba ciar */
}

.ham-menu.active span:nth-child(1) {
    top: 50%; /* posunie ciaru na stred */
    transform: translate(-50%, -50%) rotate(45deg); /* otoci ciaru o 45 stupnov */
}

.ham-menu.active span:nth-child(2) {
    opacity: 0; /* skryje strednu ciaru */
}

.ham-menu.active span:nth-child(3) {
    top: 50%; /* posunie ciaru na stred */
    transform: translate(-50%, -50%) rotate(-45deg); /* otoci ciaru o -45 stupnov */
}