/* ZMENŠENÍ VÝŠKY MOTIVU POUZE PRO MOBILY 
@media only screen and (max-width: 767px) {
#header, .header-inner, #motive {
height: 200px !important; /* Tady si nastav výšku v pixelech podle potřeby */
min-height: 200px !important;
}
}
*/






/* OPRAVA ODSZENÍ OBRÁZKŮ ZAROVNANÝCH VLEVO */
/* Tento kód zajistí, aby obrázek zůstal zarovnaný přesně s okrajem textu vlevo, 
ale zároveň odsunul text pouze z pravé strany. */

img[style*="float: left"], 
img.alignleft { 
  margin-right: 20px !important; /* Mezera mezi obrázkem a textem napravo */
  margin-left: 0px !important;   /* Vynulování mezery vlevo, aby obrázek neodskakoval od kraje */
  margin-top: 5px;               /* Volitelné: mírné odsazení shora pro lepší zarovnání s řádkem */
  margin-bottom: 5px;            /* Volitelné: odsazení od textu, pokud by byl pod obrázkem */
}


/* Odemknutí výšky hlavičky, aby se tam větší logo vešlo */
header, .header, #header, .navbar, .logo-wrapper {
  height: auto !important;
  min-height: 200px !important;
}

/* Úprava prostoru hlavičky */
header, .header, #header, .navbar, .logo-wrapper {
  min-height: 100px !important; /* Sniž toto číslo na minimum, co logo dovolí */
  padding-top: 0 !important;    /* Vynutí nulovou mezeru nad logem */
  padding-bottom: 0px !important; /* Mezera pod logem (uprav dle potřeby) */
}

/* Posunutí samotného loga výše */
.logo, #logo, .navbar-brand {
  margin-top: 0px !important; /* Záporná hodnota posune logo nahoru nad okraj */
  padding-top: 0 !important;
}

/* --- NASTAVENÍ PRO POČÍTAČE (Desktop) --- */
@media screen and (min-width: 769px) {
  #motto, .motto, #reklama, .reklama, .header {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  #main, .main, #obsah, .obsah, #content, .content, #main-content, .main-content, #breadcrumbs, .breadcrumbs, h1 {
    margin-top: 0px !important;
    padding-top: 10px !important;
  }
}

/* --- OPRAVA PRO MOBILY A KOTVY (do 768px) --- */
@media screen and (max-width: 768px) {

  /* 1. Řeší skok na kotvu: text se zastaví pod menu, ne pod logem */
  html {
    scroll-padding-top: 100px !important; /* Upravte podle výšky vašeho menu na mobilu */
    scroll-behavior: smooth; /* Plynulé odrolování */
  }

  /* 2. Zmenšení loga na mobilu, aby nebylo přes půl displeje */
  img[alt="Logo"], img[src*="logo"], .logo img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* 3. Odsazení samotného textu, aby nebyl nalepený pod menu při běžném prohlížení */
  #main, .main, #main-content, #content, .content {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}



.moje-tlacitko {
  display: inline-block !important;
  margin-top: 30px !important;
  margin-bottom: 20px !important;
  background-color: #FFD700 !important;
  color: #000 !important;
  padding: 15px 35px !important;
  border-radius: 5px !important;
  text-decoration: none !important; /* TADY JE TA ZMĚNA */
  font-weight: bold !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* A pro jistotu i při najetí myší */
.moje-tlacitko:hover {
  text-decoration: none !important;
  background-color: #ffffff !important; /* Pozadí zbělá */
  color: #000000 !important;            /* Text zůstane/skočí do černé */
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.5) !important; /* Silnější zlatá záře */
}




/* 1. Nastavení základního vzhledu odkazu */
main a, article a, .content-inner a, section a, .clanek a {
  color: rgb(255, 215, 0) !important;
  text-decoration: underline !important;
  transition: all 0.3s ease; /* Bonus: plynulý přechod barvy */
}

/* 2. Nastavení reakce po najetí myší (HOVER) */
main a:hover, article a:hover, .content-inner a:hover, section a:hover, .clanek a:hover {
  color: #ffffff !important;   /* Změna na bílou */
  text-decoration: none !important; /* Zmizí podtržení */
}

/* Zvětšení samotného obrázku loga */
img[alt="Logo"], img[src*="logo"], .logo img, #logo img {
  height: auto !important;
  width: auto !important;
  min-width: 220px !important; /* Tady nastavte minimální šířku, jakou chcete */
  max-width: 500px !important;
}


/* Sjednocení barev všech ikon sociálních sítí v patičce */
/* 1. Základní stav: bílé ikonky, průhledné pozadí, bílá kružnice */
.footer-social-icons a, .social-icons a, #footer .social-icons a {
  background-color: transparent !important;
  border: 1px solid #ffffff !important; /* Bílá kružnice v základu */
  border-radius: 50%; /* Aby to bylo kolečko */
  transition: all 0.3s ease !important;
}

.footer-social-icons img, #footer img, .social-icons img {
  filter: brightness(0) invert(1) !important;
}

/* 2. HOVER: Zlaté písmeno i zlatá kružnice */
.footer-social-icons a:hover, .social-icons a:hover, #footer a:hover {
  background-color: transparent !important;
  border-color: #FFD700 !important; /* Kružnice zezlátne */
  box-shadow: none !important; /* Zruší případný zelenkavý stín */
}

.footer-social-icons a:hover img, #footer a:hover img, .social-icons a:hover img {
  /* Filtr pro zlatou barvu písmena */
  filter: invert(85%) sepia(21%) saturate(2225%) hue-rotate(351deg) brightness(103%) contrast(104%) !important;
}