/* Import a monospaced font that looks good for a terminal effect */
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); */

/* Global Terminal Appearance */
:root {
  --bg-color: #1e1e1e; /* Dark terminal background */
  --text-color: #00ff41; /* Classic green text */
  --accent-color: #00ffff; /* Cyan for links/accents */
  --mono-font: 'Fira Code', 'Hack', 'Consolas', 'Monaco', monospace;
  --sidebar-width: 250px;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--mono-font);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  display: flex; /* Use flexbox for main layout */
  min-height: 100vh;
}

/* Sidebar Styling (TOC) */
#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0; 
  background-color: #2a2a2a; /* Slightly lighter dark background */
  border-right: 2px solid var(--text-color);
  padding: 1.5em 1em;
  position: fixed; /* Fixed position */
  height: 100%;
  overflow-y: auto; 
  box-sizing: border-box; /* Include padding in width */
}

#sidebar h2 {
  color: var(--accent-color);
  font-size: 1.25rem;
  border-bottom: 1px dashed var(--text-color);
  padding-bottom: 0.5em;
  margin-bottom: 1em;
  text-transform: uppercase;
  font-weight: 700;
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar li {
  margin-bottom: 0.5em;
}

#sidebar a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  padding: 0.2em 0.5em;
  transition: color 0.2s, background-color 0.2s;
}

#sidebar a:hover, #sidebar a:focus {
  color: var(--bg-color);
  background-color: var(--text-color);
  outline: none;
}

/* Indentation for TOC levels */
#sidebar li.level-1 a {
  font-weight: 700;
  color: var(--accent-color);
  margin-top: 10px;
}

#sidebar li.level-2 {
  padding-left: 10px;
  font-style: italic;
  color: #cccccc;
}

#sidebar li.level-3 {
  padding-left: 20px;
  list-style-type: none; /* Removed circle to maintain terminal look */
  font-size: 0.8rem;
  color: #999999;
}


/* Main Content Area */
#content {
  flex-grow: 1;
  margin-left: var(--sidebar-width); /* Push content over past the fixed sidebar */
  padding: 2em;
  width: calc(100% - var(--sidebar-width));
  box-sizing: border-box; /* Include padding in width */
}

/* Typography for Content */
h1, h3, p, blockquote, pre {
  font-family: var(--mono-font);
  margin: 0 0 1em;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-color); 
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 0.5em;
  margin-top: 1em;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-color);
  margin-top: 1.5em;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
}

blockquote {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 5px solid var(--accent-color); 
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1em;
  color: #f0f0f0; 
}

pre {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  background: #000000; 
  color: #f8f8f2; 
  border: 1px dashed var(--text-color);
  padding: 1em;
  overflow-x: auto;
  border-radius: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Links in content */
#content a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-color);
  transition: color 0.2s;
}

#content a:hover {
  color: var(--text-color);
  border-bottom-color: var(--text-color);
}


/* Highlight effect */
.highlight {
  background-color: rgba(255, 255, 0, 0.4); 
  color: var(--bg-color); 
  transition: background-color 0.3s ease;
}

/* Specific styling for the thumbnail to look better */
.thumbnail {
  border: 1px solid var(--text-color);
  box-shadow: 0 0 5px var(--text-color);
}

/* 🖱️ FIX FOR CONTENT OBSCURED BY SIDEBAR/HEADER */
h1:target, h2:target, h3:target {
    /* Offset the jump target by a small amount to clear fixed elements */
    padding-top: 30px; 
    /* Compensate for the padding-top with a negative margin */
    margin-top: -30px; 
    /* Optional: Provide visual feedback that the section was targeted */
    color: yellow;
    transition: color 0.5s ease;
}