/* Unified, high-contrast code block theme for all content pages */
/* Uses Highlight.js token classes but looks good even without them */

:root {
  --code-bg: #0c1222;
  --code-fg: #e6f1ff;
  --code-border: rgba(100, 254, 218, 0.25);
  --code-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --code-radius: 10px;

  --code-accent: #64feda; /* cyan */
  --code-string: #ffd166; /* yellow */
  --code-number: #ff6b6b; /* red */
  --code-keyword: #64feda; /* cyan */
  --code-comment: #7f8c8d; /* muted */
  --code-func: #64feda;
  --code-operator: #64feda;
  --code-variable: #ffffff;
}

/* Containers */
.code-box,
.code-block {
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: var(--code-radius) !important;
  position: relative !important;
  overflow: auto !important;
  margin: 12px 0 !important;
  box-shadow: var(--code-shadow) !important;
}

/* Ensure all code content is left-aligned */
.code-box *,
.code-block * {
  text-align: left !important;
}

.code-box pre,
.code-block pre {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: transparent !important;
  color: inherit !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.code-box code,
.code-block code {
  background: transparent !important;
  color: inherit !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 14px !important;
  text-align: left !important;
}

/* Ensure all pre and code elements are left-aligned */
pre, code {
  text-align: left !important;
}

/* Highlight.js – force transparent background and inherit color */
.hljs {
  background: transparent !important;
  color: var(--code-fg) !important;
}

/* Tokens */
.hljs-keyword,
.hljs-built_in,
.hljs-builtin-name,
.hljs-title,
.hljs-function,
.hljs-class .hljs-title {
  color: var(--code-keyword) !important;
  font-weight: 600 !important;
}

.hljs-string,
.hljs-char.escape_ {
  color: var(--code-string) !important;
}

.hljs-number,
.hljs-literal,
.hljs-attribute {
  color: var(--code-number) !important;
}

.hljs-comment,
.hljs-quote {
  color: var(--code-comment) !important;
  font-style: italic !important;
}

.hljs-variable,
.hljs-property,
.hljs-params,
.hljs-name,
.hljs-identifier {
  color: var(--code-variable) !important;
}

.hljs-operator,
.hljs-punctuation,
.hljs-symbol {
  color: var(--code-operator) !important;
}

/* Copy button */
.code-box .copy-button,
.code-block .copy-button {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: var(--code-accent) !important;
  color: #0b0f1a !important;
  border: 1px solid var(--code-accent) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(100, 254, 218, 0.25) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.code-box .copy-button:hover,
.code-block .copy-button:hover {
  transform: translateY(-1px) !important;
  background: #ffffff !important;
}

.code-box .copy-button:active,
.code-block .copy-button:active {
  transform: translateY(0) !important;
}

/* Responsive */
@media (max-width: 480px) {
  .code-box pre,
  .code-block pre,
  .code-box code,
  .code-block code {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
}