/* Theme-aware syntax highlighting for code blocks */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: var(--hljs-bg);
  color: var(--hljs-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'IBM Plex Mono', monospace;
}

/* Also target pre > code.hljs in case of different nesting */
pre > code.hljs,
#chapter-content pre > code.hljs {
  display: block;
  padding: 1em;
  background: var(--hljs-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* Ensure pre doesn't add extra styling */
pre:has(> code.hljs) {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Light theme colors - Gruvbox Light Hard */
:root {
  --hljs-bg: #f9f5d7;
  --hljs-color: #504945;
  --hljs-comment: #bdae93;
  --hljs-keyword: #8f3f71;
  --hljs-string: #79740e;
  --hljs-number: #af3a03;
  --hljs-function: #076678;
  --hljs-variable: #9d0006;
  --hljs-type: #8f3f71;
  --hljs-attribute: #076678;
  --hljs-symbol: #af3a03;
  --hljs-operator: #504945;
  --hljs-meta: #d65d0e;
  --hljs-builtin: #427b58;
  --hljs-class: #b57614;
  --hljs-tag: #665c54;
  --hljs-addition-bg: #f9f5d7;
  --hljs-addition-color: #79740e;
  --hljs-deletion-bg: #f9f5d7;
  --hljs-deletion-color: #9d0006;
  --hljs-selection-bg: #d5c4a1;
}

/* Dark theme colors - GitHub Dark */
[data-theme='dark'] {
  --hljs-bg: #0d1117;
  --hljs-color: #c9d1d9;
  --hljs-comment: #8b949e;
  --hljs-keyword: #ff7b72;
  --hljs-string: #a5d6ff;
  --hljs-number: #79c0ff;
  --hljs-function: #d2a8ff;
  --hljs-variable: #ffa657;
  --hljs-type: #79c0ff;
  --hljs-attribute: #7ee787;
  --hljs-symbol: #79c0ff;
  --hljs-operator: #79c0ff;
  --hljs-meta: #ff7b72;
  --hljs-builtin: #d2a8ff;
  --hljs-class: #ff7b72;
  --hljs-tag: #7ee787;
  --hljs-addition-bg: #033a16;
  --hljs-addition-color: #aff5b4;
  --hljs-deletion-bg: #67060c;
  --hljs-deletion-color: #ffdcd7;
  --hljs-selection-bg: #30363d;
}

/* Comments and documentation */
.hljs-comment,
.hljs-quote,
.hljs-doctag {
  color: var(--hljs-comment);
  font-style: italic;
}

/* Keywords and language constructs */
.hljs-keyword,
.hljs-selector-tag,
.hljs-type,
.hljs-template-tag,
.hljs-template-variable,
.hljs-variable.language_ {
  color: var(--hljs-keyword);
  font-weight: 500;
}

/* Strings and text */
.hljs-string,
.hljs-regexp,
.hljs-template-tag,
.hljs-template-variable,
.hljs-meta .hljs-string {
  color: var(--hljs-string);
}

/* Numbers and constants */
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
  color: var(--hljs-number);
}

/* Functions and methods */
.hljs-title.function_,
.hljs-title.function,
.hljs-built_in,
.hljs-builtin-name {
  color: var(--hljs-function);
  font-weight: 500;
}

/* Variables and parameters */
.hljs-variable,
.hljs-params,
.hljs-attr {
  color: var(--hljs-variable);
}

/* Classes and types */
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-class .hljs-title {
  color: var(--hljs-class);
  font-weight: 600;
}

/* Attributes and properties */
.hljs-attribute,
.hljs-property,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: var(--hljs-attribute);
}

/* Meta information */
.hljs-meta,
.hljs-meta-keyword,
.hljs-meta-string {
  color: var(--hljs-meta);
}

/* Links and URLs */
.hljs-link {
  color: var(--hljs-symbol);
  text-decoration: underline;
}

/* Tags */
.hljs-name,
.hljs-selector-pseudo,
.hljs-char.escape_,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  color: var(--hljs-tag);
}

/* Subst */
.hljs-subst {
  color: var(--hljs-color);
}

/* Section headings */
.hljs-section {
  color: var(--hljs-function);
  font-weight: bold;
}

/* Language-specific enhancements */

/* Python decorators */
.language-python .hljs-meta,
.python .hljs-meta {
  color: var(--hljs-function);
  font-weight: 600;
}

/* JavaScript/TypeScript async/await */
.language-javascript .hljs-keyword,
.language-typescript .hljs-keyword,
.javascript .hljs-keyword,
.typescript .hljs-keyword {
  color: var(--hljs-keyword);
}

/* Bash/Zsh commands */
.language-bash .hljs-built_in,
.language-zsh .hljs-built_in,
.bash .hljs-built_in,
.zsh .hljs-built_in {
  color: var(--hljs-builtin);
  font-weight: 500;
}

/* Emphasis and strong */
.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* Deletion and insertion for diffs */
.hljs-deletion {
  color: var(--hljs-deletion-color);
  background-color: var(--hljs-deletion-bg);
}

.hljs-addition {
  color: var(--hljs-addition-color);
  background-color: var(--hljs-addition-bg);
}

/* Line numbers (if you add them later) */
.hljs-ln-numbers {
  color: var(--text-secondary);
  opacity: 0.5;
  user-select: none;
}

/* Selection */
.hljs::selection,
.hljs ::selection {
  background-color: var(--hljs-selection-bg);
  color: var(--hljs-color);
}

/* Scrollbar styling for code blocks */
.hljs::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.hljs::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.hljs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.hljs::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}