/* 
 * AI Website Development - Code Theme Stylesheet
 * Custom styling for code syntax highlighting
 */

/* Code block base styling */
pre {
  background-color: #1e293b;
  color: #e2e8f0;
  overflow-x: auto;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-size: 0.9rem;
}

code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}

/* Inline code styling */
:not(pre) > code {
  background-color: #f1f5f9;
  color: #6366f1;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

body.dark-mode :not(pre) > code {
  background-color: #334155;
  color: #a5b4fc;
}

/* Line numbers */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  color: #64748b;
  border-right: 1px solid #334155;
  vertical-align: top;
  padding-right: 0.75rem !important;
  padding-left: 0.5rem !important;
}

.hljs-ln-code {
  padding-left: 0.75rem !important;
}

/* Code annotation styles */
.code-annotation {
  position: relative;
}

.code-annotation::after {
  content: attr(data-annotation);
  position: absolute;
  right: -20px;
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 2px solid #f59e0b;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #f59e0b;
  border-radius: 0 4px 4px 0;
  max-width: 200px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.code-annotation:hover::after {
  opacity: 1;
}

/* Before/After Code Comparison */
.code-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.code-comparison .before,
.code-comparison .after {
  position: relative;
}

.code-comparison .label {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #1e293b;
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 1;
}

.code-comparison .after .label {
  background-color: #10b981;
}

@media (max-width: 768px) {
  .code-comparison {
    grid-template-columns: 1fr;
  }
}

/* Custom hljs overrides */
.hljs-keyword {
  color: #93c5fd; /* light blue */
}

.hljs-built_in {
  color: #c4b5fd; /* lavender */
}

.hljs-type {
  color: #fca5a5; /* light red */
}

.hljs-literal {
  color: #fdba74; /* light orange */
}

.hljs-number {
  color: #fdba74; /* light orange */
}

.hljs-regexp {
  color: #86efac; /* light green */
}

.hljs-string {
  color: #86efac; /* light green */
}

.hljs-subst {
  color: #f1f5f9; /* light gray */
}

.hljs-symbol {
  color: #fca5a5; /* light red */
}

.hljs-class {
  color: #fcd34d; /* light yellow */
}

.hljs-function {
  color: #fcd34d; /* light yellow */
}

.hljs-title {
  color: #fcd34d; /* light yellow */
}

.hljs-attr {
  color: #93c5fd; /* light blue */
}

.hljs-selector-attr {
  color: #93c5fd; /* light blue */
}

.hljs-selector-class {
  color: #86efac; /* light green */
}

.hljs-selector-id {
  color: #86efac; /* light green */
}

.hljs-selector-pseudo {
  color: #93c5fd; /* light blue */
}

.hljs-template-tag {
  color: #fca5a5; /* light red */
}

.hljs-template-variable {
  color: #fca5a5; /* light red */
}

.hljs-variable {
  color: #f1f5f9; /* light gray */
}

.hljs-comment {
  color: #64748b; /* slate */
}

.hljs-doctag {
  color: #f1f5f9; /* light gray */
}

.hljs-meta {
  color: #64748b; /* slate */
}

.hljs-section {
  color: #fcd34d; /* light yellow */
}

.hljs-tag {
  color: #93c5fd; /* light blue */
}

.hljs-name {
  color: #93c5fd; /* light blue */
}

.hljs-bullet {
  color: #86efac; /* light green */
}

.hljs-code {
  color: #f1f5f9; /* light gray */
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-formula {
  color: #64748b; /* slate */
}

.hljs-link {
  color: #93c5fd; /* light blue */
  text-decoration: underline;
}

.hljs-quote {
  color: #64748b; /* slate */
  font-style: italic;
}

.hljs-selector-tag {
  color: #93c5fd; /* light blue */
}