/* 
 * Code Block Styling for Blog Posts
 * Syntax highlighting and copy functionality
 */

/* Code block container - with higher specificity */
.blog-post-content .highlight,
.highlight {
    background-color: #f8f9fa !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px;
    margin: 1rem 0;
    overflow-x: auto;
    position: relative;
}

/* Line numbers table layout */
.highlighttable {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0;
    text-align: left !important;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    overflow: hidden;
}

.highlighttable td {
    padding: 0;
    border: none;
    text-align: left !important;
}

/* Table row styling - removed alternating colors since table has single row structure */

/* Line numbers column */
.linenos {
    background-color: #f1f3f4;
    border-right: 1px solid #e1e4e8;
    width: 1%;
    vertical-align: top;
}

.linenodiv {
    padding: 1rem 0.5rem;
}

.linenodiv pre {
    margin: 0;
    background: transparent;
    color: #6a737d;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
    /* Ensure consistent line heights matching code content */
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Code content column */
.code {
    width: 99%;
    vertical-align: top;
    position: relative;
    text-align: left !important;
}

.code div {
    margin: 0;
    padding: 1rem;
    background: transparent;
    overflow-x: auto;
    text-align: left !important;
}

.code pre {
    margin: 0;
    background: transparent;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.45;
    color: #24292e;
    text-align: left !important;
    /* Force uniform line heights and ensure consistent rendering */
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Copy button styling */
.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #24292e;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0.8;
}

.code-copy-btn:hover {
    background: #1a1e22;
    opacity: 1;
}

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

/* Python Syntax highlighting colors with highest specificity */
.blog-post-content .highlight .k,
.highlight .k { color: #d73a49 !important; font-weight: bold !important; } /* Keywords like def, return */

.blog-post-content .highlight .nf,
.highlight .nf { color: #6f42c1 !important; font-weight: bold !important; } /* Function names like calculate */

.blog-post-content .highlight .n,
.highlight .n { color: #24292e !important; } /* Variables like x, y, result */

.blog-post-content .highlight .nb,
.highlight .nb { color: #005cc5 !important; font-weight: bold !important; } /* Built-ins like print */

.blog-post-content .highlight .mi,
.highlight .mi { color: #005cc5 !important; } /* Integer numbers like 5, 3 */

.blog-post-content .highlight .o,
.highlight .o { color: #d73a49 !important; } /* Operators like +, = */

.blog-post-content .highlight .p,
.highlight .p { color: #24292e !important; } /* Punctuation like parentheses, commas */

.blog-post-content .highlight .w,
.highlight .w { color: transparent !important; } /* Whitespace */

/* Additional syntax elements */
.blog-post-content .highlight .s,
.highlight .s { color: #032f62 !important; } /* Strings */

.blog-post-content .highlight .s1,
.highlight .s1 { color: #032f62 !important; } /* Single quoted strings */

.blog-post-content .highlight .s2,
.highlight .s2 { color: #032f62 !important; } /* Double quoted strings */

.blog-post-content .highlight .c,
.highlight .c { color: #6a737d !important; font-style: italic !important; } /* Comments */

/* Responsive design */
@media (max-width: 768px) {
    .highlight {
        margin: 0.5rem 0;
        border-radius: 4px;
    }
    
    .code div,
    .linenodiv {
        padding: 0.5rem;
    }
    
    .code pre,
    .linenodiv pre {
        font-size: 12px;
    }
    
    .code-copy-btn {
        top: 0.25rem;
        right: 0.25rem;
        padding: 0.2rem 0.4rem;
        font-size: 11px;
    }
}