/**
 * compiler.css
 * Dedicated styling for code blocks and syntax highlighting.
 * Only fetched on pages requiring code rendering.
 */

pre.astro-code,
.blog-content pre {
  position: relative;
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
  tab-size: 2;
  -webkit-font-smoothing: antialiased;
}

/* Light / dark theme styling */
:root:not(.dark) pre.astro-code,
:root:not(.dark) .blog-content pre {
  background-color: #161b22 !important;
  border-color: rgba(226, 232, 240, 0.15);
}

.dark pre.astro-code,
.dark .blog-content pre {
  background-color: #0b0f17 !important;
  border-color: hsl(var(--border));
}

pre.astro-code code,
.blog-content pre code {
  display: block;
  width: fit-content;
  min-width: 100%;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Code block lines: Shiki already separates lines with "\n" inside <pre>,
   so lines must stay inline or every line break renders twice. */
pre.astro-code .line,
.blog-content pre .line {
  display: inline;
}

/* Custom sleek scrollbar for code blocks */
pre.astro-code::-webkit-scrollbar,
.blog-content pre::-webkit-scrollbar {
  height: 6px;
}

pre.astro-code::-webkit-scrollbar-track,
.blog-content pre::-webkit-scrollbar-track {
  background: transparent;
}

pre.astro-code::-webkit-scrollbar-thumb,
.blog-content pre::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}

pre.astro-code::-webkit-scrollbar-thumb:hover,
.blog-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

pre.astro-code,
.blog-content pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* Syntax highlighting token enhancements */
.astro-code span {
  font-family: inherit;
}