/* CSS Document */

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box; /* Padding a border sa započítavajú do veľkosti */
  overflow-x: hidden; /* Skryje vodorovný posuvník ak niečo pretŕča */
}

main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

/* header */
header {
  height: 50px;
  background: linear-gradient(135deg, #8B5E3C 10%, #D9C5B2 50%, #8B5E3C 90%);
  /* tmavohnedá (#8B5E3C) a svetlejší béžovo-hnedý stred (#D9C5B2) */
  color: #4B3427; /* tmavší hnedý text */
  text-align: center;
  line-height: 10px; /* Zabezpečí vertikálne zarovnanie textu */
  width: 100%;
  padding: 3rem 2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.header-content h1 {
  font-family: 'Garamond', serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem; /* Medzera pod nadpisom */
  letter-spacing: 1.5px; /* Rozostup medzi písmenami */
  text-shadow: 2px 2px 6px rgba(75, 52, 39, 0.4); /* jemný tieň v hnedom tóne */
  line-height: 1.1; /* lepšie vertikálne zarovnanie */
  padding-top: 0; /* odstránime veľký padding hore */
  margin-top: -1rem; /* posunieme celý blok mierne nahor */
  color: #4B3427; /* tmavohnedá */
}

.header-content p {
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  color: #6F4E37; /* stredná hnedá */
  text-shadow: 1px 1px 3px rgba(111, 78, 55, 0.3);
}

.container {
  display: flex;
  flex: 1;
  width: 100%;
}

nav {
  width: 180px;
  padding: 3rem 1.5rem;
  background-color: #A67853; /* stredná hnedá */
  color: #F2E4D5; /* svetlý béžový text */
  box-shadow: 3px 0 10px rgba(75, 52, 39, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: 'Lora', serif;
}

nav ul li {
  border-bottom: 2px solid #F2E4D5; /* farba čiary */
  width: 105%; /* dĺžka čiary */
  margin: 0 auto 7px; /* vycentruje ju a pridá spodný margin */
  padding-bottom: 11px; /* trochu priestoru pod textom */
  list-style: none; /* odstráni "odrážky" */
}

nav a {
  color: #F2E4D5;
  text-decoration: none;
  font-weight: 590;
  font-size: 18.5px;
  padding: 9px;
  /*border: 2px solid #5a4a3c;  tmavý rámček ako pozadie */
  border-radius: 6px;
  text-align: center;
  justify-content: center; /* horizontálne centrovanie */
  align-items: center; /* vertikálne centrovanie */
  display: inline-block; /* aby padding a border pekne sedeli */
}

nav a:hover,
nav a.active {
  background-color: #6F4E37; 
  color: #F2E4D5;
  border-color: #F2E4D5; /* rámček zmení farbu na inú */
}

section {
  flex: 1;
  background-color: #f5ebe0;
  overflow: auto; /* V prípade potreby sa objaví scroll */
}

.clanokjedna {
  margin: 10px auto;
  background: none;
  border-radius: 0;
  max-width: 1000px;
  padding: 0 20px;
}

.clanokjedna h1 {
  color: #4A5759;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  text-transform: uppercase;
}

.clanokjedna p {
  color: black;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  line-height: 1.6;
}

.sluzby {
  background-color: #faefed;
  padding: 50px 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.sluzby h2 {
  font-size: 20px;
  margin-bottom: 30px;
  color: #4A5759;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  text-transform: uppercase;
}

.sluzby-boxy {
  display: flex; /* zapína zarovnanie boxov vedľa seba */
  flex-wrap: wrap; /* ak sa nezmestia, zalomia sa do ďalšieho riadku */
  gap: 20px; /* medzery medzi boxami */
  justify-content: center; /* zarovnanie boxov na stred */
}

.sluzba {
  background-color: #F7E1D7;
  padding: 20px;
  border-radius: 10px;
  width: 350px; /* určuje veľkosť boxu */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sluzba h3 {
  color: #4A5759;
  margin-bottom: 9px;
}

.sluzba p {
  color: #111;
  font-size: 15px;
}

.sluzba:nth-child(1) {
  background-color: #EDAFB8;
}

.sluzba:nth-child(2) {
  background-color: #F7E1D7;
}

.sluzba:nth-child(3) {
  background-color: #DEDBD2;
}

/* SPOLUPRACA */

.spolupraca {
  background-color: #f5ebe0;
  padding: 50px 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.spolupraca h2 {
  font-size: 20px;
  margin-bottom: 30px;
  color: #4A5759;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  text-transform: uppercase;
}

.kroky {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.krok {
  background-color: #DEDBD2;
  padding: 20px;
  border-radius: 15px;
  width: 250px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.krok:hover {
  transform: translateY(-10px); /* Posun po osi Y - vertikálne (translateY); hore o 10 pixelov (-10px) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.krok-cislo {
  font-size: 2rem;
  font-weight: 700;
  color: #4A5759;
  background-color: #F7E1D7;
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  border-radius: 50%;
  line-height: 50px;
  box-shadow: 0 0 5px rgba(74, 87, 89, 0.6);
}

.krok h3 {
  margin-bottom: 10px;
  color: #4A5759;
}

.krok p {
  font-size: 0.95rem;
  color: #111;
  line-height: 1.4;
}

.spolupraca .krok:nth-child(1) {
  background-color: #EDAFB8;
  color: #4A5759;
}

.spolupraca .krok:nth-child(2) {
  background-color: #F7E1D7;
  color: #4A5759;
}

.spolupraca .krok:nth-child(3) {
  background-color: #DEDBD2;
  color: #4A5759;
}

.spolupraca .krok:nth-child(4) {
  background-color: #B0C4B1;
  color: #4A5759;
}
  
  
  
  
/* GALERIA */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 20px;
}

.gallery img {
  width: 240px;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.03);
}






}
/* STVRTA STRANKA - TIPY */

.tipy-sekcie {
  background-color: #f5ebe0;
  padding: 50px 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.tipy-sekcie h2 {
  font-size: 20px;
  margin-bottom: 30px;
  color: #4A5759;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  text-transform: uppercase;
  text-align: center;
   font-family: 'Montserrat', sans-serif;
}

.tipy-boxy {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.tip {
  background-color: #DEDBD2;
  padding: 20px;
  border-radius: 10px;
  max-width: 330px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.tip:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.tip h3 {
  color: #4A5759;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.tip p {
  color: #111;
  font-size: 15px;
  line-height: 1.6;
  font-family: 'Montserrat', sans-serif;
}

.tipy-boxy {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

.tip {
  flex: 1 1 calc(33.333% - 30px);
  background-color: #fff;
  padding: 30px 25px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  color: #000000; /* čierna farba textu */
  font-family: 'Montserrat', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tipy-boxy > .tip:nth-child(1) {
  background-color: #f2c4cb;
}

.tipy-boxy > .tip:nth-child(2) {
  background-color: #e6d1e6;
}

.tipy-boxy > .tip:nth-child(3) {
  background-color: #DEDBD2;
}

.tipy-boxy > .tip:nth-child(4) {
  background-color: #f5e7c1;
}

.tipy-boxy > .tip:nth-child(5) {
  background-color: #F7E1D7;
}

.tipy-boxy > .tip:nth-child(6) {
  background-color: #c5d6c6;
}


/* Text v boxoch */
.tip p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: #000000; 
}

/* Hover efekt */
.tip:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.15);
}

.tip-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}


/* TRETIA STRÁNKA - CENNÍK */
.cenik {
  padding: 50px 20px;
  background-color: #f5ebe0;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.cenik h2 {
  font-size: 20px;
  margin-bottom: 30px;
  color: #4A5759;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}

.cenik-tab {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cenik-tab th,
.cenik-tab td {
  padding: 15px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 15px;
  color: #000;
  background-color: #fff;
  transition: background-color 0.3s ease;
}

.cenik-tab thead th {
  background-color: #EDAFB8;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* prvý stĺpec všetkých riadkov */
.cenik-tab td:first-child {
  background-color: #F7E1D7;
  font-weight: 600;
}

.cenik-tab tbody tr:hover td {
  background-color: #c5d6c6; /* zelený odtieň pri hover */
}

@media screen and (max-width: 700px) {
  .cenik-tab th,
  .cenik-tab td {
    font-size: 13px;
    padding: 10px;
  }
}


/* PIATA */ 
.objednavka {
  max-width: 600px;
  margin: 40px auto;
  background-color: #f5ebe0;
  padding: 30px 25px;
  border-radius: 15px; /* Zaoblené rohy */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Tieň okolo formulára */
  font-family: 'Montserrat', sans-serif;
  color: #4A5759;
  text-align: center; /* text na stred */
}

.objednavka h2 {
  font-size: 2rem;
  margin-bottom: 10px; /* spodný okraj pod nadpisom */
  text-transform: uppercase; /* text veľkými písmenami */
  color: #4A5759;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.15); /* jemný tieň pod textom */
}

.objednavka p {
  margin-bottom: 25px;
  font-weight: 300;
  font-size: 1.1rem;
}

.objednavka form {
  display: flex; /* použitie flexboxu */
  flex-direction: column; * usporiadanie do stĺpca */
  gap: 15px;
  text-align: left; /* zarovnanie textu naľavo vo formulári */
}

.objednavka label {
  font-weight: 600;
  margin-bottom: 5px;
}

.objednavka input[type="text"],
.objednavka input[type="email"],
.objednavka input[type="tel"],
.objednavka select,
.objednavka textarea {
  padding: 10px; /* vnútorné odsadenie políčok */
  border: 2px solid #DEDBD2; /* svetlý okraj políčok */
  border-radius: 8px; /* zaoblené rohy políčok */
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s ease; /* hladký prechod farby okraja pri focus */
}

.objednavka input[type="text"]:focus,
.objednavka input[type="email"]:focus,
.objednavka input[type="tel"]:focus,
.objednavka select:focus,
.objednavka textarea:focus {
  border-color: #6F4E37;
  outline: none;
}

.objednavka button {
  background-color: #6F4E37; /* tmavohnedé tlačidlo */
  color: #F2E4D5;
  border: none;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer; /* zmena kurzora na ruku pri hover */
  transition: background-color 0.3s ease; /* hladký prechod farby tlačidla pri hover */
  align-self: center;
  width: 50%;
}

.objednavka button:hover {
  background-color: #4A5759;
}

#form-message {
  margin-top: 15px;
  font-style: italic;
  text-align: center;
  color: #4A5759;
}













/* FOOTER */

.footer {
  background-color: #2f2a27;
  color: #F7E1D7;
  padding: 40px 20px 20px 20px;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1 300px;
}

.footer-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #EDAFB8;
  display: inline-block;
  padding-bottom: 5px;
}

.footer-section p {
  margin: 8px 0;
  line-height: 1.6;
  color: #DEDBD2;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: #aaa;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 15px;
}

.footer h4 {
  color: #DEDBD2;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  margin: 8px 0;
  line-height: 1.6;
}

.footer a {
  color: #F7E1D7;          /* svetlá farba, ako máš v texte */
  text-decoration: none;   /* bez podčiarknutia */
  margin: 0 8px;           /* medzera medzi odkazmi */
  font-weight: 600;        /* trocha tučnejšie písmo */
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #EDAFB8;          /* farba pri prejdení myšou */
  text-decoration: underline; /* podčiarknutie pri hover */
}


.footer .faq form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.footer input[type="email"],
.footer textarea {
  padding: 10px;
  border: none; /* Žiadny rám okolo polí */
  border-radius: 6px; /* Zaoblené rohy */
  font-size: 14px; /* Veľkosť písma v poliach */
  font-family: inherit; /* Použije rovnaké písmo ako vo footer */
}

.footer button {
  padding: 10px; /* Veľkosť tlačidla */
  background-color: #EDAFB8; /* Farba tlačidla */
  color: white; /* Biele písmo na tlačidle */
  border: none; /* Žiadny okraj */
  border-radius: 6px; /* Zaoblené rohy tlačidla */
  cursor: pointer; /* Ukazovateľ myši sa zmení na ruku - kliknúť */
  font-weight: 600; /* Tučné písmo */
  transition: background-color 0.3s ease; /* Plynulý prechod farby pri hover */
}

.footer button:hover {
  background-color: #B0C4B1; /* Iná farba tlačidla pri prejdení myšou */
}

#form-message {
  margin-top: 10px; /* Odsadenie správy od formulára */
  color: #DEDBD2; /* Farba textu */
  font-style: italic; /* Kurzíva */
}

/* RESPONSIVE */

@media screen and (max-width: 1300px) {
  main {
    max-width: 950px;
  }
}

@media screen and (max-width: 800px) {
  main {
    max-width: 600px;
  }
  .container {
    flex-direction: column;
  }
  nav, section {
    width: 100%;
  }
  .tipy-sekcie {
    padding: 20px;
    margin: 15px 10px;
  }

  .clanokjedna h2 {
    font-size: 1.5rem;
  }
}
/* CSS Document */