:root{
  /* === Farebná paleta === */
  --bg:#394826;
  --card:#122622;
  --text:#f3f4e9;
  --muted:#b5bda0;
  --brand:#9fbf3b;
  --accent:#c7e36a;

  /* === Spoločné UI hodnoty === */
  --border:#202632;
  --radius:1rem;
}

/* === Reset + základ === */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}

img{ max-width:100%; height:auto; display:block; }

/* === Základné kontajnery === */
.container{
  max-width:1100px;
  margin-inline:auto;
  padding:1.2rem;
}

/* Spoločný štýl “kartičiek” (article, boxy, galéria karty...) */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
}

/* === Header + navigácia === */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(15,17,21,.9);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid #1f2430;
}

.site-header .brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1rem;
  text-decoration:none;
  color:var(--text);
}

.logo{
  width:120px;
  max-height:120px;
  object-fit:contain;
}

.brand-title{
  font-weight:800;
  letter-spacing:.02em;
  color:rgb(255,77,0);
}

.site-nav ul{
  display:flex;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:.5rem 1rem;
  flex-wrap:wrap;
}

.site-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.6rem;
}

.site-nav a:hover,
.site-nav a.active{
  color:var(--text);
  background:#1b2230;
}

.nav-toggle{
  display:none;
  margin-left:auto;
  margin-right:1rem;
  background:transparent;
  border:1px solid #2a3345;
  border-radius:.5rem;
  color:var(--muted);
  padding:.4rem .6rem;
}

/* === Nadpisy === */
h1,h2,h3,h4,h5,h6{
  font-family:"Times New Roman",serif;
  color:var(--text);
  margin-top:1.2rem;
  margin-bottom:.6rem;
}

h1{
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:1px;
  border-bottom:2px solid var(--accent);
  padding-bottom:.4rem;
}

h2{
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--accent);
}

h3{
  font-size:1.5rem;
  font-weight:600;
  color:var(--muted);
}

h4{ font-size:1.25rem; font-weight:600; }
h5{ font-size:1.1rem; font-weight:600; }
h6{ font-size:1rem; font-weight:600; color:var(--muted); }

/* === Hero sekcia === */
.hero{
  display:grid;
  gap:1rem;
  background:linear-gradient(180deg,#152033,transparent);
  padding:1.4rem;
  border:1px solid #1f2a3d;
  border-radius:var(--radius);
}

.hero p:first-of-type,
.hero p:last-of-type{
  max-width:850px;
  margin-inline:auto;
  padding-inline:.5rem;
}

.hero p:first-of-type{ text-align:justify; }
.hero p:last-of-type{ text-align:left; }

.btn{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:.7rem;
  background:var(--brand);
  color:#021024;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{ filter:brightness(1.05); }

/* === Article === */
article{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-block:1rem; }
article h2{ margin-top:0; }

/* === Citácie, zvýraznenie === */
blockquote{
  border-left:3px solid var(--accent);
  padding:.5rem 1rem;
  background:#101725;
  border-radius:.5rem;
  color:#cff6e9;
}

q{ quotes:"\201E""\201C" "\201A""\2018"; }

mark{
  background:#f7e06e33;
  border:1px solid #f7e06e66;
  padding:0 .2rem;
  border-radius:.3rem;
}

/* === Media box (video/audio/obrázky) === */
.media-box{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-block:1rem; }
.media-box img,
.media-box video,
.media-box audio{
  display:block;
  margin:1rem auto;
  max-width:100%;
}

/* === Tabuľka s obrázkami === */
.kras-tab{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
}

.kras-tab caption{
  margin-bottom:.5rem;
  font-style:italic;
  color:var(--muted);
}

.kras-tab th,
.kras-tab td{
  border:1px solid #000;
  padding:.75rem;
  vertical-align:middle;
}

.kras-tab td{ overflow: visible; }  /* aby sa obraz po zväčšení neorezal */

.kras-tab td img{
  width:160px;
  height:120px;
  object-fit:contain;      /* zmenší, neoreže */
  border-radius:.75rem;
  margin:0 auto;
  background:#0f1115;
  transition: transform .25s ease;
  transform-origin: center;
}

.kras-tab td img:hover,
.kras-tab td img:focus-visible{
  transform: scale(2);     /* presne 2× */
  position: relative;
  z-index: 10;
}


.kras-tab tbody tr:hover{ background:rgba(0,0,0,.15); }

/* === Zoznam s ikonami === */
.with-icons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem 1rem;
}
.with-icons img{
  width:22px;
  display:inline-block;
  margin-right:.35rem;
  vertical-align:middle;
}

/* === Aside/fakty === */
.facts{
  background:var(--card);
  border:1px solid #1f2a3d;
  border-radius:var(--radius);
  padding:1rem;
  margin-block:1rem;
}

/* === Kontakt === */
.contact{
  background:linear-gradient(180deg,#122622,#0f1115);
  border:1px solid #1f2a3d;
  border-radius:var(--radius);
  padding:1rem;
}

/* === Galéria grid (foto-grid) === */
.foto-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.foto-grid img{
  width:100%;
  height:220px;
  object-fit:cover;        /* ak nechceš orezy -> zmeň na contain */
  border-radius:.75rem;
  border:2px solid #000;
  background:#0f1115;
}

/* === Galéria kartičky (ul.gallery) === */
.gallery{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:0;
}

.gallery figure{
  background:#101725;
  border:1px solid #1f2430;
  border-radius:.8rem;
  padding:.5rem;
}

.gallery-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.gallery img{
  border-radius:.6rem;
  transition:transform .2s ease;
}

.gallery-link:hover img,
.gallery-link:focus-visible img{
  transform:scale(1.04);
}

.gallery figcaption{
  color:var(--muted);
  font-size:.9rem;
  margin-top:.4rem;
  text-align:center;
}

/* === Odkazy (globálne) === */
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
a:visited{ color:var(--accent); }
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:.4rem;
}

/* Odkazy s ikonou (mapa, galéria, návrat...) */
.link-icon{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .5rem;
  border-radius:.6rem;
  color:var(--accent);
  text-decoration:none;
}
.link-icon:hover{
  background:rgba(255,255,255,.05);
  text-decoration:none;
}
.link-icon img{ width:18px; height:18px; opacity:.85; }

/* === Back-to-top button === */
#toTop{
  position:fixed;
  right:1rem;
  bottom:1rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  transform:translateY(10px);
  text-decoration:none;
  background:#1b2230;
  border:1px solid #2a3345;
  border-radius:999px;
  padding:.6rem .7rem;
  color:var(--text);
  font-weight:700;
}
#toTop.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* === Footer === */
.site-footer{
  background:#11161f;
  border-top:1px solid #1f2430;
  color:#9fb0c6;
  text-align:center;
  padding:1.2rem;
}

/* === MAPA DEBUG (daj na koniec CSS) === */
.map-wrapper{
  position:relative !important;
}

.map-wrapper img{
  position:relative;
  z-index:1;
}

.map-wrapper .marker{
  position:absolute !important;
  transform:translate(-50%,-50%);
  display:block !important;
  width:44px !important;
  height:44px !important;
  border-radius:50%;
  z-index:999 !important;
  pointer-events:auto !important;
  cursor:pointer;
}

/* pozície */
.map-wrapper .m1{ left:21.23% !important; top:46.12% !important; }
.map-wrapper .m2{ left:85.46% !important; top:54.43% !important; }
.map-wrapper .m3{ left:75.87% !important; top:72.78% !important; }

/* === Responzivita === */
@media (max-width:900px){
  .foto-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .nav-toggle{ display:block; }

  .site-nav ul{
    display:none;
    flex-direction:column;
    padding:.5rem 1rem;
  }
  .site-nav ul.open{ display:flex; }
  .site-nav li{ margin-bottom:.25rem; }

  .with-icons{ grid-template-columns:1fr; }

  .logo{ width:56px; max-height:56px; }
}

@media (max-width:600px){
  .gallery{ grid-template-columns:1fr; }
  .foto-grid{ grid-template-columns:1fr; }
}

/* === Index: H1 + logo vedľa seba === */
.index-title-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  text-align:center;
}
.index-title-logo{ width:120px; height:auto; }
@media (max-width:600px){
  .index-title-logo{ width:90px; }
}
#uvod .index-title-wrapper h1{ flex:1 1 auto; }

/* === O NÁS – obtekanie fotky členov (iba táto konkrétna fotka) === */
.onas-float{
  float: right;
  width: 320px;
  margin: 0 0 1rem 1.2rem;
  display: block;
}

.onas-float img{
  width: 100%;
  display: block;
  border-radius: .75rem;
  border: 1px solid var(--border);
}

.onas-cap{
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-top: .3rem;
  text-align: center;
}

/* Mobil – bez obtekania */
@media (max-width: 700px){
  .onas-float{
    float: none;
    width: 100%;
    margin: 0 0 1rem 0;
  }
}


/* === Kontakt formulár === */
.contact-form{
  display:grid;
  gap:.6rem;
  max-width:520px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.6rem .7rem;
  border-radius:.6rem;
  border:1px solid var(--border);
  background:#0e1a18;
  color:var(--text);
}
.contact-form label{ font-weight:700; }
.contact-list{ list-style: none; padding-left:0; }
.contact-list li{ margin:.35rem 0; }
.muted{ color:var(--muted); }