/* ---------- THEME VARIABLES ---------- */

:root{
--bg:#121212;
--surface:#1e1e1e;
--text:white;
--muted:#aaa;
--border:#333;

--link:#99b6f9;
--link-hover:#a8c1ff;
--link-visited:#b48cff;

}

body.light{
--bg:#ffffff;
--surface:#f2f2f2;
--text:#111;
--muted:#555;
--border:#ddd;

--link:#2b6cff;
--link-hover:#678ef1;
--link-visited:#7a3bd1;

}

/* ---------- GLOBAL ---------- */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--bg);
color:var(--text);
transition:0.25s;
}

/* ---------- HEADER ---------- */

header{
display:flex;
justify-content:center;
align-items:center;
position:sticky;
top:0;
background:var(--bg);
border-bottom:1px solid var(--border);
padding:8px;
z-index:10;
}

.header-controls{
position:absolute;
right:20px;
}

button{
padding:8px 12px;
border:none;
border-radius:6px;
cursor:pointer;
background:var(--surface);
color:var(--text);
}

/* ---------- MAIN LAYOUT ---------- */

/* Favicon */
.favicon{
    position: absolute;
    padding-left: 20px;
    width: 100%;
    border-radius: 15px 50px 30px 5px;
}


.layout{
display:flex;
justify-content:center;
gap:30px;
padding:30px 20px;
}

/* ---------- LEFT SIDEBAR ---------- */

.sidebar-left{
width:200px;
background:var(--surface);
padding:20px;
border-radius:10px;
height:fit-content;
position:sticky;
top:100px;
}

.sidebar-left a{
display:block;
text-decoration:none;
color:var(--muted);
margin:12px 0;
}

.sidebar-left a:hover{
color:var(--text);
}

/* ---------- CENTER CONTENT ---------- */

.main-content{
flex:1;
max-width:900px;   /* 🔥 zabrani infinite stretching */
min-width:0;
}

/* ---------- RIGHT SOCIAL BOX ---------- */

.sidebar-right{
width:160px;
position:sticky;
top:120px;
height:fit-content;
}

.social-box{
background:var(--surface);
padding:15px;
border-radius:10px;
}

.social-box a{
display:block;
text-decoration:none;
color:var(--muted);
margin:8px 0;
font-size:14px;
}

.social-box a:hover{
color:var(--text);
}

/* ---------- FOOTER ---------- */

footer{
text-align:center;
padding:25px;
margin-top:40px;
border-top:1px solid var(--border);
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:1100px){

.sidebar-right{
display:none; /* social zmizne na tablet */
}

}

@media(max-width:800px){

.layout{
flex-direction:column;
align-items:center;
}

.sidebar-left{
width:100%;
position:relative;
top:0;
}

.main-content{
max-width:100%;
min-width:0;
}

.sidebar-right{
display:block;
width:100%;
}

.social-box{
display:flex;
justify-content:center;
gap:20px;
}

.social-box a{
margin:0;
}

.page-title{
  font-size: x-large;
}

}

@media(max-width:600px){
.layout{
flex-direction:column;
align-items:center;
}

.sidebar-left{
width:100%;
position:relative;
top:0;
}

.main-content{
max-width:100%;
min-width:0;
}

.sidebar-right{
display:block;
width:100%;
}

.social-box{
display:flex;
justify-content:center;
gap:20px;
}

.social-box a{
margin:0;
}

.page-title{
  font-size: x-large;
}

}
.section{
  font-size: 24px;
}

/* -------------- */

.section-content {
  display: none;
  padding-left: 15px;
  font-size: 15px;
}

.section.open .section-content {
  display: block;
}

.section-title {
  cursor: pointer;
  font-size:20px;
}

.section{
  padding-top: 7px;
}

.extra-padding{
    padding-top: 10px;
}

.section-content .section {
  margin-left: 10px;
  border-left: 1px solid var(--border);
  padding-left: 10px;
}

.main-content pre {
  overflow-x: auto;
  max-width: 100%;
  background: var(--surface);
  padding: 15px;
  border-radius: 8px;
}

.main-content code {
  white-space: pre-wrap;
  word-break: break-word;
}

.main-content pre span {
  all: unset;
}

.main-content h1,
.main-content h2,
.main-content h3 {
  margin-top: 30px;
}

.main-content p {
  line-height: 1.6;
  color: var(--text);
}

.main-content ul,
.main-content ol {
  padding-left: 25px;
}

.main-content p code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

a{
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover{
  color: var(--link-hover);
  text-decoration: underline;
}

a:visited{
  color: var(--link-visited);
}

.sidebar-left a{
  color: var(--muted);
}

.sidebar-left a:hover{
  color: var(--link);
}

.main-content a{
  position: relative;
}

.main-content a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:1px;
  background:var(--link);
  transition:0.25s;
}

.main-content a:hover::after{
  width:100%;
}

.screenshot {
  margin: 20px 0;
  text-align: center;
}

.screenshot img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}