:root{
  --bg:#f0f4f8; --sidebar:#fff; --toc:#f9fafb;
  --link:#1d4ed8; --link-hover:#2563eb; --text:#111827;
  --accent:#3b82f6; --border:#e5e7eb;
}
*{box-sizing:border-box; scroll-behavior:smooth;}
body{margin:0;font-family:"Segoe UI", Roboto,sans-serif;background:var(--bg);color:var(--text);}
#container{display:flex;max-width:1400px;margin:auto; animation:fadeIn 0.5s ease;}

/* Ľavý panel navigácie */
nav#sidebar{
  width:220px; background:var(--sidebar); border-right:1px solid var(--border);
  padding:20px; min-height:100vh;
}
nav h3{margin-top:0; font-size:18px; border-bottom:2px solid var(--border); padding-bottom:6px;}
nav ul{list-style:none;padding:0;}
nav li{margin:6px 0;}
nav a{text-decoration:none;color:var(--link);display:block;padding:6px 10px;border-radius:6px;transition:0.25s;}
nav a:hover{background:var(--accent); color:white; transform:translateX(4px);}

/* Hlavný obsah */
main#content{flex:1;background:white;padding:30px;}
main h1{font-size:32px;border-bottom:2px solid var(--border);padding-bottom:8px;margin-top:0;}
main h2,main h3{margin-top:28px;position:relative;}
main p,li{font-size:16px;line-height:1.6;}
table{border-collapse:collapse;width:100%;margin:20px 0;box-shadow:0 2px 6px rgba(0,0,0,0.05);}
th,td{border:1px solid var(--border);padding:10px;text-align:left;}
th{background:#f3f4f6;}

/* Pravý panel - rýchle odkazy */
#toc{
  width:260px; background:var(--toc); border-left:1px solid var(--border);
  padding:20px; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto;
}
#toc h3{margin-top:0;font-size:18px;border-bottom:2px solid var(--border);padding-bottom:6px;}
#toc ul{list-style:none;padding:0;margin:0;}
#toc li{margin:6px 0;}
#toc a{text-decoration:none;color:var(--link);transition:0.2s;}
#toc a:hover{color:var(--link-hover);}

/* Anchor link v obsahu */
.anchor-link{
  position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  opacity:0; text-decoration:none; font-size:18px; color:var(--link); transition:opacity 0.2s;
}
h2:hover .anchor-link,h3:hover .anchor-link{opacity:1;}

/* Tlačítka */
/* Základné tlačidlo */
.btn{
  display:inline-block;
  padding:10px 16px;
  margin:8px 0;
  background:var(--accent);
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:500;
  transition:all 0.25s;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* pomer 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  margin: 20px 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.btn:hover {
  background: var(--link-hover);
  transform: translateY(-2px);
}


/* Animácie */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Flex layout hlavný obsah + pravý panel */
#content-wrapper{display:flex;}
@media(max-width:1024px){#content-wrapper{flex-direction:column;}#toc{width:100%;max-height:auto;margin-top:20px;}}
footer{text-align:center;font-size:13px;color:#6b7280;padding:18px;}

/* 📱 Mobilná optimalizácia */
@media(max-width: 768px) {
  #container {
    flex-direction: column;
  }

  nav#sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  main#content {
    padding: 20px;
    order: 2;
    /* obsah pôjde pod TOC */
  }
  
#toc button {
  display: none; /* defaultne na PC neviditeľné */
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 8px;
  cursor: pointer;
}

  main h1 {
    font-size: 26px;
  }

  main p,
  li {
    font-size: 15px;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

/* PC: klasický pravý panel */
#toc {
  width: 260px;
  background: var(--toc);
  border-left: 1px solid var(--border);
  padding: 20px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}

/* Mobile: rýchle odkazy hore nad obsahom */
@media(max-width: 768px){
  #container {
    flex-direction: column;
  }
  #toc {
    width: auto;
    border-left: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    position: relative;
    max-height: none;
    order: -1; /* presunie TOC úplne hore */
  }
  #toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 8px 0 0 0;
  }
  #toc li {
    list-style: none;
  }
  #toc a {
    display: inline-block;
    padding: 6px 10px;
    background: var(--accent);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
  }
  #toc a:hover {
    background: var(--link-hover);
  }
}