/* 
 * Code Block Syntax Highlighting Styles
 * Works with light and dark themes
 */

/* Base code block styling */
.prose pre,
.prose .codehilite pre,
.prose .highlight pre {
    position: relative;
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.prose pre code,
.prose .codehilite pre code,
.prose .highlight pre code {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    display: block;
    padding: 0;
    background: none;
    border: none;
}

/* Reset margin for codehilite/highlight wrapper divs */
.prose .codehilite,
.prose .highlight {
    margin: 1.5rem 0;
}

.prose .codehilite pre,
.prose .highlight pre {
    margin: 0;
}

/* Inline code styling */
.prose :not(pre) > code {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Light theme styles */
.light-theme .prose pre,
.light-theme .prose .codehilite pre,
.light-theme .prose .highlight pre {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
}

.light-theme .prose :not(pre) > code {
    background-color: rgba(175, 184, 193, 0.2);
    color: #0a3069;
}

.light-theme .hljs {
    background: #f6f8fa;
    color: #24292f;
}

/* Dark theme styles */
.dark-theme .prose pre,
.dark-theme .prose .codehilite pre,
.dark-theme .prose .highlight pre {
    background-color: #161b22;
    border: 1px solid #30363d;
}

.dark-theme .prose :not(pre) > code {
    background-color: rgba(110, 118, 129, 0.4);
    color: #79c0ff;
}

.dark-theme .hljs {
    background: #161b22;
    color: #c9d1d9;
}

/* Dark theme syntax colors */
.dark-theme .hljs-comment,
.dark-theme .hljs-quote {
    color: #8b949e;
    font-style: italic;
}

.dark-theme .hljs-keyword,
.dark-theme .hljs-selector-tag,
.dark-theme .hljs-built_in,
.dark-theme .hljs-name,
.dark-theme .hljs-tag {
    color: #ff7b72;
}

.dark-theme .hljs-string,
.dark-theme .hljs-title,
.dark-theme .hljs-section,
.dark-theme .hljs-attribute,
.dark-theme .hljs-literal,
.dark-theme .hljs-template-tag,
.dark-theme .hljs-template-variable,
.dark-theme .hljs-type {
    color: #a5d6ff;
}

.dark-theme .hljs-variable,
.dark-theme .hljs-attr {
    color: #ffa657;
}

.dark-theme .hljs-number {
    color: #79c0ff;
}

.dark-theme .hljs-symbol,
.dark-theme .hljs-bullet,
.dark-theme .hljs-link {
    color: #d2a8ff;
}

.dark-theme .hljs-meta {
    color: #8b949e;
}

.dark-theme .hljs-deletion {
    color: #ffa198;
    background-color: #490202;
}

.dark-theme .hljs-addition {
    color: #7ee787;
    background-color: #04260f;
}

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

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

/* Light theme syntax colors are inherited from highlight.css */

/* Scrollbar for code blocks */
.prose pre::-webkit-scrollbar {
    height: 8px;
}

.prose pre::-webkit-scrollbar-track {
    background: transparent;
}

.light-theme .prose pre::-webkit-scrollbar-thumb {
    background: #d0d7de;
    border-radius: 4px;
}

.dark-theme .prose pre::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

.prose pre::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--copy-secondary), 0.5);
}