/* code style */
.normal { margin-right: 2pt; }
.highlight {
    /* Add horizontal scrolling */
    overflow-x: auto;
    /* Optional: hide scrollbar until needed */
    scrollbar-width: thin;
    
    /* Ensure the block doesn't overflow */
    max-width: 100%;
    
    /* Add some padding for better readability */
    padding: 1rem;
    
    /* Optional: add a subtle border */
    border-radius: 4px;

    background-color: var(--kanagawa-code-bg);
    color: var(--kanagawa-code-fg);
}

.highlight pre {
    /* Reduce font size */
    font-size: 0.8rem;
    
    /* Ensure proper line height */
    line-height: 1.4;
    
    /* Remove any margin that might cause double scrolling */
    margin: 0;
}

/* Optional: Style the scrollbar for webkit browsers */
.highlight::-webkit-scrollbar {
    height: 8px;
}

.highlight::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.highlight::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Kanagawa color variables */
:root {
    /* Dark theme colors */
    --kanagawa-code-dark-black: #090618;
    --kanagawa-code-dark-blue: #7e9cd8;
    --kanagawa-code-dark-red: #c34043;
    --kanagawa-code-dark-green: #76946a;
    --kanagawa-code-dark-yellow: #c0a36e;
    --kanagawa-code-dark-magenta: #957fb8;
    --kanagawa-code-dark-cyan: #6a9589;
    --kanagawa-code-dark-white: #c8c093;
    --kanagawa-code-dark-bright-black: #727169;
    --kanagawa-code-dark-bright-red: #e82424;
    --kanagawa-code-dark-bright-green: #98bb6c;
    --kanagawa-code-dark-bright-yellow: #e6c384;
    --kanagawa-code-dark-bright-blue: #7fb4ca;
    --kanagawa-code-dark-bright-magenta: #938aa9;
    --kanagawa-code-dark-bright-cyan: #7aa89f;
    --kanagawa-code-dark-bright-white: #dcd7ba;
    --kanagawa-code-dark-bg: #1f1f28;
    --kanagawa-code-dark-fg: #dcd7ba;
    --kanagawa-code-dark-selection: #2d4f67;

    /* Light theme colors */
    --kanagawa-code-light-black: #1f1f28;
    --kanagawa-code-light-blue: #4a5cc5;
    --kanagawa-code-light-red: #c34043;
    --kanagawa-code-light-green: #4b6b4b;
    --kanagawa-code-light-yellow: #8f6c3f;
    --kanagawa-code-light-magenta: #624c8c;
    --kanagawa-code-light-cyan: #3d6b62;
    --kanagawa-code-light-white: #dcd7ba;
    --kanagawa-code-light-bright-black: #54534d;
    --kanagawa-code-light-bright-red: #b31d1d;
    --kanagawa-code-light-bright-green: #668c44;
    --kanagawa-code-light-bright-yellow: #8f6c3f;
    --kanagawa-code-light-bright-blue: #4a7890;
    --kanagawa-code-light-bright-magenta: #625987;
    --kanagawa-code-light-bright-cyan: #507b74;
    --kanagawa-code-light-bright-white: #1f1f28;
    --kanagawa-code-light-bg: #efede3;
    --kanagawa-code-light-fg: #1f1f28;
    --kanagawa-code-light-selection: #d5dfe6;

    /* Default to light theme */
    --kanagawa-code-black: var(--kanagawa-code-light-black);
    --kanagawa-code-blue: var(--kanagawa-code-light-blue);
    --kanagawa-code-red: var(--kanagawa-code-light-red);
    --kanagawa-code-green: var(--kanagawa-code-light-green);
    --kanagawa-code-yellow: var(--kanagawa-code-light-yellow);
    --kanagawa-code-magenta: var(--kanagawa-code-light-magenta);
    --kanagawa-code-cyan: var(--kanagawa-code-light-cyan);
    --kanagawa-code-white: var(--kanagawa-code-light-white);
    --kanagawa-code-bright-black: var(--kanagawa-code-light-bright-black);
    --kanagawa-code-bright-red: var(--kanagawa-code-light-bright-red);
    --kanagawa-code-bright-green: var(--kanagawa-code-light-bright-green);
    --kanagawa-code-bright-yellow: var(--kanagawa-code-light-bright-yellow);
    --kanagawa-code-bright-blue: var(--kanagawa-code-light-bright-blue);
    --kanagawa-code-bright-magenta: var(--kanagawa-code-light-bright-magenta);
    --kanagawa-code-bright-cyan: var(--kanagawa-code-light-bright-cyan);
    --kanagawa-code-bright-white: var(--kanagawa-code-light-bright-white);
    --kanagawa-code-bg: var(--kanagawa-code-light-bg);
    --kanagawa-code-fg: var(--kanagawa-code-light-fg);
    --kanagawa-code-selection: var(--kanagawa-code-light-selection);
}

/* Use the same attribute that will control site-wide dark mode */
:root[data-theme="dark"] {
    --kanagawa-code-black: var(--kanagawa-code-dark-black);
    --kanagawa-code-blue: var(--kanagawa-code-dark-blue);
    --kanagawa-code-red: var(--kanagawa-code-dark-red);
    --kanagawa-code-green: var(--kanagawa-code-dark-green);
    --kanagawa-code-yellow: var(--kanagawa-code-dark-yellow);
    --kanagawa-code-magenta: var(--kanagawa-code-dark-magenta);
    --kanagawa-code-cyan: var(--kanagawa-code-dark-cyan);
    --kanagawa-code-white: var(--kanagawa-code-dark-white);
    --kanagawa-code-bright-black: var(--kanagawa-code-dark-bright-black);
    --kanagawa-code-bright-red: var(--kanagawa-code-dark-bright-red);
    --kanagawa-code-bright-green: var(--kanagawa-code-dark-bright-green);
    --kanagawa-code-bright-yellow: var(--kanagawa-code-dark-bright-yellow);
    --kanagawa-code-bright-blue: var(--kanagawa-code-dark-bright-blue);
    --kanagawa-code-bright-magenta: var(--kanagawa-code-dark-bright-magenta);
    --kanagawa-code-bright-cyan: var(--kanagawa-code-dark-bright-cyan);
    --kanagawa-code-bright-white: var(--kanagawa-code-dark-bright-white);
    --kanagawa-code-bg: var(--kanagawa-code-dark-bg);
    --kanagawa-code-fg: var(--kanagawa-code-dark-fg);
    --kanagawa-code-selection: var(--kanagawa-code-dark-selection);
}

/* For system preference based dark mode (optional) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kanagawa-code-black: var(--kanagawa-code-dark-black);
        --kanagawa-code-blue: var(--kanagawa-code-dark-blue);
        --kanagawa-code-red: var(--kanagawa-code-dark-red);
        --kanagawa-code-green: var(--kanagawa-code-dark-green);
        --kanagawa-code-yellow: var(--kanagawa-code-dark-yellow);
        --kanagawa-code-magenta: var(--kanagawa-code-dark-magenta);
        --kanagawa-code-cyan: var(--kanagawa-code-dark-cyan);
        --kanagawa-code-white: var(--kanagawa-code-dark-white);
        --kanagawa-code-bright-black: var(--kanagawa-code-dark-bright-black);
        --kanagawa-code-bright-red: var(--kanagawa-code-dark-bright-red);
        --kanagawa-code-bright-green: var(--kanagawa-code-dark-bright-green);
        --kanagawa-code-bright-yellow: var(--kanagawa-code-dark-bright-yellow);
        --kanagawa-code-bright-blue: var(--kanagawa-code-dark-bright-blue);
        --kanagawa-code-bright-magenta: var(--kanagawa-code-dark-bright-magenta);
        --kanagawa-code-bright-cyan: var(--kanagawa-code-dark-bright-cyan);
        --kanagawa-code-bright-white: var(--kanagawa-code-dark-bright-white);
        --kanagawa-code-bg: var(--kanagawa-code-dark-bg);
        --kanagawa-code-fg: var(--kanagawa-code-dark-fg);
        --kanagawa-code-selection: var(--kanagawa-code-dark-selection);
    }
}

/* Comments */
.c, .cm, .c1 { color: var(--kanagawa-code-bright-black); font-style: italic } /* Comment */
.cp, .cs { color: var(--kanagawa-code-bright-black); font-weight: bold; font-style: italic } /* Comment.Preproc, Special */

/* Keywords */
.k, .kc, .kd, .kn, .kp, .kr { color: var(--kanagawa-code-red); font-weight: bold } /* Keywords (class, def, etc) */
.kt { color: var(--kanagawa-code-blue); font-weight: bold } /* Keyword.Type */

/* Strings */
.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 { color: var(--kanagawa-code-green) } /* String */
.sr { color: var(--kanagawa-code-cyan) } /* Regex */
.ss { color: var(--kanagawa-code-magenta) } /* Symbol */

/* Names */
.na { color: var(--kanagawa-code-yellow) } /* Name.Attribute */
.nb { color: var(--kanagawa-code-bright-blue) } /* Name.Builtin */
.nc { color: var(--kanagawa-code-bright-yellow); font-weight: bold } /* Name.Class */
.no { color: var(--kanagawa-code-yellow) } /* Name.Constant */
.nd { color: var(--kanagawa-code-bright-cyan); font-weight: bold } /* Name.Decorator */
.ni { color: var(--kanagawa-code-magenta) } /* Name.Entity */
.ne { color: var(--kanagawa-code-red); font-weight: bold } /* Name.Exception */
.nf { color: var(--kanagawa-code-blue); font-weight: bold } /* Name.Function */
.nl { color: var(--kanagawa-code-bright-magenta); font-weight: bold } /* Name.Label */
.nn { color: var(--kanagawa-code-bright-yellow) } /* Name.Namespace */
.nt { color: var(--kanagawa-code-red) } /* Name.Tag */
.nv { color: var(--kanagawa-code-bright-red) } /* Name.Variable */
.vc, .vg, .vi { color: var(--kanagawa-code-bright-red) } /* Variable (class, global, instance) */

/* Operators */
.o, .ow { color: var(--kanagawa-code-bright-white); font-weight: bold } /* Operator */

/* Numbers */
.m, .mf, .mh, .mi, .mo, .il { color: var(--kanagawa-code-yellow) } /* Numbers */

/* Generic */
.gd { color: var(--kanagawa-code-red); background-color: var(--kanagawa-code-selection) } /* Deleted */
.gi { color: var(--kanagawa-code-green); background-color: var(--kanagawa-code-selection) } /* Inserted */
.gr { color: var(--kanagawa-code-red) } /* Error */
.gh { color: var(--kanagawa-code-bright-black) } /* Heading */
.go { color: var(--kanagawa-code-bright-black) } /* Output */
.gp { color: var(--kanagawa-code-bright-black) } /* Prompt */
.gs { font-weight: bold } /* Strong */
.gu { color: var(--kanagawa-code-bright-black) } /* Subheading */
.gt { color: var(--kanagawa-code-red) } /* Traceback */

/* Error */
.err { color: var(--kanagawa-code-red); background-color: var(--kanagawa-code-selection) } /* Error */

/* Special cases */
.bp { color: var(--kanagawa-code-magenta) } /* Name.Builtin.Pseudo (self) */

/* Responsive: Portrait tablets and up */

td.code {
    min-width: 800px;
}

div.blogcontent {
    font-size: 105%;
}

/* Update blog content spacing */
div.blogcontent h1, 
div.blogcontent h2, 
div.blogcontent h3, 
div.blogcontent h4, 
div.blogcontent h5, 
div.blogcontent h6 {
    margin: 0 0 1.52rem 0;  /* Remove top margin */
}

div.blogcontent p, 
div.blogcontent li {
    margin: 0 0 1.5rem 0;  /* Remove top margin */
    line-height: 1.6;
}

/* Last paragraph in a section shouldn't have bottom margin */
div.blogcontent p:last-child {
    margin-bottom: 0;
}

div.blogcontent a {
    font-weight: bold;
}