/* Copy button styling for codpre .copy-code-btn.copied {
    background-color: var(--primary-color, #2bbc8a);
    color: #fff;
}

/* ==========================================
   ATOM DARK INSPIRED CODE BLOCK STYLING
   ========================================== */

/* Override default code block styling with Atom Dark theme */
pre {
    background-color: var(--code-bg) !important;
    color: var(--code-text) !important;
    border: 1px solid #21252b !important;
    border-radius: 6px !important;
    padding: 1.2rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Inline code styling */
code {
    background-color: #f8f8f8 !important;
    color: #e83e8c !important;
    padding: 0.2em 0.4em !important;
    border-radius: 3px !important;
    border: none !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: 0.9em !important;
}

/* Code inside pre blocks */
pre code {
    background-color: transparent !important;
    color: var(--code-text) !important;
    padding: 0 !important;
    border: none !important;
    display: block;
}

/* Syntax highlighting for common elements */
.highlight pre, 
.highlight code {
    background-color: var(--code-bg) !important;
    color: var(--code-text) !important;
}

/* Generic syntax highlighting classes */
.highlight .c,     /* Comments */
.highlight .cm,    /* Multiline comments */
.highlight .cp,    /* Preprocessor comments */
.highlight .c1,    /* Single line comments */
.highlight .cs {   /* Special comments */
    color: var(--code-comment) !important;
    font-style: italic;
}

.highlight .k,     /* Keywords */
.highlight .kc,    /* Keyword constants */
.highlight .kd,    /* Keyword declarations */
.highlight .kn,    /* Keyword namespaces */
.highlight .kp,    /* Keyword pseudo */
.highlight .kr,    /* Keyword reserved */
.highlight .kt {   /* Keyword types */
    color: var(--code-keyword) !important;
    font-weight: bold;
}

.highlight .s,     /* Strings */
.highlight .sb,    /* String backtick */
.highlight .sc,    /* String char */
.highlight .sd,    /* String doc */
.highlight .s2,    /* String double */
.highlight .se,    /* String escape */
.highlight .sh,    /* String heredoc */
.highlight .si,    /* String interpol */
.highlight .sx,    /* String other */
.highlight .sr,    /* String regex */
.highlight .s1,    /* String single */
.highlight .ss {   /* String symbol */
    color: var(--code-string) !important;
}

.highlight .m,     /* Numbers */
.highlight .mf,    /* Float */
.highlight .mh,    /* Hex */
.highlight .mi,    /* Integer */
.highlight .mo,    /* Octal */
.highlight .il {   /* Integer long */
    color: var(--code-number) !important;
}

.highlight .n,     /* Names */
.highlight .nf,    /* Function names */
.highlight .fm {   /* Magic functions */
    color: var(--code-function) !important;
}

.highlight .nv,    /* Variables */
.highlight .vc,    /* Class variables */
.highlight .vg,    /* Global variables */
.highlight .vi {   /* Instance variables */
    color: var(--code-variable) !important;
}

.highlight .o,     /* Operators */
.highlight .ow {   /* Word operators */
    color: var(--code-operator) !important;
}

.highlight .nc,    /* Class names */
.highlight .ne,    /* Exceptions */
.highlight .nn {   /* Namespaces */
    color: var(--code-class) !important;
    font-weight: bold;
}

.highlight .nt,    /* Tags */
.highlight .nl {   /* Labels */
    color: var(--code-tag) !important;
}

.highlight .na,    /* Attributes */
.highlight .nb {   /* Builtins */
    color: var(--code-attribute) !important;
}

.highlight .p {    /* Punctuation */
    color: var(--code-punctuation) !important;
}

/* Language-specific highlighting */

/* Python specific */
.highlight .language-python .k,
.highlight .language-py .k {
    color: var(--code-keyword) !important;
}

.highlight .language-python .kn,
.highlight .language-py .kn {
    color: var(--code-keyword) !important;
}

/* JavaScript specific */
.highlight .language-javascript .kd,
.highlight .language-js .kd,
.highlight .language-jsx .kd {
    color: var(--code-keyword) !important;
}

.highlight .language-javascript .nx,
.highlight .language-js .nx,
.highlight .language-jsx .nx {
    color: var(--code-text) !important;
}

/* CSS specific */
.highlight .language-css .k,
.highlight .language-scss .k,
.highlight .language-sass .k {
    color: var(--code-keyword) !important;
}

.highlight .language-css .nc,
.highlight .language-scss .nc,
.highlight .language-sass .nc {
    color: var(--code-class) !important;
}

/* HTML specific */
.highlight .language-html .nt {
    color: var(--code-tag) !important;
}

.highlight .language-html .na {
    color: var(--code-attribute) !important;
}

/* JSON specific */
.highlight .language-json .nt {
    color: var(--code-string) !important;
}

/* Bash/Shell specific */
.highlight .language-bash .nv,
.highlight .language-sh .nv,
.highlight .language-shell .nv {
    color: var(--code-variable) !important;
}

/* Additional styling for better readability */
.highlight .err {
    color: #f8f8f2 !important;
    background-color: #e74c3c !important;
    border-radius: 2px;
    padding: 1px 2px;
}

.highlight .w {
    color: var(--code-text) !important;
}

/* Selection color for code blocks */
pre::selection,
pre code::selection {
    background-color: var(--code-selection) !important;
}

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

pre::-webkit-scrollbar-track {
    background: #21252b;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: #3e4451;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #4a5161;
}

/* Line numbers styling (if used) */
.highlight .linenos {
    color: #5c6370 !important;
    background-color: #21252b !important;
    padding-right: 1em !important;
    border-right: 1px solid #3e4451 !important;
    margin-right: 1em !important;
}

/* Code fence language label */
.highlight .code-header {
    background-color: #21252b;
    color: var(--code-comment);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #3e4451;
    margin-bottom: 0;
}

/* Ensure copy button works well with dark theme */
pre .copy-code-btn {
    background-color: var(--primary-color, #8c8c8c) !important;
    border: 1px solid #3e4451;
    border-radius: 0 6px 0 6px !important;
    transition: all 0.2s ease !important;
}

pre .copy-code-btn:hover {
    background-color: var(--primary-dark, #666) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Code block animations and interactions */
pre {
    transition: all 0.3s ease;
}

pre:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px);
}

/* Beautiful code block headers for different languages */
pre[class*="language-"]:before {
    content: attr(class);
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 4px 4px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Language-specific labels */
pre.language-javascript:before,
pre.highlight.language-javascript:before { content: "JavaScript"; }
pre.language-python:before,
pre.highlight.language-python:before { content: "Python"; }
pre.language-css:before,
pre.highlight.language-css:before { content: "CSS"; }
pre.language-html:before,
pre.highlight.language-html:before { content: "HTML"; }
pre.language-bash:before,
pre.highlight.language-bash:before { content: "Bash"; }
pre.language-json:before,
pre.highlight.language-json:before { content: "JSON"; }
pre.language-sql:before,
pre.highlight.language-sql:before { content: "SQL"; }
pre.language-typescript:before,
pre.highlight.language-typescript:before { content: "TypeScript"; }
pre.language-jsx:before,
pre.highlight.language-jsx:before { content: "JSX"; }
pre.language-tsx:before,
pre.highlight.language-tsx:before { content: "TSX"; }

/* Enhanced token highlighting with better contrast */
.highlight .gh {   /* Generic heading */
    color: var(--code-class) !important;
    font-weight: bold;
}

.highlight .gi {   /* Generic inserted */
    color: var(--code-string) !important;
    background-color: rgba(152, 195, 121, 0.1);
}

.highlight .gd {   /* Generic deleted */
    color: var(--code-variable) !important;
    background-color: rgba(224, 108, 117, 0.1);
}

.highlight .gu {   /* Generic subheading */
    color: var(--code-operator) !important;
    font-weight: bold;
}

/* Better highlighting for important keywords */
.highlight .language-python .bp,  /* Python builtins */
.highlight .language-py .bp {
    color: var(--code-attribute) !important;
    font-weight: bold;
}

.highlight .language-javascript .p,
.highlight .language-js .p {
    color: var(--code-punctuation) !important;
}

/* Special highlighting for decorators */
.highlight .nd {   /* Decorators */
    color: var(--code-class) !important;
    font-weight: bold;
}

/* Better visibility for escape sequences */
.highlight .se {
    color: var(--code-operator) !important;
    font-weight: bold;
}

/* Improved documentation strings */
.highlight .sd {
    color: var(--code-comment) !important;
    font-style: italic;
    opacity: 0.9;
}

/* Copy button styling for code blocks - based on original Cactus theme */
pre {
  position: relative;
}

pre .copy-code-btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 0 2px;
  padding: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 0.9em;
  line-height: 1.7;
  color: #fff;
  background-color: var(--primary-color, #8c8c8c);
  min-width: 60px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0em;
  transition: background-color 0.2s, color 0.2s;
}

pre .copy-code-btn:hover {
  background-color: var(--primary-dark, #666);
  color: #fff;
}

pre .copy-code-btn.copied {
  background-color: var(--primary-color, #2bbc8a);
  color: #fff;
}
/* Custom theme colors */
:root {
    --primary-color: #A43830;       /* Lamalab burgundy */
    --primary-dark: #8A2E27;        /* Darker shade for hover */
    --text-color: #333333;          /* Dark gray for better readability */
    --secondary-color: #666666;     /* Medium gray for secondary text */
    --background-color: #FFFFFF;    /* Clean white background */
    --border-color: #E0E0E0;        /* Light gray for borders */
    --light-bg: #FAFAFA;           /* Light background for code/footer */
    
    /* Atom Dark-inspired code theme colors */
    --code-bg: #282c34;             /* Dark background like Atom Dark */
    --code-text: #abb2bf;           /* Default text color */
    --code-comment: #5c6370;        /* Comments */
    --code-keyword: #c678dd;        /* Keywords (purple) */
    --code-string: #98c379;         /* Strings (green) */
    --code-number: #d19a66;         /* Numbers (orange) */
    --code-function: #61afef;       /* Functions (blue) */
    --code-variable: #e06c75;       /* Variables (red) */
    --code-operator: #56b6c2;       /* Operators (cyan) */
    --code-class: #e5c07b;          /* Classes (yellow) */
    --code-tag: #e06c75;            /* HTML tags (red) */
    --code-attribute: #d19a66;      /* Attributes (orange) */
    --code-punctuation: #abb2bf;    /* Punctuation */
    --code-selection: #3e4451;      /* Selection background */
}

/* Update header style */
#header {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

#header h1, #header .h1,
h1, .h1,
.posttitle {
    color: var(--primary-color);
    font-weight: 800;
    letter-spacing: -0.02em;
}

#header #nav {
    color: var(--primary-color);
}

#header #nav ul a {
    color: var(--primary-color);
}

#header #nav ul a:hover {
    background-image: linear-gradient(transparent, transparent 5px, var(--primary-dark) 5px, var(--primary-dark));
}

/* Update link styles */
.content a {
    color: var(--primary-color);
    background-image: linear-gradient(transparent, transparent 5px, var(--primary-color) 5px, var(--primary-color));
}

.content a:hover {
    color: var(--primary-dark);
    background-image: linear-gradient(transparent, transparent 4px, var(--primary-dark) 4px, var(--primary-dark));
}

/* Update headings */

h3, .h3 {
    text-decoration: underline;
    text-underline-offset: 1px;
    text-decoration-thickness: 1px;
}

/* Remove the "#" symbol from h2 headings in blog posts to match main page style */
.content h2:before {
    display: none !important;
}

h2:before {
    color: var(--primary-color) !important;
}

/* Update blockquotes */
blockquote {
    border-left: 4px solid var(--primary-color);
    color: var(--secondary-color);
    padding-left: 1rem;
}

/* Update navigation elements */
#footer-post #nav-footer {
    background-color: var(--light-bg);
}

#footer-post #nav-footer a {
    color: var(--primary-color);
}

/* Update post title styles - merged with heading styles above */

/* Update tag and category styles */
.article-tag .tag-link:before {
    color: var(--primary-color);
}

.article-category .category-link {
    color: var(--primary-color);
}

/* Update table styles */
table th {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

/* Custom styles for scientific/lab theme */
.content img, .content video {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add a subtle gradient to the header */
#header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
}

/* Update list markers */
.content ul {
    list-style-type: none;
    padding-left: -0.1em;
}

.content ul li {
    position: relative;
    padding-left: 1.2em;
}

.content ul li::before {
    content: '▪';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
}

/* Add smooth transitions */
a, button {
    transition: all 0.3s ease;
}

/* Blog post intro styling */
.post-intro {
    margin-bottom: 2rem;
}

.post-intro p {
    margin: 0;
}

/* Unified content styling for all pages */
.content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    line-height: 1.6;
}

/* Ensure consistent spacing within content areas */
.content > section,
.content > article {
    margin-bottom: 1rem;
}

/* Post-specific styling within content wrapper */
.content .post {
    width: 100%;
}

.content .post header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 1rem;
}

.content .post .meta {
    margin-top: 0.5rem;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.content .post .meta .author {
    font-weight: bold;
    margin-right: 1rem;
}

.content .post .meta .date {
    font-style: italic;
}

/* Archive list styling within content */
.content #archive {
    margin-top: 2rem;
}

.content #archive h2 {
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Ensure proper page layout for footer positioning */
html, body {
    min-height: 100vh;
}

.content.index {
    min-height: calc(100vh - 4rem); /* Account for footer height */
    position: relative;
}

/* Improve footer positioning */
#footer {
    position: relative;
    margin-top: auto;
    margin-bottom: 1rem;
}

/* Responsive spacing for posts and content */
.post,
article.post {
    margin-bottom: 1rem;
}

body .content.index.py4 {
    padding-bottom: 1rem;
}

/* Mobile and tablet responsive spacing */
@media (max-width: 500px) {
    .post,
    article.post {
        margin-bottom: 3rem;
    }
    
    body .content.index.py4 {
        padding-bottom: 3rem;
    }
}

@media (min-width: 501px) and (max-width: 900px) {
    .post,
    article.post {
        margin-bottom: 2.5rem;
    }
}