/* --- DEFAULTS (Light Mode) --- */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --heading-color: #000000;
    --accent-color: #0070f3;
    --meta-color: #666666;
    --border-color: #eaeaea;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* --- DARK MODE OVERRIDES --- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #111111;
        --text-color: #e0e0e0;
        --heading-color: #ffffff;
        --accent-color: #4da3ff;
        --meta-color: #a0a0a0;
        --border-color: #333333;
    }
    
    /* Optional: Dim images slightly in dark mode so they aren't blinding */
    img {
        opacity: .85;
        transition: opacity 0.5s ease-in-out;
    }
    img:hover {
        opacity: 1;
    }
}

/* Rest of your styling uses the variables */
header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

h1 { font-size: 2.2rem; margin-bottom: 0.5rem; color: var(--heading-color); }
a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }

.meta { color: var(--meta-color); font-size: 0.9rem; margin-top: 0; }
.post-list { list-style: none; padding: 0; }
.post-list li { margin-bottom: 1.5rem; }
.post-list h3 { margin: 0 0 0.5rem 0; }

nav ul {
    display: flex;
    list-style: none;
    padding: 0; 
    gap: 20px;
}

nav a { 
    color: var(--heading-color);
    text-decoration: none;
    font-weight: bold;
}


/* Generated by Pandoc
*  Since pandoc doesn't support different syntax-highlighting
*  for light and dark themes. This manually overwrites the
*  light them when dark is prefered.
*
*  Colours are taken from the theme "CarbonFox" from the 
*  neovim package https://github.com/EdenEast/nightfox.nvim.
*/
@media (prefers-color-scheme: dark) {
    html { -webkit-text-size-adjust: 100%; }
    pre > code.sourceCode { white-space: pre; position: relative; }
    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
    pre > code.sourceCode > span:empty { height: 1.2em; }
    .sourceCode { overflow: visible; }
    code.sourceCode > span { color: inherit; text-decoration: inherit; }
    div.sourceCode { margin: 1em 0; }
    pre.sourceCode { margin: 0; }
    @media screen {
    div.sourceCode { overflow: auto; }
    }
    @media print {
    pre > code.sourceCode { white-space: pre-wrap; }
    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
    }
    pre.numberSource code
      { counter-reset: source-line 0; }
    pre.numberSource code > span
      { position: relative; left: -4em; counter-increment: source-line; }
    pre.numberSource code > span > a:first-child::before
      { content: counter(source-line);
        position: relative; left: -1em; text-align: right; vertical-align: baseline;
        border: none; display: inline-block;
        -webkit-touch-callout: none; -webkit-user-select: none;
        -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none;
        padding: 0 4px; width: 4em;
        background-color: #282828;
        color: #7b7c7e;
      }
    pre.numberSource { margin-left: 3em; border-left: 1px solid #7b7c7e;  padding-left: 4px; }
    div.sourceCode
      { color: #f2f4f8; background-color: --bg-color; }
    @media screen {
    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
    }
    code span.al { color: #ee5396; font-weight: bold; } /* Alert */
    code span.an { color: #dfdfe0; font-weight: bold; } /* Annotation */
    code span.at { color: #78a9ff; } /* Attribute */
    code span.bn { color: #ee5396; } /* BaseN */
    code span.bu { color: #33b1ff; } /* BuiltIn */
    code span.cf { color: #be95ff; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #25be6a; } /* Char */
    code span.cn { color: #08bdba; } /* Constant */
    code span.co { color: #7b7c7e; font-style: italic; } /* Comment */
    code span.do { color: #7b7c7e; font-style: italic; } /* Documentation */
    code span.dt { color: #33b1ff; } /* DataType */
    code span.dv { color: #ee5396; } /* DecVal */
    code span.er { color: #ee5396; font-weight: bold; } /* Error */
    code span.ex { color: #be95ff; font-weight: bold; } /* Extension */
    code span.fl { color: #ee5396; } /* Float */
    code span.fu { color: #33b1ff; } /* Function */
    code span.im { color: #be95ff; } /* Import */
    code span.kw { color: #be95ff; font-weight: bold; } /* Keyword */
    code span.op { color: #f2f4f8; } /* Operator */
    code span.ot { color: #f2f4f8; } /* Other */
    code span.pp { color: #be95ff; } /* Preprocessor */
    code span.ss { color: #25be6a; font-weight: bold; } /* SpecialString */
    code span.st { color: #25be6a; } /* String */
    code span.va { color: #f2f4f8; } /* Variable */
    !important
}