/* ===================================
   BASE VARIABLES & THEME SYSTEM
=================================== */
:root {
  --color-bg: #1a1625;
  --color-surface: #231c32;
  --color-accent: #7d6ba0;
  --color-border: #382f4a;
  --color-text: #e4dff9;
  --color-subtext: #bfb8da;
  --color-highlight: #cbb2ff;
}

body[data-theme="light"] {
  --color-bg: #faf8ff;
  --color-surface: #f3efff;
  --color-accent: #7d6ba0;
  --color-border: #d3caed;
  --color-text: #2a2440;
  --color-subtext: #4b4363;
  --color-highlight: #7d6ba0;
}

/* GLOBAL RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, color 0.3s;
}

/* NAVBAR */
.topbar{
  background-color: var(--color-accent);
  color:#fff;
  padding:0.6rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  position:fixed; top:0; width:100%; z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.topbar .brand-text {
  font-family: 'Baloo 2', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.menu-btn{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:6px;
}
.menu-btn span{
  width:24px; height:3px; background:#fff; border-radius:2px;
}
.theme-toggle{
  background:none; border:none; color:#fff; cursor:pointer; font-size:1.2rem; padding:6px;
}
.theme-icon{ font-size:1.3rem; font-weight:bold; }

/* CONTAINER */
.container{ flex:1; display:flex; width:100%; margin-top:70px; }

/* SIDEBAR */
.sidebar{
  width:250px;
  background: var(--color-surface);
  border-right:2px solid var(--color-border);
  position:fixed; top:70px; bottom:0; padding:20px; overflow-y:auto;
  transition: transform 0.3s ease, width 0.3s ease; z-index:900;
  font-family:'Inter',sans-serif;
}
.sidebar h2{
  color:var(--color-highlight); font-size:1.1rem; margin-bottom:10px;
  display:flex; justify-content:space-between; cursor:pointer;
}
.sidebar h2 span{ transition:transform 0.3s ease; display:inline-block; }
.sidebar h2.active span{ transform:rotate(180deg); }
.sidebar .content-links{ overflow:hidden; max-height:500px; transition:max-height 0.3s ease; }
.sidebar .content-links a{
  display:block; color:var(--color-subtext); text-decoration:none;
  padding:8px 10px; margin:5px 0; border-radius:6px;
  transition: background 0.2s,color 0.2s;
}
.sidebar .content-links a:hover,
.sidebar .content-links a.active{ background:var(--color-border); color:var(--color-text);}
body.sidebar-collapsed .sidebar{ width:60px; }
body.sidebar-collapsed .sidebar h2,
body.sidebar-collapsed .sidebar .content-links a{ display:none; }

/* SCROLLBAR */
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:4px; }
.sidebar::-webkit-scrollbar-track{ background:var(--color-surface); }

/* CONTENT */
.content{
  flex:1; padding:40px; margin-left:250px;
  transition: background 0.3s, color 0.3s, margin-left 0.3s;
}
body.sidebar-collapsed .content{ margin-left:60px; }

/* H1 DIVIDER FIXED USING .divider */
.divider {
  width:50%;
  max-width:300px;
  height:6px;
  background:var(--color-accent);
  border-radius:12px;
  margin:8px 0 20px 0;
}

/* CONTENT TEXT */
.content p, .content li{ color:var(--color-text); font-size:1.1rem; line-height:1.7; margin-bottom:18px; }

/* CODE */
.content pre, .content code{ font-family:'JetBrains Mono', monospace; }
.content pre{ background:var(--color-surface); color:var(--color-text); padding:15px; border-radius:8px; font-size:0.95rem; overflow-x:auto; }
.content code{ background:var(--color-surface); padding:3px 6px; border-radius:5px; }

/* FOOTER */
.footer{
  background:var(--color-surface); border-top:2px solid var(--color-border);
  padding:20px; text-align:center;
}
.footer-links a{ color:var(--color-subtext); text-decoration:none; margin:0 10px; transition:color 0.2s; }
.footer-links a:hover{ color:var(--color-highlight); }

/* LIGHT THEME SIDEBAR */
body[data-theme="light"] .sidebar{ background:#f3efff; border-right:2px solid #d3caed;}
body[data-theme="light"] .sidebar h2{ color:#7d6ba0;}
body[data-theme="light"] .sidebar .content-links a{ color:#4b4363;}
body[data-theme="light"] .sidebar .content-links a:hover,
body[data-theme="light"] .sidebar .content-links a.active{ background:#d3caed; color:#2a2440; }

/* ===================================
   MOBILE FIXES
=================================== */
@media(max-width:800px){
  .sidebar{
    width:280px;            /* bigger, easier to tap */
    transform:translateX(0); /* always visible */
    top:70px;
    bottom:0;
    height:calc(100% - 70px);
    padding:20px;
    box-shadow:4px 0 15px rgba(0,0,0,0.3);
    z-index:1001;
  }

  .sidebar h2{ font-size:1.2rem; }
  .sidebar h2 span{ font-size:1.2rem; }
  .sidebar .content-links a{ font-size:1rem; padding:10px 15px; width:100%; }

  .content{ margin-left:0 !important; padding:20px 15px; }

  /* Allow collapse toggle if needed */
  body.sidebar-collapsed .sidebar{
    transform:translateX(-100%);
  }
}