/* px absolútnu jednotku nepoužívame, radšej použiť flexibilnejšiu jednotku napr. root em = rem
   a ked zmením veľkosť základného písma tak sa všetky prvky prispôsobia k tomu lebo všade používame rem 
   v jednom externom CSS súbore = lepšia responzivita a je flexibilnejšia */
body {
    font-family: Arial, sans-serif; /* Arial bude prvotné písmo kt. sa použije, sans-serif je záložkové písmo */
    margin: 0; /* vonkajšie odsadenie = priestor medzi obsahom a okraja prehliadača */ 
    padding: 0; /* vnútorné odsadenie = priestor medzi obsahom a vnútorným okrajom elementu */ 
    line-height: 1.6; /* výška riadku je 1.6 násobok veľkosti písma = lepšia čitateľnosť riadkovo */ 
    background-color: #f0f0f0; /* farba pozadia, hexa označenie farby */ 
    font-size: 1rem; /* veľkosť písma 1 rem = 16px odvodený od root element */ 
}
/* prevody: veľkosť základného písma je 16px, 16px = 1 rem, takže 16kou delím px a dostanem rem */
header {
    background-color: #f8f9fa; /* farba pozadia, hexa označenie farby */ 
    padding: 0.625rem; /* vnútorné odsadenie = priestor medzi obsahom hlavičky a jej vnútorným okrajom */ 
    text-align: center; /* všetok textu sa zarovnáva na stred */ 
}
/* všetky elementy <span> nachádzajúce sa v triede class="contact-info" v <section> */
.contact-info span { /* selektor */
    margin: 0 0.625rem; /* margin: (hore a dole) (vľavo a vpravo) */
}
/* nav je flex container a jeho priamy potomkovia: odkazy,logo sú flex položky 
   kt. vieme usporiadať v rámci kontajnera podľa trochu inak */
nav {
    display: flex; /* nastavíme nav na flex container */
    justify-content: space-between; /* rozloženie všetkých flex položiek(logo,odkazy,button) na osi X : rovnaký prázdny priestor medzi nimi zľava napravo v danom poradí položiek */
    align-items: center; /* zarovnanie všetkých flex položiek(logo,odkazy,button) na osi Y : do stredu */
    background-color: #ffcc00; /* farba pozadia, hexa označenie farby */ 
    padding: 0.625rem; /* vnútorné odsadenie = priestor medzi obsahom navigácie a jej vnútorným okrajom */ 
}
nav .logo img {
    max-width: 9.375rem; /* obmedzenie šírky obrázka, nebude nikdy príliš veľký na rôznych zariadeniach */
    height: auto; /* vypočíta sa podľa šírky automaticky */
    margin-right: 1.25rem; /* posunie obsah na pravej strane obrázka(loga) o 1.25rem vzdialenosť */
}
/* Selektor pre všetky ul nachádzajúce sa v nav */
nav ul {
    list-style: none; /* odstránime default dot notation (bodku) v unordered list */
    display: flex; /* ul musí byť tiež flex container totiž keby nebolo, jeho položky li by boli pod sebou a nie vedľa seba */
    padding: 0; /* z vizuálneho hľadiska bude krajšie dropdown menu = nebude odsadený text dropdown položiek príliš napravo */
}
/* Každá položka zoznamu li v nav */
nav ul li {
    margin: 0 0.9375rem; /* vonkajšie odsadenie vľavo-vpravo --> nebudú položky blýzko seba */
}
/* definujeme efekt pri prechode myšou nad položkami li v rámci ul čo je v rámci nav */
nav ul li:hover {
    background-color: #e6b800; /* pozadie položky žltá */
    border-radius: 0.3125rem; /* okraje položky mierne zaoblené */
    transform: scale(1.1); /* položka sa zväčší na 110 % svojej veľkosti čo je 1.1 násobok pôvodnej veľkosti */
}
/* selektor pre všetky odkazy v nav */
nav a {
    text-decoration: none; /* bez toho by bolo underline a takto odstránime default podčiarknutie odkazu */
    color: #000; /* farba textu odkazu */
    padding: 0.3125rem 0.625rem; /* priestor medzi obsahom odkazu a jeho okrajmi : (horné - dolné) (ľavé - pravé) */
}
/* Potrebné aby rozbalovacie menu bolo správne umiestnené lebo .dropdown je position absolute a to
sa odvíja od najbližšej position relative. Ak by nav > ul > li nebolo position relative .dropdown by sa 
odvíjalo od iného predka čo môže byť nav a to by bolo zle */
nav > ul > li { /* > je priama hierarchia , selektor sa aplikuje na li prvky kt. sú priamymi deťmi ul, kt. je priamym deťom nav */
    /* nemohol som použiť nav ul li lebo vtedy štýli aplikovali aj na vnorené li prvky , tak som musel 
       aplikovať štýli len na PRIAME deti a to ako POSITION RELATIVE */
    position: relative; /* referenčný bod pre .dropdown absolute */
}
nav .dropdown {
    display: none; /* skryje dropdown rozbaľovacie menu */
    position: absolute; /* Nastaví absolútnu pozíciu dropdown prvku vzhľadom na jeho najbližšieho predka
    s relatívnou pozíciou. Presne určíme polohu pomocou vlastností left a top. */
    left: 0; /* ľavý okraj rodičovského prvku tesne */
    top: 100%; /* hned pod rodičom */
    background-color: white; /* biele pozadie pre rozbaľovacie menu */
    border: 0.0625rem solid #ccc; /* tenký sivý okraj okolo dropdown menu */
    z-index: 1000; /* zobrazí sa NAD ostatnými prvkami na stránke */
}
nav > ul > li:hover .dropdown { /* selektor len na priame potomky " ul > li " ked prejdeme nad ňou myšou a obsahuje triedu .dropdown */
    display: block; /* z display: none; dostaneme blokovo viditeľný obsah 
    pričom blok zaberá šírku svojho rodičovského kontajnera a každý nový element je na novom riadku, pri inline by boli v jednom riadku */
}
nav .dropdown li { /* položky li v rozbaľovacom menu */
    padding: 0.625rem;
}
nav .dropdown li a { /* odkazy vo vnútri položiek dropdown */
    color: #000; /* farba pre text */
    text-decoration: none; /* odstráni predvolené podčiarknutie pod odkazmi */
}
nav .dropdown li:hover { /* položky v dropdown menu ked prejdeme nad ňou myšou */
    background-color: #e6b800; /* farba pozadia */
    color: #fff; /* farba textu */
}
nav a.active, button.active { /* štýly pre aktuálne (.active) odkazy ALEBO tlačítka v ktorom aktuálne sa nachádzame, ktoré sme vyberali */
    background-color: #e6b800; 
    color: #fff; 
}
.contact-button a { /* štýlovanie " tlačítka " ( v podstate odkaz)kt. je vo vnútri triedy .contact-button */
    background-color: #000; 
    color: #fff; 
    padding: 0.625rem 0.9375rem; /* vnútorné odsadenie: (hore-dole) (vľavo-vpravo) */
    border-radius: 0.3125rem; /* zaoblenie rohy 0.3125 * 16 = 5px */
    transition: background-color 0.3s; /* 0.3 sekundová animácia zmeny farby tlačítka ked ukázujeme na button myškou */
}
.contact-button a:hover {
    background-color: #444; /* tmavosivé pozadie pri prechode kurzora myši nad tlačidlom ale to bude trvať 0.3 sekundy */
}
/* spodná časť (päta) */
footer {
    text-align: center; /* zarovnanie textu a vlastne aj obsahu na stred a bude centrované */
    padding: 0.625rem; /* platí vnútorné odsadenie pre všetky strany */
    background-color: #f8f9fa; 
}
main { /* selektor pre sémantický kontajner čo je vlastne pre hlavný obsah stránky */
    padding: 1.25rem; /* vnútorné odsadenie na každej strane */
}
h1, h2, h3 { /* pre všetky h1 && h2 && h3 čo sa nachádza na celej stránke */
    color: #333; 
}
/* <section class="video-background"> */
.video-background, .audio-section {
    position: relative; /* nastavím na relative aby dieťa, v našom prípade video vedel v budúcnosti používať position absolute */
    width: 100%; /* zaberá celú šírku svojho rodičovského elementu */
    height: 37.5rem; /* výška elementu je 600px */
    overflow: hidden; /* skryje obsah (u nás to bude <video>), kt. presahuje hranice .video-background. Udržíme video vo vnútri definovanej oblasti.*/
    color:#5e06f7; /* farba pisma */
    font-size: 1.3rem; /* velkost textu */
    text-align: center; /* vycentrovanie textu , pripade nazva */
}
video { 
    width: 100%; /* šírka zaberá celú šírku rodičovského elementu čo je u nás <section class="video-background"> */
    height: auto; /* podľa šírky nastaví výšku videa automaticky aby sa zachovalo správny pomer */
}

video:hover, audio:hover {
    transform: scale(1.05); /* veľkosť zväčší o 105 % pôvodnej veľkosti */
    border-radius: 5%; /* zaoblenie rohov o 5% */
    transform: translateY(-0.6125rem); /* pri hover sa referencie mierne posunú nahor */
}

audio {
    width: 100%; /* šírka zaberá celú šírku rodičovského elementu čo je u nás <section class="video-background"> */
    height: auto; /* podľa šírky nastaví výšku videa automaticky aby sa zachovalo správny pomer */
    border-radius: 10%; /* zaoblene rohy */
    border: 1.25rem solid #e6b800; /* oramovanie */
    transform: scale(1.05); /* veľkosť zväčší o 105 % pôvodnej veľkosti */
    transform: translateY(-0.3125rem); /* pri hover sa referencie mierne posunú nahor */
}

/* sekcie sme označili s atribútom class s rôznymi názvami a na tie sekcie aplikuje štýlovanie : */
.call-to-action, .experience, .services, .pricing, .testimonials, .contact-info-section {
    background-color: #fff; 
    padding: 1.25rem; /* vzdialenosť od okraja sekcie je vlastne vnútorné odsadenie tu zo všetkých strán  */
    margin: 1.25rem 0; /* vonkajšie odsadenie (medzera medzi sekciami): (horný-dolný) (ľavý-pravý) */
    border-radius: 0.3125rem; /* rohy blokov budú zaoblené */
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); /* tieň okolo sekcie čo sme označili atribútmi trieda : */
    /* 0 = posunutie tieňa na osi X je žiadne a tieň je priamo pod elementom */
    /* 0 = posunutie tieňa na osi Y je 0.125 * 16 = 2px */
    /* rozmaznanie, rozostrenie tieňa */
    /* farba tieňa je čierna s 10% priesvitnosťou */
}
.button { /* pre všetky elementy označené s atribútom trieda button , tie elementy sú odkazy anchor ( a ) kt. naformátujeme na tlačítko */
    background-color: #ffcc00; /* farba pozadia */
    color: #000; /* text na tlačidle */
    padding: 0.625rem 0.9375rem; /* vnútorné odsadenie: (hore-dole) (vľavo-vpravo) */
    border-radius: 0.3125rem; /* oblé rohy */
    text-align: center; /* centrálny (stredný na osi X a osi Y) text */
    display: inline-block; /* zachová blokovú štruktúru preto môžeme nastaviť aj šírku aj výšku ked chceme a zároveň môže byť umiestnený vedľa iných inline elementov a nemusí byť v novom riadku nevyhnutne ako len pri block-u */
    margin: 0.625rem 0; /* vonkajšie odsadenie, medzera okolo tlačítka: (hore-dole) (vľavo-vpravo) */
    transition: background-color 0.3s; /* efekt prechodu farby tlačidla pri jeho zmene, napr. hoverovanie */
}
.button:hover {
    background-color: #e6b800; /* vdaka efektu to trvá 0.3 sekundy prechodu farieb */
}
/* sekcia s triedou service-boxes(kt. obsahuje 3 dalšie vnorené sekcie kt. naformátujeme aby boli vedľa seba ako bloky teda sekcie s triedou service-box) */
.service-boxes { 
    display: flex; /* kontajner .service-boxes bude flexbox vdaka display: flex */
    justify-content: space-around; /* nie space-between ale radšej space-around aby sme mali polovičnú medzeru pred prvou a za poslednou položkou a rovnaké medzeri medzi nimi. Chceli sme odsadenie s medzerou na začiatku a na konci */
    flex-wrap: wrap; /* deti (.service-box) môže presunúť na nový riadok ak nemá dostatok priestoru na jednom riadku a vedia prispôsobiť ku veľkosti obrazovky. */
}
.service-box { /* dieťa pre triedu .service-boxes je trieda .service-box */
    flex: 1; /* flexibilná šírka každého boxu na rovnakú hodnotu v rámci rodiča .service-boxes a to sa vždy prispôsobí */
    margin: 0.625rem; /* vonkajšia medzera */
    padding: 0.625rem; /* medzera medzi obsahom boxu a jeho okrajom -- vnútorné odsadenie */
    border: 0.0625rem solid #ccc; /* tenký okraj okolo boxu */
    border-radius: 0.3125rem; /* zaoblenie */
    transition: transform 0.3s; /* 0.3 sekundy trvá zmena veľkosti ked prejdeme myšou nad box */
}
.service-box:hover {
    transform: scale(1.05); /* veľkosť zväčší o 105 % pôvodnej veľkosti a to bude trvať 0.3 sekundy vdaka transformacii definovanej predtým */
}
table {
    width: 100%; /* šírka tabuľky na 100% šírku rodičovského elementu <section class="pricing"> */
    border-collapse: collapse; /* okraje buniek bude zjednotené a dvojitá čiara zmyzne, zlučovanie */
    margin: 1.25rem 0; /* vonkajšie odsadenie len hore-dole */
}
/* pre každú bunku tabuľky aplikujeme: */
th, td {
    padding: 0.625rem; /* vnútorné odsadenie na každej strane */
    border: 0.0625rem solid #ccc; /* okraj okolo buniek */
    text-align: left; /* zarovnáme text v bunkách naľavo */
}
/* obrázky len vo vnútri buniek tabuľky */
td img { 
    max-width: 3.125rem; /* obrázok nebude nikdy širší ako 3:125rem */
    border-radius: 0.3125rem; /* zaoblenie rohy */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* tienenie */
}
/* <section class="dl-section"> , sekcia pre definičný zoznam */
.dl-section {
    max-width: 50rem; /* maximálna šírka sekcie */
    margin: 0 auto; /* horizontálne centrovanie sekcie */
    padding: 1.25rem; /* vnútorné okraje pre každú stranu */
    background-color: #f9f9f9; /* pozadie sekcie */
    border-radius: 0.625rem; /* zaoblené rohy */
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1); /* tieň okolo sekcie */
}
.dl-section h2 {
    font-size: 1.125rem; /* veľkosť písma nadpisu */
    margin-bottom: 1.25rem; /* spodný vonkajší okraj pre oddelenie od dalšieho obsahu */
    color: #333; /* farba nadpisu */
    text-align: center; /* vycentrovanie nadpisu na stred */
}
/* názvy definície data listu (teda data title) */
.dl-section dl dt {
    font-weight: bold; /* zvýraznenie textu na tučné */
    font-size: 1.125rem; /* veľkosť písma */
    margin-top: 1.25rem; /* horný vonkajší okraj */
    color: #0056b3; /* modrá farba pre názvy definícii */
}
/* samotná definícia definičného zoznamu */
.dl-section dl dd {
    margin: 0.625rem 0 1.25rem 1.25rem; /* horný, pravý, spodný, ľavý */
    font-size: 1rem; /* veľkosť písma */
    line-height: 1.6; /* vzdialenosť medzi riadkami */
    color: #444; /* farba písma */
    display: flex; /* flexbox lebo chceme zarovnať obrázok a text do jednej línii */
    align-items: center; /* vertikálne zarovnáva text a obrázok na stred */
}
/* obrázky v definíciách */
.dl-section dl dd img {
    width: 12.5rem;
    height: auto; /* udrží pomer podľa šírky */
    border-radius: 0.5rem;
    margin-right: 0.9375rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}
/* citácie v definíciách */
.dl-section dl dd q {
    font-style: italic; /* kurzíva pre text */
    color: #666;
}
/* <section class="contact-details"> */
.contact-details {
    display: flex; /* flexbox na rozloženie detí v riadku */
    flex-wrap: wrap; /* dovolíme aby položky mohli pretekať a ked sa nezmestia do jedného riadku tak sa jednoducho presúvajú na další riadok */
    justify-content: space-between; /* deti majú rovnomerné voľné miesto v rámci kontajnera */
    max-width: 62.5rem; /* max šírka sekcie je obmedzená */
    margin: 0 auto; /* horizontálne centrovanie sekcie v rámci rodičovského kontajnera */
    padding: 1.25rem;
    background-color: #f9f9f9; 
    border-radius: 0.5rem; /* zaoblenie sekcie */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); /* tienenie sekcie */
}
/* dieťa pre sekciu .contact-details */
.contact-column {
    flex: 1; /* deti budú mať vždy rovnakú šírku a rozdelia dostupné miesto rovnomerne vždy */
    margin: 0.625rem;
    padding: 1.25rem;
    background-color: #ffffff; 
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); 
}
/* odstavec--p--paragraph dieťaťa */
.contact-column p {
    margin: 0.625rem 0;
    font-size: 1.1rem;
    color: #333; 
}
.contact-column span {
    margin-right: 0.5rem; /* medzera na pravej strane elementu */
    font-size: 1.2rem;
}
/* sekcia s referenciami */
.testimonials {
    max-width: 50rem; /* maximálna šírka sekcie je obmedzená */
    margin: 0 auto; /* horizontálne centrovanie sekcie v rámci rodičovského kontajnera */
    padding: 1.25rem;
    background-color: #f9f9f9;
    border-radius: 0.5rem; /* zaoblenie rohov sekcie */
    box-shadow: 0 0.25rem 0.75rem  rgba(0, 0, 0, 0.1);
    text-align: center; /* text v sekcii je centrovaný */
}
/* nadpis v sekcii referencii */
.testimonials h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1.875rem;
}
/* samotná referencia konkrétna */
.testimonial {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem  rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* prechodový efekt pri hover čo trvá 0.3 sekundy */
}
.testimonial:hover {
    transform: translateY(-0.3125rem); /* pri hover sa referencie mierne posunú nahor */
}
/* odstavec v referencii */
.testimonial p {
    margin: 0; /* odstránenie vonkajších okrajov */
    font-size: 1.1rem;
    line-height: 1.5; /* výška riadkov pre čitateľnosť */
    color: #555;
}
/* citát, imitujeme štýlovanie citátu pomocou css */
.testimonial q {
    quotes: "„" "“"; /* to nemusí byť všade podporované */
    font-style: italic; /* kurzíva */
    color: #333;
    font-size: 1.2rem; /* veľkosť písma */
}
/* silný text */
.testimonial p strong {
    display: block; /* nastavíme na blokový a tým pádom bude vždy v novom riadku */
    margin-top: 0.9375rem; /* horná medzera */
    font-weight: bold; /* nastavenie na tučné písmo napr */
    color: #444;
    font-size: 1rem;
}
/* formulár */
form {
    display: flex; /* formulár ako flexbox kontajner */
    flex-direction: column; /* prvky vo formulári(label,input,textarea,button) zoradené vertikálne(pod sebou) */
}
/* label je popis poľa formulára */
form label {
    margin: 0.625rem 0 0.3125rem; /* horný, bočné, dolný vonkajší okraj */
}
/* pole kde zadávame text a textová oblasť */
form input, form textarea {
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border: 0.0625rem solid #ccc;
    border-radius: 0.3125rem;
}
/* tlačidlo vo formulári */
form button {
    background-color: #ffcc00; /* pozadie tlačidla */
    color: #000; /* farba textu na tlačidle */
    padding: 0.625rem;
    border: none; /* netreba tu okraj pre tlačidlo */
    border-radius: 0.3125rem;
    cursor: pointer; /* zmena kurzora myšky na ukazovateľ ruky lebo tlačidlo vykoná interakciu */
    transition: background-color 0.3s; /* prechod farby pozadia pri hover */
}
/* tlačidlo pri hover efekte */
form button:hover {
    background-color: #e6b800; 
}
/* pre všetky obrázky */
img {
    border-radius: 0.625rem; /* zaoblenie */
    transition: transform 0.3s; /* plynulý prechod pri zmene transformácie obrázka */
}
/* ked prejdeme nad obrázkom kurzorom myšky-- hover efekt */
img:hover {
    transform: scale(1.1); /* zvýšenie obrázka o 10% a spolu to bude 110% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 50%; /* kruh pre štvorca, elypsa pre obdľžnika */
}
/* umiestnenie obrázka vedľa textu s pekným rozložením, obrázok má atribút class .float-image */
/* aplikoval som to v článkach podlaha.html, terasa.html, obkladanie_stien.html */
.float-image {
    float: left; /* obrázok zarovnaný na ľavú stranu rodičovského kontajnera article a text bude esteticky napravo ked sa tam zmestí */
    margin: 0 15px 15px 0; /* horný, pravý, spodný, ľavý vonkajší okraj alias medzera */
    max-width: 40%; /* obrázok je maximum 40 % svojho rodičovského kontajnera, v tomto prípade je to article */
    height: auto; /* výška obrázka sa prispôsobí šírke */
    border: 2px solid #ccc; /* rám---hrúbka---typ bude plný---sivá farba */
    border-radius: 8px; /* zaoblenie rohov obrázka */
}
/* sekcia s triedou back-to-top vo footer, čo je vlastne ikonka šípky na skok začiatku stránky pomocou id */
.back-to-top {
    position: fixed; /* pozícia obrázka je pevná vzhľadom na okno prehliadača nie na obsah stránky */
    bottom: 1.25rem; /* umiestňujeme šípku o 1.25 rem nad spodný okraj obrazovky */
    right: 1.25rem; /* a taktiež o takú istú vzdialenosť od pravého okraja obrazovky */
    cursor: pointer; /* po prechode myšou nad tlačidlo sa ukazovateľ zmení na ruku čo dá najavo že je prvok klikateľný */
}
/* zadefinujeme šírku a výšku obrázka externe tu v css lebo žiadne inline css priamo nepoužívame */
.back-to-top img {
    width: 2.5rem;
    height: 2.5rem;
}
/* social media ikonky vo footer */
.social-media img {
    width: 2rem;
    height: 2rem;
    margin: 0 0.3125rem; /* (hore-dole) (vľavo-vpravo) */
    transition: transform 0.3s; /* plynulý prechod pri zmene transformácie obrázka */
}
.social-media img:hover {
    transform: scale(1.1); /* zvýšenie obrázka o 10% a spolu to bude 110% */
}
/* vnútorné odsadzenie sémantických značiek */
header, nav, main, section, figure {
    padding: 1rem;
}
/* pre všetky nadpisy druhej úrovne na stránke */
h2 {
    text-align: center; /* centralizovane v strede */
    margin-top: 1rem; /* horná medzera */
    font-size: 1.5rem; /* veľkosť */
}

/* definujeme ID <section id="gallery"> pomocou CSS3 lebo klikateľnú galériu len jednu máme a tak ID je 
   jedinečnejšia a klasa z kt. je viacej */
#gallery nav ul { /* navigácia galérie */
    display: flex; /* vytvoríme flexibilný rad navigačných prvkov */
    justify-content: center; /* navigačné tlačítka zarovná na stred */
    gap: 1rem; /* medzera medzi položkami */
    list-style: none; /* odstraňuje odrážky zo zoznamu */
    padding: 0; /* nemáme vnútorné odsadenie */
}
/* tlačidlo v navigácii */
#gallery nav button {
    padding: 0.5rem 1rem;
    border: none; /* odstránime okraje tlačidla */
    cursor: pointer; /* kurzor na ruku pri prejdení myšou */
    background-color: #333;
    color: #fff;
    border-radius: 0.25rem; /* zaoblené rohy */
    transition: background-color 0.3s; /* plynulý prechod pri zmene farby pozadia */
}
#gallery nav button:hover {
    background-color: #555; /* bude trvať 0.3 sekundy */
}
/* je to sekcia v rámci ID s atribútom class */
.gallery-grid {
    display: grid; /* grid layout na usporiadanie obrázkov */
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); /* automaticky vytvára stľpce kt. majú 
    minimálnu šírku 12.5rem a maximálne zaberá dostupné miesto (1fr) */
    gap: 1rem; /* medzeri medzi obrázkami */
    padding: 1rem; /* vnútorné odsadenie okolo celéhé gridu */
}
/* figure obsahuje obrázok a k obrázku chceme definovať popis figcaption takže je potrebné dať relative 
pozíciu k figure aby figcaption vedel správne umiestniť vo vzťahu k obrázku lebo to bude najbližší 
na čo referuje */
figure {
    margin: 0;
    position: relative;
}
figure img {
    width: 100%; /* zaberajú celý dostupný priestor */
    border-radius: 0.5rem; /* zaoblené rohy obrázkov */
    transition: transform 0.3s; /* plynulý prechod pri zmene veľkosti */
}
figure:hover img {
    transform: scale(1.05); /* pri prejdení myšou sa obrázok trochu zväčší(zoom) */
}
figcaption {
    text-align: center; /* text popisu pod obrázkom bude v strede , zarovnanie na stred */
    padding-top: 0.5rem; /* horné vnútorné odsadenie */
    font-weight: bold; /* tučný text */
}
/* ordered list, usporiadaný zoznam---- sekcia s triedou ordered-list */
.ordered-list ol {
    list-style-type: decimal; /* číselný fotmát pre zoznam: 1.,2.,3.,... */
    padding-left: 1.25rem; /* vnútorné odsadenie laľavo */
}
/* polžka zoznamu */
.ordered-list li {
    margin-bottom: 1.25rem;
    font-size: 1.1rem; /* veľkosť textu */
    display: flex; /* flexbox model pre lepšie rozmiestnenie obsahu v rámci položiek(fotka napr) */
    align-items: center; /* zarovnáva obsah v položke vertikálne na stred */
    gap: 0.9375rem; /* medzera medzi prvkami v rámci položiek */
}
/* obrázky v usporiadanom a neusporiadanom zozname */
.ordered-list li img,
.realizacie-menu ul li img {
    width: 6.25rem; /* šírka obrázkov */
    height: auto; /* proporcia automaticky podľa šírky */
    border-radius: 0.5rem; /* zaoblenie rohov */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* tieň okolo obrázka */
}
/* sekcia s atribútom trieda s názvom .realizacie-menu */
.realizacie-menu ul {
    list-style-type: none; /* odstráni default odrážku zoznamu čo je dot notácia */
    padding-left: 0; /* žiadne vnútorné odsadenie zľava */
}
/* položky zoznamu */
.realizacie-menu ul li {
    margin-bottom: 0.9375rem;
    font-size: 1rem; /* veľkosť textu položiek zoznamu */
    display: flex; /* flexbox pre lepšie rozmiestnenie obsahu v rámci položiek */
    align-items: center; /* zarovnanie na stred vertikálne */
    gap: 0.9375rem; /* medzera medzi prvkami */
}
/* sekcia s ID atribútom realizacie a sekcia s triedou ordered-list----v rámci nich nadpis druhej úrovne: */
#realizacie h2, .ordered-list h2 {
    font-size: 1.125rem; /* veľkosť nadpisov */
    color: #333; /* farba s hexa rgb */
    text-align: center; /* zarovnanie text nadpisov na stred */
    margin-bottom: 1.25rem;
}
/* pod podnadpis tretej úrovne v sekcii s triedou .realizacie-menu */
.realizacie-menu h3 {
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 0.625rem; /* medzera pod podnadpis */
}
/* sekcia s ID map v kontakt.html */
#map {
    text-align: center; /* zarovnanie na stred */
    padding: 1.25rem;
    background-color: #f0f0f0; /* farba pozadia sekcie */
    border-radius: 0.5rem; /* zaoblenie rohov mierne */
}
/* nadpis v sekcii s ID map */
#map h2 {
    font-size: 1.5rem;
    color: #333; 
    margin-bottom: 0.9375rem; /* spodná medzera */
}
/* značka iframe pre google maps v rámci sekcii s ID map */
#map iframe {
    width: 100%; /* celá šírka rodičovského kontajnera */
    max-width: 37.5rem; /* maximálna povolená šírka */
    height: 28.125rem;
    border: 0; /* odstraňuje rám okolo iframe */
    border-radius: 0.5rem; /* zaoblené rohy */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* tieň pod iframe */
}
/* section s triedou -- prečo my */
.why-choose-us {
    background-color: #ffffff; 
    padding: 1.25rem;
    margin: 1.25rem 0;
    border-radius: 0.5rem; /* zaoblenie */
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* tienenie boxu */
}
/* nadpis druhej úrovne v rámci predošlej triedy sekcie */
.why-choose-us h2 {
    text-align: center; /* vycentrované */
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    color: #333; 
}
/* kontajner pre grid -- sekciu nazveme s takou triedou */
.why-boxes {
    display: grid; /* prvky rozmiestnené v mriežke */
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); /* počet stľpcov automaticky podľa
    velkosti kontajnera, bude toľko stľpcov kolko sa zmestí, šírka každého stľpca bude aspoň 250px a zaberá
    jednu frakciu teda jeden podiel z dostupného priestoru */
    gap: 0.9375rem; /* medzera medzi prvkami v mriežke */
}
.why-box {
    background-color: #f9f9f9; 
    padding: 0.9375rem;
    border: 0.0625rem solid #ddd; /* rám */
    border-radius: 0.3125rem; 
    text-align: center; /* obsah boxu na stred */
    transition: transform 0.2s; /* plynulý efekt pri zmene transformácie , pri pohybe boxu */
}
.why-box:hover {
    transform: translateY(-0.3125rem); /* posunie box trochu nahor ked prejdeme nad boxom myšou */
}
.why-box h3 {
    color: #e6b800; /* žltá farba pre nadpisy */
    margin: 0.625rem 0;
}
/* popisy */
.why-box p {
    color: #666; 
}
/* sekcia s triedou v ktorom je obrázková mapa a v rámci toho samotný obrázok obrázkovej mapy: */
.experience-image img {
    width: 100%; /* obrázok na celú šírku rodičovského kontajnera */
    height: auto; /* automaticky sa prispôsobí a zachová pomery */
    max-height: 25rem; /* maximálna výška obrázka toto môže byť */
    object-fit: contain; /* obrázok sa plne zobrazí vždy bez orezania a ked je menšia tak sa pridá prázdny priestor */
}
/* samotný obrázok img s touto triedou ktorá je aj samotná obrázková mapa kontajnerom */
.experience-image-map {
    max-width: 100%; /* šírka nepresiahne šírku rodiča */
    height: auto; /* sa automaticky prisôsobí */
    display: block; /* nebude inline ako obyčajné obrázky ale už bude blokové a sa začína na novom riadku a môže byť ľajšie centrovateľné */
}
/* --- toto štýlovanie hlavne vieme pozerať v sekcii sluzby.html --- */
.service-box { /* sekcia s túto triedou je ako keby položka a zároveň pod-pod sekcia */
    text-align: center; /* vycentrovanie obsahu na stred */
    margin: 1.25rem; 
}
.service-box img {
    width: 6.25rem;
    height: 6.25rem; 
    border-radius: 50%; /* tvar elypsa */
    border: 0.125rem solid #ffcc00; /* žltý rám elypsy */
    object-fit: cover; /* obrázok vyplní celý svoj kontajner, tvar sa zachová a ked sa nezmestí tak sa odreže */  
    margin-bottom: 0.625rem; /* medzera pod obrázkom */
}
.service-box img, .additional-service-box img, .why-box img {
    height: auto; 
    object-fit: cover; /* obrázky zaplnia svoj kontajner a ked sa nezmestia tak sa odrežú */
    width: 12.5rem; 
    border-radius: 50%; /* kruhový elypsový tvar */
}
/* použité pri realizacie.html */
.gallery { /* sekcia s triedou .gallery */
    display: grid; /* grid layout na usporiadanie položiek do mriežky */
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* automaticky usporiada položky do stľpcov */
    gap: 1.5rem; /* medzera medzi položkami */
    padding: 1rem;
}
/* sú to články v rámci rodičovskej sekcie */
.gallery-item { /* article článok s triedou .gallery-item */
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.5rem; /* zaoblenie rohy */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* tienenie */
    text-align: center; /* intro obsah na stred */
    transition: transform 0.3s; /* animácia pri hover */
}
.gallery-item:hover {
    transform: scale(1.05); /* pri hover sa jemne zväčší o 5 percent */
}
.gallery-item img {
    width: 100%; /* celá šírka rodičovského kontajnera čo je článok s triedou .gallery-item */
    height: auto;
    border-radius: 0.5rem; /* zaoblenie */
    transition: transform 0.3s; /* pri hover obrázok sa zväčší plynule , trvá to 0.3sekundy */
}
.gallery-item img:hover {
    transform: scale(1.1); /* pri hover sa obrázok zväčší */
}
.gallery-item h2 {
    margin: 0.5rem 0; /* (hore-dole)(vľavo-vpravo) */
    font-size: 1.25rem;
    color: #333;
}
.gallery-item a {
    text-decoration: none; /* nechceme default underline pod odkazom */
    color: inherit; /* zdedí farbu nadpisu alebo textu */
}

.gallery-item a:hover h2 {
    color: #e6b800; /* farba nadpisu na zlatú */
}
/* pre tlačidlo čo je odkaz v p */
.gallery-item p a {
    display: inline-block; /* môžeme použiť padding atd. */
    margin-top: 0.5rem;
    padding: 0.5rem 1rem; /* (hore-dole) (vľavo-vpravo) */
    background-color: #ffcc00;
    color: #000;
    border-radius: 0.3125rem;
    text-decoration: none; /* nechceme podčiarknutie */
    transition: background-color 0.3s;
}
/* zmena farby tlačítka pri hover */
.gallery-item p a:hover {
    background-color: #e6b800;
}
/* ---------------- RESPONZIVITA --------------------- */

@media (max-width: 48rem) { /* tablet, notebook */
    nav {
        flex-direction: column;  /* z riadkovej navigácie ideme do stľpcovej(blokovej)-vertical navigačné menu */
        align-items: flex-start;  /* položky budú zarovnané vľavo */
    }

    nav ul {
        flex-direction: column;  /* bude stľpcový (jeden pod druhým) tiež */
    }

    .service-boxes {
        flex-direction: column;   /* tiež */
    }

    .service-box {
        width: 100%;  /* zaberie celú dostupnú šírku rodičovského kontajnera */
    }

    .contact-info span {
        display: block;  /* budú blokové teda každý v samostatnom riadku */
    }
}

@media (max-width: 30rem) {  /* smartfon */
    header {
        padding: 0.3125rem;
    }

    nav .logo img {
        max-width: 7.5rem;  /* aby bolo primerane veľké aj na malých obrazovkách */
    }

    nav a {
        padding: 0.3125rem;
        font-size: 0.875rem;
    }

    .button {
        padding: 0.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2, h3 {
        font-size: 1.2rem;  /* menšie nadpisy */
    }

    table img {
        width: 5rem;  /* obrázky v tabuľkách budú menšie */
    }
}
/* Okomentovany validny CSS kod https://jigsaw.w3.org/css-validator/validator, vypracoval Denis Nemeth, skupina 8, odovzdanie: pondelok (25.11.2024) */