/* ============================
   RESET A ZÁKLADNÍ STYLOVÁNÍ
   ============================ */
   body {
    font-family: 'Roboto', Arial, sans-serif; /* Použití tenkého, bezpatkového fontu Roboto */
    font-weight: 100; /* Nastavení velmi tenké váhy písma */
    margin: 0; /* Odstranění výchozího odsazení */
    padding: 0; /* Odstranění výchozího vnitřního odsazení */
}

/* ============================
   STYLIZACE HLAVIČKY A NAVIGACE
   ============================ */
header {
    background-color: #232d26; /* Nastavení tmavého pozadí hlavičky */
    padding: 20px 0; /* Svislé odsazení pro lepší vzhled */
    position: fixed; /* Hlavička je fixní, vždy viditelná na vrchu stránky */
    width: 100%; /* Zajištění, že hlavička zabírá celou šířku stránky */
    top: 0;
    left: 0;
    z-index: 1000; /* Zajištění, že hlavička je nad ostatním obsahem */
}

header nav {
    display: flex;
    justify-content: space-between; /* Rozprostření položek na obě strany */
    align-items: center; /* Vyrovnání položek ve svislém směru */
    padding: 0 20px; /* Vnitřní odsazení kolem menu */
}

header nav ul {
    list-style: none; /* Odstranění odrážek u seznamu */
    margin: 0; /* Odstranění výchozího vnějšího odsazení */
    padding: 0; /* Odstranění výchozího vnitřního odsazení */
    display: flex; /* Zobrazení položek vedle sebe */
    justify-content: flex-end; /* Vyrovnání položek na pravou stranu */
    align-items: center; /* Vyrovnání položek ve svislém směru */
}

header nav ul li {
    margin: 0 15px; /* Vnější odsazení mezi položkami menu */
}

header nav ul li a {
    color: white; /* Nastavení bílé barvy textu */
    text-decoration: none; /* Odstranění podtržení odkazů */
    font-weight: bold; /* Zvýraznění textu tučným písmem */
}

header nav ul li a:hover {
    text-decoration: underline; /* Podtržení odkazu při najetí myší */
}

/* ============================
   STYLIZACE NÁZVU STRÁNKY A SEKCE
   ============================ */
#siteName {
    font-family: 'Roboto', Arial, sans-serif; /* Stejný font jako v menu */
    font-weight: 100; /* Zvýraznění názvu */
    color: white; /* Bílá barva textu */
    font-size: 20pt;
    margin-left: 15px; 
    text-align: left;
}

.section-title {
    font-family: 'Roboto', Arial, sans-serif; /* Použití fontu Roboto */
    font-weight: 100; /* Tenký styl písma */
    color: white; /* Barva textu */
    margin-left: auto; /* Posun napravo od hamburgerového menu */
    padding-right: 20px; /* Odsazení textu od pravého okraje */
    text-align: right; /* Zarovnání textu doprava */
    display: none; /* Výchozí skrytí, zobrazí se na konkrétní stránce */
}

/* ============================
   LANDING TEXT
   ============================ */
   

    .intro-text {
        position: fixed;
        bottom: 40px; /* Odsazení 40 pixelů od spodního okraje okna */
        width: 100%; /* Zajištění, že text zabere celou šířku */
        text-align: center; /* Centrovaný text */
        padding: 20px; /* Vnitřní odsazení */
        background-color: rgba(255, 255, 255, 0.8); /* Jemné pozadí pro lepší čitelnost */
    }



.intro-text h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.intro-text p {
    font-size: 18px;
    margin-bottom: 20px;
}

.btn-jumpto-fotografie {
    display: inline-block;
    padding: 10px 20px;
    background-color: #232d26; /* Stejná barva jako hlavička */
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.btn-jumpto-fotografie:hover {
    background-color: #333; /* Mírně tmavší při hover */
}

/* ============================
   HAMBURGER MENU
   ============================ */
.hamburger {
    display: none; /* Skryto na větších obrazovkách */
    flex-direction: column; /* Zobrazení tří čar vertikálně */
    cursor: pointer; /* Ukazatel myši změní na kurzor */
    margin-left: auto; /* Ujistěte se, že není žádné odsazení */
    align-items: flex-start; /* Zarovnání čar hamburgerového menu vlevo */
    justify-content: flex-start; /* Ujistěte se, že je celé hamburger menu zarovnáno vlevo */
}

.hamburger div {
    width: 30px;
    height: 1px; /* tlouštka čáry hamburger menu */
    background-color: white; /* Bílé čáry hamburger menu */
    margin: 5px 0; /* Odsazení mezi čárami */
}

/* ============================
   SEKCE "LANDING" A VIDEO KONTEJNER
   ============================ */
.landing {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 60px; /* Přidání marže, aby video nebylo zakryto fixním menu */
}

#landingVideo {
    width: 100%; /* Video zabírá celou šířku */
    height: 100%; /* Video zabírá celou výšku */
    object-fit: cover; /* Video pokrývá celý kontejner, bez černých pruhů */
    margin: 0; /* Odstranění nežádoucího vnějšího odsazení */
    padding: 0; /* Odstranění nežádoucího vnitřního odsazení */
    position: absolute; /* Video je pozicováno absolutně v rámci kontejneru */
    top: 10%; /* Vycentrování videa svisle */
    left: 50%; /* Vycentrování videa vodorovně */
    transform: translate(-50%, -25%); /* Vycentrování pomocí transformace */
}

.video-container {
    position: relative;
    width: 100%; /* Kontejner zabírá celou šířku */
    height: 100%; /* Kontejner zabírá celou výšku */
    overflow: hidden; /* Skrytí obsahu přesahujícího kontejner */
    margin: 0; /* Odstranění nežádoucího vnějšího odsazení */
    padding: 0; /* Odstranění nežádoucího vnitřního odsazení */
}

/* ============================
   MEDIA QUERIES (RESPONZIVNÍ DESIGN)
   ============================ */
@media (max-width: 768px) {
    /* Mobilní stylování pro hlavičku a navigaci */
    header nav ul {
        flex-direction: column; /* Položky menu jsou vertikálně seřazeny */
        position: fixed; /* Fixní pozice menu na mobilu */
        top: 60px; /* Odsazení od vrchu obrazovky */
        right: 0;
        width:60%; /* Menu nezabírá celou šířku obrazovky */
        background-color: #232d26; /* Tmavé pozadí menu */
        max-height: 0; /* Skryté menu (výchozí stav) */
        overflow: hidden; /* Skryté položky mimo viditelnou oblast */
        transition: max-height 0.3s ease-in-out; /* Plynulý přechod při otevírání/zavírání */
        align-items: flex-start; /* Zarovnání položek menu vlevo */
        padding-left: 20px; /* Přidání odsazení rozbaleného menu zleva */
    }

    header nav ul.open {
        max-height: 400px; /* Nastavení maximální výšky pro zobrazení všech položek */
        top: 70px; /* Ujistěte se, že toto odpovídá odsazení výše */
    }

    header nav ul li {
        margin: 15px 0; /* Svislé odsazení mezi položkami */
        text-align: right; /* Zarovnání textu v položkách menu vlevo */
    }

    .hamburger {
        display: flex; /* Zobrazení hamburger menu */
    }

    /* Mobilní stylování pro název sekce */
    .section-title {
        display: block; /* Zobrazení názvu oddělení na mobilních zařízeních */
    }

    /* Přidání marže pro obsah pod fixním menu */
    .landing {
        margin-top: 60px;
    }
}


/* login upravy ikon */
#togglePassword svg {
    width: 24px;
    height: 24px;
    color: #555; /* Barva ikony */
    stroke-width: 2;
}

/*pro landing page*/
@media (max-width: 768px) {
    .intro-text {
        position: fixed;
        bottom: 30px; /* Odsazení 40 pixelů od spodního okraje */
        width: 90%; /* Zajištění, že text nepřesáhne šířku obrazovky */
        left: 50%; /* Vycentrování textu */
        transform: translateX(-50%); /* Posunutí textu na střed */
        text-align: center; /* Centrovaný text */
        padding: 15px; /* Snížení paddingu pro menší obrazovky */
        font-size: 16px; /* Menší písmo pro lepší čitelnost na mobilu */
        background-color: rgba(255, 255, 255, 0.9); /* Jemné pozadí */
    }

    .intro-text h2 {
        font-size: 24px; /* Menší nadpis pro mobilní zařízení */
        margin-bottom: 8px; /* Menší mezera pod nadpisem */
    }

    .intro-text p {
        font-size: 14px; /* Menší písmo pro odstavec */
        margin-bottom: 15px; /* Menší mezera pod textem */
    }
}

/*pro home napis*/
.no-underline {
    text-decoration: none; /* Odstraní podtržení */
    color: inherit; /* Zachová původní barvu textu */
}

.no-underline:hover {
    text-decoration: none; /* Ponechá text bez podtržení i při hover */
}

/*instagram odkaz*/
.instagram-link {
    text-align: center;
    margin-top: 20px;
}

.instagram-icon {
    width: 30px; /* Nastavte požadovanou šířku */
    height: auto; /* Automaticky upraví výšku podle šířky */
    margin-right: 4px; /* Přidá mezírku mezi ikonou a textem */
    vertical-align: middle; /* Zarovná ikonu s textem */
    background-color: transparent; /* Přidáno pro zajištění průhlednosti */
}

.instagram-username {
    margin-top: 5px;
    font-size: 14px;
    color: #000;
}


#menu li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgb(171, 168, 168);
    /* color: inherit; */ /* Zachování barvy textu */
}