/* Globální nastavení */
body {
    background-color: #b8d4e0; /* Barva pozadí stránky */
    font-family: Arial, sans-serif; /* Font pro celý text */
    margin: 0; /* Zrušení výchozího marginu */
    padding: 0; /* Zrušení výchozího paddingu */
    width: 100%; /* Zajištění správné šířky */
    width: 100vw; /* Šířka záhlaví přes celé okno */
    box-sizing: border-box; /* Zahrne padding do celkové šířky */    overflow-x: hidden; /* Skryje horizontální scroll, pokud nějaký vzniká */
}

/* Alternativní barvy pro řádky v tabulkách */
.alternate-rows tbody tr:nth-child(even) {
    background-color: #98c9df; /* Barva pozadí pro sudé řádky */
}

.alternate-rows tbody tr:nth-child(odd) {
    background-color: #b8d4e0; /* Barva pozadí pro liché řádky */
}

/* Styl pro hlavičku */
header {
    background-color: #43a6c4; /* Barva pozadí pro header */
    padding: 10px 0; /* Vnitřní odsazení */
    box-sizing: border-box; /* Zahrne padding do celkové šířky */
}

/* Navigační menu */
nav {
    display: flex; /* Flexbox pro uspořádání prvků */
    justify-content: space-between; /* Prostor mezi prvky */
    align-items: center; /* Vertikální zarovnání */
    padding: 0 20px; /* Vnitřní okraj horizontálně */
}

.navbar-container {
    display: flex; /* Flexbox pro horizontální zarovnání */
    align-items: center; /* Vertikální zarovnání na střed */
    justify-content: space-between; /* Vytvoří prostor mezi názvem stránky a menu */
    padding: 0 10px; /* Vnitřní okraj horizontálně */
    width: 95%; /* Zajištění šířky navigace na 100% */
}

/* Styl pro aktuální stránku */
.current-page {
    color: white; /* Barva textu */
    font-weight: bold; /* Tučné písmo */
    font-size: 20px; /* Velikost písma */
    text-align: left; /* Zarovnání textu vlevo */
    margin-right: auto; /* Automatická mezera vpravo pro zarovnání vlevo */
}

/* Menu */
.menu {
    list-style-type: none; /* Zrušení výchozího seznamového stylu */
    margin: 0; /* Zrušení marginu */
    padding: 0; /* Zrušení paddingu */
    display: flex; /* Flexbox pro rozložení menu */
    flex-wrap: wrap; /* Povolení zalamování položek */
    justify-content: center; /* Zarovnání menu na střed */
    /* gap: 10px; /* Mezera mezi položkami */
    width: 100%; /* Šířka menu se přizpůsobí obrazovce */
    box-sizing: border-box; /* Zahrne padding a border do šířky */
}

/* Menu položky */
.menu > li {
    display: inline-block; /* Zobrazení položek vedle sebe */
    position: relative; /* Pozice pro dropdown */
    margin: 2px; /* Mezera mezi položkami menu */
}

/* Odkazy v menu */
.menu > li > a, .dropbtn {
    display: inline-block; /* Odkazy jako bloky */
    color: white; /* Barva textu */
    text-align: center; /* Zarovnání textu na střed */
    padding: 14px 16px; /* Vnitřní okraje */
    text-decoration: none; /* Zrušení podtržení */
    font-size: 22px;
    background-color: #43a6c4; /* Barva pozadí */
    border-radius: 5px; /* Kulaté rohy */
    white-space: nowrap; /* Zabránění zalamování textu uvnitř odkazu */
}

/* Hover efekt pro odkazy */
.menu > li > a:hover, .dropdown:hover .dropbtn {
    background-color: #061e65; /* Barva pozadí při hoveru */
}

/* Dropdown menu */
.dropdown-content {
    display: none; /* Skrytí dropdownu */
    position: absolute; /* Absolutní pozice */
    background-color: #43a6c4; /* Barva pozadí pro dropdown */
    min-width: 200px; /* Minimální šířka */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Stín */
    z-index: 1; /* Z-index pro překrytí */    
}

/* Odkazy v dropdownu */
.dropdown-content a {
    color: white; /* Barva textu */
    padding: 12px 16px; /* Vnitřní okraje */
    text-decoration: none; /* Zrušení podtržení */
    display: block; /* Blokový prvek */
    text-align: left; /* Zarovnání textu vlevo */
    font-size: 18px; /* Velikost písma v dropdownu (změňte podle potřeby) */
}

/* Hover efekt pro odkazy v dropdownu */
.dropdown-content a:hover {
    background-color: #061e65; /* Barva pozadí při hoveru */
}

/* Zobrazení dropdownu při hoveru */
.dropdown:hover .dropdown-content {
    display: block; /* Zobrazení dropdownu */
}

/* Media query pro malé obrazovky */
@media screen and (max-width: 768px) {
    .navbar-container {
        flex-direction: column; /* Změníme na vertikální uspořádání */
        align-items: flex-start; /* Zarovnáme vše nalevo */
        text-align: center; /* Zarovnání textu na střed */
    }

    /* Název stránky (nyní bude zobrazen nad menu) */
    .current-page {
        margin-bottom: 10px; /* Mezera pod názvem stránky */
        font-size: 20px; /* Velikost písma pro mobil */
        font-weight: bold;
    }

    /* Menu */
    .menu {
        display: flex;        
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu > li {
        text-align: center; /* (nové) Zarovnání textu na střed */
    }

    .menu > li > a {
        font-size: 18px; /* (nové) Zmenšení písma pro lepší čitelnost */
    }
}

/* Styl pro footer */
footer {
    background-color: #43a6c4; /* Barva pozadí footeru */
    color: white; /* Barva textu */
    text-align: center; /* Zarovnání textu na střed */
    padding: 20px 0; /* Vnitřní okraje */
    position: relative; /* Relativní pozice */
    bottom: 0; /* Umístění na spodní okraj */
    width: 100%; /* Šířka 100% */
}

/* Kontejner pro footer */
.footer-container {
    max-width: 1200px; /* Maximální šířka footeru */
    margin: 0 auto; /* Centrování */
}

/* Styl pro text v footeru */
footer p {
    margin: 5px 0; /* Mezery kolem textu */
    color: white;
}

/* Odkazy v footeru */
footer a {
    color: white; /* Barva textu */
    text-decoration: none; /* Zrušení podtržení */
}

/* Hover efekt pro odkazy v footeru */
footer a:hover {
    text-decoration: underline; /* Podtržení při hoveru */
}

/* Styl pro menu v footeru */
.footer-menu {
    list-style: none; /* Zrušení výchozího seznamového stylu */
    padding: 0; /* Zrušení paddingu */
    margin: 10px 0; /* Mezery kolem menu */
    display: flex; /* Flexbox pro rozložení */
    justify-content: center; /* Zarovnání na střed */
}

/* Styl pro položky menu v footeru */
.footer-menu li {
    margin: 0 10px; /* Mezery mezi položkami */
}

/* Odkazy v menu footeru */
.footer-menu li a {
    color: white; /* Barva textu */
}

/* Styl pro hlavní obsah */
main {
    margin: 5px auto; /* Nastavení 5px mezery kolem hlavního obsahu a automatické centrování */
    padding: 20px; /* Volitelný padding pro vnitřní okraje */
    background-color: #bebebe; /* Barva pozadí */
    border-radius: 8px; /* Zaoblení rohů */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Stín */
    max-width: 800px; /* Maximální šířka hlavního obsahu */
}

/* Styl pro nadpisy */
h2 {
    text-align: center; /* Zarovnání nadpisu na střed */
    color: #333; /* Barva textu */
    margin-bottom: 20px; /* Mezery pod nadpisem */
}

/* Styl pro odstavce */
p {
    color: #555; /* Barva textu */
    line-height: 1.6; /* Výška řádku pro lepší čitelnost */
    margin: 0 10px 15px; /* Nastavení marginu pro odstavce (0 nahoře a dole, 10px vlevo a vpravo) */
    font-size: 20px;
}