/* Basic styles for the entire page */
body, html {
    margin: 0;
    padding: 0;
    font-family: Calibri, sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8; /* Lighter background for the whole page */
}

/* Style for the top black bar (menu) */
header {
    background-color: #000000; /* Black background color */
    padding: 15px 0;
    text-align: center;
    position: relative; /* Pro absolutní pozicování jazykového přepínače */
    display: flex; /* Použijeme flexbox */
    justify-content: center; /* Vycentruje menu */
    align-items: center;
    flex-wrap: wrap; /* Umožní zalomení na menších obrazovkách */
}

/* Style for the navigation menu */
nav {
    /* Žádné specifické marginy, aby mohlo být vycentrováno */
}

nav a {
    color: #ffffff; /* White font color */
    font-weight: bold; /* Bold font */
    text-decoration: none; /* No underline */
    padding: 15px 20px;
    margin: 0 10px;
    font-size: 18px;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

nav a:hover {
    background-color: #333333; /* Background color change on hover */
    border-radius: 5px;
}

/* Styles for the language switcher */
.language-switcher {
    position: absolute; /* Přepínač jazyků zpět na absolutní pozici vpravo */
    top: 50%; /* Vertikálně na střed */
    right: 20px; /* Vpravo od okraje */
    transform: translateY(-50%); /* Dorovnání na skutečný střed */
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.language-switcher .lang-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.language-switcher .lang-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.language-switcher .lang-link.active {
    background-color: #ffffff;
    color: #000000;
    pointer-events: none; /* Disable clicking on active language */
}

/* Main page content */
main {
    text-align: center; /* Center content */
    padding: 50px 20px;
    flex: 1; /* Ensures main content takes available space */
    display: flex; /* Use flexbox for centering content within main */
    flex-direction: column; /* Ensures sections are stacked vertically */
    align-items: center; /* Horizontal centering of content (sections) */
    justify-content: flex-start; /* Align to the start (top) */
}

/* Style for sections within main - added margin for spacing between calculators */
main section {
    width: 100%; /* Ensures section takes full width within main */
    margin-bottom: 40px; /* Adds space below each section */
    max-width: 800px; /* Limit content width */
    display: flex; /* Allows content centering */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Inner padding */
}

main section:last-child {
    margin-bottom: 0; /* No margin below the very last section */
}

/* Container for logos */
.logo-container {
    display: flex; /* Allows logos to be side by side */
    justify-content: center; /* Center logos */
    align-items: center; /* Vertical alignment of logos */
    gap: 60px; /* Space between logos */
    margin-bottom: 30px; /* Padding below logos */
    flex-wrap: wrap; /* Wrap to next line on small screens */
}

/* Style for logos (general) - Unified sizing for visual symmetry */
.logo {
    height: auto; /* Udržuje poměr stran */
    max-height: 140px; /* Maximální výška pro oba loga */
    max-width: 280px; /* Maximální šířka pro oba, aby se menší neroztáhlo nepřirozeně */
    width: auto; /* Zajišťuje, že se šířka přizpůsobí výšce a max-width */
    object-fit: contain; /* Zajišťuje, že se logo vejde do svého prostoru bez ořezání */
}

/* Container specific to this calculator */
.calculator-container {
    background-color: #ffffff;
    padding: 40px; /* Zvětšený padding */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Silnější stín */
    max-width: 600px;
    width: 100%; /* Zajistí, že se roztáhne na celou šířku kontejneru main */
    margin: 0 auto; /* Centrování */
    box-sizing: border-box; /* Zahrnuje padding do šířky */
    text-align: left; /* Text uvnitř kontejneru vlevo */
}

.calculator-container h1 {
    color: #000000; /* Černý nadpis */
    text-align: center;
    margin-bottom: 30px; /* Větší mezera */
    font-size: 2.2em; /* Větší font */
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555; /* Barva popisku */
    font-size: 1.1em; /* Trochu větší písmo pro popisky */
}

input[type="date"] {
    width: calc(100% - 24px); /* Upraveno pro padding a border */
    padding: 12px; /* Větší padding */
    margin-bottom: 25px; /* Větší mezera */
    border: 1px solid #ccc; /* Jemný rámeček */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 16px;
    box-sizing: border-box; /* Důležité pro šířku */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="date"]:focus {
    border-color: #007bff; /* Modrý rámeček při zaměření */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); /* Jemný stín při zaměření */
    outline: none;
}

button[type="submit"] {
    background-color: #000000; /* Černá barva tlačítka */
    color: #ffffff; /* Bílé písmo */
    padding: 15px 30px; /* Větší padding */
    border: none; /* Bez rámečku */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 1.1em; /* Větší písmo */
    font-weight: bold;
    cursor: pointer; /* Změna kurzoru na ruku */
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Plná šířka */
}

button[type="submit"]:hover {
    background-color: #333333; /* Tmavší odstín při najetí myší */
    transform: translateY(-2px); /* Jemný posun nahoru při najetí */
}

/* Styly pro tabulku výsledků */
.result table {
    width: 100%;
    border-collapse: collapse; /* Spojí okraje buněk */
    margin-top: 15px; /* Mezera nad tabulkou */
    font-size: 1em; /* Základní velikost písma */
}

.result th, .result td {
    padding: 12px 15px; /* Větší odsazení pro buňky */
    text-align: left; /* Zarovnání textu vlevo */
    border-bottom: 1px solid #eee; /* Velmi jemné oddělovací linky */
    color: #333; /* Barva textu */
}

.result th {
    display: none; /* Skryje záhlaví */
}

.result tr:nth-child(even) {
    background-color: transparent; /* Zruší střídavé barvy */
}

.result tr:hover {
    background-color: #f5f5f5; /* Jemné zvýraznění při najetí myší */
}

.result .average-date,
.result .info,
.result .error {
    font-weight: bold; /* Zachování tučného písma pro důležité hodnoty */
}

.result .average-date {
    color: #28a745; /* Zelená barva zůstává */
}

.result .info {
    color: #007bff; /* Modrá barva zůstává */
}

.result .error {
    color: #d9534f; /* Červená barva zůstává */
}

/* Úprava stávajícího .result, aby se tabulka správně zobrazila */
.result {
    margin-top: 30px;
    padding: 0; /* Odebereme padding, aby ho tabulka ovládala */
    background-color: #ffffff; /* Bílé pozadí pro celý blok */
    border-radius: 8px; /* Zaoblené rohy celého bloku */
    border: 1px solid #ddd; /* Jemný rámeček místo levého pruhu */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Silnější stín */
    overflow: hidden; /* Zajistí, že rohy se zaoblí i s obsahem */
}

/* Styly pro upozornění v tabulce */
.result .note-text {
    font-size: 0.9em;
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
    color: #666; /* Jemnější barva pro poznámky */
    font-weight: normal; /* Poznámka nemusí být tučná */
}

/* Aby chyby nebo info zprávy mimo tabulku měly padding */
.result p {
    padding: 15px; /* Přidáme padding zpět pro zprávy */
    margin: 0; /* Odebereme margin, aby padding fungoval správně */
    line-height: 1.6;
    background-color: #f0f0f0; /* Lehce šedé pozadí pro info/chyby */
    border-bottom: 1px solid #ddd; /* Oddělovací linka od tabulky */
}
.result p:last-child { /* Poslední odstavec (chyba/info) bez spodní linky */
    border-bottom: none;
}

.result p + table { /* Mezera mezi odstavcem a tabulkou, pokud odstavec existuje */
    margin-top: 0; /* Zrušíme mezery, padding v odstavci to řeší */
}

/* Styl pro patičku */
footer {
    background-color: #f2f2f2; /* Šedé pozadí patičky */
    color: #333333; /* Barva textu pro šedé pozadí */
    padding: 15px 20px; /* **Ještě více zmenšený vertikální padding pro kompaktnost** */
    text-align: center;
    margin-top: auto; /* Přilepí patičku ke spodní části ve flexboxu na body */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Jemný stín nahoře */
    display: flex; /* Použijeme flexbox */
    flex-direction: column; /* Položky patičky budou pod sebou */
    align-items: center; /* Vycentruje horizontálně obsah patičky */
    gap: 10px; /* **Zmenšená mezera mezi hlavními bloky obsahu v patičce (text a loga)** */
}

.footer-content {
    display: flex; /* Flexbox pro obsah patičky (text a loga) */
    flex-direction: column; /* Na menších obrazovkách se srovná do sloupce */
    align-items: center; /* Vycentrovat horizontálně */
    /* **Odstraněno: gap zde by mohl přidávat nežádoucí mezery, když řešíme p přímo** */
    width: 100%;
    max-width: 1000px; /* Omezí šířku obsahu patičky */
}

.footer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* **Odstraněno: gap zde, protože mezery řídíme přímo na <p>** */
    font-size: 0.9em; /* **Mírně zmenšená velikost písma v patičce** */
    color: #333333;
    margin-bottom: 5px; /* **Malý spodní margin, pokud je za textem ještě něco** */
}

.footer-text p {
    margin: 0; /* **Nulujeme výchozí marginy pro <p> tagy** */
    padding: 0; /* **Nulujeme výchozí padding pro <p> tagy** */
    line-height: 1.2; /* **Kompaktní výška řádku pro odstavce v patičce** */
}

.footer-logos {
    display: flex; /* Flexbox pro loga v patičce */
    justify-content: center; /* Vycentruje loga */
    align-items: center; /* Vertikální zarovnání */
    gap: 20px; /* **Mírně zmenšená mezera mezi logy v patičce** */
    flex-wrap: wrap; /* Umožní zalomení na menších obrazovkách */
}

.footer-logo {
    max-height: 55px; /* **Mírně zmenšená maximální výška log v patičce** */
    width: auto; /* Automatická šířka pro zachování poměru stran */
    object-fit: contain; /* Zajistí, že se logo vejde do prostoru bez ořezání */
}

/* Responzivní úpravy */
@media (max-width: 992px) {
    .logo-container {
        flex-direction: column;
        gap: 20px;
    }
    header {
        flex-direction: column; /* Menu a jazykový přepínač pod sebou */
        gap: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    nav {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0;
    }
    nav a {
        margin: 5px 10px;
    }
    .language-switcher {
        position: static; /* Zruší absolutní pozicování */
        margin: 10px auto 0; /* Vycentruje jazykové přepínače pod menu */
        padding-left: 0;
    }
    main {
        padding: 30px 15px;
    }
    .calculator-container {
        padding: 25px;
    }
    .calculator-container h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    input[type="date"], button[type="submit"] {
        padding: 10px;
        font-size: 1em;
    }
    .result {
        padding: 15px;
    }
    .result p {
        font-size: 0.95em;
    }
    .logo {
        max-height: 110px;
        max-width: 220px;
    }
    .result th, .result td {
        padding: 8px 10px;
        font-size: 0.9em;
    }
    footer {
        padding: 10px 15px; /* **Ještě menší padding na malých obrazovkách** */
        gap: 8px; /* **Ještě menší gap na malých obrazovkách** */
    }
    .footer-text {
        font-size: 0.85em; /* **Menší písmo na malých obrazovkách** */
    }
    .footer-text p {
        line-height: 1.15; /* **Ještě kompaktnější výška řádku na malých obrazovkách** */
    }
    .footer-logo {
        max-height: 40px; /* **Menší loga v patičce na menších obrazovkách** */
    }
    .footer-logos {
        gap: 15px; /* **Menší mezera mezi logy v patičce na menších obrazovkách** */
    }
}

@media (max-width: 480px) {
    nav a {
        display: block;
        margin: 5px auto;
        width: fit-content;
    }
    .calculator-container {
        padding: 15px;
    }
    .calculator-container h1 {
        font-size: 1.5em;
    }
    input[type="date"], button[type="submit"] {
        font-size: 0.9em;
    }
    .result p {
        font-size: 0.9em;
    }
    .logo {
        max-height: 90px;
        max-width: 200px;
    }
    .result th, .result td {
        padding: 6px 8px;
        font-size: 0.85em;
    }
    .footer-text {
        font-size: 0.8em; /* **Nejmenší písmo na nejmenších obrazovkách** */
    }
    .footer-text p {
        line-height: 1.1; /* **Nejkompaktnější výška řádku na nejmenších obrazovkách** */
    }
    .footer-logo {
        max-height: 30px; /* **Ještě menší loga v patičce na nejmenších obrazovkách** */
    }
    .footer-logos {
        gap: 10px; /* **Ještě menší mezera mezi logy v patičce na nejmenších obrazovkách** */
    }
}