/* Tmavé barevné schéma */
:root {
        --primary-color: #ff4444; /* definice hlavní červené barvy */
        --text-color: #e0e0e0;    /* definice barvy hlavního textu */
        --bg-color: #121212;      /* definice barvy pozadí webu */
        --header-bg: #1a1a1a;     /* definice barvy pozadí hlavičky */
        --section-bg: #1e1e1e;    /* definice barvy pozadí sekcí */
}

/* Nastavení celého dokumentu */
html {
        /* OPRAVA: Správný zápis pro rezervaci místa lišty */
        scrollbar-gutter: stable; /* rezervuje místo pro posuvník, aby stránka neuskakovala */

        /* Pojistka: Vynutí lištu, aby byla vidět (i když je prázdná), to zamezí cukání na 100% */
        /* overflow-y: scroll; */ /* vypnutý vynucený svislý posuvník */

        scroll-behavior: smooth;  /* zajišťuje plynulý dojezd při kliknutí na odkaz */
        scroll-padding-top: 85px; /* odsazení shora, aby hlavička nekrela nadpis po dojezdu */
}

/* Základní reset - stačí jednou */
{
        margin: 0;                /* vynulování vnějších okrajů u všech prvků */
        padding: 0;               /* vynulování vnitřního odsazení u všech prvků */
        box-sizing: border-box;   /* započítání okrajů do celkové šířky prvku */
}

body {
        font-family: system-ui, -apple-system, sans-serif; /* nastavení moderního bezpatkového písma */
        background-color: var(--bg-color);                 /* nastavení barvy pozadí těla stránky */
        color: var(--text-color);                          /* nastavení barvy textu na stránce */
        line-height: 1.6;                                  /* nastavení výšky řádku pro lepší čitelnost */
        display: flex;                                     /* zapnutí flexboxu pro skládání obsahu */
        flex-direction: column;                            /* řazení prvků v body pod sebe */
        min-height: 100vh;                                 /* minimální výška na celou obrazovku */
}

/* --- HLAVIČKA --- */
header {
        background-color: var(--header-bg);                /* barva pozadí hlavičky */
        padding: 1rem 2rem;                                /* vnitřní odsazení hlavičky (nahoře/dole, vlevo/vpravo) */
        position: sticky;                                  /* hlavička zůstává přilepená při scrollování */
        top: 0;                                            /* poloha přilepení úplně nahoře */
        z-index: 1000;                                     /* zajištění, že hlavička bude vždy nad ostatním obsahem */
        border-bottom: 3px solid var(--primary-color);     /* spodní červená linka hlavičky */
        display: flex;                                     /* zapnutí flexboxu pro prvky v hlavičce */
        flex-direction: row;                               /* řazení prvků v hlavičce vedle sebe */
        justify-content: space-between;                    /* roztažení prvků na okraje (logo vs kontakt) */
        align-items: center;                               /* svislé vycentrování prvků v hlavičce */
        gap: 20px;                                         /* mezera mezi jednotlivými prvky */
        /* Změna: Odebral jsem wrap, aby se menu při načítání nezkusilo zalomit a pak se nevrátilo */
        flex-wrap: nowrap;                                 /* zákaz zalamování prvků pod sebe */
        min-height: 80px;                                  /* minimální výška hlavičky */
}

.brand {
        display: flex;                                     /* zapnutí flexboxu pro logo a název */
        align-items: center;                               /* svislé vycentrování loga a názvu */
        gap: 15px;                                         /* mezera mezi logem a textem AHcars */
        flex-shrink: 0;                                    /* zákaz zmenšování loga při nedostatku místa */
}

/* OPRAVA: Fixní rozměry loga jsou zásadní pro plynulost */
.logo {
        height: 40px;                                      /* výška obrázku loga */
        border-radius: 4px;                                /* zaoblení rohů obrázku loga */
        object-fit: contain;                               /* zachování poměru stran obrázku */
}

header h1 {
        color: var(--text-color);                          /* barva nadpisu AHcars */
        font-size: 1.4rem;                                 /* velikost písma nadpisu */
}

/* Menu */
nav {
        display: flex;                                     /* zapnutí flexboxu pro menu */
        justify-content: center;                           /* vycentrování menu na střed */
        flex: 1;                                           /* roztažení menu, aby vyplnilo středový prostor */
        gap: 1.5rem;                                       /* mezera mezi odkazy v menu */
}

nav a {
        text-decoration: none;                             /* odstranění podtržení odkazu */
        color: var(--text-color);                          /* barva textu odkazu */
        font-weight: 500;                                  /* tloušťka písma odkazu */
        font-size: 0.95rem;                                /* velikost písma odkazu */
        text-transform: uppercase;                         /* převod písma na velká písmena */
        letter-spacing: 1px;                               /* rozestupy mezi písmeny */
        transition: color 0.3s ease;                       /* hladký přechod barvy při najetí myší */
        white-space: nowrap;                               /* zákaz zalomení textu odkazu na dva řádky */
        /* Fix: Rezervace místa pro tučné písmo pomocí neviditelného stínu */
        display: inline-block;                             /* nastavení prvku jako blokový v řádku */
}

nav a:hover, nav a.aktivni {
        color: var(--primary-color);                       /* barva odkazu při najetí nebo aktivním stavu */
        /* Místo bold použijeme stín, aby se text neroztáhl do stran */
        text-shadow: 0.5px 0 0 currentColor;               /* vytvoření efektu tučného písma bez změny šířky */
}

/* Telefony */
.kontakt-tel {
        display: flex;                                     /* zapnutí flexboxu pro telefonní čísla */
        flex-direction: row;                               /* řazení čísel vedle sebe */
        gap: 20px;                                         /* mezera mezi jednotlivými čísly */
        white-space: nowrap;                               /* zákaz zalomení čísel na další řádek */
        flex-shrink: 0;                                    /* zákaz zmenšování bloku s telefony */
}

.kontakt-tel a {
        color: var(--text-color);                          /* barva textu telefonního čísla */
        text-decoration: none;                             /* odstranění podtržení */
        font-size: 1.05rem;                                /* velikost písma telefonního čísla */
        font-weight: 600;                                  /* tloušťka písma (polotučné) */
        transition: color 0.3s ease;                       /* hladký přechod barvy při najetí */
}

.kontakt-tel a:hover {
        color: var(--primary-color);                       /* změna barvy čísla na červenou při najetí */
}

/* --- HLAVNÍ OBSAH (Společné pro všechny stránky) --- */
main {
        flex: 1;                                           /* vyplnění zbývajícího místa na stránce */
        padding: 1rem;                                     /* vnitřní odsazení hlavního bloku */
        max-width: 1000px;                                 /* maximální šířka obsahu webu */
        margin: 1rem auto;                                 /* vycentrování hlavního bloku a mezera nahoře/dole */
        width: 100%;                                       /* šířka hlavního bloku */
}

/* Tmavý box s textem */
section {
        padding: 1rem;                                     /* vnitřní odsazení sekce */
        margin-bottom: 1rem;                               /* mezera pod sekcí */
        border-radius: 8px;                                /* zaoblení rohů sekce */
}

h2 {
        margin-bottom: 1rem;                               /* mezera pod nadpisem sekce */
        color: var(--primary-color);                       /* barva nadpisu sekce */
}

/* --- PATIČKA --- */
footer {
        text-align: center;                                /* vycentrování textu v patičce */
        padding: 1.5rem;                                   /* vnitřní odsazení patičky */
        background-color: var(--header-bg);                /* barva pozadí patičky */
        margin-top: auto;                                  /* odtlačení patičky dolů při nedostatku textu */
        border-top: 1px solid #333;                        /* horní dělící linka patičky */
        color: #536878;                                    /* barva textu v patičce */
}

.footer-link,
.footer-link:visited {
        color: #536878;                                    /* barva odkazu v patičce a navštíveného odkazu */
        transition: color 0.3s ease;                       /* hladký přechod barvy */
    }

/* Volitelně: co se stane, když na odkaz najedeš myší */
.footer-link:hover {
        color: #a9a9a9;                                    /* barva odkazu v patičce při najetí myší */
}

/* --- STRÁNKA SLUŽBY (s bočním menu) --- */
.obsah-se-sidebarem {
        display: flex;                                     /* zapnutí flexboxu pro sidebar a hlavní text */
        gap: 2rem;                                         /* mezera mezi sidebarem a textem */
        align-items: flex-start;                           /* zarovnání prvků k hornímu okraji */
}

.sidebar {
        background-color: var(--section-bg);                /* barva pozadí bočního menu */
        padding: 2rem;                                     /* vnitřní odsazení bočního menu */
        margin-top: 1rem;                                  /* horní vnější okraj menu */
        margin-bottom: 2rem;                               /* spodní vnější okraj menu */
        border-radius: 8px;                                /* zaoblení rohů menu */
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);             /* jemný stín pod bočním menu */
        width: 250px;                                      /* pevná šířka bočního menu */
        flex-shrink: 0;                                    /* zákaz zmenšování bočního menu */
        position: sticky;                                  /* menu zůstane viditelné při scrollování */
        top: 100px;                                        /* poloha přilepení menu pod hlavičkou */
}

.sidebar h3 {
        color: var(--text-color);                          /* barva nadpisu v menu */
        margin-bottom: 1rem;                               /* mezera pod nadpisem v menu */
        border-bottom: 1px solid #333;                     /* spodní dělící linka nadpisu menu */
        padding-bottom: 0.5rem;                            /* odsazení textu od linky */
}

.sidebar ul {
        list-style-type: none;                             /* odstranění teček u seznamu */
}

.sidebar li {
        margin-bottom: 0.5rem;                             /* mezera mezi položkami menu */
}

.sidebar a {
        display: block;                                    /* nastavení odkazu jako celoplošný řádek */
        padding: 0.5rem 0;                                 /* svislé odsazení pro snadnější klikání */
        color: var(--text-color);                          /* barva odkazu v menu */
        text-decoration: none;                             /* odstranění podtržení */
        transition: color 0.3s ease;                       /* hladký přechod barvy */
}

.sidebar a:hover,
.sidebar a.aktivni {
        color: var(--primary-color);                       /* barva aktivního nebo vybraného odkazu v menu */
        font-weight: bold;                                 /* tučné písmo pro vybranou položku */
}

.hlavni-panel {
        flex: 1;                                           /* roztažení hlavního textu vedle menu */
}

/* Úprava pro mobily a malé obrazovky (zalomí menu pod sebe) */
@media (max-width: 768px) {
        .obsah-se-sidebarem {
                flex-direction: column;                    /* řazení sidebaru a textu pod sebe na mobilu */
        }
        .sidebar {
                width: 100%;                               /* šířka menu na celou obrazovku u mobilu */
                position: static;                          /* vypnutí přilepení menu na mobilu */
        }
}

/* --- ZÁLOŽKY SLUŽEB (Trik s :target) --- */

/* 1. Skryjeme všechny boxy se službami */
.sluzba-box {
        display: none;                                     /* box služby je standardně skrytý */
        position: relative;                                /* nutné pro vrstvení obsahu nad fotku */
        background-color: #000;                            /* černé pozadí boxu */
        padding: 2rem;                                     /* vnitřní odsazení boxu */
        margin-top: 0rem;                                  /* horní okraj boxu */
        border-radius: 12px;                               /* zaoblení rohů boxu */
        overflow: hidden;                                  /* skrytí přesahujících částí (fotky) */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);           /* výrazný stín boxu služby */
        min-height: 600px;                                 /* minimální výška boxu služby */
}

.sluzba-box::before {
        content: "";                                       /* nutné pro vytvoření vrstvy pro fotku */
        position: absolute;                                /* absolutní pozice fotky v pozadí */
        top: 0; left: 0; right: 0; bottom: 0;              /* roztažení fotky do všech rohů */
        background-image: url('AHcars.jpg');               /* cesta k obrázku na pozadí */
        background-size: 600px auto;                       /* nastavení šířky pozadí */
        background-repeat: no-repeat;                      /* zákaz opakování obrázku */
        background-position: center;                       /* vycentrování obrázku v pozadí */
        opacity: 0.2;                                      /* průhlednost obrázku v pozadí */
        z-index: 0;                                        /* umístění fotky dospod */
}

/* Toto zajistí, že text a nadpisy budou nad fotkou a ne pod ní */
.sluzba-box > * {
        position: relative;                                /* nastavení vrstvy pro text nad fotku */
        z-index: 1;                                        /* zajištění viditelnosti textu nad fotkou */
}

/* 2. Zobrazíme jen ten box, jehož ID je zrovna v adrese URL (po kliknutí na odkaz) */
.sluzba-box:target {
        display: block;                                    /* zobrazení boxu, na který uživatel klikl */
}

/* Nastavení samotné animace prolínání */
@keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }    /* počáteční stav animace (průhledné, posunuté) */
        to { opacity: 1; transform: translateY(0); }       /* konečný stav animace (viditelné, na místě) */
}

/* --- NOVÝ CENÍK V KARTÁCH --- */

.cenik-grid {
        display: grid;                                     /* zapnutí mřížky pro karty ceníku */
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* automatické sloupce podle šířky */
        gap: 1.5rem;                                       /* mezery mezi kartami ceníku */
}

.cenik-karta {
        background-color: var(--section-bg);                /* barva pozadí karty ceníku */
        padding: 1.5rem;                                   /* vnitřní odsazení karty */
        border-radius: 8px;                                /* zaoblení rohů karty */
        border-left: 4px solid var(--primary-color);       /* červený zvýrazňující pruh vlevo */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);            /* stín karty ceníku */
        transition: transform 0.2s ease;                   /* příprava pro plynulé efekty */
}

.cenik-karta h3 {
        color: var(--primary-color);                       /* barva nadpisu v kartě ceníku */
        margin-bottom: 1.2rem;                             /* mezera pod nadpisem */
        font-size: 1.2rem;                                 /* velikost písma nadpisu */
        text-transform: uppercase;                         /* převod nadpisu na velká písmena */
        border-bottom: 1px solid #333;                     /* dělící linka pod nadpisem */
        padding-bottom: 0.5rem;                            /* odsazení od linky */
}

.cenik-radek {
        display: flex;                                     /* zapnutí flexboxu pro řádek ceníku */
        justify-content: space-between;                    /* roztažení textu a ceny na opačné konce */
        padding: 8px 0;                                    /* svislé odsazení řádku */
        border-bottom: 1px dashed #444;                    /* čárkovaná linka mezi položkami */
        font-size: 0.95rem;                                /* velikost písma položky */
}

.cenik-radek:last-child {
        border-bottom: none;                               /* odstranění linky u poslední položky */
}

.cenik-radek span {
        color: var(--text-color);                          /* barva názvu služby v ceníku */
        padding-right: 10px;                               /* mezera mezi názvem a cenou */
}

.cenik-radek strong {
        color: #fff;                                       /* bílá barva pro samotnou cenu */
        white-space: nowrap;                               /* zákaz zalomení ceny */
}

/* Responzivita: Na malých mobilech zrušíme mřížku, aby byly karty pod sebou */
@media (max-width: 480px) {
        .cenik-grid {
                grid-template-columns: 1fr;                /* jeden sloupec karet na malém mobilu */
        }
}


/* --- ÚVODNÍ STRÁNKA (Karty výhod) --- */

.uvodni-sekce {
        position: relative;                                /* nutné pro umístění fotky v pozadí */
        padding: 2rem 2rem;                                /* vnitřní odsazení úvodního bloku */
        margin: 1rem auto;                                 /* vycentrování bloku a mezery */
        border-radius: 12px;                               /* zaoblení rohů úvodního bloku */
        overflow: hidden;                                  /* skrytí přesahující fotky v pozadí */
        background-color: #000;                            /* černé pozadí jako rezerva */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);           /* silný stín úvodního bloku */
        text-align: center;                                /* vycentrování textu v bloku */
}

/* Tady se děje to kouzlo s fotkou na pozadí */
.uvodni-sekce::before {
        content: "";                                       /* vrstva pro fotku na pozadí */
        position: absolute;                                /* absolutní pozice fotky v pozadí */
        top: 0; left: 0; right: 0; bottom: 0;              /* roztažení fotky do rohů */
        background-image: url('AHcars.jpg');               /* cesta k obrázku */
        background-size: 900px;                            /* pevná šířka obrázku v pozadí */
        background-repeat: no-repeat;                      /* zákaz opakování obrázku */
        background-position: center;                       /* vycentrování fotky v pozadí */
        opacity: 0.2;                                      /* průhlednost fotky (ztmavení) */
        z-index: 0;                                        /* umístění fotky dospod */
}

/* Musíme zajistit, aby text byl nad fotkou */
.uvodni-sekce > * {
        position: relative;                                /* vrstva pro text nad fotkou */
        z-index: 1;                                        /* zajištění viditelnosti textu */
}
.hlavni-nadpis {
        text-align: center;                                /* vycentrování hlavního nadpisu */
        font-size: 2.5rem;                                 /* velikost hlavního nadpisu */
        margin-bottom: 1rem;                               /* mezera pod hlavním nadpisem */
        color: #fff;                                       /* bílá barva hlavního nadpisu */
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8);          /* stín pod textem pro čitelnost */
}

/* CSS Grid vytvoří automatickou mřížku karet */
.vyhody-grid {
        display: grid;                                     /* mřížka pro karty výhod */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* automatické sloupce výhod */
        gap: 1.5rem;                                       /* mezera mezi kartami výhod */
}

/* Styl jednotlivé karty */
.vyhoda-karta {
        background-color: var(--section-bg);                /* barva pozadí karty výhody */
        padding: 1.8rem;                                   /* vnitřní odsazení karty výhody */
        border-radius: 8px;                                /* zaoblení rohů karty */
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);             /* stín karty výhody */
        border-left: 4px solid var(--primary-color);       /* červený pruh vlevo */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* hladké animace karty */
}

/* Nadpis v kartě a vložení fajfky */
.vyhoda-karta h3 {
        color: var(--text-color);                          /* barva nadpisu výhody */
        font-size: 1.2rem;                                 /* velikost písma nadpisu */
        margin-bottom: 0.8rem;                             /* mezera pod nadpisem výhody */
        display: flex;                                     /* flexbox pro vyrovnání textu s fajfkou */
        align-items: center;                               /* svislé vycentrování fajfky s textem */
}

.vyhoda-karta h3::before {
        content: "\2713";                                  /* speciální kód pro znak fajfky */
        color: var(--primary-color);                       /* červená barva fajfky */
        font-weight: bold;                                 /* tučné provedení fajfky */
        font-size: 1.4rem;                                 /* velikost fajfky */
        margin-right: 12px;                                /* mezera mezi fajfkou a nadpisem */
}

.vyhoda-karta p {
        color: #b3b3b3;                                    /* barva popisu výhody */
        font-size: 0.95rem;                                /* velikost písma popisu */
}

/* --- ÚPRAVA PANELŮ OBJEDNÁVKY --- */

.objednavka-rozcestnik {
        display: flex;                                     /* zapnutí flexboxu pro kontaktní karty */
        justify-content: center;                           /* vycentrování karet kontaktu */
        flex-wrap: wrap;                                   /* zalamování karet na dalším řádku */
        gap: 1.5rem;                                       /* mezera mezi kartami kontaktu */
        margin-bottom: 3rem;                               /* mezera pod rozcestníkem */
        max-width: 800px;                                  /* maximální šířka bloku kontaktu */
        margin-left: auto;                                 /* vycentrování bloku zleva */
        margin-right: auto;                                /* vycentrování bloku zprava */
}

.kontakt-karta {
        background-color: var(--section-bg);                /* pozadí karty kontaktu */
        padding: 1.5rem;                                   /* vnitřní odsazení karty */
        border-radius: 8px;                                /* zaoblení rohů karty */
        text-align: center;                                /* vycentrování textu v kartě */
        border-left: 4px solid var(--primary-color);       /* červený pruh vlevo */
        flex: 1;                                           /* karty se rozdělí o stejné místo */
        min-width: 280px;                                  /* minimální šířka karty kontaktu */
}

/* Červená ikona místo emoji */
.ikona-vlastni {
        font-size: 2.2rem;                                 /* velikost ikony kontaktu */
        display: block;                                    /* nastavení ikony na vlastní řádek */
        margin-bottom: 0.5rem;                             /* mezera pod ikonou */
        color: var(--primary-color);                       /* barva ikony */
        font-weight: bold;                                 /* tučná tloušťka ikony */
}

/* Zelená ikona pro WhatsApp (pokud ji chceš nechat zelenou, jinak smaž) */
.wa-ikona {
        color: #25d366;                                    /* specifická zelená barva pro WhatsApp */
}

.dve-cisla {
        display: flex;                                     /* flexbox pro telefonní čísla v kartě */
        flex-direction: column;                            /* řazení čísel pod sebe */
        gap: 10px;                                         /* mezera mezi čísly */
        margin-top: 1rem;                                  /* horní okraj od nadpisu */
}

.tlacitko-kontaktu {
        display: block;                                    /* odkaz jako tlačítko přes celou šířku */
        padding: 10px 15px;                                /* vnitřní rozměr tlačítka */
        background-color: transparent;                     /* průhledné pozadí tlačítka */
        color: white;                                      /* bílá barva textu v tlačítku */
        text-decoration: none;                             /* bez podtržení */
        border: 1px solid var(--primary-color);           /* červený rámeček tlačítka */
        border-radius: 4px;                                /* zaoblení tlačítka */
        font-weight: bold;                                 /* tučný text tlačítka */
        font-size: 0.95rem;                                /* velikost písma v tlačítku */
        transition: all 0.3s;                              /* hladká reakce na najetí myší */
}

.tlacitko-kontaktu:hover {
        background-color: var(--primary-color);            /* červené pozadí při najetí myší */
        color: white;                                      /* barva textu zůstane bílá */
}

/* WhatsApp tlačítka se zeleným rámečkem */
.tlacitko-kontaktu.wa {
        border-color: #25d366;                             /* zelená barva rámečku u WhatsApp */
}
.tlacitko-kontaktu.wa:hover {
        background-color: #25d366;                         /* zelené pozadí při najetí u WhatsApp */
}

/* Stylování formuláře */
.formular-kontejner {
        background-color: var(--section-bg);                /* pozadí bloku s formulářem */
        padding: 2.5rem;                                   /* vnitřní odsazení formuláře */
        border-radius: 8px;                                /* zaoblení rohů formuláře */
        max-width: 700px;                                  /* maximální šířka formuláře */
        margin: 0 auto;                                    /* vycentrování formuláře */
}

.formular-kontejner h3 {
        margin-bottom: 0.5rem;                             /* mezera pod nadpisem formuláře */
        color: var(--primary-color);                       /* barva nadpisu formuláře */
}

.objednavkovy-form {
        margin-top: 2rem;                                  /* horní okraj od nadpisu */
        display: flex;                                     /* flexbox pro prvky formuláře */
        flex-direction: column;                            /* řazení polí formuláře pod sebe */
        gap: 1.5rem;                                       /* mezera mezi poli formuláře */
}

.form-skupina {
        display: flex;                                     /* flexbox pro štítek a pole */
        flex-direction: column;                            /* řazení štítku nad pole */
        text-align: left;                                  /* zarovnání textu vlevo */
        gap: 0.5rem;                                       /* mezera mezi popiskem a polem */
}

.form-skupina label {
        font-weight: bold;                                 /* tučné písmo popisku pole */
        font-size: 0.9rem;                                 /* velikost písma popisku */
}

.form-skupina input,
.form-skupina textarea {
        padding: 12px;                                     /* vnitřní prostor polí pro psaní */
        background-color: #121212;                         /* černé pozadí vnitřku polí */
        border: 1px solid #333;                            /* šedý rámeček polí */
        border-radius: 4px;                                /* zaoblení rohů polí */
        color: white;                                      /* bílá barva psaného textu */
        font-family: inherit;                              /* zachování stejného typu písma */
        font-size: 1rem;                                   /* velikost písma v poli */
}

.form-skupina input:focus,
.form-skupina textarea:focus {
        outline: none;                                     /* odstranění výchozího obrysu prohlížeče */
        border-color: var(--primary-color);               /* změna barvy rámečku při kliknutí do pole */
}

.odeslat-tlacitko {
        padding: 15px;                                     /* vnitřní rozměr odesílacího tlačítka */
        background-color: var(--primary-color);            /* červená barva tlačítka */
        color: white;                                      /* bílá barva textu tlačítka */
        border: none;                                      /* bez rámečku */
        border-radius: 4px;                                /* zaoblení tlačítka */
        font-size: 1.1rem;                                 /* velikost písma tlačítka */
        font-weight: bold;                                 /* tučné písmo tlačítka */
        cursor: pointer;                                   /* změna kurzoru na ruku při najetí */
        transition: background 0.3s;                       /* plynulá změna barvy při najetí */
}

.odeslat-tlacitko:hover {
        background-color: #e63939;                         /* tmavší červená při najetí na tlačítko */
}

/* --- VLASTNÍ ODRÁŽKY (FAJFKY) PRO SLUŽBY --- */
.moderni-seznam {
        list-style: none;                                  /* vypnutí standardních puntíků seznamu */
        padding-left: 0;                                   /* zrušení vnitřního odsazení seznamu */
        margin-top: 1rem;                                  /* horní okraj seznamu */
}

.moderni-seznam li {
        position: relative;                                /* nutné pro umístění vlastní fajfky */
        padding-left: 30px;                                /* prostor pro fajfku vlevo od textu */
        margin-bottom: 12px;                               /* mezera mezi položkami seznamu */
        font-size: 1.05rem;                                /* velikost písma položky */
}

/* Tady se kreslí ta červená fajfka */
.moderni-seznam li::before {
        content: "\2713";                                  /* speciální znak pro fajfku */
        position: absolute;                                /* absolutní pozice fajfky v rámci položky */
        left: 0;                                           /* zarovnání fajfky úplně vlevo */
        top: 0;                                            /* zarovnání fajfky k hornímu okraji textu */
        color: var(--primary-color);                       /* červená barva fajfky */
        font-weight: bold;                                 /* tučná tloušťka fajfky */
        font-size: 1.2rem;                                 /* velikost fajfky */
}

/* --- ÚPRAVA ODKAZŮ V TEXTU --- */

/* Obecné nastavení pro všechny odkazy v obsahu */
main a {
        text-decoration: none;                             /* odstranění podtržení odkazu v textu */
        font-weight: bold;                                 /* tučné písmo pro odkazy v textu */
        transition: all 0.3s ease;                         /* plynulá animace při najetí myší */
}

/* Specificky pro WhatsApp odkaz */
.wa-link {
        color: #25d366 !important;                         /* jasná zelená WhatsApp barva */
        border-bottom: 1px solid rgba(37, 211, 102, 0.3); /* jemná zelená linka pod textem */
}

.wa-link:hover {
        color: #1ebea5 !important;                         /* změna odstínu zelené při najetí */
        border-bottom: 1px solid #1ebea5;                  /* zvýraznění spodní linky při najetí */
}

/* Odkaz na W3W (andulky.budovy...) */
.w3w-link {
        color: var(--primary-color) !important;            /* červená barva souřadnic */
        font-family: monospace;                            /* použití kódového (psací stroj) písma */
        font-size: 1.1rem;                                 /* velikost písma souřadnic */
        border-bottom: 1px solid rgba(255, 68, 68, 0.3);   /* jemná červená linka pod souřadnicemi */
}

.w3w-link:hover {
        filter: brightness(1.2);                           /* mírné rozsvícení odkazu při najetí */
        border-bottom: 1px solid var(--primary-color);     /* zvýraznění spodní linky souřadnic */
}

/* Oddělovací červená linka */
.hero-delic {
        height: 2px;                                       /* tloušťka dělící linky */
        width: 60%;                                        /* šířka dělící linky (60% plochy) */
        background-color: var(--primary-color);            /* červená barva linky */
        margin: 1.5rem auto;                               /* mezera kolem linky a vycentrování */
        display: block;                                    /* linka se chová jako samostatný blok */
        position: relative;                                /* vrstvení nad ostatními prvky */
        z-index: 5;                                        /* zajištění viditelnosti nad fotkou v pozadí */
}

.mapa-kontejner {
        margin-top: 3rem;                                  /* mezera nad blokem s mapou */
        width: 100%;                                       /* šířka bloku s mapou */
        max-width: 800px;                                  /* maximální šířka bloku s mapou */
        margin-left: auto;                                 /* vycentrování mapy zleva */
        margin-right: auto;                                /* vycentrování mapy zprava */
        border: 3px solid #333;                            /* tmavý rámeček kolem mapy */
        border-radius: 12px;                               /* zaoblení rohů rámu mapy */
        overflow: hidden;                                  /* oříznutí rohů samotné vložené mapy */
        line-height: 0;                                    /* odstranění mezery pod mapou */
}

.uvitani {
        margin-top: 2rem;                                  /* mezera nad uvítacím textem */
        margin-bottom: 2rem;                               /* mezera pod uvítacím textem */
        font-style: italic;                                /* nastavení písma na kurzívu */
        color: #fff;                                       /* bílá barva uvítacího nápisu */
}

/* --- PÁS S LOGY ZNAČEK --- */
.logo-pas {
        display: flex;                                     /* zapnutí flexboxu pro pás log značek */
        justify-content: center;                           /* vycentrování log v pásu */
        align-items: center;                               /* svislé vycentrování log k sobě */
        gap: 2.5rem;                                       /* mezery mezi jednotlivými logy */
        flex-wrap: wrap;                                   /* zalamování log na další řádek u mobilu */
        margin: 2rem 0;                                    /* mezera nad a pod pásem log */
}

.logo-pas img {
        height: 70px;                                      /* výška obrázků log v pásu */
        width: auto;                                       /* automatické zachování poměru stran */
        display: block;                                    /* logo jako blokový prvek */
}

/* Na mobilech loga trochu zmenšíme, aby se jich vešlo víc vedle sebe */
@media (max-width: 600px) {
        .logo-pas {
                gap: 1rem;                                 /* zmenšení mezer mezi logy na mobilu */
                padding: 0.5rem;                           /* odsazení pásu na mobilu */
                justify-content: space-evenly;             /* rovnoměrné rozprostření log na mobilu */
        }
        .logo-pas img {
                height: auto;                              /* výška se přizpůsobí šířce na mobilu */
                max-height: 45px;                          /* maximální výška loga na mobilu */
                width: 25%;                                /* loga zabírají čtvrtinu šířky na mobilu */
                min-width: 60px;                           /* minimální šířka loga na mobilu */
                object-fit: contain;                       /* zachování poměru stran loga */
                margin: 5px;                               /* drobné odsazení každého loga */
        }
}

.hero-logo {
    max-width: 100%;                                       /* logo se nikdy neroztáhne víc než displej */
    height: auto;                                          /* automatická výška loga */
    display: block;                                        /* nastavení loga jako samostatný blok */
    margin: 0 auto;                                        /* vycentrování loga uprostřed */
}

/* --- ÚPRAVA MENU PRO MOBILY (pod 768px) --- */
@media (max-width: 768px) {
    header {
        position: relative;          /* HLAVNÍ ZMĚNA: hlavička se přestane lepit a bude rolovat s webem */
        flex-direction: column;      /* naskládá logo, menu a telefony pod sebe */
        padding: 1.5rem 1rem;        /* vnitřní odsazení hlavičky */
        height: auto;                /* výška se přizpůsobí všem řádkům menu */
        gap: 20px;                   /* mezera mezi bloky v hlavičce */
    }

    .brand {
        justify-content: center;     /* vycentruje logo a název na střed */
        width: 100%;                 /* zajistí šířku pro centrování */
    }

    nav {
        flex-direction: column;      /* naskládá odkazy menu pod sebe */
        align-items: center;         /* vycentruje texty odkazů */
        gap: 12px;                   /* mezera mezi jednotlivými odkazy */
        width: 100%;                 /* menu zabere celou šířku */
    }

    nav a {
        font-size: 1.1rem;           /* zvětší text pro snadnější klikání prstem */
        padding: 8px 0;              /* přidá prostor kolem odkazů */
        width: 100%;                 /* odkaz zabere celou šířku řádku */
        text-align: center;          /* vycentruje text uvnitř odkazu */
        border-bottom: 1px solid #333; /* přidá jemnou dělící linku mezi odkazy */
    }

    nav a:last-child {
        border-bottom: none;         /* u posledního odkazu v menu linku smaže */
    }

    .kontakt-tel {
        flex-direction: column;      /* telefonní čísla budou pod sebou */
        gap: 10px;                   /* mezera mezi čísly */
        margin-top: 10px;            /* odsazení od menu */
        padding-bottom: 10px;        /* prostor pod telefony */
    }
}