/* Theme Variables */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --link-color: #007bff;
    --border-color: #ccc;
    --header-bg: #ffffff; /* Keep header same as body bg */
    --code-bg: #f8f8f8;
    --code-border: #ccc;
    --details-bg: #f9f9f9;
    --details-border: #ccc;
    --summary-bg: #f1f1f1;
    --search-bg: #ffffff;
    --search-border: #ccc;
    --search-results-bg: #ffffff;
    --search-results-border: #ccc;
    --search-hover-bg: #f0f0f0;
    --footer-text: #666;
    --preview-text: #555;
    --date-text: #666;
    --button-bg: #eee;
    --button-border: #ccc;
    --button-text: #333;
}

/* Dark Mode Variables (Applied to :root when .dark-mode class is present) */
:root.dark-mode {
    --bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --link-color: #64b5f6;
    --border-color: #555;
    --header-bg: #1e1e1e;
    --code-bg: #2a2a2a;
    --code-border: #555;
    --details-bg: #252525;
    --details-border: #555;
    --summary-bg: #333333;
    --search-bg: #2a2a2a;
    --search-border: #555;
    --search-results-bg: #2a2a2a;
    --search-results-border: #555;
    --search-hover-bg: #333333;
    --footer-text: #aaa;
    --preview-text: #bbb;
    --date-text: #aaa;
    --button-bg: #333;
    --button-border: #555;
    --button-text: #e0e0e0;
}

/* System preference is now handled by the inline JS setting .dark-mode or .light-mode */
/* @media (prefers-color-scheme: dark) block removed */


/* Basic styling using variables */
body {
    font-family: sans-serif;
    max-width: 800px; /* Limit content width */
    margin: 2em auto; /* Center content horizontally */
    padding: 0 1em; /* Add some padding */
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

header {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2em;
    padding-bottom: 1em;
    /* Ensure header content (including nav) can span width */
}

nav {
    display: block; /* Ensure nav behaves as a block element */
    width: 100%; /* Make nav take full width of header */
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0.5em 0 0 0;
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-evenly; /* Distribute items evenly, including space at ends */
    /* gap: 1em; */ /* Remove gap, space-evenly handles distribution */
    /* border-top: 1px solid var(--border-color); */ /* Removed border */
    /* padding-top: 0.5em; */ /* Removed padding */
}

nav ul li {
    /* display: inline-block; */ /* Remove inline-block */
    margin-right: 0; /* Remove fixed margin, use gap instead */
}

nav a {
    text-decoration: none;
    color: var(--link-color); /* Use variable */
}

nav a:hover {
    text-decoration: underline;
}

main h1:first-of-type {
    margin-top: 0; /* Avoid double margin below header */
}

footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid var(--border-color); /* Use variable */
    font-size: 0.9em;
    color: var(--footer-text); /* Use variable */
}

/* Bibliography Styles */
.bibliography-container {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--border-color); /* Use variable */
}

.bibliography-container h2 {
    margin-bottom: 0.5em;
    font-size: 1.2em;
}

/* citeproc-py often uses these classes */
.csl-entry {
    margin-bottom: 0.8em;
    line-height: 1.4;
}

.csl-left-margin {
    /* Styles for hanging indent if used by CSL */
    /* Example: */
    /* float: left; */
    /* width: 2em; */
    /* text-align: right; */
    /* padding-right: 0.5em; */
}

.csl-right-inline {
    /* Styles for hanging indent if used by CSL */
    /* Example: */
    /* margin-left: 2.5em; */
    /* display: block; */ /* Ensure it takes up space */
}

/* Search Styles */
.search-container {
    margin-top: 1em; /* Space below nav */
    position: relative; /* For positioning results */
}

#search-input {
    padding: 0.5em;
    width: 100%; /* Use full width */
    box-sizing: border-box; /* Include padding and border in width calculation */
    border: 1px solid var(--search-border); /* Use variable */
    border-radius: 4px;
    font-size: 1em;
    background-color: var(--search-bg); /* Use variable */
    color: var(--text-color); /* Use variable */
}

#search-results {
    position: absolute; /* Position below input */
    background-color: var(--search-results-bg); /* Use variable */
    border: 1px solid var(--search-results-border); /* Use variable */
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 4px 4px;
    width: calc(100% - 2px); /* Match input width minus border */
    max-height: 300px; /* Limit height */
    overflow-y: auto; /* Add scroll if needed */
    z-index: 10; /* Ensure it's above other content */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    margin-top: -1px; /* Overlap slightly with input bottom border */
}

#search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#search-results li {
    padding: 0.5em 1em;
    border-bottom: 1px solid var(--border-color); /* Use variable */
}

#search-results li:last-child {
    border-bottom: none;
}

#search-results a {
    text-decoration: none;
    color: var(--link-color); /* Use variable */
    display: block; /* Make the whole item clickable */
}

#search-results a:hover {
    background-color: var(--search-hover-bg); /* Use variable */
}

#search-results p { /* Styling for 'No results' message */
    padding: 0.5em 1em;
    color: var(--footer-text); /* Use variable */
    margin: 0;
}

/* Image centering helper */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Basic Syntax Highlighting CSS (using variables) */
.codehilite { background: var(--code-bg); padding: 0.5em; border: 1px solid var(--code-border); border-radius: 4px; overflow-x: auto; }
/* Note: Pygments theme colors below are NOT using variables yet.
   A full dark theme for code requires a different Pygments CSS or more complex variable setup.
   This provides basic background/border theming for the code block container. */
.codehilite .hll { background-color: #ffffcc }
.codehilite .c { color: #999988; font-style: italic } /* Comment */
.codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.codehilite .k { color: #000000; font-weight: bold } /* Keyword */
.codehilite .o { color: #000000; font-weight: bold } /* Operator */
.codehilite .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.codehilite .c1 { color: #999988; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.codehilite .ge { color: #000000; font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #aa0000 } /* Generic.Error */
.codehilite .gh { color: #999999 } /* Generic.Heading */
.codehilite .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #555555 } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #aaaaaa } /* Generic.Subheading */
.codehilite .gt { color: #aa0000 } /* Generic.Traceback */
.codehilite .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.codehilite .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.codehilite .m { color: #009999 } /* Literal.Number */
.codehilite .s { color: #dd1144 } /* Literal.String */
.codehilite .na { color: #008080 } /* Name.Attribute */
.codehilite .nb { color: #0086B3 } /* Name.Builtin */
.codehilite .nc { color: #445588; font-weight: bold } /* Name.Class */
.codehilite .no { color: #008080 } /* Name.Constant */
.codehilite .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.codehilite .ni { color: #800080 } /* Name.Entity */
.codehilite .ne { color: #990000; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #990000; font-weight: bold } /* Name.Function */
.codehilite .nl { color: #990000; font-weight: bold } /* Name.Label */
.codehilite .nn { color: #555555 } /* Name.Namespace */
.codehilite .nt { color: #000080 } /* Name.Tag */
.codehilite .nv { color: #008080 } /* Name.Variable */
.codehilite .ow { color: #000000; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mf { color: #009999 } /* Literal.Number.Float */
.codehilite .mh { color: #009999 } /* Literal.Number.Hex */
.codehilite .mi { color: #009999 } /* Literal.Number.Integer */
.codehilite .mo { color: #009999 } /* Literal.Number.Oct */
.codehilite .sb { color: #dd1144 } /* Literal.String.Backtick */
.codehilite .sc { color: #dd1144 } /* Literal.String.Char */
.codehilite .sd { color: #dd1144 } /* Literal.String.Doc */
.codehilite .s2 { color: #dd1144 } /* Literal.String.Double */
.codehilite .se { color: #dd1144 } /* Literal.String.Escape */
.codehilite .sh { color: #dd1144 } /* Literal.String.Heredoc */
.codehilite .si { color: #dd1144 } /* Literal.String.Interpol */
.codehilite .sx { color: #dd1144 } /* Literal.String.Other */
.codehilite .sr { color: #009926 } /* Literal.String.Regex */
.codehilite .s1 { color: #dd1144 } /* Literal.String.Single */
.codehilite .ss { color: #990073 } /* Literal.String.Symbol */
.codehilite .bp { color: #999999 } /* Name.Builtin.Pseudo */
.codehilite .vc { color: #008080 } /* Name.Variable.Class */
.codehilite .vg { color: #008080 } /* Name.Variable.Global */
.codehilite .vi { color: #008080 } /* Name.Variable.Instance */
.codehilite .il { color: #009999 } /* Literal.Number.Integer.Long */

/* Styling for post previews on index */
.preview {
    font-size: 0.9em;
    color: var(--preview-text); /* Use variable */
    margin-top: 0.3em;
    margin-bottom: 1em; /* Space between list items */
}

.date {
    font-size: 0.9em;
    color: var(--date-text); /* Use variable */
}

/* Details/Summary Styling */
details {
    border: 1px solid var(--details-border); /* Use variable */
    border-radius: 4px;
    /* margin: 1em 0em; */
    padding: 0.5em 0.5em 0em;
    background-color: var(--details-bg); /* Use variable */
}

summary {
    font-weight: bold;
    padding: 0.5em 1em;
    margin: -0.5em -0.5em 0;
    cursor: pointer;
    background-color: var(--summary-bg); /* Use variable */
    /* border-bottom removed from default state */
}

/* Add border-bottom to summary ONLY when details is closed */
details[open] summary {
    border-bottom: 1px solid var(--details-border);
    margin-bottom: 0.5em;
}

/* 
details > div {
    padding: 1.5em;
}
*/

details[open] {
  padding: 0.5em;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed; /* Or absolute, depending on desired placement */
    bottom: 1em;
    right: 1em;
    padding: 0.5em 0.8em;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    z-index: 100; /* Ensure it's above other content */
}

.theme-toggle:hover {
    opacity: 0.8;
}

/* --- Dark Mode Syntax Highlighting (Pygments Adaptation) --- */
/* Apply dark theme colors when :root has .dark-mode class */
:root.dark-mode .codehilite .hll { background-color: #404040 } /* Highlighted line */
:root.dark-mode .codehilite .c { color: #999999; font-style: italic } /* Comment */
:root.dark-mode .codehilite .err { color: #ff8080; background-color: #4d1f1f } /* Error */
:root.dark-mode .codehilite .k { color: #ffffff; font-weight: bold } /* Keyword */
:root.dark-mode .codehilite .o { color: #ffffff; } /* Operator */
:root.dark-mode .codehilite .cm { color: #999999; font-style: italic } /* Comment.Multiline */
:root.dark-mode .codehilite .cp { color: #cdcd00 } /* Comment.Preproc */
:root.dark-mode .codehilite .c1 { color: #999999; font-style: italic } /* Comment.Single */
:root.dark-mode .codehilite .cs { color: #e5e5e5; font-weight: bold; font-style: italic } /* Comment.Special */
:root.dark-mode .codehilite .gd { color: #ff8080 } /* Generic.Deleted */
:root.dark-mode .codehilite .ge { font-style: italic } /* Generic.Emph */
:root.dark-mode .codehilite .gr { color: #ff0000 } /* Generic.Error */
:root.dark-mode .codehilite .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
:root.dark-mode .codehilite .gi { color: #80ff80 } /* Generic.Inserted */
:root.dark-mode .codehilite .go { color: #888888 } /* Generic.Output */
:root.dark-mode .codehilite .gp { color: #ffffff; font-weight: bold } /* Generic.Prompt */
:root.dark-mode .codehilite .gs { font-weight: bold } /* Generic.Strong */
:root.dark-mode .codehilite .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
:root.dark-mode .codehilite .gt { color: #ff0000 } /* Generic.Traceback */
:root.dark-mode .codehilite .kc { color: #ffffff; font-weight: bold } /* Keyword.Constant */
:root.dark-mode .codehilite .kd { color: #ffffff; font-weight: bold } /* Keyword.Declaration */
:root.dark-mode .codehilite .kn { color: #ffffff; font-weight: bold } /* Keyword.Namespace */
:root.dark-mode .codehilite .kp { color: #ffffff } /* Keyword.Pseudo */
:root.dark-mode .codehilite .kr { color: #ffffff; font-weight: bold } /* Keyword.Reserved */
:root.dark-mode .codehilite .kt { color: #80ffff; font-weight: bold } /* Keyword.Type */
:root.dark-mode .codehilite .m { color: #ff80ff } /* Literal.Number */
:root.dark-mode .codehilite .s { color: #ff8080 } /* Literal.String */
:root.dark-mode .codehilite .na { color: #ffff80 } /* Name.Attribute */
:root.dark-mode .codehilite .nb { color: #80ffff } /* Name.Builtin */
:root.dark-mode .codehilite .nc { color: #ffffff; font-weight: bold } /* Name.Class */
:root.dark-mode .codehilite .no { color: #80ffff } /* Name.Constant */
:root.dark-mode .codehilite .nd { color: #ccc } /* Name.Decorator */
:root.dark-mode .codehilite .ni { color: #ff80ff; font-weight: bold } /* Name.Entity */
:root.dark-mode .codehilite .ne { color: #ff8080; font-weight: bold } /* Name.Exception */
:root.dark-mode .codehilite .nf { color: #ffff80 } /* Name.Function */
:root.dark-mode .codehilite .nl { color: #ffffff } /* Name.Label */
:root.dark-mode .codehilite .nn { color: #ffffff; font-weight: bold } /* Name.Namespace */
:root.dark-mode .codehilite .nt { color: #80ffff; font-weight: bold } /* Name.Tag */
:root.dark-mode .codehilite .nv { color: #ffff80 } /* Name.Variable */
:root.dark-mode .codehilite .ow { color: #ffffff; font-weight: bold } /* Operator.Word */
:root.dark-mode .codehilite .w { color: #cccccc } /* Text.Whitespace */
:root.dark-mode .codehilite .mf { color: #ff80ff } /* Literal.Number.Float */
:root.dark-mode .codehilite .mh { color: #ff80ff } /* Literal.Number.Hex */
:root.dark-mode .codehilite .mi { color: #ff80ff } /* Literal.Number.Integer */
:root.dark-mode .codehilite .mo { color: #ff80ff } /* Literal.Number.Oct */
:root.dark-mode .codehilite .sb { color: #ff8080 } /* Literal.String.Backtick */
:root.dark-mode .codehilite .sc { color: #ff8080 } /* Literal.String.Char */
:root.dark-mode .codehilite .sd { color: #ff8080 } /* Literal.String.Doc */
:root.dark-mode .codehilite .s2 { color: #ff8080 } /* Literal.String.Double */
:root.dark-mode .codehilite .se { color: #ff8080; font-weight: bold } /* Literal.String.Escape */
:root.dark-mode .codehilite .sh { color: #ff8080 } /* Literal.String.Heredoc */
:root.dark-mode .codehilite .si { color: #ffff80 } /* Literal.String.Interpol */
:root.dark-mode .codehilite .sx { color: #80ff80 } /* Literal.String.Other */
:root.dark-mode .codehilite .sr { color: #80ff80 } /* Literal.String.Regex */
:root.dark-mode .codehilite .s1 { color: #ff8080 } /* Literal.String.Single */
:root.dark-mode .codehilite .ss { color: #ff80ff } /* Literal.String.Symbol */
:root.dark-mode .codehilite .bp { color: #80ffff } /* Name.Builtin.Pseudo */
:root.dark-mode .codehilite .vc { color: #ffff80 } /* Name.Variable.Class */
:root.dark-mode .codehilite .vg { color: #ffff80 } /* Name.Variable.Global */
:root.dark-mode .codehilite .vi { color: #ffff80 } /* Name.Variable.Instance */
:root.dark-mode .codehilite .il { color: #ff80ff } /* Literal.Number.Integer.Long */