html, body {
  height: 100%;
  display: flex;
  background-color: white;
  margin: 0;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 20px;
  position: relative;
  margin-top: 0;
  background-color: white; 
  z-index: 1;
  border-bottom: 1px solid #dcdcdc;
}

.logo {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 0;
  position: relative;
  z-index: 10;
  white-space: nowrap;
}
  
.brand {
  font-size: 30px;
  font-weight: bold;
  color: #003092;
}
  
.logo hr {
  width: 100%;
  border: 0;
  border-top: 2px solid #003092;
  margin: 5px 0;
}
  
.subtitle {
  font-size: 18px;
  color: #003092;
  text-align: center;
}

.menu-toggle {
  display: none;
  font-size: 35px;
  cursor: pointer;
  padding: 10px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  list-style: none;
  font-size: 25px;
  justify-content: flex-end;
  z-index: 10;
}
  
nav ul li a {
  text-decoration: none;
  color: #003092;
  font-weight: bold;
}

nav ul li a:hover {
  color: #EC8305;
  text-decoration: underline;
  text-underline-offset: 10px;
}

.hlavni-stranka {
  font-size: 25px;
  font-weight: bold;
  color: white;
  background-color: #003092;
  padding: 10px 10px;
  border-radius: 10px;
}

.hlavni-stranka:hover {
  color: white !important;
  background-color: #EC8305 !important;
  text-decoration: none !important;
}

section {
  margin: 50px 50px;
  text-align: center;
}

main {
  flex: 1; /* Hlavní obsah zabírá dostupný prostor */
  padding-bottom: 200px;
  margin: 20px; /* Vnitřní odsazení obsahu pro přehlednost */
  font-size: 1.2rem;
}

.image1 img {
  margin: auto auto;
  width: 100%;
  max-width: none;
  max-height: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  object-fit: contain;
}

h1 {
  text-align: center;
  font-size: 2rem;
}

/*Služby */
.circle-blue {
  width: 150px;
  height: 150px;
  border-radius: 50%; 
  background-color: #003092; 
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px; 
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.circle-blue h3 {
  margin: 0;
  font-size: 1.4rem;
  color: white;
}

.circle-blue:hover {
  background-color: #EC8305;
  transform: scale(1.1); /* Mírné zvětšení pro efekt interaktivity */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Zvýrazní stín při hoveru */
  transition: all 0.3s ease; /* Plynulý přechod při změnách */
}

.sluzby p {
  max-width: 800px; /* Maximální šířka odstavce */
  margin: 20px auto; /* Horizontální zarovnání na střed */
  text-align: left; /* Zarovnání textu k levému okraji uvnitř */
  line-height: 1.6; /* Lepší čitelnost delších textů */
  font-size: 1.2rem;
}

.sluzby ul {
  max-width: 800px; /* Maximální šířka seznamu */
  margin: 0 auto; /* Zarovnání seznamu na střed obrazovky */
  padding-left: 20px; /* Malý odsazení od levé strany pro odrážky */
  text-align: left; /* Zarovná text k levé straně uvnitř seznamu */
}

.sluzby ul li {
  margin-bottom: 10px; /* Mezera mezi jednotlivými položkami seznamu */
  line-height: 1.6; /* Lepší čitelnost textu v položkách */
  list-style-position: inside; /* Odrážky uvnitř textového bloku */
}

.circle-orange {
  width: 150px;
  height: 150px;
  border-radius: 50%; 
  background-color: #009990; 
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px; 
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.circle-orange h3 {
  margin: 0;
  font-size: 1.4rem;
  color: white;
}

.circle-orange:hover {
  background-color: #FFAB5B;
  transform: scale(1.1); /* Mírné zvětšení pro efekt interaktivity */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Zvýrazní stín při hoveru */
  transition: all 0.3s ease; /* Plynulý přechod při změnách */
}

/* Ceník */
.cenik table {
  width: 50%; /* Tabulka bude zabírat celou šířku dostupného prostoru */
  border-collapse: collapse; /* Odstraní mezery mezi buňkami */
  margin: 20px auto; /* Vytvoří mezeru nad a pod tabulkou */
  font-size: 1.2rem; /* Nastaví velikost textu */
  text-align: left; /* Zarovná text k levému okraji */
}

.cenik {
  text-align: center;
}

.cenik p {
  max-width: 80%; /* Maximální šířka odstavce pro lepší čitelnost */
  margin: 20px auto; /* Horizontální zarovnání na střed, vertikální mezery */
  line-height: 1.6; /* Lepší čitelnost řádků */
  text-align: center; /* Zarovnání do bloku pro elegantní vzhled */
  padding: 0 20px; /* Přidání vnitřních odsazení */
  font-size: 1.2rem;
}

.cenik th, .cenik td {
  padding: 12px; /* Přidá vnitřní odsazení pro lepší čitelnost */
  border: 1px solid #EC8305; /* Jemné orámování buňek */
}

.cenik th {
  background-color: #003092; /* Tmavě modré pozadí pro hlavičku tabulky */
  color: white; /* Bílý text v hlavičce */
  font-weight: bold; /* Zvýraznění textu v hlavičce */
  text-transform: uppercase; /* Velká písmena pro hlavičku */
}

.cenik tr:nth-child(even) {
  background-color: #f9f9f9; /* Světle šedé pozadí pro sudé řádky */
}

.cenik tr:nth-child(odd) {
  background-color: #ffffff; /* Bílé pozadí pro liché řádky */
}

/* O mně */
.omne p {
  max-width: 800px; /* Maximální šířka odstavce pro lepší čitelnost */
  margin: 20px auto; /* Horizontální zarovnání na střed, vertikální mezery */
  line-height: 1.6; /* Lepší čitelnost řádků */
  text-align: justify; /* Zarovnání do bloku pro elegantní vzhled */
  padding: 0 20px; /* Přidání vnitřních odsazení */
  font-size: 1.2rem;
}

/* Blog */
.blog p {
  font-size: 1.2rem;
}

/*
.blog-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 450px;
  margin: 0 auto;
  text-align: center;
}
*/

.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  max-width: 200px;
  margin: 0 auto;
}

.blog-item {
  width: 200px; 
  height: 300px; /* Fixní výška */
  border: 1px solid #ddd;
  padding: 1px;
  text-align: center;
  /*margin: auto;  později odebrat */
}

.blog-item img {
  width:  100%;
  height: auto;
  display: block;
}

.blog-item h2 {
  font-size: 1.3rem; /* Změna velikosti nadpisu */
  color: #003092; /* Změna barvy nadpisu */
  margin-bottom: 10px; /* Přidání mezery pod nadpisem */
  text-decoration: none;
}

.blog-item a {
  text-decoration: none;
  color: inherit; /* Zajistí, že barva odkazu se přizpůsobí nadpisu */
}

/* jednotlivý blogy */
.clanek img {
  width: 200px;
  height: 200px;
  object-fit: cover; /* Zabrání deformaci a zachová poměr stran */
  display: block;
  margin: 0 auto;
}

.clanek h1,
.clanek h2,
.clanek h3,
.clanek p {
    max-width: 800px; /* Maximální šířka odstavce pro lepší čitelnost */
    margin: 20px auto; /* Horizontální zarovnání na střed, vertikální mezery */
    line-height: 1.6; /* Lepší čitelnost řádků */
    text-align: justify; /* Zarovnání do bloku pro elegantní vzhled */
    padding: 0 20px; /* Přidání vnitřních odsazení */
}

.clanek ol,
.clanek ul {
  margin: 0 auto;
  text-align: left; /* Zabrání středovému zarovnání textu */
  max-width: 800px; /* Maximální šířka seznamu */
}

.clanek li {
  line-height: 1.6; /* Lepší čitelnost */
  margin-bottom: 5px; /* Mezera mezi položkami */
}

/* Kontakt */
section table {
  margin: 0 auto;
}

form input{
  margin: 5px;
  border: 1px solid black;
  font-size: 1rem;
}
  
form label {
  margin: 5px 5px;
  font-size: 1.2rem;
}
  
textarea {
  margin-top: 5px;
  font-size: 1rem;
}

form .gdpr-checkbox {
  width: 20px; /* Zvětší velikost checkboxu */
  height: 20px; /* Zvětší výšku checkboxu */
  cursor: pointer; /* Změní kurzor na ručičku při najetí */
  background-color: #003092;
}

.submit-button {
  font-size: 20px; /* Zvětší text tlačítka */
  background-color: #003092; /* Nastaví barvu pozadí tlačítka */
  color: white; /* Nastaví barvu textu na bílou */
  padding: 10px 20px; /* Přidá vnitřní odsazení pro větší tlačítko */
  border: none; /* Odstraní výchozí rámeček */
  border-radius: 5px; /* Přidá zaoblené rohy */
  cursor: pointer; /* Změní kurzor na "ručičku" při najetí myší */
  transition: all 0.3s ease; /* Plynulý přechod pro hover efekt */
}

.submit-button:hover {
  background-color: #EC8305; /* Změní barvu pozadí při najetí myší */
  color: white; /* Udrží barvu textu na bílé */
  transform: scale(1.1); /* Lehké zvětšení tlačítka pro efekt */
}

.contact p {
  max-width: 800px; /* Maximální šířka odstavce pro lepší čitelnost */
  margin: 20px auto; /* Horizontální zarovnání na střed, vertikální mezery */
  line-height: 1.6; /* Lepší čitelnost řádků */
  text-align: justify; /* Zarovnání do bloku pro elegantní vzhled */
  padding: 0 20px; /* Přidání vnitřních odsazení */
  font-size: 1.2rem;
}

.contact-email {
  display: flex;
  justify-content: center; /* Zarovnání na střed */
  align-items: center;
  color: #003092;
}

.social-links {
  display: flex;
  justify-content: center; /* Zarovnání na střed */
  align-items: center;
  gap: 10px;
}

.social-links img {
  transition: transform 0.3s;
}

.social-links img:hover {
  transform: scale(1.1);
}



/*Ochrana osobních údajů */
.legal {
  max-width: 800px; 
  margin: 20px auto; 
  text-align: left; 
  padding: 20px;
  font-size: 18px;
}
  
.privacy-list li b {
  display: block; /* Tučný text na nový řádek */
  margin-bottom: 5px; /* Mezera mezi tučným textem a dalším obsahem */
}

.link {
  text-decoration: none;
  color: #003092;
}

.link:hover {
  color: #EC8305;
  text-decoration: none !important;
}

/* GDPR banner */
.gdpr-banner {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "gdpr-text"
    "button-container";
  position: fixed;
  background-color: #EC8305;
  color: white;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 10px 20px;
  z-index: 9999;
  align-items: center;
  border-radius: 8px;
  border: white solid 2px;
}

.gdpr-text {
  grid-area: gdpr-text;
  font-size: 1.2rem;
  margin-right: 5px;
  text-align: center;
}

.button-container {
  grid-area: button-container;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.gdpr-banner a {
  color: white;
  text-decoration: underline;
}

.gdpr-banner button {
  background: #003092;
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  margin: 2px;
}

.gdpr-banner a:hover {
  color: #003092;
  text-decoration: underline;
}

.gdpr-banner button:hover {
  color: white !important;
  background-color: #1B56FD !important;
  text-decoration: none !important;
  border: 2px solid white;
}

.hidden {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

/* GDPR settings */
.gdpr-settings {
  display: none; /* Výchozí stav – skrytá sekce */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  text-align: center;
  border: 2px solid #EC8305;
}

.gdpr-settings p {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.gdpr-settings label {
  display: block;
  margin: 5px 0;
}

.gdpr-settings button {
  background: #003092;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
}

.gdpr-settings button:hover {
  background-color: #1B56FD;
}

#analytics-cookies:checked, #marketing-cookies:checked {
  accent-color: #003092; 
}

/* footer */
footer {
  position: fixed; /* Footer je pevně umístěn */
  bottom: 0; /* Umístění na spodku stránky */
  width: 100%; /* Footer přes celou šířku stránky */
  background-color: #f9f9f9; /* Jemná barva pozadí */
  padding: 10px 0; /* Vnitřní odsazení pro lepší čitelnost */
  text-align: center; /* Zarovnání textu na střed */
  font-size: 1.1rem;
}

.footer-section {
  margin-bottom: 10px; /* Mezera mezi sekcemi */
}

/* Styl pro malé obrazovky */
@media (max-width: 1000px) {
  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
  }

  nav ul {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  }

  nav ul.show {
    display: flex;
  }

  nav ul li {
    margin-bottom: 10px;
  }

  .omne p {
    text-align: center;
  }

  .contact p {
    text-align: center;
  }

  /*Blog */
  .clanek img {
    max-width: 100%;
    height: auto;
  }

  .blog-item {
    min-height: 300px;
    max-height: 700px;
    height: fit-content;
    padding-bottom: 5px;
  }
}

@media (max-width: 768px) {
  .image1 img {
      display: block;
      width: 100%; /* Zajistí, že obrázek se roztáhne na plnou šířku */
      height: auto; /* Zachová proporce */
      margin: 10px;
      object-fit: contain;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
  }

  nav ul {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  }

  nav ul.show {
    display: flex;
  }

  nav ul li {
    margin-bottom: 10px;
  }

  .hlavni-stranka {
    font-size: 20px;
  }

  .cenik table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem; /* Lehce zmenšený text */
  }

  .cenik th,
  .cenik td {
    padding: 8px;
    text-align: left;
  }

  .cenik th:nth-child(2),
  .cenik td:nth-child(2) {
    min-width: 100px; /* Zajištění minimální šířky druhého sloupce */
    width: 30%; /* Zachování šířky druhého sloupce */
    text-align: center; /* Možné vycentrování textu ve druhém sloupci */
  }

  .cenik th:nth-child(1),
  .cenik td:nth-child(1),
  .cenik th:nth-child(3),
  .cenik td:nth-child(3) {
    width: 35%; /* Rozdělení zbývající šířky mezi první a třetí sloupec */
  }

  .cenik {
    overflow-x: auto; /* Možnost scrollování při nutnosti */
  }

  .contact form {
    max-width: 100%; /* Na mobilu bude formulář o něco užší */
  }

  .contact textarea {
    height: 150px; /* Nastavení výšky textového pole */
  }

  .contact input,
  .contact textarea {
    width: calc(100% - 10px); /* Větší mezera od pravého okraje */
  }

  .blog-container {
    grid-template-columns: 1fr; /* Pouze jeden sloupec na mobilu */
  }

  .blog-item {
    width: 100%; /* Položky se roztáhnou na plnou šířku */
  }

  .clanek p {
    letter-spacing: 0px; /* Normální mezery mezi písmeny */
    word-spacing: normal;
    display: center;
  }


  .blog-item a {
    display: block; /* Zajistí, že obsah uvnitř <a> bude jako blokový prvek */
    text-decoration: none; /* Odstranění podtržení */
  }

  .blog-item h2 {
    margin-top: 10px;
    margin-bottom: 20px; /* Přidání větší spodní mezery */
  }

  .clanek h2,
  .clanek h3,
  .clanek p {
    max-width: 600px; /* Maximální šířka odstavce pro lepší čitelnost */
    margin: 20px auto; /* Horizontální zarovnání na střed, vertikální mezery */
    line-height: 1.6; /* Lepší čitelnost řádků */
    text-align: left; /* Zarovnání do bloku pro elegantní vzhled */
    padding: 0 20px; /* Přidání vnitřních odsazení */
  }
  .clanek h1 {
    font-size: 1.4rem;
    text-align: left;
  }
  
  .clanek h2 {
    font-size: 1.3rem;
  }
  
  .clanek h3 {
    font-size: 1.2rem;
  }
}