code {
  background-color: var(--code-bg, #eee);
  padding: 2px 6px;
  font-size: 0.9em;
  color: #032f62;
  border-radius: 4px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  transition: background-color 0.3s ease, color 0.3s ease;
}

pre code {
  background-color: transparent;
  padding: 0;
  font-size: 1em;
  color: #24292e;
  line-height: 1.6;
  display: block;
}

pre {
  display: block;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #24292e;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  box-shadow: 0 1px 3px var(--shadow, rgba(0, 0, 0, 0.1));
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Enable absolute positioning for copy button and improve hover effect */
pre {
  position: relative;
}

pre:hover {
  box-shadow: 0 2px 6px var(--shadow, rgba(0, 0, 0, 0.15));
}

/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Source: highlight.js/styles/github.css
*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #24292e;
  background: #ffffff;
  -webkit-text-size-adjust: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #d73a49;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #6f42c1;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: #005cc5;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: #032f62;
}

.hljs-built_in,
.hljs-symbol {
  color: #e36209;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  color: #6a737d;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: #22863a;
}

.hljs-subst {
  color: #24292e;
}

.hljs-section {
  color: #005cc5;
  font-weight: bold;
}

.hljs-bullet {
  color: #735c0f;
}

.hljs-emphasis {
  color: #24292e;
  font-style: italic;
}

.hljs-strong {
  color: #24292e;
  font-weight: bold;
}

.hljs-addition {
  color: #22863a;
  background-color: #f0fff4;
}

.hljs-deletion {
  color: #b31d28;
  background-color: #ffeef0;
}

/* Dark mode support using highlight.js/styles/github-dark.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) code {
    background-color: #161b22;
    color: #a5d6ff;
  }

  :root:not([data-theme="light"]) pre,
  :root:not([data-theme="light"]) pre code,
  :root:not([data-theme="light"]) .hljs {
    background: #0d1117;
    color: #c9d1d9;
  }

  :root:not([data-theme="light"]) pre {
    border-color: #30363d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }

  :root:not([data-theme="light"]) pre:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  :root:not([data-theme="light"]) .hljs-doctag,
  :root:not([data-theme="light"]) .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-meta .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-template-tag,
  :root:not([data-theme="light"]) .hljs-template-variable,
  :root:not([data-theme="light"]) .hljs-type,
  :root:not([data-theme="light"]) .hljs-variable.language_ {
    color: #ff7b72;
  }

  :root:not([data-theme="light"]) .hljs-title,
  :root:not([data-theme="light"]) .hljs-title.class_,
  :root:not([data-theme="light"]) .hljs-title.class_.inherited__,
  :root:not([data-theme="light"]) .hljs-title.function_ {
    color: #d2a8ff;
  }

  :root:not([data-theme="light"]) .hljs-attr,
  :root:not([data-theme="light"]) .hljs-attribute,
  :root:not([data-theme="light"]) .hljs-literal,
  :root:not([data-theme="light"]) .hljs-meta,
  :root:not([data-theme="light"]) .hljs-number,
  :root:not([data-theme="light"]) .hljs-operator,
  :root:not([data-theme="light"]) .hljs-variable,
  :root:not([data-theme="light"]) .hljs-selector-attr,
  :root:not([data-theme="light"]) .hljs-selector-class,
  :root:not([data-theme="light"]) .hljs-selector-id {
    color: #79c0ff;
  }

  :root:not([data-theme="light"]) .hljs-regexp,
  :root:not([data-theme="light"]) .hljs-string,
  :root:not([data-theme="light"]) .hljs-meta .hljs-string {
    color: #a5d6ff;
  }

  :root:not([data-theme="light"]) .hljs-built_in,
  :root:not([data-theme="light"]) .hljs-symbol {
    color: #ffa657;
  }

  :root:not([data-theme="light"]) .hljs-comment,
  :root:not([data-theme="light"]) .hljs-code,
  :root:not([data-theme="light"]) .hljs-formula {
    color: #8b949e;
  }

  :root:not([data-theme="light"]) .hljs-name,
  :root:not([data-theme="light"]) .hljs-quote,
  :root:not([data-theme="light"]) .hljs-selector-tag,
  :root:not([data-theme="light"]) .hljs-selector-pseudo {
    color: #7ee787;
  }

  :root:not([data-theme="light"]) .hljs-subst {
    color: #c9d1d9;
  }

  :root:not([data-theme="light"]) .hljs-section {
    color: #1f6feb;
    font-weight: bold;
  }

  :root:not([data-theme="light"]) .hljs-bullet {
    color: #f2cc60;
  }

  :root:not([data-theme="light"]) .hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
  }

  :root:not([data-theme="light"]) .hljs-strong {
    color: #c9d1d9;
    font-weight: bold;
  }

  :root:not([data-theme="light"]) .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
  }

  :root:not([data-theme="light"]) .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
  }
}

[data-theme="dark"] code {
  background-color: #161b22;
  color: #a5d6ff;
}

[data-theme="dark"] pre,
[data-theme="dark"] pre code,
[data-theme="dark"] .hljs {
  background: #0d1117;
  color: #c9d1d9;
}

[data-theme="dark"] pre {
  border-color: #30363d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] pre:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .hljs-doctag,
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-meta .hljs-keyword,
[data-theme="dark"] .hljs-template-tag,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-variable.language_ {
  color: #ff7b72;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-title.class_,
[data-theme="dark"] .hljs-title.class_.inherited__,
[data-theme="dark"] .hljs-title.function_ {
  color: #d2a8ff;
}

[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-meta,
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-operator,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-selector-attr,
[data-theme="dark"] .hljs-selector-class,
[data-theme="dark"] .hljs-selector-id {
  color: #79c0ff;
}

[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-meta .hljs-string {
  color: #a5d6ff;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-symbol {
  color: #ffa657;
}

[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-code,
[data-theme="dark"] .hljs-formula {
  color: #8b949e;
}

[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-quote,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-selector-pseudo {
  color: #7ee787;
}

[data-theme="dark"] .hljs-subst {
  color: #c9d1d9;
}

[data-theme="dark"] .hljs-section {
  color: #1f6feb;
  font-weight: bold;
}

[data-theme="dark"] .hljs-bullet {
  color: #f2cc60;
}

[data-theme="dark"] .hljs-emphasis {
  color: #c9d1d9;
  font-style: italic;
}

[data-theme="dark"] .hljs-strong {
  color: #c9d1d9;
  font-weight: bold;
}

[data-theme="dark"] .hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}

[data-theme="dark"] .hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}

/* Accessibility: Ensure sufficient contrast for code */
code,
pre,
.hljs {
  min-height: 1.5em;
}

/* Improve code block readability on small screens */
@media (max-width: 768px) {
  pre {
    font-size: 12px;
    padding: 10px;
    margin: 12px 0;
  }

  code {
    font-size: 0.85em;
    padding: 2px 4px;
  }
}

/* Print styles for code blocks */
@media print {
  pre {
    border: 1px solid #ccc;
    page-break-inside: avoid;
    background: #f5f5f5;
    color: #000;
  }

  code {
    background: #f0f0f0;
    color: #000;
  }
}