/* ===================================
   základné štýly – celá stránka
   =================================== */
body {
    margin: 0; /* žiadny okraj okolo stránky, nech to neodskočí */
    padding: 0; /* žiadne vnútro navyše */
    font-family: "Segoe UI", Arial, sans-serif; /* jednoduché písmo a záloha */
    background-color: #f5f5f5; /* svetlo sivé pozadie, aby to nebolo biele */
    color: #222; /* tmavý text, lepšie sa číta */
}

/* ===================================
   header – vrch stránky s názvom a logom
   =================================== */
header {
    background-color: #1e1e1e; /* tmavé pozadie hore */
    color: #ffffff; /* biely text na tom tmavom */
    padding: 20px; /* trošku miesta okolo textu */
    text-align: left; /* text ide naľavo */
    display: flex; /* logo a názov vedľa seba */
    align-items: center; /* vyrovnané na stred hore/dole */
    justify-content: space-between; /* medzi logom a názvom je medzera */
}

/* logo – obrázok firmy */
.logo {
    max-width: 150px; /* logo nebude väčšie ako 150px */
    height: auto; /* výška sa sama prispôsobí */
    border-radius: 8px; /* rohy sú zaoblené */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* jemný tieň, vyzerá to cool */
    transition: transform 0.3s ease; /* keď sa zmení, tak pomaly */
}

.logo:hover {
    transform: scale(1.1); /* keď sa prejde myšou, logo sa trošku zväčší */
}

/* ===================================
   navigácia – menu hore
   =================================== */
nav {
    background-color: #333; /* tmavé pozadie, ale nie úplne čierne */
    display: flex; /* menu je v riadku */
    justify-content: center; /* menu je na stred */
    padding: 10px 0; /* hore a dole miesto */
}

nav ul {
    list-style: none; /* žiadne bodky pred položkami */
    margin: 0; /* žiadny vonkajší okraj */
    padding: 0; /* žiadny vnútorný okraj */
    display: flex; /* položky vedľa seba */
    gap: 20px; /* medzera medzi položkami */
    flex-wrap: wrap; /* na mobile sa zalomia pod seba */
}

nav a {
    color: #ffffff; /* biely text */
    text-decoration: none; /* bez podčiarknutia */
    font-weight: 500; /* trošku hrubšie písmo */
    padding: 8px 12px; /* miesto okolo textu */
    border-radius: 4px; /* zaoblené rohy */
    transition: background-color 0.2s ease, color 0.2s ease; /* plynulá zmena farby */
}

nav a:hover {
    background-color: #555; /* tmavšie pozadie keď prejdem myšou */
    color: #4eaaff; /* text sa zmení na modrý */
}

/* ===================================
   hlavný obsah – stred stránky
   =================================== */
main {
    max-width: 900px; /* nebude širšie ako 900px */
    margin: 30px auto; /* hore/dole odstup a na stred */
    padding: 20px; /* vnútorné miesto */
    background: white; /* biele pozadie */
    border-radius: 12px; /* zaoblené rohy */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* jemný tieň */
}

main h2, main h3 {
    color: #1e1e1e; /* tmavý text nadpisov */
    text-align: center; /* nadpisy na stred */
}

/* obrázky v hlavnom obsahu */
main img {
    border-radius: 12px; /* zaoblené rohy */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* väčší tieň */
    margin: 20px 0; /* odstup hore a dole */
    transition: transform 0.3s ease; /* plynulá zmena pri hover */
}

main img:hover {
    transform: scale(1.05); /* obrázok sa trošku zväčší keď sa myšou */
}

main h2,
h3 {
    color: #1e1e1e; /* úprava farby */
    text-align: center; /* vycentrovanie textu */
}

article h3 {
    color: #1e1e1e; /* úprava farby */
}

article ul {
    list-style: none; /* odstránenie odrážok v ul */
}

.sluzby-html img {
    width: 100%;
    max-width: 900px;
    height: auto;
} /* aby boli všetky obrázky rovnako veľké */

#zmluvy img {
    width: 100%;
    max-width: 900px;
    height: auto;
} /* aby boli všetky obrázky rovnako veľké */

/* ===================================
   DEFINIČNÝ ZOZNAM (dl, dt, dd) – na indexe
   =================================== */
dl {
    margin: 25px 0; /* odstup zhora a zdola */
    background: #f9f9f9; /* svetlé pozadie */
    border-radius: 8px; /* zaoblené rohy */
    padding: 20px; /* miesto vnútri */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* jemný tieň */
}

dt {
    font-weight: bold; /* tučné písmo */
    color: #ffffff; /* biely text */
    margin-top: 20px; /* odstup zhora (okrem prvého) */
    padding: 12px 15px; /* Miesto vnútri */
    background: linear-gradient(135deg, #555, #222); /* pekný prechod farieb */
    border-radius: 6px; /* zaoblené rohy */
    cursor: pointer; /* keď prejde myš, ukáže ruku */
    transition: all 0.3s ease; /* plynulý prechod */
    font-size: 1.1em; /* trochu väčšie písmo */
}

dt:first-of-type {
    margin-top: 0; /* prvý dt nemá odstup zhora */
}

dt:hover {
    background: linear-gradient(135deg, #4eaaff, #222); /* modrý prechod pri hover */
    transform: translateX(5px); /* trochu sa posunie doprava */
}

dt a {
    text-decoration: none; /* bez podčiarknutia */
    color: white; /* biely text odkazu */
}

dt strong {
    color: white; /* Aby strong v dt bolo biele */
}

dd {
    margin: 10px 0 20px 20px; /* odstupy */
    padding: 15px; /* miesto vnútri */
    background: white; /* biele pozadie */
    border-left: 3px solid #222; /* hrubá čiara zľava */
    border-radius: 0 6px 6px 0; /* zaoblené len sprava */
    line-height: 1.6; /* lepšie čitateľné */
}

/* Pre kotvy – plynulé posunutie */
dt[id] {
    scroll-margin-top: 20px; /* aby sa pri skoku nezalepilo na horný okraj */
}

/* Pre citáty */
#opatrovnictvo {
    background: #f9f9f9; /* svetlé pozadie */
    padding: 15px; /* miesto vnútri */
    border-radius: 6px; /* zaoblené rohy */
    margin: 25px 0; /* odstup */
    border-left: 4px solid #222; /* hhruba čiara zľava */
}

#opatrovnictvo q {
    font-style: italic; /* kurzíva pre citáciu */
}

/* mapa služieb */
.sluzby-mapa {
    cursor: pointer; /* keď prejdem myšou, ukáže sa ruka */
}

/* tlačidlo späť */
.back {
    display: block; /* je to blok */
    text-align: center; /* text na stred */
    margin: 80px auto 0; /* veľký odstup hore a na stred */
    padding: 15px; /* vnútro tlačidla */
    background: #1e1e1e; /* tmavé pozadie */
    color: #ffffff; /* biely text */
    text-decoration: none; /* bez podčiarknutia */
    font-weight: 600; /* hrubší text */
    border-radius: 8px; /* zaoblené rohy */
    width: 220px; /* šírka tlačidla */
    transition: 0.2s ease; /* plynulá zmena */
}

.back:hover {
    background: #333; /* tmavšie pozadie */
    color: #4eaaff; /* modrý text */
}

/* ===================================
   tabuľka s obr
   =================================== */
table {
    width: 100%; /* na celú šírku */
    border-collapse: collapse; /* rámiky sa spoja */
    margin: 30px 0; /* odstup hore a dole */
}

th, td {
    border: 1px solid #333; /* čierny rámik */
    padding: 15px; /* vnútro bunky */
    text-align: center; /* text na stred */
    cursor: pointer; /* zobrazí ruku */
}

th {
    background-color: #1e1e1e; /* tmavé pozadie hlavičky */
    color: white; /* biely text */
}

tr:hover {
    background-color: #f0f8ff; /* svetlomodré pozadie */
    box-shadow: 0 0 10px #4eaaff; /* žiara okolo riadku */
}

td img {
    width: 100px; /* malé obrázky v tabuľke */
    height: auto; /* výška sa prispôsobí */
    border-radius: 8px; /* zaoblené rohy */
}

/* ===================================
   audio a video
   =================================== */
audio, video {
    width: 100%; /* na celú šírku */
    max-width: 600px; /* ale nie viac ako 600px */
    margin: 20px 0; /* odstup hore a dole */
    border-radius: 12px; /* zaoblené rohy */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* jemný tieň */
    display: block; /* blokový prvok */
    margin-left: auto; /* na stred */
    margin-right: auto; /* na stred */
}

/* ===================================
   footer – spodok stránky
   =================================== */
footer {
    background-color: #1e1e1e; /* tmavé pozadie */
    color: white; /* biely text */
    padding: 20px; /* vnútro */
    margin-top: 40px; /* odstup hore */
    text-align: center; /* text na stred */
}

footer h2, footer h3 {
    color: #ffffff; /* biely text nadpisov */
}

footer a {
    color: #4eaaff; /* modrý text odkazov */
    text-decoration: none; /* bez podčiarknutia */
}

footer a:hover {
    text-decoration: underline; /* podčiarkne sa keď prejdem myšou */
}

/* ===================================
   responzivita – mobil
   =================================== */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* menu ide pod seba */
    }
    header {
        flex-direction: column; /* logo pod názov */
        text-align: center; /* nadpisy a logo na stred */
    }
}