/* Theme Toggle CSS Variables */
:root {
    /* Light theme (default) - Paper & Ink */
    --color-background: #f8f9fb;
    --color-text: #2c2c2c;
    --color-border: #d1d5db;
    --color-meta: #6b7280;
    --color-link: #1d4ed8;
    --color-accent-1: #1f2937;
    --color-accent-2: #374151;
    --color-accent-3: #4b5563;
    --color-quote: #6366f1;
    --color-background-code: #f1f3f5;
    --color-meta-code: #9ca3af;
}

[data-theme="dark"] {
    /* Dark theme - Midnight Professional */
    --color-background: #0f172a;
    --color-text: #f1f5f9;
    --color-border: #475569;
    --color-meta: #94a3b8;
    --color-link: #93c5fd;
    --color-accent-1: #3b82f6;
    --color-accent-2: #8b5cf6;
    --color-accent-3: #10b981;
    --color-quote: #f59e0b;
    --color-background-code: #1e293b;
    --color-meta-code: #cbd5e1;
}

/* Override theme colors with CSS variables */
html {
    border-top: none;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Paper texture for light mode */
:root body {
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(0, 0, 0, 0.03) 1px,
        transparent 0
    );
    background-size: 20px 20px;
}

/* Remove texture in dark mode */
[data-theme="dark"] body {
    background-image: none;
}

/* Typography enhancements for IBM Plex Serif */
body {
    font-family: "IBM Plex Serif", serif;
    font-size: 17px;
    line-height: 1.55;
    font-feature-settings:
        "liga" 1,
        "kern" 1;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "IBM Plex Serif", serif;
    font-weight: 500;
}

/* Reduce spacing throughout */
h1,
.h1 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

h2,
.h2 {
    font-size: 1.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

h3 {
    font-size: 1.25rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
}

h4,
h5,
h6 {
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
}

p {
    margin-bottom: 0.25em !important;
}

ul,
ol {
    margin-bottom: 0.5rem !important;
}

li {
    margin-bottom: 0.25rem !important;
}

/* Improved table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

th {
    background-color: var(--color-background-code);
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--color-border);
    font-weight: 600;
    text-align: left;
    color: var(--color-text);
}

td {
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--color-border);
    vertical-align: top;
}

/* Handle lists within table cells */
td ul,
td ol {
    margin: 0;
    padding-left: 1.2rem;
    margin-bottom: 0 !important;
}

td li {
    margin-bottom: 0.1rem !important;
    line-height: 1.3;
}

/* Handle bullet points in table cells that use • character */
td {
    white-space: pre-line;
}

/* Ensure bullet points display properly */
td:contains("•") {
    line-height: 1.4;
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Better responsive table behavior */
@media (max-width: 768px) {
    table {
        font-size: 0.8rem;
    }

    th,
    td {
        padding: 0.5rem 0.25rem;
    }
}

/* Keep monospace for code */
pre,
code,
.highlight {
    font-family: "JetBrains Mono", monospace;
}

.highlight {
    margin-top: 0.5rem;
}

.content a {
    color: var(--color-text);
}

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

.content a.icon:hover {
    color: var(--color-link);
}

pre {
    padding: 0rem 1rem 0rem 1rem;
    border: none;
    background-color: var(--color-background-code);
    color: var(--color-text);
}

code {
    border: none;
    background-color: var(--color-background-code);
    color: var(--color-text);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Light mode code block enhancement */
:root pre {
    border: none;
    box-shadow: none;
}

:root code {
    border: none;
}

/* Remove border from code inside pre */
pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Override inline styles from Hugo */
.highlight pre {
    background-color: var(--color-background-code) !important;
    color: var(--color-text) !important;
}

.highlight code {
    background-color: transparent !important;
}

/* Override inline styles on span elements */
.highlight pre code span[style] {
    color: inherit !important;
    background-color: transparent !important;
}

/* Syntax highlighting for light mode */
:root .highlight .hll {
    background-color: #ffffcc;
}
:root .highlight {
    background: var(--color-background-code) !important;
    color: var(--color-text) !important;
}
:root .highlight .c {
    color: #6b7280;
    font-style: italic;
} /* Comment */
:root .highlight .k {
    color: #7c3aed;
    font-weight: bold;
} /* Keyword */
:root .highlight .o {
    color: #666666;
} /* Operator */
:root .highlight .ch {
    color: #6b7280;
    font-style: italic;
} /* Comment.Hashbang */
:root .highlight .cm {
    color: #6b7280;
    font-style: italic;
} /* Comment.Multiline */
:root .highlight .cp {
    color: #6b7280;
} /* Comment.Preproc */
:root .highlight .cpf {
    color: #6b7280;
    font-style: italic;
} /* Comment.PreprocFile */
:root .highlight .c1 {
    color: #6b7280;
    font-style: italic;
} /* Comment.Single */
:root .highlight .cs {
    color: #6b7280;
    font-style: italic;
} /* Comment.Special */
:root .highlight .kc {
    color: #7c3aed;
    font-weight: bold;
} /* Keyword.Constant */
:root .highlight .kd {
    color: #7c3aed;
    font-weight: bold;
} /* Keyword.Declaration */
:root .highlight .kn {
    color: #7c3aed;
    font-weight: bold;
} /* Keyword.Namespace */
:root .highlight .kp {
    color: #7c3aed;
} /* Keyword.Pseudo */
:root .highlight .kr {
    color: #7c3aed;
    font-weight: bold;
} /* Keyword.Reserved */
:root .highlight .kt {
    color: #2563eb;
    font-weight: bold;
} /* Keyword.Type */
:root .highlight .m {
    color: #059669;
} /* Literal.Number */
:root .highlight .s {
    color: #dc2626;
} /* Literal.String */
:root .highlight .na {
    color: #0891b2;
} /* Name.Attribute */
:root .highlight .nb {
    color: #0891b2;
} /* Name.Builtin */
:root .highlight .nc {
    color: #2563eb;
    font-weight: bold;
} /* Name.Class */
:root .highlight .no {
    color: #059669;
} /* Name.Constant */
:root .highlight .nd {
    color: #0891b2;
    font-weight: bold;
} /* Name.Decorator */
:root .highlight .nf {
    color: #0891b2;
    font-weight: bold;
} /* Name.Function */
:root .highlight .nn {
    color: #2563eb;
} /* Name.Namespace */
:root .highlight .nt {
    color: #0891b2;
} /* Name.Tag */
:root .highlight .nv {
    color: #7c3aed;
} /* Name.Variable */
:root .highlight .s1 {
    color: #dc2626;
} /* Literal.String.Single */
:root .highlight .s2 {
    color: #dc2626;
} /* Literal.String.Double */
:root .highlight .si {
    color: #dc2626;
    font-weight: bold;
} /* Literal.String.Interpol */
:root .highlight .sx {
    color: #dc2626;
} /* Literal.String.Other */
:root .highlight .sr {
    color: #dc2626;
} /* Literal.String.Regex */
:root .highlight .ss {
    color: #dc2626;
} /* Literal.String.Symbol */
:root .highlight .sd {
    color: #dc2626;
    font-style: italic;
} /* Literal.String.Doc */
:root .highlight .se {
    color: #dc2626;
    font-weight: bold;
} /* Literal.String.Escape */
:root .highlight .n {
    color: #1f2937;
} /* Name */
:root .highlight .p {
    color: #1f2937;
} /* Punctuation */
:root .highlight .nx {
    color: #7c3aed;
} /* Name.Other */
:root .highlight .py {
    color: #7c3aed;
} /* Name.Property */
:root .highlight .vc {
    color: #7c3aed;
} /* Name.Variable.Class */
:root .highlight .vg {
    color: #7c3aed;
} /* Name.Variable.Global */
:root .highlight .vi {
    color: #7c3aed;
} /* Name.Variable.Instance */

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-accent-1);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--color-background);
}

/* Hide the opposite icon */
[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .moon-icon,
:root:not([data-theme]) .theme-toggle .moon-icon {
    display: none;
}

/* Additional dark mode overrides */
[data-theme="dark"] h1,
[data-theme="dark"] .h1 {
    color: var(--color-text);
}

[data-theme="dark"] h2,
[data-theme="dark"] .h2 {
    color: var(--color-text);
    opacity: 0.95;
}

[data-theme="dark"] h3 {
    color: var(--color-text);
    opacity: 0.9;
}

[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text);
    opacity: 0.85;
}

[data-theme="dark"] .article-meta {
    color: var(--color-meta);
}

[data-theme="dark"] blockquote {
    border-left-color: var(--color-quote);
}

[data-theme="dark"] .footer {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .footer a {
    color: var(--color-accent-3);
}

[data-theme="dark"] .nav a {
    color: var(--color-accent-3);
}

[data-theme="dark"] .article-title a {
    color: var(--color-text);
}

[data-theme="dark"] .highlight {
    background: var(--color-background-code);
}

/* Ensure link visibility in dark mode */
[data-theme="dark"] a {
    color: var(--color-link);
}

[data-theme="dark"] .content a {
    color: var(--color-link);
}

[data-theme="dark"] .content a:hover {
    background-image: linear-gradient(
        transparent,
        transparent 4px,
        var(--color-link) 4px,
        var(--color-link)
    );
    color: #bfdbfe;
}

[data-theme="dark"] .article-tag .tag-link:before {
    color: var(--color-link);
}

/* Header visibility in dark mode */
[data-theme="dark"] #header h1,
[data-theme="dark"] #header .h1 {
    color: var(--color-text) !important;
}

[data-theme="dark"] #header a {
    color: var(--color-text) !important;
}

[data-theme="dark"] #header a:hover {
    color: var(--color-text) !important;
}

[data-theme="dark"] #header #nav a {
    color: var(--color-link) !important;
}

[data-theme="dark"] #header #nav a:hover {
    color: var(--color-link) !important;
}

/* Logo brightness in dark mode */
[data-theme="dark"] #logo {
    filter: brightness(0.9) !important;
    -webkit-filter: brightness(0.9) !important;
}

[data-theme="dark"] #header:hover #logo {
    filter: brightness(1) !important;
    -webkit-filter: brightness(1) !important;
}

/* Footer visibility in dark mode */
[data-theme="dark"] #footer {
    color: var(--color-text) !important;
    border-top-color: var(--color-border) !important;
    background-color: rgba(30, 41, 59, 0.3);
}

[data-theme="dark"] #footer a {
    color: var(--color-link) !important;
}

[data-theme="dark"] #footer a:hover {
    color: #bfdbfe !important;
}

[data-theme="dark"] .footer-left,
[data-theme="dark"] .footer-right {
    color: var(--color-text) !important;
}

/* Syntax highlighting for dark mode */
[data-theme="dark"] .highlight .hll {
    background-color: #49483e;
}
[data-theme="dark"] .highlight {
    background: var(--color-background-code);
    color: #f8f8f2;
}
[data-theme="dark"] .highlight .c {
    color: #94a3b8;
} /* Comment */
[data-theme="dark"] .highlight .k {
    color: #66d9ef;
} /* Keyword */
[data-theme="dark"] .highlight .l {
    color: #ae81ff;
} /* Literal */
[data-theme="dark"] .highlight .n {
    color: #f8f8f2;
} /* Name */
[data-theme="dark"] .highlight .o {
    color: #f92672;
} /* Operator */
[data-theme="dark"] .highlight .p {
    color: #f8f8f2;
} /* Punctuation */
[data-theme="dark"] .highlight .ch {
    color: #94a3b8;
} /* Comment.Hashbang */
[data-theme="dark"] .highlight .cm {
    color: #94a3b8;
} /* Comment.Multiline */
[data-theme="dark"] .highlight .cp {
    color: #94a3b8;
} /* Comment.Preproc */
[data-theme="dark"] .highlight .cpf {
    color: #94a3b8;
} /* Comment.PreprocFile */
[data-theme="dark"] .highlight .c1 {
    color: #94a3b8;
} /* Comment.Single */
[data-theme="dark"] .highlight .cs {
    color: #94a3b8;
} /* Comment.Special */
[data-theme="dark"] .highlight .kc {
    color: #66d9ef;
} /* Keyword.Constant */
[data-theme="dark"] .highlight .kd {
    color: #66d9ef;
} /* Keyword.Declaration */
[data-theme="dark"] .highlight .kn {
    color: #f92672;
} /* Keyword.Namespace */
[data-theme="dark"] .highlight .kp {
    color: #66d9ef;
} /* Keyword.Pseudo */
[data-theme="dark"] .highlight .kr {
    color: #66d9ef;
} /* Keyword.Reserved */
[data-theme="dark"] .highlight .kt {
    color: #66d9ef;
} /* Keyword.Type */
[data-theme="dark"] .highlight .ld {
    color: #e6db74;
} /* Literal.Date */
[data-theme="dark"] .highlight .m {
    color: #ae81ff;
} /* Literal.Number */
[data-theme="dark"] .highlight .s {
    color: #e6db74;
} /* Literal.String */
[data-theme="dark"] .highlight .na {
    color: #a6e22e;
} /* Name.Attribute */
[data-theme="dark"] .highlight .nb {
    color: #f8f8f2;
} /* Name.Builtin */
[data-theme="dark"] .highlight .nc {
    color: #a6e22e;
} /* Name.Class */
[data-theme="dark"] .highlight .no {
    color: #66d9ef;
} /* Name.Constant */
[data-theme="dark"] .highlight .nd {
    color: #a6e22e;
} /* Name.Decorator */
[data-theme="dark"] .highlight .nf {
    color: #a6e22e;
} /* Name.Function */
[data-theme="dark"] .highlight .nn {
    color: #f8f8f2;
} /* Name.Namespace */
[data-theme="dark"] .highlight .nx {
    color: #a6e22e;
} /* Name.Other */
[data-theme="dark"] .highlight .nt {
    color: #f92672;
} /* Name.Tag */
[data-theme="dark"] .highlight .nv {
    color: #f8f8f2;
} /* Name.Variable */
[data-theme="dark"] .highlight .s1 {
    color: #e6db74;
} /* Literal.String.Single */
[data-theme="dark"] .highlight .s2 {
    color: #e6db74;
} /* Literal.String.Double */
[data-theme="dark"] .highlight .si {
    color: #e6db74;
} /* Literal.String.Interpol */
[data-theme="dark"] .highlight .sx {
    color: #e6db74;
} /* Literal.String.Other */
[data-theme="dark"] .highlight .sr {
    color: #e6db74;
} /* Literal.String.Regex */
[data-theme="dark"] .highlight .ss {
    color: #e6db74;
} /* Literal.String.Symbol */
[data-theme="dark"] .highlight .sd {
    color: #e6db74;
} /* Literal.String.Doc */
[data-theme="dark"] .highlight .se {
    color: #ae81ff;
} /* Literal.String.Escape */

/* Mobile adjustments */
@media (max-width: 480px) {
    .theme-toggle {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle svg {
        width: 20px;
        height: 20px;
    }
}

/* Code block whitespace fixes */
.highlight pre code span.line:first-child span.cl:empty {
    display: none;
}

.highlight pre code span.line:last-child span.cl:empty {
    display: none;
}

/* Tighten overall page padding */
.content.index.py4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}