/* Základní nastavení stylů pro všechny elementy, okraje stránky, vnitřní odsazení a box-sizing pro zahrnutí paddingu a borderu do výpočtu šířky a výšky elementů */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* plynulé scrollování pro úplně celou stránku */
html {
    scroll-behavior: smooth;
}

/* Základní styly pro celý dokument, tzn. font, mezera mezi řádky, a barva textu */
body {
    font-family: 'Teachers', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Kontejner pro omezení šířky obsahu a zajištění správného paddingu, funguje pro všechny containery na stránce */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* styly pro navigační menu - fixní pozice aby zůstalo nahoře na stránce při scrollování, barva pozadí, menu je po celé šířce stránky, ze spod vrhá malý stín, z-index aby bylo menu nad ostatními elementy, přechod barvy při scrollování */
nav {
    background: white;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    transition: background-color 0.3s ease;
}

/* Efekt průhlednosti menu při scrollování stránkou */
nav.scrolled {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

/* Rozložení kontejneru, ve kterém je logo a menu, pomocí flexboxu rozložení věcí v menu, mezera mezi odkazy, zarovnání na střed */
nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Styly pro navigační menu - flexbox opět pro rozložení odkazů v menu, mezera mezi odkazy je 2rem, zarovnání odkazů na střed */
.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* Odkazy v navigaci - barva textu, žádné podtržení, tučné písmo, přechod barvy při najetí myší */
.nav-menu a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Hover efekt pro odkazy v navigaci - mění barvu při najetí myší na neonově zelenou jako na webu Graphorie */
.nav-menu a:hover {
    color: #00C853;
}

/* Hero sekce s pozadím - pozadí je obrázek z webu Graphorie, velikost obrázku je 100% šířky a výšky tak, aby pokril celou část stránky, barva textu je neonově zelená, odsazení od horního okraje stránky je 60px */
.hero {
    background-image: url('background-dark2.png');
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    color: #00C853;
    margin-top: 60px;
}

/* Nadpis v hero sekci - velikost písma je 4rem, mezera mezi řádky pod nadpisem je 2px */
.hero h1 {
    font-size: 4rem;
    margin-bottom: 2px;
}

/* Podnadpis v hero sekci - o podstatnou část menší než nadpis, aby stránka působila více minimalisticky, mezera mezi podnadpisem a buttonem je 2rem */
.hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* Základní padding pro všechny sekce - padding je 5rem, aby byla stránka více čitelná a přehledná a aby bylo více místa mezi sekcemi */
section {
    padding: 5rem 0;
}

/* Nadpisy všech sekcí - text je vždy uprostřed, a mezera mezi nadpisem a obsahem je 3rem */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

/* Nastavení mřížky pro galerii - 4 sloupce, každý sloupec má 250px, mezera mezi sloupci je 1.5rem a vnější horí odsazení je 2rem */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Položky galerie - pozice relativní, overflow je hidden, aby se obsah vešel do elementu, zaoblení rohů je 8px, menší stín a plynulý pohyb obrázku při najetí myší */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Hover efekt pro položky galerie - při najetí myší se obrázek posune o 5px nahoru */
.gallery-item:hover {
    transform: translateY(-5px);
}

/* Obrázky v galerii - šířka je 100%, výška je 400px, objekt-fit je cover aby se obrázek nedeformoval, ale zvětšil či zmenšil, obrázky se zobrazují jako bloky, transition opět pro plynulý pohyb obrázku při najetí myší */
.gallery-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover efekt pro obrázky v galerii - při najetí myší se obrázek zvětší o 5% */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Správná mřížka pro sekci Koho hledáme - 3 sloupce, každý sloupec má 300px, mezera mezi sloupci je 2rem */
.hledame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Styly pro karty v sekci Koho hledáme - barva pozadí je bílá, vnitřní odsazení je 2rem, zaoblení rohů je 10px, přidán stín a plynulýpohyb karty při najetí myší */
.hledame-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Odsazení textu v kartách. Zajišťuje mezeru mezi textem a buttonem */
.hledame-card p {
    padding-bottom: 1rem;
}

/* Hover efekt pro karty, při najetí myší se karta posune o 5px nahoru */
.hledame-card:hover {
    transform: translateY(-5px);
}

/* Sekce Co nabízíme se světlým šedým pozadím */
.benefity {
    background: #f8f9fa;
}

/* Správná mřížka pro karty - 4 sloupce, každý sloupec má 250px, mezera mezi sloupci je 2rem */
.benefity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Styly pro karty v sekci Co nabízíme - text je vždy uprostřed, a vnitřní odsazení je 2rem */
.benefity-card {
    text-align: center;
    padding: 2rem;
}

/* Ikony v sekci Co nabízíme - velikost ikony je 2.5rem, barva je pro změnu neonově zelená, mezera mezi ikonou a textem je 1.5rem, transition pro plynulý pohyb ikony při najetí myší */
.benefity-icon {
    font-size: 2.5rem;
    color: #00C853;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

/* Hover efekt pro ikony benefitů - při najetí myší se ikona zvětší o 10% */
.benefity-card:hover .benefity-icon {
    transform: scale(1.1);
}

/* Formulář pro přihlášení - jeho maximální šířka je 600px, margin je nastaven tak, aby byl formulář uprostřed stránky */
.formular {
    max-width: 600px;
    margin: 0 auto;
}

/* Skupina částí formuláře - spodní mezera mezi částmi je 1.5rem */
.formular-group {
    margin-bottom: 1.5rem;
}

/* Vstupní pole a textarea - šířka je 100%, vnitřní odsazení je 0.8rem, border je 1px solid aby měl kolem sebe čáru, zaoblení rohů je 5px, velikost písma je 1rem */
.formular-input, .formular-textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

/* Všechna tlačítka - barva jejich pozadí je neonově zelená, barva textu v nich je bílá, vnitřní odsazení 1rem 2rem, border je none aby neměl po okraji čáru, zaoblení rohů je také 5px, kurzor je nastaven na pointer, velikost písma je 1rem, transition znovu pro plynulý přechod barvy tlačítka při najetí myší */
button {
    background: #00C853;
    color: rgb(255, 255, 255);
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}

/* Hover efekt pro tlačítka */
button:hover {
    background: #D3D3D3;
    color: #00C853;
}

/* Styly pro patičku - barva pozadí je tmavá, barva textu je bílá, vnitřní odsazení je 3rem */
footer {
    background: #2d3436;
    color: white;
    padding: 3rem 0;
}

/* Mřížka v patičce - 2 sloupce, mezera mezi sloupci je 4rem */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

/* Styl pro logo v patičce - velikost je 80px, šířka je automaticky nastavena podle velikosti obrázku a mezera mezi logem a textem je 1rem */
.footer-logo {
    height: 80px;
    width: auto;
    margin-bottom: 1rem;
}

/* Obsah patičky nastaven tak, aby byl text vlevo */
.footer-content {
    text-align: left;
}

/* Seznam odkazů v patičce - žádné odrážky pomocí list-style, vnitřní odsazení je 0, vnější horní odsazení je 1rem */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

/* Položky seznamu v patičce - mezery, které mají odkazy mezi sebou */
.footer-nav ul li {
    margin-bottom: 0.5rem;
}

/* Styly pro odkazy v patičce - barva textu je bílá a bez podtržení, plynulý přechod barvy při najetí myší */
.footer-nav ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover efekt pro odkazy v patičce - při najetí myší se barva textu plynule mění na neonově zelenou */
.footer-nav ul li a:hover {
    color: #00C853;
}



/* Sekce s požadavky - pozadí je světle šedé pro kontrast s bílou barvou ostatních barev pozadí*/
.vyzadujeme {
    background-color: #f8f9fa;
}

/* Mřížka pro požadavky - 4 sloupce, každý sloupec má 250px, mezera mezi sloupci je 2rem a vnitřní odsazení je 1rem 0 */
.vyzadujeme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

/* Styly položek požadavků - barva pozadí je bílá, vnitřní odsazení je 2rem, zaoblení rohů je 10px, přidal jsem stín a plynulý pohyb karty při najetí myší */
.vyzadujeme-item {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

/* Hover efekt pro položky požadavků - při najetí myší se karta posune o 5px nahoru */
.vyzadujeme-item:hover {
    transform: translateY(-5px);
}

/* Nadpisy v požadavcích - mezera mezi nadpisem h3 a textem je 1rem a barva textu je tmavě šedá */
.vyzadujeme-item h3 {
    margin: 1rem 0;
    color: #333;
}

/* Text v požadavcích - barva textu je světlejší než barva nadpisu a mezera mezi řádky je 1.6 */
.vyzadujeme-item p {
    color: #666;
    line-height: 1.6;
}

/* Odsazení obsahu sekce Co budeš dělat - vnitřní odsazení z leva je 2rem */
.prace-content {
    padding-left: 2rem;
}

/* Seznam v sekci Co budeš dělat - vnitřní odsazení z leva je 1.5rem */
.prace-content ul {
    padding-left: 1.5rem;
}

/* Základní styly pro hamburger menu - ze základu je na počítači skryt */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
}

/* Styly pro jednotlivé "proužky" hamburger menu - jsou 3, šířka je 25px, výška jsou 3px, mezera mezi nimi je 5px, barva je černá a přechod je 0.3s */
.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

/* Responzivní design pro mobilní zařízení */
@media screen and (max-width: 768px) {
    /* Úprava velikosti nadpisu na mobilu - zmenší se ze 4rem na 2.5rem */
    .hero h1 {
        font-size: 2.5rem;
    }

    /* Zobrazení hamburger menu na mobilu, konkrétně na šířce 768px */
    .hamburger {
        display: block;
    }

    /* Animace hamburger menu - prostřední pruh zmizí při kliknutí */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    /* Animace hamburger menu - horní pruh se otočí o 45 stupňů a posune se o 8px nahoru */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    /* Animace hamburger menu - spodní pruh se otočí o 45 stupňů a posune se o 8px dolů */
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobilní navigační menu - pozice je fixed, je posunuto o 100% doleva, je 70px od horního okraje, mezera mezi odkazy je 0, je ve sloupcích, barva pozadí je bílá, šířka je 100%, text je vždy uprostřed, přechod je 0.3s, stín je 10px, vnitřní odsazení je 20px 0 */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
        padding: 20px 0;
    }

    /* Mobilní navigační menu */
    .nav-menu.active {
        left: 0;
    }

    /* Odkazy v mobilním menu - vnější odsazení je 16px 0 a zobrazí se jako bloky */
    .nav-menu a {
        margin: 16px 0;
        display: block;
    }

    /* Úprava galerie pro mobil - 2 sloupce, každý sloupec má 200px, mezera mezi sloupci se zmenší na 1rem */
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    /* Úprava výšky obrázků v galerii pro mobil - výška se zmenší na 200px */
    .gallery-item img {
        height: 200px;
    }

    /* Úprava mřížky v patičce pro mobil - 1 sloupec, mezera mezi sloupci se zmenší na 2rem */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    /* Úprava galerie pro ještě menší obrazovky */
    .gallery {
        grid-template-columns: 1fr;
    }
}