/* ==========================================================================
   CASPER DARK THEME
   Activated by system prefers-color-scheme:dark (unless overridden)
   or html[data-theme="dark"] for manual toggle.
   Force light with html[data-theme="light"].
   ========================================================================== */

/* ── CSS variables: light defaults ─────────────────────────────────────── */
:root {
    --bg:    #fff;      --text:  #3A4145;  --head:  #2E2E2E;
    --muted: #9EABB3;   --link:  #57A3E8;
    --bdr:   #EBF2F6;   --bdr2:  #E7EEF2;
    --bdr3:  #d5dbde;   --bdr4:  #bfc8cd;
    --code:  #F7FAFB;   --cdbdr: #E3EDF3;  --cdtxt: #4A4A4A;
    --sel:   #D6EDFF;   --dot:   #fff;
    --trans: 0s;
}

/* ── Dark values ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg:    #0d1117;   --text:  #e6edf3;  --head:  #e6edf3;
        --muted: #8b949e;   --link:  #58a6ff;
        --bdr:   #21262d;   --bdr2:  #30363d;
        --bdr3:  #30363d;   --bdr4:  #484f58;
        --code:  #161b22;   --cdbdr: #30363d;  --cdtxt: #c9d1d9;
        --sel:   #1c3a5e;   --dot:   #0d1117;
    }
}
html[data-theme="dark"] {
    --bg:    #0d1117;   --text:  #e6edf3;  --head:  #e6edf3;
    --muted: #8b949e;   --link:  #58a6ff;
    --bdr:   #21262d;   --bdr2:  #30363d;
    --bdr3:  #30363d;   --bdr4:  #484f58;
    --code:  #161b22;   --cdbdr: #30363d;  --cdtxt: #c9d1d9;
    --sel:   #1c3a5e;   --dot:   #0d1117;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { background: var(--bg); transition: background-color var(--trans); }
body { color: var(--text); background: var(--bg);
       transition: background-color var(--trans), color var(--trans); }
::-moz-selection { background: var(--sel); }
::selection      { background: var(--sel); }
h1,h2,h3,h4,h5,h6 { color: var(--head); transition: color var(--trans); }
a { color: var(--link); }

/* ── Blockquote ─────────────────────────────────────────────────────────── */
blockquote { border-left-color: var(--bdr2); }
blockquote p, blockquote small { color: var(--muted); }

/* ── Code ───────────────────────────────────────────────────────────────── */
code, tt {
    background: var(--code);
    border-color: var(--cdbdr);
    color: var(--cdtxt);
    transition: background-color var(--trans), color var(--trans), border-color var(--trans);
}
pre {
    background: var(--code);
    border-color: var(--cdbdr);
    transition: background-color var(--trans), border-color var(--trans);
}
pre code, pre tt {
    color: var(--cdtxt);
    border-color: var(--cdbdr);
    background: none;
}

/* ── Post list (index) ──────────────────────────────────────────────────── */
.post { border-bottom-color: var(--bdr); }
.post:after {
    border-color: var(--bdr2);
    background: var(--dot);
    box-shadow: var(--dot) 0 0 0 5px;
}
.post-title a  { color: var(--head); }
body:not(.post-template) .post-title { color: var(--head); }
.post-meta,
.post-meta a   { color: var(--muted); }
.post-date     { border-left-color: var(--bdr3); }
.post-excerpt p { color: var(--text); }

/* ── Post content page ──────────────────────────────────────────────────── */
.post-footer   { border-top-color: var(--bdr); }
.post-footer h4,
.post-footer h4 a { color: var(--head); }
.post-footer p { color: var(--text); }
.post-footer .share a { color: var(--muted); }
.post-footer .share a:hover { color: var(--text); }
.author-meta,
.author-meta a { color: var(--muted); }
.author-meta a:hover { color: var(--text); }
.author-bio    { color: var(--muted); }

/* The little circular RSS button between post and footer */
.subscribe {
    border-color: var(--bdr);
    background: var(--dot);
}
.subscribe:before { color: var(--muted); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination,
.pagination a   { color: var(--muted); }
.older-posts,
.newer-posts    { border-color: var(--bdr4); }
.older-posts:hover,
.newer-posts:hover { color: var(--text); border-color: var(--bdr3); }
.extra-pagination { border-bottom-color: var(--bdr); }
.extra-pagination:after {
    border-color: var(--bdr2);
    background: var(--dot);
    box-shadow: var(--dot) 0 0 0 5px;
}

/* ── Index page header (simple title bar, no cover image) ───────────────── */
.index-header {
    background: #f5f8fa;
    border-bottom: #EBF2F6 1px solid;
    margin-bottom: 5rem;
    transition: background-color var(--trans), border-color var(--trans);
}
.index-header .main-nav {
    margin-bottom: 0;
}
.index-header-title {
    text-align: center;
    padding: 1.5rem 0 2.5rem;
}
.index-header-title h1 {
    font-family: "Open Sans", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -1px;
    color: rgba(0,0,0,0.8);
    margin: 0;
    transition: color var(--trans);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .index-header { background: var(--bg); border-color: var(--bdr); }
    html:not([data-theme="light"]) .index-header-title h1 { color: var(--head); }
}
html[data-theme="dark"] .index-header { background: var(--bg); border-color: var(--bdr); }
html[data-theme="dark"] .index-header-title h1 { color: var(--head); }

/* ── Navigation buttons on non-overlay navs ─────────────────────────────── */
/* On pages without a cover image the nav isn't "overlay", so the default
   rgba(0,0,0,0.1) background becomes invisible on a dark page background.
   These rules restore visibility in dark mode. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .main-nav:not(.overlay) .back-button,
    html:not([data-theme="light"]) .main-nav:not(.overlay) .social-button,
    html:not([data-theme="light"]) .main-nav:not(.overlay) button.social-button {
        background: rgba(255,255,255,0.07);
        color: #e6edf3;
        border-color: rgba(255,255,255,0.12);
    }
}
html[data-theme="dark"] .main-nav:not(.overlay) .back-button,
html[data-theme="dark"] .main-nav:not(.overlay) .social-button,
html[data-theme="dark"] .main-nav:not(.overlay) button.social-button {
    background: rgba(255,255,255,0.07);
    color: #e6edf3;
    border-color: rgba(255,255,255,0.12);
}

/* ── About page ─────────────────────────────────────────────────────────── */
.about-toggle-btn {
    position: fixed;
    top: 35px;
    right: 40px;
    z-index: 100;
}
.about-toggle-btn button.social-button {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.12);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .about-toggle-btn button.social-button {
        background: rgba(255,255,255,0.07);
        color: #e6edf3;
        border-color: rgba(255,255,255,0.12);
    }
}
html[data-theme="dark"] .about-toggle-btn button.social-button {
    background: rgba(255,255,255,0.07);
    color: #e6edf3;
    border-color: rgba(255,255,255,0.12);
}
.about-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.about-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.about-icons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.about-email {
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    color: var(--muted);
    margin: 0;
}
/* GitHub brand color is near-black — invisible on dark bg on hover */
a.logo-github:hover { color: #2b3137 !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) a.logo-github:hover { color: #e6edf3 !important; }
}
html[data-theme="dark"] a.logo-github:hover { color: #e6edf3 !important; }

/* Blog icon hover */
a.logo-blog:hover { color: #2b3137 !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) a.logo-blog:hover { color: #e6edf3 !important; }
}
html[data-theme="dark"] a.logo-blog:hover { color: #e6edf3 !important; }

/* ── Theme toggle button ────────────────────────────────────────────────── */
button.social-button {
    background: rgba(0,0,0,0.1);
    border: transparent 1px solid;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0 7px;
}
.theme-icon { display: block; pointer-events: none; }
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: block; }

/* Show sun icon (to switch back to light) when in dark mode */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-icon-sun  { display: block; }
    html:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
html[data-theme="dark"] .theme-icon-sun  { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }