/* =========================================
   SYNTAX HIGHLIGHTING (The Engine)
   ========================================= */

/* 1. The Container (The "Box") */
.codehilite { 
    background: #f6f8fa; 
    border-radius: 6px; 
    padding: 1em; 
    overflow-x: auto; 
    margin: 1.5em 0;
}

/* Ensure raw <pre> tags (without python/R) also look good */
pre {
    background: var(--code-bg); /* Inherits from style.css */
    padding: 20px;
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
    overflow-x: auto;
    font-size: 0.85em;
    font-family: "Menlo", monospace;
    color: var(--text-color);
}

.codehilite pre { 
    margin: 0; 
    padding: 0; 
    background: transparent; 
    border: none; 
    font-family: "Menlo", monospace; 
    font-size: 0.85em; 
}

/* 2. Light Mode Syntax (GitHub Style) */
.codehilite .c { color: #6a737d; font-style: italic }  /* Comment */
.codehilite .k { color: #d73a49; font-weight: bold }   /* Keyword */
.codehilite .o { color: #d73a49; font-weight: bold }   /* Operator */
.codehilite .nb { color: #005cc5 }                     /* Builtin */
.codehilite .s { color: #032f62 }                      /* String */
.codehilite .nf { color: #6f42c1; font-weight: bold }  /* Function */
.codehilite .nn { color: #6f42c1 }                     /* Class */

/* 3. Dark Mode Syntax (Dracula/Neon Style) */
[data-theme="dark"] .codehilite { 
    background: #1c1c1c; 
    border: 1px solid #333;
}
[data-theme="dark"] .codehilite .c { color: #6c757d; }
[data-theme="dark"] .codehilite .k { color: #ff79c6; }
[data-theme="dark"] .codehilite .o { color: #ff79c6; }
[data-theme="dark"] .codehilite .nb { color: #8be9fd; font-style: italic; }
[data-theme="dark"] .codehilite .s { color: #f1fa8c; }
[data-theme="dark"] .codehilite .nf { color: #50fa7b; }
[data-theme="dark"] .codehilite .nn { color: #8be9fd; }