/* Definuje prázdnou klikatelnou oblast POUZE nad logem */
.logo-klikaci-oblast {
  /* Klíčové pro správné pozicování v rámci 'header' */
  position: absolute; 
  
  /* PŘESNÉ Rozměry Loga (Upravte, aby seděly) */
  width: 270px; 
  height: 110px;
  
  /* PŘESNÁ Pozice Loga (Upravte, aby seděly) */
  /* Logo je velmi blízko levého a horního okraje */
  top: 17px;   
  left: 130px;  
  
  /* Důležité: Zajistí, že je klikatelná oblast nad obrázkem na pozadí */
  z-index: 50; 
  
  /* Vizuální nastavení */
  background-color: transparent; 
  cursor: pointer;
  
  /* TIP: Pro ladění (debugging) dočasně použijte: */
  /* border: 2px solid red; */
}

/* ======================================= */
/* === 1. ZÁKLADNÍ STYLY (DESKTOP) === */
/* ======================================= */



/* KLIKATELNÁ OBLAST LOGA (DESKTOP) */
.logo-klikaci-oblast {
  /* Důležité pro klikatelnost */
  position: absolute; 
  z-index: 100;
  cursor: pointer;

  /* Přesné Rozměry Loga (Upravte, aby seděly na desktopu!) */
  width: 270px; 
  height: 110px;
  
  /* Přesná Pozice Loga (měřeno od levého horního rohu <header>) */
  top: 17px;   
  left: 130px;  
  
  background-color: transparent; 
}


/* ======================================= */
/* === 2. RESPONZIVNÍ STYLY (MOBIL) === */
/* ======================================= */

@media (min-width: 1200px) {
    .header-hlavni {
    /* Původní styly přesunuty ze stylu na třídu */
    background-image: url('images/hlavicka.jpg'); 
    background-size: contain; 
    background-position: center top; 
    background-repeat: no-repeat; 
    min-height: 600px; /* Výška pro desktop */
    /* position: relative je již v HTML třídách Bootstrapu */
    }
    /* Navigační menu (Nahrazuje původní inline absolutní pozicování) */
    .navigacni-menu {
        /* Používáme relativní pozici (nebo žádnou), ale vizuálně ji umístíme pod obrázek */
        /* Pro zachování vzhledu je nutné ručně definovat její polohu
           - tyto hodnoty si musíte doladit, aby vizuálně seděly pod obrázkem pozadí */
        width: 1065px; /* Pevná šířka pro desktop */
        margin-top: 170px; /* Odsazení, aby byla pod hlavičkou */
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }
}

/* Úpravy pro obrazovky menší než 768px (standardní Bootstrap breakpoint pro mobily) */
@media (max-width: 1200px) { 
    .header-hlavni {
        /* Výrazné zmenšení minimální výšky hlavičky pro mobil */
        min-height: 200px !important; 
        background-size: cover; /* Lepší pro mobily, pokryje celou šířku */
    }
    
    /* Navigační menu se roztáhne na celou šířku a odsazení už není potřeba */
    .navigacni-menu {
        width: 100%; /* Plná šířka pro mobil */
        margin-top: 130px;
    }
    
    /* KLIKATELNÁ OBLAST LOGA (MOBIL) */
    .logo-klikaci-oblast {
        /* Zmenšení rozměrů loga */
        background-image: url('images/logo26.jpg');
        
        /* Přesun na nové souřadnice v rámci zmenšené hlavičky */
        top: 10px;   
        left: 10px;  
    }
    iframe {
        width: 450px;
    }
}