/* ═══════════════════════════════════════════════════════════════════════════
   SYNTAX HIGHLIGHTING
   Nord-inspired color scheme for code blocks
   ═══════════════════════════════════════════════════════════════════════════ */

/* Simple code block with copy icon */
.code-block-simple {
  position: relative;
  margin: var(--space-lg) 0;
}

.code-block-simple .highlight {
  margin: 0;
}

.code-copy-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  z-index: 10;
}

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

.code-copy-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-surface);
}

.code-copy-btn.copied {
  border-color: var(--success);
  color: var(--success);
}

.code-copy-btn .copy-icon {
  display: block;
}

.code-copy-btn .check-icon {
  display: none;
}

.code-copy-btn.copied .copy-icon {
  display: none;
}

.code-copy-btn.copied .check-icon {
  display: block;
}

/* Hugo's Chroma highlighter */
.highlight {
  position: relative;
  margin: var(--space-lg) 0;
}

.highlight pre {
  margin: 0;
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
}

.highlight code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--text-primary);
}

/* Line numbers */
.highlight .ln {
  color: var(--text-tertiary);
  margin-right: var(--space-md);
  user-select: none;
}

/* Chroma token classes */
/* Keywords */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #c792ea;
}

/* Names */
.highlight .n { color: var(--text-primary); }
.highlight .na { color: #82aaff; }
.highlight .nb { color: #82aaff; }
.highlight .nc { color: #ffcb6b; }
.highlight .nd { color: #82aaff; }
.highlight .ne { color: #ff5370; }
.highlight .nf { color: #82aaff; }
.highlight .ni { color: var(--accent-primary); }
.highlight .nn { color: #ffcb6b; }
.highlight .nt { color: #f07178; }
.highlight .nv { color: var(--text-primary); }

/* Strings */
.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .s1,
.highlight .ss {
  color: #c3e88d;
}

/* Numbers */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #f78c6c;
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: #89ddff;
}

/* Punctuation */
.highlight .p { color: var(--text-secondary); }

/* Comments */
.highlight .c,
.highlight .c1,
.highlight .ch,
.highlight .cm,
.highlight .cp,
.highlight .cpf,
.highlight .cs {
  color: #546e7a;
  font-style: italic;
}

/* Generic */
.highlight .gd { color: #ff5370; background: rgba(255, 83, 112, 0.1); }
.highlight .ge { font-style: italic; }
.highlight .gi { color: #c3e88d; background: rgba(195, 232, 141, 0.1); }
.highlight .go { color: var(--text-tertiary); }
.highlight .gp { color: var(--text-tertiary); }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: var(--accent-primary); }

/* Errors */
.highlight .err {
  color: #ff5370;
  background: rgba(255, 83, 112, 0.1);
}

/* Diff highlighting */
.highlight .gi { color: #c3e88d; }
.highlight .gd { color: #ff5370; }

/* Light mode adjustments */
[data-theme="light"] .highlight pre {
  background: #f8f9fa;
}

[data-theme="light"] .highlight .k,
[data-theme="light"] .highlight .kc,
[data-theme="light"] .highlight .kd,
[data-theme="light"] .highlight .kn,
[data-theme="light"] .highlight .kp,
[data-theme="light"] .highlight .kr,
[data-theme="light"] .highlight .kt {
  color: #7c3aed;
}

[data-theme="light"] .highlight .s,
[data-theme="light"] .highlight .sa,
[data-theme="light"] .highlight .sb,
[data-theme="light"] .highlight .sc,
[data-theme="light"] .highlight .sd,
[data-theme="light"] .highlight .s2,
[data-theme="light"] .highlight .se,
[data-theme="light"] .highlight .sh,
[data-theme="light"] .highlight .si,
[data-theme="light"] .highlight .sx,
[data-theme="light"] .highlight .sr,
[data-theme="light"] .highlight .s1,
[data-theme="light"] .highlight .ss {
  color: #059669;
}

[data-theme="light"] .highlight .nf,
[data-theme="light"] .highlight .nb {
  color: #2563eb;
}

[data-theme="light"] .highlight .nc,
[data-theme="light"] .highlight .nn {
  color: #d97706;
}

[data-theme="light"] .highlight .c,
[data-theme="light"] .highlight .c1,
[data-theme="light"] .highlight .ch,
[data-theme="light"] .highlight .cm,
[data-theme="light"] .highlight .cp,
[data-theme="light"] .highlight .cpf,
[data-theme="light"] .highlight .cs {
  color: #6b7280;
}

/* Copy button for code blocks */
.highlight .copy-button {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
}

.highlight:hover .copy-button {
  opacity: 1;
}

.highlight .copy-button:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}