/* Custom PrismJS styles for light/dark mode support */

/* Import light theme for light mode */
@media (prefers-color-scheme: light) {
    @import url('prism-light.css');
}

/* Import dark theme for dark mode */
@media (prefers-color-scheme: dark) {
    @import url('prism-dark.css');
}

/* Override conflicting styles from screen.css */
/* Reset the forced dark backgrounds and colors */
.prose pre[class*="language-"] {
    background: inherit !important;
    color: inherit !important;
    padding: 1.25rem !important;
    margin: 1.5rem 0 !important;
}

/* Light mode specific overrides */
@media (prefers-color-scheme: light) {
    .prose pre[class*="language-"] {
        background: #f5f2f0 !important;
        color: black !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .prose pre[class*="language-"] code {
        background: transparent !important;
        color: inherit !important;
        text-shadow: 0 1px white !important;
    }
    
    /* Override inline code styles for light mode */
    .prose code:not([class*="language-"]) {
        background-color: #f3f4f6 !important;
        color: #4c1d95 !important;
    }
}

/* Dark mode specific overrides */
@media (prefers-color-scheme: dark) {
    .prose pre[class*="language-"] {
        background: #2d2d2d !important;
        color: #ccc !important;
        border: 1px solid #404040 !important;
    }
    
    .prose pre[class*="language-"] code {
        background: transparent !important;
        color: inherit !important;
        text-shadow: none !important;
    }
    
    /* Override inline code styles for dark mode */
    .prose code:not([class*="language-"]) {
        background-color: #374151 !important;
        color: #c7d2fe !important;
    }
}

/* Common styles for both themes */
.prose pre[class*="language-"] {
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

.prose pre[class*="language-"] code {
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
}

/* Override Ghost's kg-code-card styles */
.prose .kg-code-card pre[class*="language-"] {
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure proper styling for line numbers plugin if used */
.line-numbers .line-numbers-rows {
    border-right: 1px solid #404040;
}

@media (prefers-color-scheme: light) {
    .line-numbers .line-numbers-rows {
        border-right-color: #e5e7eb;
    }
}

/* Support for manual theme toggle if implemented */
body.light-mode pre[class*="language-"] {
    background: #f5f2f0 !important;
    color: black !important;
    border: 1px solid #e5e7eb !important;
}

body.dark-mode pre[class*="language-"] {
    background: #2d2d2d !important;
    color: #ccc !important;
    border: 1px solid #404040 !important;
}

body.light-mode .prose code:not([class*="language-"]) {
    background-color: #f3f4f6 !important;
    color: #4c1d95 !important;
}

body.dark-mode .prose code:not([class*="language-"]) {
    background-color: #374151 !important;
    color: #c7d2fe !important;
}

/* Remove any hljs styles that might conflict */
.prose pre .hljs-string,
.prose pre .hljs-attr,
.prose pre .hljs-number,
.prose pre .hljs-literal,
.prose pre .hljs-comment,
.prose pre.language-yaml .hljs-attr,
.prose pre.language-yaml .hljs-string {
    color: inherit !important;
}