/* Tutorial page styles - matching the CPL WASM terminal dark theme */

:root {
  --color-primary: #4ec9b0;
  --color-bg: #1e1e1e;
  --color-bg-elevated: #2a2a2a;
  --color-bg-alt: #252525;
  --color-border: #333;
  --color-text: #d4d4d4;
  --color-text-muted: #888;
  --color-code: #ce9178;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  font-size: 16px;
}

/* Navigation header */
.nav-header {
  background: var(--color-bg-elevated);
  border-bottom: 2px solid var(--color-primary);
  padding: 1rem;
  margin: -20px -20px 2rem -20px;
  text-align: center;
  font-size: 0.9rem;
  max-width: none; /* Override body > * rule */
}

.nav-header a {
  color: var(--color-primary);
  text-decoration: none;
  margin: 0 0.5rem;
}

.nav-header a:hover {
  text-decoration: underline;
}

/* Main content container */
#TOC {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 0 auto 2rem auto;
  max-width: 900px;
}

#TOC > ul {
  margin: 0;
  padding-left: 1.5rem;
}

#TOC a {
  color: var(--color-primary);
  text-decoration: none;
}

#TOC a:hover {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h1 {
  font-size: 2.5rem;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-top: 0;
  text-align: center;
}

h2 {
  font-size: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
  color: var(--color-text);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Override Pandoc's default div.sourceCode { margin: 1em 0 } which
   resets margin-left/right to 0 and breaks the body > * centering
   due to higher specificity (class selector beats universal selector). */
div.sourceCode {
  max-width: 900px;
  margin: 1em auto;
}

/* Code blocks and inline code */
code {
  background: var(--color-bg-elevated);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 0.9em;
  color: var(--color-code);
}

pre {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: transparent;
  padding: 0;
  color: var(--color-text);
  font-size: 0.95em;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Lists */
ul, ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

li {
  margin: 0.5rem 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: white;
  padding: 1rem;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

th, td {
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  text-align: left;
}

th {
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  font-weight: bold;
}

tr:nth-child(even) {
  background: var(--color-bg-alt);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Paragraphs */
p {
  margin: 1rem 0;
}

/* Main content wrapper */
body > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Definition lists */
dt {
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 1rem;
}

dd {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

/* Syntax highlighting colors for dark theme
   (override Pandoc's default light-theme colors) */
code span.al { color: #ff6b6b; font-weight: bold; } /* Alert */
code span.an { color: #7ec8e3; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #c9d05c; } /* Attribute */
code span.bn { color: #b5cea8; } /* BaseN */
code span.bu { color: #4ec9b0; } /* BuiltIn */
code span.cf { color: #c586c0; font-weight: bold; } /* ControlFlow */
code span.ch { color: #ce9178; } /* Char */
code span.cn { color: #d19a66; } /* Constant */
code span.co { color: #6a9955; font-style: italic; } /* Comment */
code span.cv { color: #6a9955; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #6a9955; font-style: italic; } /* Documentation */
code span.dt { color: #4ec9b0; } /* DataType */
code span.dv { color: #b5cea8; } /* DecVal */
code span.er { color: #ff6b6b; font-weight: bold; } /* Error */
code span.ex { color: #dcdcaa; } /* Extension */
code span.fl { color: #b5cea8; } /* Float */
code span.fu { color: #dcdcaa; } /* Function */
code span.im { color: #c586c0; font-weight: bold; } /* Import */
code span.in { color: #7ec8e3; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #569cd6; font-weight: bold; } /* Keyword */
code span.op { color: #d4d4d4; } /* Operator */
code span.ot { color: #9cdcfe; } /* Other */
code span.pp { color: #c586c0; } /* Preprocessor */
code span.sc { color: #d7ba7d; } /* SpecialChar */
code span.ss { color: #ce9178; } /* SpecialString */
code span.st { color: #ce9178; } /* String */
code span.va { color: #9cdcfe; } /* Variable */
code span.vs { color: #ce9178; } /* VerbatimString */
code span.wa { color: #d19a66; font-weight: bold; font-style: italic; } /* Warning */

/* Responsive design */
@media (max-width: 768px) {
  body {
    padding: 10px;
    font-size: 14px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  pre {
    padding: 0.75rem;
    font-size: 0.85em;
  }

  #TOC {
    padding: 1rem;
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
  }

  .nav-header {
    display: none;
  }

  a {
    color: #0066cc;
  }

  /* Table of contents */
  #TOC {
    background: white;
    border: 1px solid #ccc;
  }

  #TOC a {
    color: #0066cc;
  }

  /* Code blocks */
  pre {
    background: #f5f5f5;
    border: 1px solid #ccc;
  }

  code {
    background: #f5f5f5;
    color: black;
  }

  pre code {
    background: transparent;
    border: none;
    color: black;
  }

  /* Reset syntax highlighting colors for print */
  code span.al, code span.an, code span.at, code span.bn,
  code span.bu, code span.cf, code span.ch, code span.cn,
  code span.co, code span.cv, code span.do, code span.dt,
  code span.dv, code span.er, code span.ex, code span.fl,
  code span.fu, code span.im, code span.in, code span.kw,
  code span.op, code span.ot, code span.pp, code span.sc,
  code span.ss, code span.st, code span.va, code span.vs,
  code span.wa {
    color: black;
    font-weight: normal;
    font-style: normal;
  }

  /* Tables */
  th {
    background: #f5f5f5;
    color: black;
  }

  tr:nth-child(even) {
    background: white;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: black;
  }
}