/* ========================================================================= */
/* 1. GLOBÁLNÍ ONEPAGE NASTAVENÍ                                             */
/* ========================================================================= */
html {
    scroll-behavior: smooth; /* Plynulé odrolování na sekci po kliknutí v menu */
    scroll-padding-top: 85px; /* Odsazení vršku stránky při doscrollu, aby fixní menu nepřekrylo nadpis sekce */
}

/* ========================================================================= */
/* 2. JOOMLA 6 – MENU MODUL (Upraveno pro bílé záhlaví)                      */
/* ========================================================================= */

.mod-menu ul, 
.navbar-nav {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Odkazy uvnitř menu */
.mod-menu ul li a,
.navbar-nav .nav-link {
    color: #212529 !important;
    font-weight: 600;
    padding: 6px 12px;
    transition: 0.2s ease-in-out;
    text-decoration: none;
}

/* Hover a aktivní stav */
.mod-menu ul li a:hover, .mod-menu ul li a.active,
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #dc3545 !important;
}

/* Mobilní zobrazení */
@media (max-width: 767.98px) {
    .mod-menu ul, 
    .navbar-nav {
        flex-direction: column; /* Položky pod sebou */
        padding-top: 15px;
        gap: 10px;
    }
}

/* ========================================================================= */
/* 3. VZHLED JEDNOTLIVÝCH SEKCOVÝCH BLOKŮ                                    */
/* ========================================================================= */
/* Všechny sekce (Úvod, Služby, O nás, Kontakt) dostanou jednotné vzdušné odsazení */
section {
    padding: 60px 0;
}

/* Specifické ladění pro sekci O NÁS */
#onas {
    background-color: #f8f9fa; /* Světle šedé pozadí pro oddělení sekcí */
}

/* Specifické ladění pro sekci KONTAKT */
#kontakt {
    background-color: #212529; /* Tmavé pozadí sekce */
}

/* ========================================================================= */
/* 4. STYLING PRO INTERAKTIVNÍ OTÁČECÍ KARTY (FLIP CARDS) – SEKCE SLUŽEB     */
/* ========================================================================= */

/* Hlavní obal karty – určuje výšku a zapíná 3D prostor */
.flip-card {
    background-color: transparent;
    height: 350px;          /* Výška upravena na 350px, aby se texty krásně vešly */
    perspective: 1000px;    /* Síla 3D efektu při otáčení */
    margin-bottom: 15px;
}

/* Vnitřní kontejner, který se fyzicky otáčí */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s ease-in-out; /* Plynulá rychlost otočení */
    transform-style: preserve-3d;
}

/* Spouštěč otočení – když uživatel najede na kartu myší */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Otočí kartu kolem svislé osy o 180 stupňů */
}

/* Společný základ pro přední i zadní stranu */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Skryje odvrácenou stranu, když se karta otočí */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 6px;     /* Zaoblení hran pro čistý vzhled */
}

/* --- PŘEDNÍ STRANA KARTY (Tmavá s velkým obrázkem) --- */
.flip-card-front {
    background-color: #1a1e21 !important; /* Tmavé pozadí ladící s barvou v obrázcích */
    padding: 20px 0 0 0 !important;       /* Vnitřní okraj jen nahoře pro nadpis, dole jdeme do kraje */
    overflow: hidden;
    justify-content: space-between;       /* Tlačí nadpis nahoru a obrázek dolů */
}

.flip-card-front h3 {
    font-size: 1.25rem;
    letter-spacing: 1px;
    width: 100%;
    margin-top: 5px;                      
    margin-bottom: 0;
    padding: 0 15px;
}

.flip-card-front img {
    width: auto;                          /* Šířka se přizpůsobí výšce */
    max-height: 75%;                      /* <--- TÍMTO ČÍSLEM HYB: Zmenši na 70% nebo 65%, pokud se stále nevejde */
    object-fit: contain;                  /* Zabrání deformaci obrázku */
    margin-top: auto;                     /* Dotlačí obrázek na spodní okraj karty */
}

.flip-card-front p {
    display: none;                        /* HTML popisek schováme, text je již přímo v obrázcích */
}

/* --- ZADNÍ STRANA KARTY (Červená po otočení) --- */
.flip-card-back {
    background-color: #dc3545 !important; /* Firemní červená barva */
    transform: rotateY(180deg);           /* Výchozí otočení rubem */
    justify-content: center;              /* Vycentruje texty na střed */
    padding: 30px 20px !important;        /* Dostatečný vnitřní okraj pro text */
    color: #ffffff !important;
}

.flip-card-back h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.flip-card-back p {
    font-size: 0.95rem;     /* Velikost textu popisu */
    line-height: 1.5;       /* Výška řádku pro lepší čitelnost */
    margin-bottom: 0;
    padding: 0 5px;
}
/* Toto přidá možnost otočení kliknutím na mobilu */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg) !important; /* !important zajistí, že vyhraje nad hoverem */
}

/* ========================================================================= */
/* 5. JOOMLA 6 – SYSTEM MESSAGES (Upozornění / Hlášky systému)               */
/* ========================================================================= */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-success {
    background: #e6f4ea;
    border-left: 4px solid #2e7d32;
    color: #137333;
}

.alert-warning {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    color: #b06000;
}

.alert-danger {
    background: #ffebee;
    border-left: 4px solid #c62828;
    color: #c5221f;
}

/* ========================================================================= */
/* 6. JOOMLA 6 – OBSAH KOMPONENTY (Články / Podstránky)                       */
/* ========================================================================= */
.com-content-article {
    padding: 20px 0;
}

.com-content-article h1,
.com-content-article h2,
.com-content-article h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.com-content-article img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ========================================================================= */
/* 7. JOOMLA 6 – MODULY TYPOVÉ                                               */
/* ========================================================================= */
.moduletable h3 {
    margin-bottom: 15px;
    font-size: 22px;
    color: #dc3545; /* Sjednoceno na červenou akcentovou barvu */
}

/* ========================================================================= */
/* 8. JOOMLA 6 – FOOTER (Patička)                                            */
/* ========================================================================= */
.glprofi-footer {
    background-color: #111;
    color: #aaa;
}

.glprofi-footer a {
    color: #fff;
    text-decoration: underline;
}

.glprofi-footer a:hover {
    color: #dc3545;
}

/* ========================================================================= */
/* 9. ÚPRAVA KONTAKTNÍHO FORMULÁŘE                                           */
/* ========================================================================= */


/* Skrytí nechtěného nadpisu, ale zachování popisků polí */
.contact-form fieldset legend:first-of-type {
    display: none !important;
}

/* Odsazení celého formuláře od okolí */
.com-contact__form {
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

/* Styling popisků (Jméno, E-mail, atd.) */
.contact-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Vzhled vstupních polí */
.contact-form .form-control {
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

/* Efekt při kliknutí do pole */
.contact-form .form-control:focus {
    border-color: #dc3545; /* Tvá firemní červená */
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.2);
    outline: none;
}

/* Styling tlačítka Odeslat */
.contact-form .btn-primary {
    background-color: #dc3545;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.contact-form .btn-primary:hover {
    background-color: #a71d2a; /* Tmavší červená při přejetí */
}

/* Skryje sekci "Spojte se s námi" pouze pokud jsme přímo na stránce kontaktu */
.com-contact #spojte-se-s-nami {
    display: none !important;
}

/* ========================================================================= */
/* 10. ÚPRAVA MODULU SPOJTE SE S NÁMI                                        */
/* ========================================================================= */
/* Tmavší šedé pozadí pro sekci kontaktů */
/* Celá sekce */
section#spojte-se-s-nami {
    background-color: #f1f3f5 !important; /* Jemná šedá */
    padding: 60px 0;
}

/* Nadpisy a texty */
section#spojte-se-s-nami h2, 
section#spojte-se-s-nami strong, 
section#spojte-se-s-nami p,
section#spojte-se-s-nami li {
    color: #212529 !important; /* Tmavá barva textu */
}

/* Odkazy */
section#spojte-se-s-nami a:not(.btn) {
    color: #007bff !important; /* Modrá jako u tvých odkazů */
    text-decoration: none;
}

section#spojte-se-s-nami a:hover {
    color: #dc3545 !important; /* Červená při přejetí */
}