/* ==========================================================================
   1. Reset & Clearfix (Eric Meyer's Reset)
   ========================================================================== */

html,body,div,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}

/* ==========================================================================
   Premenné a základné nastavenia
   ========================================================================== */

:root { 
    /* --- Hlavné farby schémy --- */
    --main-bg-color: #3ca051;
    --main-font-color: #fff;
    --main-p-color: #fff;
    --main-h-color: #00ffd9;
    --main-a-color: #1BF1DC;
    --main-a-hover-color: #43a878;
    --vyrazna-farba: #e4ff4f;
    --vyrazna-farba-tien:  1px 1px #667000;
    
    /* --- Farby pozadia --- */
    --content-bg-color: #305b4c;
    --input-bg-color: #284c47;
    --mobile-nav-bg-color: #113d2eec;

    /* --- Farby textu a odkazov --- */
    --link-h3-color: #0FF;
    --link-footer-color: #0FF;
    --link-footer-hover-color: #0CF;
    --footer-text-color: #ffffff;
    --footer-f21-color: #00ffea;

    /* --- Farby komponentov --- */
    --notification-bg-color: rgba(81, 255, 183, 0.3);
    --notification-border-color: rgba(70, 255, 153, 0.4);
    --glass-effect-bg-color: rgba(81, 255, 182, 0.2);
    --glass-effect-border-color: rgba(70, 255, 153, 0.646);
    --nav-link-color: #F2FDFB;
    --nav-link-shadow: #4f958d;
    --nav-link-bg: radial-gradient(circle, rgba(0, 255, 217, 0) 0%, rgba(0, 133, 86, 0.47) 100%);
    --nav-link-active-bg: radial-gradient(circle, rgba(0, 255, 217, 1) 0%, rgba(0, 201, 171, 1) 100%);
    --nav-link-hover-bg: #59bcae;
    --footer-nav-link-shadow: #113d2e;
    --boxed-border-color: #00ffd9;
    --float-left-border-color: #555;
    --float-left-bg-color: #FFF;
    --float-left-shadow: #1a3935;
    --hamburger-icon-color: white;
    --obrazok-bg-color: white;
    --obrazok-border-color: #ddd;
    --obrazok-shadow-color: rgba(0, 0, 0, 0.2);
    --mobile-nav-border-color: #2DA285;

    /* --- Farby tlačidiel --- */
    --button-33-bg-color: #c2fbd7;
    --button-33-shadow-color: rgba(44, 187, 99, .2);
    --button-33-shadow-hover-color: rgba(44, 187, 99, .35);
    --button-33-text-color: rgb(14, 89, 62);

    /* --- Kontaktný formulár --- */
    --kontakt-bg-color: #23443b;
    --kontakt-card-text-color: #e8f5f1;
    --kontakt-card-shadow-color: rgba(0,0,0,0.25);
    --kontakt-card-shadow-hover-color: rgba(0,0,0,0.35);
    --kontakt-h1-color: #ffffff;
    --kontakt-h2-color: #a7f3d0;
    --kontakt-h3-accent-color: #7fffd4;
    --kontakt-link-color: #9ae6b4;
    --kontakt-input-bg-color: #ffffff;
    --kontakt-input-text-color: #333;
    --kontakt-input-border-color: #ccc;
    --kontakt-input-focus-border-color: #00c896;
    --kontakt-input-focus-shadow-color: rgba(0, 221, 166, 0.366);

    /* --- Základná veľkosť písma (1rem = 16px) --- */
    --base-font-size: 1.15rem;
}

/* ==========================================================================
   2. Základné nastavenia, typografia a linky
   ========================================================================== */

body {
	background-color: var(--main-bg-color);
	background-image: url(../img/bg8.webp);
	background-repeat: repeat-y;
	background-position: top center;
	color: var(--main-font-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--base-font-size);
	line-height: 1.7;
	padding-top: 0px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
    text-shadow: 2px 2px 2px #00000064;
}
header{
    background-image: url('../img/head-bg.webp');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 30px;
}
.headObrazok{
    width: 287px;
    height: 100px;
}
p {
	padding: 0 20px 0 20px;
	text-align: justify;
    color: var(--main-p-color);
}

dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,blockquote,article,p {
    margin-bottom: 10px;
}

article{
    display: block;
}
/* --- Nadpisy --- */
h1, h2, h3, h4, h5, h6 {
    padding: 20px;
    font-family: 'Century Gothic', sans-serif;
	font-weight: 900;
	line-height: 1.25;
	color: var(--main-h-color);
    clear: both;
}
.buttonyDalej{
    padding-top: 40px;
    clear: both;
}
h1 { font-size: 2rem; color: var(--main-p-color) } /* 32px */
h2 { font-size: 1.75rem; } /* 28px */
h3 { font-size: 1.375rem; } /* 22px */
h4 { font-size: 1.125rem; } /* 18px */
h5 { font-size: 0.875rem; } /* 14px */
h6 { font-size: 0.75rem; } /* 12px */

/* --- Linky --- */
a, a > * {
	color: var(--main-a-color);
	text-decoration: none;
	transition: all 99ms;
}
a:hover, a > *:hover { color: var(--main-a-hover-color); }


/* ==========================================================================
   3. Hlavné rozloženie (Layout)
   ========================================================================== */

main, #top {	
	max-width: 960px;
    width: 100%;
	padding: 20px;
	margin: 0 auto 40px auto;
	box-sizing: border-box;
	box-shadow: 0 0 30px 0 var(--mobile-nav-border-color);
}

main {
	background-color: var(--content-bg-color);
	border-radius: 10px;
	min-height:300px;
}
.notification { 
    font-size: 1.375rem; /* 22px */
    text-align: center;
    background-color: var(--notification-bg-color);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    border: 1px solid var(--notification-border-color);
}
.glass-effect { 
    background-color: var(--glass-effect-bg-color);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    border: 1px solid var(--glass-effect-border-color);
}
.oble{
    border-radius: 30%;
}

/* ==========================================================================
   4. Komponenty: Hlavička, Navigácia, Pätička, Obsah
   ========================================================================== */

/* --- Hlavička --- */
#logoDiv, #logoDivMobile {
    display: flex;
    justify-content:space-between;
    max-width: 960px;
	height: 150px;
	padding: 0;
	margin: 0 auto;
}

#logoDivMobile {
    display: none;
}

.logo-container {
    display: inline-block;
    margin: 0 auto;
}

#logoDiv img {
    max-width: 960px;
    height: auto;
    border: none;
}

/* --- Navigácia --- */
nav {
	max-width: 960px;
	text-align: center;
	margin: 0px auto;
    list-style-type: none;
    margin: 0px auto 0 auto;
    padding: 0 0 10px 0;
}
h3 a{
    color: var(--link-h3-color);
}
nav a {
    display: inline-block;
    color: var(--nav-link-color);
    margin: 3px;
    border-radius: 5px;
    padding: 9px 13px;
    font-size: 0.9375rem; /* 15px */
    font-family:'Century Gothic';
    font-weight: bold;
    background: var(--nav-link-bg);
    transition: all 99ms ease-in-out;
}

nav a.aktivne {
    background: var(--nav-link-active-bg);
    color: var(--main-font-color);    
    box-shadow: 0px 0px 30px 0px rgba(27,241,220,1);
    transition: all 99ms ease-in-out;
}

nav a:hover {
	color: var(--main-font-color);
	background: var(--nav-link-hover-bg);
    box-shadow: 0px 0px 30px 0px rgba(65,141,130,1);
    transition: all 99ms ease-in-out;
}

/* --- Pätička --- */
footer{
    max-width: 960px;	
    color: var(--footer-text-color);
    text-align: center;
    margin: 0 auto;
}
footer p { text-align: center;}
footer a { color: var(--link-footer-color); }
footer a:hover { color: var(--link-footer-hover-color); }
#f21 { display: block; text-align: center; color: var(--footer-f21-color); }
#f11, #f12, #f13 { display: inline-block; width: 31%; text-align: left; vertical-align: top; margin-right: 15px; margin-top: 5px; }

/* --- Štýly pre obsah --- */
#boxed {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 3px solid var(--boxed-border-color);
}
#boxed p { color:var(--main-font-color); }

#floatLeft {
	border: solid 1px var(--float-left-border-color);
	padding: 13px;
	margin: 10px 30px 30px 0;
	background-color: var(--float-left-bg-color);
	box-shadow: 2px 2px 15px 0 var(--float-left-shadow);
}

.vyrazne {
	font-family: 'Century Gothic', sans-serif;
	font-weight: bold;
	font-size: 1.375rem; /* 22px */
	color: var(--vyrazna-farba);
    text-shadow: var(--vyrazna-farba-tien);
}

.one-fourth, .three-fourth {
	display: inline-block;
	vertical-align: top;
}
.one-fourth { width: 32%; }
.three-fourth { width: 65%; }

input, textarea {
    color: var(--main-font-color);
    background-color: var(--input-bg-color);
    padding: 10px;
}
#contact-input { width: 400px; max-width: 100%; }

/* Hamburger tlačidlo (štýly pre desktop - skryté) */
.hamburger-menu {
    width: 47px;
    height: 49px;
    display: none;
    background: transparent;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; 
}
.hamburger-menu span {
    display: block;
    width: 25px;
    height: 4px;
    background-color: var(--hamburger-icon-color);
    margin: 4px 0;
    transition: all 99ms ease;
}
.buttonMalyText{
    font-size: 0.625rem; /* 10px */
}
.obrazok {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  background-color: var(--obrazok-bg-color);
  padding: 6px;
  border: 1px solid var(--obrazok-border-color);
  box-shadow: 0 4px 8px 0 var(--obrazok-shadow-color);
  box-sizing: border-box;  
}
.float-left {
  float: left;
  margin: 0 15px 5px 0; 
}

.float-right {
  float: right;
  margin: 0 0 5px 15px;
}

.button-33 {
  background-color: var(--button-33-bg-color);
  border-radius: 5px;
  box-shadow: var(--button-33-shadow-color) 0 -25px 18px -14px inset, var(--button-33-shadow-color) 0 1px 2px, var(--button-33-shadow-color) 0 2px 4px, var(--button-33-shadow-color) 0 4px 8px, var(--button-33-shadow-color) 0 8px 16px, var(--button-33-shadow-color) 0 16px 32px;
  color: var(--button-33-text-color);
  cursor: pointer;
  display: inline-block;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 99ms;
  border: 0;
  font-size: 1rem; /* 16px */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-weight: 900;
  text-shadow: none;
}

.button-33:hover {
    color: var(--button-33-text-color);
    box-shadow: var(--button-33-shadow-hover-color) 0 -25px 18px -14px inset, var(--button-33-shadow-hover-color) 0 1px 2px, var(--button-33-shadow-hover-color) 0 2px 4px, var(--button-33-shadow-hover-color) 0 4px 8px, var(--button-33-shadow-hover-color) 0 8px 16px, var(--button-33-shadow-hover-color) 0 16px 32px;
    transform: scale(1.05) rotate(-1deg);
}

.buttonyDalej {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
}

.buttonyDalej a {
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: 99ms;
}

.minObrazok{
    min-width: 350px;
}
.maxObrazok{
    max-width: 350px;
}
.skryt{
    display: none !important;
}

/* ==========================================================================
   Form Kontakt
   ========================================================================== */
.kontakt {
  padding: 0.3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.kontakt h1 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: var(--kontakt-h1-color); 
}
.kontakt h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--kontakt-h2-color);
}

.kontakt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.kontakt-card {
  flex: 1 1 250px;
  background: var(--kontakt-bg-color);
  border-radius: 12px;
  padding: 0.6rem;
  color: var(--kontakt-card-text-color);
  box-shadow: 0 2px 6px var(--kontakt-card-shadow-color);
  transition: transform 99ms ease, box-shadow 99ms ease;
}

.kontakt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--kontakt-card-shadow-hover-color);
}

.kontakt-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--kontakt-h3-accent-color);
}

.kontakt-card a {
  text-decoration: none;
}

.kontakt-card a:hover {
  text-decoration: underline;
}

/* Formulár */
.kontakt-form {
  background: var(--kontakt-bg-color);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--kontakt-card-shadow-color);
}

.kontakt-form h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  color: var(--kontakt-h3-accent-color);
}

.kontakt-form form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.kontakt-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.kontakt-form input,
.kontakt-form textarea {
  flex: 1;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--kontakt-input-border-color);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--kontakt-input-bg-color);
  color: var(--kontakt-input-text-color);
  transition: border-color 99ms ease, box-shadow 99ms ease;
  box-sizing: border-box;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus {
  border-color: var(--kontakt-input-focus-border-color);
  box-shadow: 0 0 20px 4px var(--kontakt-input-focus-shadow-color);
  outline: none;
}

.kontakt-form textarea {
  resize: vertical;
  min-height: 150px;
}

.kontakt-form button {
  align-self: flex-start;
  padding: 0.9rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
}
.kontakt-form input,
.kontakt-form textarea,
.kontakt-form button {
  font-family: inherit;
}
/* ==========================================================================
   Štýly pre podstránky 
   ========================================================================== */

/* ==========================================================================
   Jednotný systém pre rozloženie podstránok
   ========================================================================== */

.pages-grid-container {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* --- Modifikátory pre rôzne typy mriežok --- */
.pages-grid-container--2-col { grid-template-columns: 1fr 1fr; }
.pages-grid-container--3-col { grid-template-columns: repeat(3, 1fr); }
.pages-grid-container--text-heavy { grid-template-columns: 1.5fr 1fr; }
.pages-grid-container--visual-heavy { grid-template-columns: 1fr 1.5fr; }
.pages-grid-container--40-60 { grid-template-columns: 40% 1fr; }

/* --- Pomocná trieda pre "lepkavý" stĺpec --- */
.sticky-top {
    position: sticky;
    top: 20px;
}

/* --- Jednotný štýl pre informačné karty --- */
.info-card {
    background-color: var(--kontakt-bg-color);
    border-top: 4px solid var(--main-h-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--kontakt-card-shadow-color);
    height: 100%; /* Zabezpečí rovnakú výšku kariet v jednom riadku */
    box-sizing: border-box;
}

.info-card h3 {
    color: var(--vyrazna-farba);
    margin-top: 0;
    margin-bottom: 1rem;
}

.info-card ul {
    text-align: left;
    padding-left: 1rem;
    list-style-position: inside;
}

.info-card li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--kontakt-card-text-color);
}

.info-card--text-center {
    text-align: center;
}

/* --- Finálny štýl pre "Fakt box" --- */
.fakt-box {
    background-color: var(--kontakt-bg-color);
    border-left: 4px solid var(--vyrazna-farba);
    padding: 1.5rem;
    margin-top: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--kontakt-card-shadow-color);
}

.fakt-box h3 {
    margin-top: 0;
    color: var(--vyrazna-farba);
    text-shadow: var(--vyrazna-farba-tien);
}

.fakt-box p {
    padding: 0;
    color: var(--kontakt-card-text-color);
}
/* ==========================================================================
   Nové štýly pre Kontaktnú stránku
   ========================================================================== */

.kontakt-grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Ľavý stĺpec je o niečo širší */
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

/* Zvýraznenie telefónu a emailu */
.primary-contact-details {
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    text-align: center;
    background-color: var(--kontakt-bg-color);
}
.primary-contact-details h3 {
    font-size: 1.25rem; /* 20px */
    color: var(--main-font-color);
    margin-bottom: 0.5rem;
}
.primary-contact-details a {
    color: var(--vyrazna-farba);
    text-shadow: var(--vyrazna-farba-tien);
}

/* Nový štýl pre informačnú kartu napravo */
.info-card-kontakt {
    background-color: var(--kontakt-bg-color);
    padding: 2rem;
    border-radius: 10px;
    height: 100%;
}
.info-card-kontakt h3 {
    color: var(--vyrazna-farba);
    border-bottom: 1px solid var(--main-h-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.info-card-kontakt p {
    padding: 0 0 1rem 0;
    text-align: left;
    color: var(--main-p-color);
}
/* ==========================================================================
   5. Responzívne pravidlá pre mobily a tablety
   ========================================================================== */
@media (max-width: 960px) {
    .kontakt-grid-container {
        grid-template-columns: 1fr;
    }    
    /* --- Responzívne pravidlá pre jednotný systém --- */
    .pages-grid-container {
        grid-template-columns: 1fr !important; /* Vždy len jeden stĺpec na mobile */
    }
    .sticky-top {
        position: static; /* Zruší "lepkavosť" na mobile */
    }
    .grid-popis {
        position: static; /* Na mobiloch nebude popis fixovaný */
    }

    .info-karticka {
        padding: 1rem;
    }
    #logoDiv {
        display: none;
    }
    #logoDivMobile {
        display: flex;
    }
    .maxObrazok{
        max-width: 100%;
    }
    header {
		display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 15px 0px 15px;
		max-width: 960px;
    }
    
    .navigation-wrapper {
        display: block;
        position: relative; 
    }

    .hamburger-menu {
        display: block;
        position: fixed;
        top: 20px;
        left: 15px;
        z-index: 1001;
    }
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 80%;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%); 
        transition: transform 99ms ease-in-out;
        background: var(--mobile-nav-bg-color);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 90px;
        box-sizing: border-box;
        border: none;
        box-shadow: none;
        background: #285e49ee;
        background: linear-gradient(90deg,rgba(40, 94, 73, 0.899) 0%, rgba(27, 63, 49, 0.877) 100%);
    }
    
    nav.active {
        transform: translateX(0);
    }

    nav a {
        display: block;
        padding: 10px 18px;
        border-bottom: 1px solid var(--mobile-nav-border-color);
        margin: 0px;
        border-radius: 0px;
        color: var(--nav-link-color);
        font-size: 1rem; /* 16px */
        font-weight: bold;
        text-align: left;
        transition: all 99ms ease-in-out;
    }

    nav a:hover {
        background-color: var(--mobile-nav-border-color);
        transition: all 99ms ease-in-out;
    }

    /* --- Všeobecné mobilné štýly --- */
    body { font-size: 1rem; } /* 16px */
    h1 { font-size: 1.5rem; padding: 15px; } /* 24px */
    .vyrazne { font-size: 1.125rem; } /* 18px */
    p { padding: 0 15px 15px 15px; }

    .one-fourth, .three-fourth { 
        width: 100%; 
        display: block; 
        margin-bottom: 20px; 
    }
    
    #floatLeft { 
        float: none; 
        display: block; 
        margin: 0 auto 20px auto; 
    }

    footer nav { display: none; }
    
    #f11, #f12, #f13 {
        display: block;
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    #contact-input {
        width: 100%;
        box-sizing: border-box;
    }
    .float-left, .float-right {
        min-width: 100%;
        float:none;
        margin: 0;
    }

    .kontakt-form .form-row {
        flex-direction: column;
    }
}