/**
 * Code Syntax Highlighting for Engineering Content
 * Styles for code blocks, MATLAB, Python, C++, etc.
 */

/* Base Code Block */
.code-block {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    position: relative;
}

.code-block::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0066cc;
    color: #fff;
    padding: 4px 12px;
    border-radius: 0 8px 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Inline Code */
code {
    background-color: #f4f4f4;
    color: #c7254e;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.9em;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Syntax Colors */
.code-comment {
    color: #6a9955;
    font-style: italic;
}

.code-keyword {
    color: #569cd6;
    font-weight: 600;
}

.code-function {
    color: #dcdcaa;
}

.code-string {
    color: #ce9178;
}

.code-number {
    color: #b5cea8;
}

.code-operator {
    color: #d4d4d4;
}

.code-variable {
    color: #9cdcfe;
}

.code-type {
    color: #4ec9b0;
}

/* Language-Specific Styling */

/* MATLAB */
.code-block.matlab {
    background-color: #002b36;
}

.code-block.matlab::before {
    content: 'MATLAB';
    background-color: #d95319;
}

/* Python */
.code-block.python {
    background-color: #282c34;
}

.code-block.python::before {
    content: 'Python';
    background-color: #3776ab;
}

/* C++ */
.code-block.cpp {
    background-color: #1e1e1e;
}

.code-block.cpp::before {
    content: 'C++';
    background-color: #00599c;
}

/* JavaScript */
.code-block.javascript {
    background-color: #282c34;
}

.code-block.javascript::before {
    content: 'JavaScript';
    background-color: #f7df1e;
    color: #000;
}

/* Line Numbers */
.code-block.line-numbers {
    padding-left: 60px;
}

.code-block.line-numbers::after {
    counter-reset: line;
}

.code-block.line-numbers .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 40px;
    margin-left: -50px;
    margin-right: 10px;
    text-align: right;
    color: #858585;
    user-select: none;
}

/* Copy Button */
.code-copy-button {
    position: absolute;
    top: 10px;
    right: 80px;
    background-color: #0066cc;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.code-copy-button:hover {
    background-color: #003d7a;
}

.code-copy-button.copied {
    background-color: #28a745;
}

/* Engineering Formula Code */
.formula-code {
    background-color: #f8f9fa;
    color: #333;
    border: 2px solid #0066cc;
    font-size: 16px;
}

.formula-code::before {
    content: 'Formula';
    background-color: #ff6600;
}

/* Terminal/Console Output */
.terminal-output {
    background-color: #000;
    color: #00ff00;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    margin: 25px 0;
}

.terminal-output::before {
    content: '$ ';
    color: #00ff00;
}

/* Responsive Design */
@media (max-width: 768px) {
    .code-block {
        padding: 15px;
        font-size: 12px;
    }
    
    .code-block.line-numbers {
        padding-left: 50px;
    }
    
    .code-copy-button {
        right: 60px;
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Scrollbar Styling */
.code-block::-webkit-scrollbar {
    height: 8px;
}

.code-block::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb {
    background: #0066cc;
    border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb:hover {
    background: #003d7a;
}

/* Print Styles */
@media print {
    .code-block {
        background-color: #fff;
        color: #000;
        border: 1px solid #ddd;
    }
    
    .code-copy-button {
        display: none;
    }
}