/* ============================================
   Cyberpunk Syntax Highlighting
   Based on Hexo highlight.js output & Tomorrow Night theme
   ============================================ */

/* Code block colors - cyberpunk palette */
:root {
  --hl-bg: #0d1117;
  --hl-fg: #e6edf3;
  --hl-comment: #6b7280;
  --hl-red: #ff3860;
  --hl-orange: #ffb454;
  --hl-yellow: #ffd700;
  --hl-green: #00ff9f;
  --hl-aqua: #00d4ff;
  --hl-blue: #79c0ff;
  --hl-purple: #c792ea;
  --hl-selection: rgba(0, 255, 159, 0.2);
  --hl-gutter-bg: #0f1419;
  --hl-line-number: #6b7280;
}

/* Base code styling */
.article-entry pre,
.article-entry code {
  font-family: var(--font-code);
}

.post-content pre,
.post-content code {
  font-family: var(--font-code);
}

.page-content pre,
.page-content code {
  font-family: var(--font-code);
}

/* Inline code */
.article-entry code,
.post-content code,
.page-content code {
  background-color: var(--code-bg);
  color: var(--accent-primary);
  padding: 0.2em 0.5em;
  border-radius: 4px;
  border: 1px solid var(--code-border);
  font-weight: 500;
}

/* Code blocks */
.article-entry pre,
.post-content pre,
.page-content pre {
  background-color: var(--hl-bg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: auto;
  color: var(--hl-fg);
  line-height: 1.6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}

.article-entry pre code,
.post-content pre code,
.page-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--hl-fg);
  font-weight: normal;
}

/* Highlight wrapper */
.article-entry .highlight,
.post-content .highlight,
.page-content .highlight {
  background-color: var(--hl-bg);
  margin: var(--spacing-md) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}

.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  border: 1px solid var(--accent-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 1;
}

.highlight:hover::before {
  opacity: 0.3;
}

.highlight pre {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  line-height: 1.6;
}

.highlight table {
  margin: 0;
  width: 100%;
  border: none;
  display: table;
}

.highlight table tr {
  border: none;
}

.highlight table td {
  border: none;
  padding: 0;
  background: transparent;
  vertical-align: top;
}

/* Figure caption (language label) */
.highlight figcaption {
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1em;
  margin-bottom: 0;
  clear: both;
}

.highlight figcaption::before {
  content: '◆ ';
  color: var(--accent-primary);
  margin-right: 0.25rem;
}

.highlight figcaption a {
  float: right;
  color: var(--text-secondary);
  font-size: 0.9em;
}

.highlight figcaption a:hover {
  color: var(--accent-primary);
}

/* Gutter (line numbers) */
.highlight .gutter {
  width: 3em;
  background-color: var(--hl-gutter-bg);
  border-right: 1px solid var(--border-color);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.highlight .gutter pre {
  color: var(--hl-line-number);
  font-size: 0.875rem;
  text-align: right;
  padding: var(--spacing-md) 0.8rem;
  margin: 0;
}

/* Code content */
.highlight .code {
  width: 100%;
}

.highlight .code pre {
  padding: var(--spacing-md);
  margin: 0;
}

/* Line */
.highlight .line {
  line-height: 1.6;
}

.highlight .line.marked {
  background-color: var(--hl-selection);
}

/* ============================================
   Syntax Token Colors - Cyberpunk Theme
   ============================================ */

/* Comments & Docstrings */
pre .comment,
pre .title {
  color: var(--hl-comment);
  font-style: italic;
}

/* Variables, Attributes, Tags, Regexp */
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: var(--hl-red);
}

/* Numbers, Preprocessor, Built-ins, Literals, Params, Constants */
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command {
  color: var(--hl-orange);
}

/* Classes */
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute,
pre .doctag {
  color: var(--hl-green);
}

/* Strings, Values, Inheritance, Headers, Symbols */
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata,
pre .special,
pre .formula {
  color: var(--hl-green);
}

/* Hex colors */
pre .css .hexcolor {
  color: var(--hl-aqua);
}

/* Functions, Decorators, Titles */
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title,
pre .method,
pre .list .title,
pre .subst {
  color: var(--hl-blue);
}

/* Keywords */
pre .keyword,
pre .javascript .function,
pre .tag .title,
pre .java .javadoc,
pre .selector-tag,
pre .selector-id,
pre .selector-class,
pre .selector-attr,
pre .selector-pseudo,
pre .addition {
  color: var(--hl-purple);
}

/* Language-specific tweaks */

/* Python */
pre .python .decorator {
  color: var(--hl-orange);
}

pre .python .keyword {
  color: var(--hl-purple);
  font-weight: 600;
}

/* JavaScript/TypeScript */
pre .javascript .keyword,
pre .typescript .keyword {
  color: var(--hl-purple);
  font-weight: 600;
}

pre .javascript .built_in,
pre .typescript .built_in {
  color: var(--hl-blue);
}

/* C/C++ */
pre .c .meta,
pre .cpp .meta {
  color: var(--hl-comment);
}

pre .c .keyword,
pre .cpp .keyword {
  color: var(--hl-purple);
  font-weight: 700;
}

pre .c .built_in,
pre .cpp .built_in {
  color: var(--hl-blue);
}

/* Assembly */
pre .asm .keyword,
pre .nasm .keyword,
pre .x86asm .keyword {
  color: var(--hl-purple);
  font-weight: 700;
}

pre .asm .number,
pre .nasm .number,
pre .x86asm .number {
  color: var(--hl-orange);
}

pre .asm .symbol,
pre .nasm .symbol,
pre .x86asm .symbol,
pre .asm .register,
pre .nasm .register,
pre .x86asm .register {
  color: var(--hl-green);
}

/* Bash/Shell */
pre .bash .built_in,
pre .shell .built_in {
  color: var(--hl-blue);
}

pre .bash .variable,
pre .shell .variable {
  color: var(--hl-green);
}

/* JSON */
pre .json .attr {
  color: var(--hl-blue);
}

pre .json .string {
  color: var(--hl-green);
}

/* YAML */
pre .yaml .attr,
pre .yml .attr {
  color: var(--hl-blue);
}

/* CSS/SCSS */
pre .css .selector-tag {
  color: var(--hl-green);
}

pre .css .selector-class,
pre .css .selector-id {
  color: var(--hl-red);
}

pre .css .attribute {
  color: var(--hl-blue);
}

/* Markdown */
pre .markdown .section {
  color: var(--hl-blue);
  font-weight: 700;
}

pre .markdown .link {
  color: var(--hl-blue);
  text-decoration: underline;
}

/* SQL */
pre .sql .keyword {
  color: var(--hl-purple);
  text-transform: uppercase;
}

/* Diff */
pre .diff .addition {
  background-color: rgba(0, 255, 159, 0.1);
  color: var(--hl-green);
}

pre .diff .deletion {
  background-color: rgba(255, 56, 96, 0.1);
  color: var(--hl-red);
}

/* Meta, emphasis */
pre .meta {
  color: var(--hl-comment);
}

pre .meta .keyword {
  color: var(--hl-purple);
}

pre .emphasis {
  font-style: italic;
}

pre .strong {
  font-weight: bold;
}

pre .deletion {
  color: var(--hl-red);
}

/* Section, name */
pre .section,
pre .name,
pre .strong {
  font-weight: 700;
}

/* Link */
pre .link {
  text-decoration: underline;
}

/* Template variables, placeholders */
pre .template-variable,
pre .template-tag {
  color: var(--hl-red);
}

/* Type */
pre .type {
  color: var(--hl-blue);
}

/* Bullet, code, quote */
pre .bullet,
pre .code {
  color: var(--hl-orange);
}

pre .quote {
  color: var(--hl-comment);
  font-style: italic;
}

/* ============================================
   Mobile Optimizations
   ============================================ */
@media (max-width: 768px) {
  .highlight .gutter {
    width: 2.5em;
  }

  .highlight .gutter pre {
    padding: var(--spacing-sm) 0.5rem var(--spacing-sm) 0;
    font-size: 0.75rem;
  }

  .highlight .code pre {
    padding: var(--spacing-sm);
  }

  .highlight pre {
    font-size: 0.8rem;
  }
}