/* ==========================================
   1. ZÁKLADNÍ RESET & PÍSMO CAIRO
   ========================================== */

/* Regular (400) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/Cairo-Regular.ttf') format('truetype');
}

/* SemiBold (600) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/Cairo-SemiBold.ttf') format('truetype');
}

/* Bold (700) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/Cairo-Bold.ttf') format('truetype');
}

/* ExtraBold / Black (800) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../webfonts/Cairo-ExtraBold.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Cairo', sans-serif;
    color: #334155;
    background-color: #181618;
    line-height: 1.2;
}

/* ==========================================
   2. HLAVNÍ LIŠTA & KONTEJNER 1160PX
   ========================================== */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: relative; /* sticky; */
    top: 0;
    z-index: 1000; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.header-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 25px 20px 25px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* --- LOGO (Nativní velikost) --- */
.header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}

/* ==========================================
   3. HLAVNÍ NAVIGACE (DESKTOP)
   ========================================== */
.header-nav ul {
    display: flex;
    list-style: none;
    gap: 35px;
    align-items: center;
}

.header-nav li {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zarovnání 90px čáry na střed */
    position: relative;
}

.header-nav a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 6px;
}

/* 1. řádek: Podtitul VENDLOVKA (Černá barva, regular tloušťka) */
.header-nav .sub-title {
    font-size: 0.75rem;
    font-weight: 400; /* Regular */
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
    line-height: 1.5;
}

/* 2. řádek: Hlavní text odkazu (1.6rem) */
.header-nav .main-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    line-height: 1.1;
    transition: color 0.2s ease;
}

/* Spodní čára (90px × 4px) */
.nav-indicator {
    width: 90px;
    height: 4px;
    background-color: #cbd5e1; /* Světle šedá pro neaktivní */
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

/* Hover efekt - čára ztmavne */
.header-nav li:hover .nav-indicator {
    background-color: #475569;
}

.header-nav li:hover .main-title {
    color: #0f172a;
}

/* AKTIVNÍ STRÁNKA: Modře #33ccff se zabarví POUZE čára */
.header-nav li.active .nav-indicator,
.header-nav li.active:hover .nav-indicator {
    background-color: #33ccff;
}

.header-nav li.active .main-title {
    color: #1e293b; /* Text zůstává tmavý */
}

/* ==========================================
   4. PRAVÁ ČÁST (JAZYKY, KONTAKTY, HAMBURGER)
   ========================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- ČTVERCOVÝ PŘEPÍNAČ JAZYKŮ (SVISLE) --- */
.lang-switcher-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lang-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* Zvětšeno pro 2px prostor po stranách */
    height: 32px;
    border: 2px solid #000000; /* Vždy černý 2px rámeček */
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    color: #64748b; /* Šedý text pro neaktivní */
    background-color: #ffffff; /* Vždy bílé pozadí */
    transition: color 0.2s ease;
}

.lang-square:hover {
    color: #33ccff;
}

/* Aktivní jazyk (Modrý text #33ccff, bílé pozadí, černý rámeček) */
.lang-square.active {
    color: #33ccff;
    font-weight: 800;
    background-color: #ffffff;
    border-color: #000000;
}

/* --- KONTAKTNÍ TLAČÍTKA (SVISLE) --- */
.contact-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px; /* Zvětšeno pro prostor nahoře/dole */
    padding: 0 12px; /* Zvětšeno pro prostor vlevo/vpravo */
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.btn-contact:hover {
    opacity: 0.85;
}

/* 1. Tlačítko Telefon (nahoře) - Modré podbarvení #33ccff, ČERNÝ text a ikona */
.btn-contact-phone {
    background-color: #33ccff;
    color: #000000;
}

.btn-contact-phone i {
    color: #000000;
    font-size: 0.85rem;
}

/* 2. Tlačítko Email (dole) - Černé podbarvení #000000, BÍLÝ text a ikona */
.btn-contact-email {
    background-color: #000000;
    color: #ffffff;
}

.btn-contact-email i {
    color: #ffffff;
    font-size: 0.85rem;
}

/* --- HAMBURGER TLAČÍTKO --- */
.hamburger-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #1e293b;
    cursor: pointer;
    padding: 4px;
}

/* ==========================================
   5. OBSAH STRÁNKY (PAGES & HOME - 2X VĚTŠÍ PÍSMO)
   ========================================== */

/* Hlavní obal <main> zabírá 100% šířky bez omezení */
.site-main {
    width: 100%;
}

/* Standardní kontejner pro běžné podstránky (2x větší písmo) */
.content {
    max-width: 1160px;
    margin: 40px auto;
    padding: 0 20px;
    font-size: 1.5rem; /* Zdvojnásobení základní velikosti */
}

/* --- STRÁNKA DOMŮ: Přechod pozadí přes celou šířku obrazovky --- */
.home-wrapper {
    width: 100%;
    background: linear-gradient(180deg, #dddedd 0%, #ffffff 100%);
    padding: 30px 0 0 0;
}

.vcera-wrapper {
    width: 100%;
    background: linear-gradient(180deg, #c4b69c 0%, #ffffff 100%);
    padding: 30px 0 0 0;
}

.kontakt-wrapper {
    width: 100%;
    background: linear-gradient(180deg, #e5e5e4 0%, #ffffff 100%);
    padding: 30px 0 0 0;
}

.home-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 1.5rem; 
    overflow: hidden
}

.content p, 
.home-container p {
    margin-bottom: 1.2em;
    line-height: 1.35em; 
}

.content h1, .home-container h1 { font-size: 3.2rem; margin-bottom: 0.8em; }
.content h2, .home-container h2 { font-size: 2.6rem; margin-bottom: 0.8em; }
.content h3, .home-container h3 { font-size: 2.2rem; margin-bottom: 0.6em; }
.content ul, .home-container ul,
.content ol, .home-container ol {
    margin-bottom: 1.2em;
    padding-left: 1.5em;
}

/* ==========================================
   6. ZÁPATÍ (FOOTER) - SYSTÉM PREPÍNÁNÍ A/B
   ========================================== */
.site-footer {
    background-color: #ffffff;
    padding: 0;
}

.footer-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
}

.footerbigimage {
    background-image: url('../images/footer2b.png');
    background-repeat: repeat-x;
    background-position: center top;
    height: 497px;
}

.footersmallimage {
    background-image: url('../images/footer1b.png');
    background-repeat: repeat-x;
    background-position: center top;
    height: 139px;
}

/* Responzivní obrázek s limitem na své reálné rozměry */
.responsive-img {
    max-width: 100%;  /* Obrázek se zmenší, pokud je kontejner užší než obrázek */
    height: auto;      /* Zachová správný poměr stran bez deformace */
    display: block;    /* Odstraní nechtěnou mezeru pod obrázkem */
    margin: 0 auto;    /* Volitelné: zarovná obrázek na střed */
    margin-bottom: 30px; /* <- Velikost mezery pod obrázkem */
}

/* DESKTOP (od 1160px výše) */
@media (min-width: 1160px) {
    .site-footer.mobile-only {
        display: none !important;
    }
}

/* ==========================================
   STYL ZÁPATÍ PODLE GRAFICKÉHO NÁVRHU
   ========================================== */

.dark-footer {
    background-color: #181618; /* Tmavě šedé / černé pozadí */
    color: #ffffff;
    padding: 40px 20px;
    border-top: none;
}

.footer-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 25px;
}

/* --- 1. DVOJITÉ TLAČÍTKO PRO TELEFON --- */
.footer-phone-group {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden; /* Aby zakulacení rohu fungovalo pro obě tlačítka */
}

.btn-phone-num {
    background-color: #33ccff;
    color: #000000;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 12px 24px;
    display: flex;
    align-items: center;
}

.btn-phone-action {
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.btn-phone-num:hover,
.btn-phone-action:hover {
    opacity: 0.9;
}

/* --- 2. INFORMACE O SPOLEČNOSTI --- */
.footer-info {
    font-size: 1.15rem;
    line-height: 1.5;
    color: #ffffff;
    font-weight: 600;
}

.footer-info .company-title {
    font-weight: 700;
}

/* --- 3. TLAČÍTKO EMAIL --- */
.btn-footer-email {
    display: inline-block;
    background-color: #33ccff;
    color: #000000;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 12px 35px;
    border-radius: 8px;
    transition: opacity 0.2s ease;
}

.btn-footer-email:hover {
    opacity: 0.9;
}

/* RESPONZIVITA PRO MALÉ MOBILY (zarovnání modrého a bílého tlačítka pod sebe, pokud je displej moc úzký) */
@media (max-width: 480px) {
    .footer-phone-group {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .btn-phone-num, 
    .btn-phone-action {
        justify-content: center;
        border-radius: 8px;
        margin-bottom: 4px;
    }
}

/* ==========================================
   7. RESPONZIVITA (MOBIL / TABLET DO 1159PX)
   ========================================== */
@media (max-width: 1159px) {
    .hamburger-toggle {
        display: block;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .header-nav.active {
        display: block;
    }

    .header-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }

    .header-nav li {
        align-items: flex-start;
        width: 100%;
    }

    /* Odkaz v mobilním menu spojený do jednoho řádku */
    .header-nav a {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        text-align: left;
        padding-bottom: 0;
    }

    /* VENDLOVKA na stejném řádku, tloušťka Regular */
    .header-nav .sub-title {
        display: inline;
        font-size: 1.15rem;
        font-weight: 400;
        line-height: 1;
    }

    /* Hlavní název na stejném řádku, tloušťka Bold */
    .header-nav .main-title {
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1;
    }

    /* Skrytí 90px čáry v mobilním menu */
    .nav-indicator {
        display: none;
    }



    /* LOGIKA FOOTERU PRO MOBIL: Skryjeme B, zobrazíme A */
    .site-footer.footer-b {
        display: none !important;
    }

    .site-footer.footer-a {
        display: block !important;
    }
}

@media (max-width: 759px) {
    /* Kontaktní tlačítka na mobilu (jen čtvercové ikony) */
    .btn-contact span {
        display: none;
    }

    .btn-contact {
        width: 32px;
        padding: 0;
        justify-content: center;
    }    
}

/* Mřížka miniatury */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}

.gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Vyskakovací okno (Lightbox) */
dialog {
    border: none;
    border-radius: 12px;
    background: #1e1e1e;
    color: #fff;
    padding: 10px;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    margin: auto;
}

/* Ztmavovací pozadí pod dialogem */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.lightbox-content img {
    max-width: 85vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
}

/* Tlačítka ovládání */
.close-btn {
    align-self: flex-end;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0 5px 5px 5px;
    line-height: 1;
}

.controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

    /* --- FINÁLNÍ FIX: Odstranění ohraničení z focusovaného obrázku --- */
#lightboxImg:focus {
  outline: none !important;/* Toto odstraní ohraničení z obrázku */
}

/* reklama */
.ad-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.7); */
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }

  .ad-overlay img {
    max-width: 70%;
    max-height: 70vh;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer; /* Zobrazí ručičku při najetí na obrázek */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  /* RESPONZIVITA PRO MALÉ MOBILY (zarovnání modrého a bílého tlačítka pod sebe, pokud je displej moc úzký) */
@media (max-width: 768px) {
    .ad-overlay img {
        max-width: 90%;
        max-height: 90vh;
    }
}