/* Základné globálne nastavenie */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* Zabránenie horizontálneho posúvania */
}

/* Základné štýly pre hero-section a contact-info */
.hero-section, .contact-info {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Základné štýly pre hero-section */
.hero-section {
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.89); /* Polopriehľadná biela farba */
  padding: 50px 0; /* Upravenie paddingu */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
  transition: top 0.5s ease;
  height: 0px; /* Nastavenie výšky na výšku okna prehladávača */
  background-size: 100% auto; /* Zabezpečuje, aby sa pozadie rozťahovalo na celú šírku */
  font-family: 'Open Sans', sans-serif;
  position: fixed;
}

/* Zmenšené štýly pre hero-section pri skrolovaní */
body.scrolled .hero-section {
  padding-top: 30px; /* Odstránime padding keď stránka nie je skrolovaná */
  height: 50 px;
}

/* Základné štýly pre contact-info */
.contact-info {
  background: rgba(255, 255, 255, 0.89);
  z-index: 2000; /* Zabezpečíme, aby bol nad hero-section */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Plynulý prechod pre transformáciu a priehľadnosť */
  border-bottom: 1px solid #cccccc;
  top: 0; /* Udržujeme na rovnakom mieste */
  left: 0; /* Udržujeme na rovnakom mieste */
  right: 0; /* Udržujeme na rovnakom mieste */
}

.contact-info span {
  margin: 0 10px; /* Medzera medzi ikonou a textom */
}

.contact-info span i {
  margin-right: 5px; /* Medzera medzi ikonami a textom */
}

/* Skrytie contact-info po skrolovaní */
body.scrolled .contact-info {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Základné štýly pre logo */
.logo {
  height: 50px;
  transition: transform 0.5s ease-in-out;
  position: fixed;
  left: 20px;
  top: 50px;
  bottom:10px;
  cursor: pointer; /* Zmena kurzoru na ruku pri prejdení cez logo */
}
body.scrolled .logo {
  height: 40px;
  top: 40px;
}

nav {
  z-index: 1010; /* Zabezpečíme, aby bola navigácia nad ostatnými prvky */
  position: fixed;
  top: 80px; /* Posunutie názvov sekcií vyššie */
  left: 0;
  right: 0;
  text-align: center; /* Vyrovnáme na stred */
}

/* Nastavenie navigácie */
nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center; /* Vyrovnáme na stred */
  position: relative; /* Umožníme posunutie o určitú vzdialenosť nad hero sekciou */
  top: -20px; /* Posunutie názvov sekcií o 20px vyššie */
}
nav ul li {
  display: inline-block;
  margin: 0 25px;
  font-size: 16px; /* Alebo iná veľkosť podľa potreby */
  font-weight: 500; /* Pre strednú tučnosť písma */
}

nav ul li a {
  text-decoration: none;
  color: #000;
  position: relative;
  overflow: hidden; /* Zabezpečuje, že pseudo-elementy sú obmedzené oblasťou odkazu */
}

nav ul li a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: black;
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out; /* Pridanie prechodu na šírku */
}

nav ul li a:hover::before, nav ul li a:focus::before {
  width: 100%; /* Rozšírenie podčiarknutia */
}

nav ul li a:hover, nav ul li a:focus {
  color: red; /* Zmení farbu textu na červenú */
}

/* Responzívne štýly */
@media (max-width: 1110px) {
  .hamburger-menu {
    display: none; /* Počiatočne skryté */
  }

  .hero-section {
    top: 0; /* Aby bola hero-section vždy navrchu */
  }
}

/* Štýly pre druhé logo */
.dotace_logo {
  height: 50px;
  transition: transform 0.5s ease-in-out;
  position: fixed;
  right: 50px;
  top: 50px;
  cursor: pointer; /* Zmena kurzoru na ruku pri prejdení cez logo */
}
body.scrolled .dotace_logo {
  height: 40px;
  top: 40px;
}
/* Štýly pre odkaz okolo loga */
.logo-link {
  display: inline-block; /* Umožní nám nastaviť veľkosť podľa vnútorného obsahu */
  position: relative; /* Umožní nám umiestniť vizuálnu oblasť nad logom */
}
footer {
    background-color: #333; /* Tmavé pozadie pre kontrast */
    color: #fff; /* Biele písmo pre dobrú čitateľnosť */
    font-family: 'Roboto', sans-serif;
    padding: 20px 0; /* Vhodné padding pre vizuálny priestor */
    text-align: center; /* Centrový text a odkazy */
}

footer ul {
    list-style: none; /* Žiadne predvolené štýly zoznamu */
    padding: 0; /* Odstránenie paddingu */
    margin: 10px 0; /* Vertikálny odstup zoznamu */
    display: flex; /* Flexbox pre inline rozloženie */
    justify-content: center; /* Centrové zarovnanie položiek */
    flex-wrap: wrap; /* Zalomenie na nový riadok na menších obrazovkách */
}

footer ul li {
    margin: 0 10px; /* Medzery medzi položkami zoznamu */
}

footer ul li a {
    color: #fff; /* Farba odkazov */
    text-decoration: none; /* Žiadne podčiarknutie odkazov */
    font-weight: bold; /* Tučné písmo pre odkazy */
    transition: color 0.3s ease; /* Plynulá animácia pre zmenu farby */
}

footer ul li a:hover, footer ul li a:focus {
    color: red; /* Červená farba pri prejdení myšou alebo fokuse pre všetky odkazy */
}

footer ul li a[href*="facebook"]:hover, 
footer ul li a[href*="facebook"]:focus {
    color: #3b5998; /* Modrá farba pre odkazy na Facebook */
}

footer small {
    display: block; /* Blokové zobrazenie pre lepšie zarovnanie */
    margin-top: 10px; /* Odstup nad copyright textom */
    font-size: 0.8em; /* Menšia veľkosť fontu pre menej dôležitý text */
    color: #bbb; /* Svetlejšia šedá pre menej dominantné zobrazenie */
}