/* =========================
   Theme Colors (Dark/Light)
   ========================= */
:root {
  --text-font: 'Calibri', Tahoma, Geneva, Verdana, sans-serif;
  --mono-font: Consolas, 'Courier New', Courier, monospace;

  --bg-color: #222;
  --bg-color2: #1a1a1a;
  --text-color: #dddddd;
  --text-color2: #aaaaaa;
  --line-color: #444444;
  --link-color: cornflowerblue;
  --hover-color: #add8e6;

  --accent-color2: cornflowerblue;
  --accent-color3: aliceblue;
}

[data-theme="light"] {
  --bg-color: #eee;
  --bg-color2: #ddd;
  --text-color: #333;
  --text-color2: #555;
  --line-color: #999;
  --link-color: cornflowerblue;
  --hover-color: #add8e6;
}

/* =========================
   Reset + Base Styles
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  font-family: var(--text-font);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: 3em;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }


/* =========================
   Topbar
   ========================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  background: var(--accent-color);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  transition: transform 0.3s ease;
}
.topbar h2 {
  font-size: 1.4rem;
  font-weight: 500;
}

/* Move topbar when panels are open */
body.left-open .topbar { transform: translateX(var(--panel-width)); }
body.right-open .topbar { translateX(calc(-1 * var(--panel-width))); }
body.left-open.right-open .topbar { transform: translateX(0); }

/* =========================
   Toggle Buttons
   ========================= */
.toggle-btn {
  position: fixed;
  top: 0px;
  background-color: var(--accent-color);
  color: var(--text-color);
  border: none;
  height: 3em;
  padding: 0.7em;
  font-size: 1em;
  cursor: pointer;
  z-index: 1000;
}
#toggleSidebar { left: 0px; }
#toggleRightPanel { right: 0px; }

.toggle-btn img.toggle-logo {
  height: 2em;
  width: auto;
  display: block;
  margin: 0 auto;
}



/* =========================
   Side Panels
   ========================= */
.sidebar, .right-panel {
  background-color: var(--bg-color2);
  color: var(--text-color);
  width: var(--panel-width);
  height: 100%;
  position: fixed;
  top: 0;
  transform: translateX(0);
  transition: transform 0.3s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.sidebar { left: 0; }
.right-panel { right: 0; }

.sidebar.collapsed { transform: translateX(calc(var(--panel-width) * -1)); }
.right-panel.collapsed { transform: translateX(var(--panel-width)); }

/* =========================
   Panel Spacer (top buffer)
   ========================= */
.panel-spacer {
  height: 3em;
  flex-shrink: 0;
  background-color: var(--accent-color);
}

/* =========================
   Light/Dark Mode Toggle Button
   ========================= */
.mode-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.4em;
}

/* =========================
   Site Header (Left Panel)
   ========================= */
.site-header {
  margin-bottom: 2rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line-color);
}
.site-header h1 {
  font-size: 1.4rem;
  color: var(--text-color);
}


.site-title-spacer {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
}

.site-title {
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}

.site-title:hover {
  color: var(--hover-color);
}






/* =========================
   Sidebar Navigation
   ========================= */
.sidebar nav ul {
  list-style: none;
  padding: 0;
}
.sidebar nav a {
  color: var(--text-color);
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
}
.sidebar nav a:hover {
  background-color: var(--accent-color);
}

/* =========================
   Main Content Area
   ========================= */
.content {
  background: var(--bg-color);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  transition: transform 0.3s ease;
  padding: 1rem;
}
body.left-open .content { transform: translateX(var(--panel-width));}
body.right-open .content { transform: translateX(calc(-1 * var(--panel-width))); }
body.left-open.right-open .content { transform: translateX(0); }

/* =========================
   Sidebar Footer
   ========================= */
.panel-footer {
  margin-top: auto;
  padding: 0.25em;
  text-align: center;
  border-top: 1px solid var(--line-color);
}
.panel-footer a {
  color: var(--text-color2);
  margin: 0 0.25em;
  font-size: 1em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.panel-footer a:hover {
  color: var(--accent-color);
}

/* =========================
   Links (global fallback)
   ========================= */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

.hidden {
  display: none;
}


.toc {
  padding: 1rem;
  overflow-y: auto;
}

.toc .section-title {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: var(--text-color);
}

.toc ul {
  list-style: none;
  padding-left: 0;
}

.toc li {
  margin-bottom: 0.25em;
}

.toc a {
  color: var(--link-color);
  text-decoration: none;
  font-size: 0.9em;
}

.toc a:hover {
  color: var(--hover-color);
}

.toc-h3 {
  padding-left: 1em;
  font-size: 0.85em;
}


.toc-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 1em;
  background-color: var(--accent-color);
  height: 3em;
}

.toc-title {
  font-size: 1em;
  font-weight: bold;
  color: var(--text-color);
  white-space: nowrap;
}

.toc-spacer {
  position: relative;
  height: 3em;
  background-color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toc-spacer .mode-toggle {
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
}

.toc-title {
  font-size: 1em;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
}




/* =========================
   Responsive (EM-based)
   ========================= */
@media (max-width: 64em) {  /* 768px ÷ 12px = 64em */
  .sidebar,
  .right-panel {
    width: var(--panel-width);
  }

  .sidebar.collapsed {
    transform: translateX(calc(-1 * var(--panel-width)));
  }

  .right-panel.collapsed {
    transform: translateX(var(--panel-width));
  }

  body.left-open .topbar {
    transform: translateX(var(--panel-width));
  }

  body.right-open .topbar {
    transform: translateX(calc(-1 * var(--panel-width)));
  }

  body.left-open.right-open .topbar {
    transform: translateX(0);
  }

  body.left-open .content {
    transform: translateX(var(--panel-width));
  }

  body.right-open .content {
    transform: translateX(calc(-1 * var(--panel-width)));
  }

  body.left-open.right-open .content {
    transform: translateX(0);
  }

  .content {
    padding: 1.5rem;
    max-width: 95%;
  }
}