/*
 * Hanso Highlight.js Theme
 * Based on Gruvbox color scheme
 * Light mode uses Gruvbox Light, Dark mode uses Gruvbox Dark
 * Background adapts to theme
 */

/* Code block container */
.hljs {
  background: rgba(var(--color-spot-1-rgb), 0.12);
  color: var(--color-text);
  padding: 1.5rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: 0;
}

/* =============================================
   Gruvbox Light (default for light/christmas)
   ============================================= */

/* Keywords: def, do, end, if, etc. - Red */
.hljs-keyword,
.hljs-selector-tag {
  color: #9d0006;
  font-weight: 600;
}

/* Built-in names - Orange */
.hljs-built_in,
.hljs-name {
  color: #af3a03;
  font-weight: 600;
}

/* Strings - Green */
.hljs-string,
.hljs-selector-id,
.hljs-selector-class {
  color: #79740e;
}

/* Numbers - Purple */
.hljs-number,
.hljs-literal {
  color: #8f3f71;
}

/* Types, params - Yellow */
.hljs-type,
.hljs-params {
  color: #b57614;
}

/* Functions - Green (bright) */
.hljs-title,
.hljs-title.function_,
.hljs-section {
  color: #427b58;
  font-weight: 600;
}

/* Comments - Gray */
.hljs-comment,
.hljs-quote {
  color: #928374;
  font-style: italic;
}

/* Symbols, atoms - Purple */
.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: #8f3f71;
}

/* Attributes, meta - Aqua */
.hljs-attribute,
.hljs-doctag,
.hljs-meta {
  color: #427b58;
}

/* Variables - Blue */
.hljs-variable,
.hljs-template-variable {
  color: #076678;
}

/* Regex - Orange */
.hljs-regexp {
  color: #af3a03;
}

/* Additions (diff) */
.hljs-addition {
  background-color: rgba(121, 116, 14, 0.2);
  color: #79740e;
}

/* Deletions (diff) */
.hljs-deletion {
  background-color: rgba(157, 0, 6, 0.2);
  color: #9d0006;
}

/* =============================================
   Gruvbox Dark (for dark theme)
   ============================================= */

[data-theme="hanso-dark"] .hljs-keyword,
[data-theme="hanso-dark"] .hljs-selector-tag {
  color: #fb4934;
  font-weight: 600;
}

[data-theme="hanso-dark"] .hljs-built_in,
[data-theme="hanso-dark"] .hljs-name {
  color: #fe8019;
  font-weight: 600;
}

[data-theme="hanso-dark"] .hljs-string,
[data-theme="hanso-dark"] .hljs-selector-id,
[data-theme="hanso-dark"] .hljs-selector-class {
  color: #b8bb26;
}

[data-theme="hanso-dark"] .hljs-number,
[data-theme="hanso-dark"] .hljs-literal {
  color: #d3869b;
}

[data-theme="hanso-dark"] .hljs-type,
[data-theme="hanso-dark"] .hljs-params {
  color: #fabd2f;
}

[data-theme="hanso-dark"] .hljs-title,
[data-theme="hanso-dark"] .hljs-title.function_,
[data-theme="hanso-dark"] .hljs-section {
  color: #8ec07c;
  font-weight: 600;
}

[data-theme="hanso-dark"] .hljs-comment,
[data-theme="hanso-dark"] .hljs-quote {
  color: #928374;
  font-style: italic;
}

[data-theme="hanso-dark"] .hljs-symbol,
[data-theme="hanso-dark"] .hljs-bullet,
[data-theme="hanso-dark"] .hljs-link {
  color: #d3869b;
}

[data-theme="hanso-dark"] .hljs-attribute,
[data-theme="hanso-dark"] .hljs-doctag,
[data-theme="hanso-dark"] .hljs-meta {
  color: #8ec07c;
}

[data-theme="hanso-dark"] .hljs-variable,
[data-theme="hanso-dark"] .hljs-template-variable {
  color: #83a598;
}

[data-theme="hanso-dark"] .hljs-regexp {
  color: #fe8019;
}

[data-theme="hanso-dark"] .hljs-addition {
  background-color: rgba(184, 187, 38, 0.2);
  color: #b8bb26;
}

[data-theme="hanso-dark"] .hljs-deletion {
  background-color: rgba(251, 73, 52, 0.2);
  color: #fb4934;
}

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

/* Strong */
.hljs-strong {
  font-weight: bold;
}

/* ===========================================
   Code block wrapper with line numbers
   =========================================== */

.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
  border-left: 0.25rem solid var(--color-spot-1);
}

/* Language label */
.code-block-wrapper .code-lang {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-spot-1);
  color: var(--color-text);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Copy button */
.code-block-wrapper .copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-spot-1);
  color: var(--color-text);
  border: none;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.code-block-wrapper:hover .copy-btn {
  opacity: 1;
}

.code-block-wrapper .copy-btn:hover {
  background: var(--color-spot-2);
}

.code-block-wrapper .copy-btn.copied {
  background: var(--color-spot-2);
}

/* When language label is present, move copy button */
.code-block-wrapper:has(.code-lang) .copy-btn {
  top: 1.75rem;
}

/* Line numbers container */
.code-block-wrapper pre {
  margin: 0;
  display: flex;
}

.code-block-wrapper .line-numbers {
  text-align: right;
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 1px solid rgba(var(--color-spot-1-rgb), 0.3);
  user-select: none;
  color: var(--color-text);
  opacity: 0.6;
  min-width: 2.5rem;
}

.code-block-wrapper .line-numbers span {
  display: block;
}

.code-block-wrapper code {
  flex: 1;
  padding: 0;
  background: transparent;
}