/* --- JetBrains Mono Font --- */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --- EB Garamond Font --- */
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Dark Mode (Default) */
    --primary-color: #e5e7eb;
    --text-main: #e5e7eb;
    --text-light: #9ca3af;
    --text-muted: #d1d5db;
    --bg-body: #111827;
    --bg-toc: #010409;

    /* Dimensions */
    --sidebar-width-desktop: 350px;
    --content-max-width: 600px;
    --header-height: 60px;

    /* Transitions */
    --theme-transition-time: 0.3s;
    --font-main: 'EB Garamond', Georgia, serif;
    --font-code: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
    /* Light Mode */
    --primary-color: #1f2937;
    --text-main: #1f2937;
    --text-light: #9ca3af;
    --text-muted: #6b7280;
    --bg-body: #fafafa;
    --bg-toc: #e8eaed;
}

/* --- Reset & Base Typography --- */
* {
    box-sizing: border-box;
    transition: color var(--theme-transition-time) ease,
        background-color var(--theme-transition-time) ease,
        filter var(--theme-transition-time) ease,
        transform var(--theme-transition-time) ease,
        margin-left var(--theme-transition-time) ease,
        width var(--theme-transition-time) ease,
        stroke var(--theme-transition-time) ease,
        fill var(--theme-transition-time) ease;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: 1.25rem;
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    /* Override global transition for instant hover response */
    transition: color var(--theme-transition-time) ease,
        background-color var(--theme-transition-time) ease,
        filter var(--theme-transition-time) ease;
}

#content a {
    color: var(--hue-2);
}

/* --- Header (Title & Toggle) --- */
#top-bar {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

#menu-toggle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--theme-transition-time) ease,
        left 0.3s ease,
        stroke var(--theme-transition-time) ease,
        fill var(--theme-transition-time) ease;
}


#menu-toggle:hover {
    color: var(--primary-color);
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--theme-transition-time) ease;
}

#theme-toggle:hover {
    color: var(--primary-color);
}

.book-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light);
    /* Lighter color request */
    letter-spacing: -0.01em;
}

.book-title:hover {
    color: var(--text-light);
}

/* Mobile: Smaller book title */
@media screen and (max-width: 400px) {
    .book-title {
        font-size: 1rem;
    }
}

/* --- Sidebar (TOC) --- */

/* Wide: nav is absolutely positioned so it doesn't inflate page height */
@media screen and (min-width: 1000px) {
    .main-wrapper {
        position: relative;
        overflow-x: clip;
    }

    nav {
        position: absolute;
        top: 0;
        left: calc(-1 * var(--sidebar-width-desktop));
        width: var(--sidebar-width-desktop);
        min-height: 100%;
        z-index: 1;
        background-color: var(--bg-toc);
        transition: left 0.3s ease,
            background-color var(--theme-transition-time) ease;
    }

    body.sidebar-open nav {
        left: 0;
    }

    .page-content {
        margin-left: 0;
        transition: margin-left 0.3s ease;
    }

    body.sidebar-open .page-content {
        margin-left: var(--sidebar-width-desktop);
    }

    body.sidebar-open #menu-toggle {
        left: calc(-1 * var(--sidebar-width-desktop));
    }
}

/* Narrow: nav overlays as fixed panel at full width, nothing shifts */
@media screen and (max-width: 999px) {
    nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: var(--bg-toc);
        overflow-y: auto;
        z-index: 900;
        transform: translateX(-100%);
        transition: transform 0.3s ease,
            background-color var(--theme-transition-time) ease;
    }

    body.sidebar-open nav {
        transform: translateX(0);
    }
}

/* TOC header — pill toggle lives here */
.toc-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: var(--header-height);
    padding: 0 1.5rem;
}

#nav-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-light);
    align-items: center;
    justify-content: center;
    transition: color var(--theme-transition-time) ease;
}

#nav-close:hover {
    color: var(--primary-color);
}

body.sidebar-open #nav-close {
    display: flex;
    margin-right: auto;
}

/* TOC Content Styling */
#toc {
    padding: 1rem 1.75rem 2rem;
}

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

#toc a {
    display: block;
    font-size: 1.1rem;
    color: var(--text-muted);
    text-decoration: none;
    /* padding: 0.25rem 0; */
}

#toc a.toc-heart-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


#toc a:hover {
    color: var(--primary-color);
}

#toc .toc-current {
    color: var(--text-main);
    font-weight: 600;
}

/* Nested TOC */
#toc ul.sectlevel2 {
    padding-left: 1.25rem;
    border-left: 1px solid var(--text-light);
}

/* --- Main Content Layout --- */
.layout-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

@media screen and (max-width: 600px) {
    .layout-container {
        padding: 2rem 10%;
    }
}

@media screen and (max-width: 999px) {
    #toc {
        max-width: var(--sidebar-width-desktop);
        margin: 0 auto;
    }

    .toc-header {
        justify-content: center;
        position: relative;
    }

    body.sidebar-open #nav-close {
        position: absolute;
        left: 1.5rem;
        margin-right: 0;
    }
}

/* --- Typography & Content --- */
h1,
h2,
h3,
h4 {
    color: var(--text-main);
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 1.75rem;
    border-bottom: none;
}

h2 {
    font-size: 1.4rem;
}

p {
    margin-bottom: 1.5rem;
}

#content p {
    color: var(--text-main);
}

/* --- Footnotes --- */
#footnotes {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--text-light);
    font-size: 0.9rem;
    color: var(--text-main);
}

#footnotes hr {
    display: none;
}

.footnote,
sup.footnote {
    color: var(--text-muted);
}

/* --- Nav Footer --- */
.nav-footer {
    margin-top: 5rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-link {
    display: flex;
    /* Requirement: Horizontal alignment */
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    /* Requirement: Remove blue color */
    /* font-size: 0.95rem; */
    cursor: pointer;
}

/* Specific link alignments */
.nav-link.prev-link {
    text-align: left;
}

.nav-link.next-link {
    flex-direction: row;
}

.nav-link:hover {
    color: var(--text-main);
    /* Darker on hover, not blue */
}

/* Ensure links inside inherit the color */
.nav-link a {
    font-weight: 500;
}

.nav-link a:hover {
    text-decoration: none;
}

/* Back to Top Button Styling */
.nav-link.back-to-top {
    justify-content: center;
}

.nav-link.back-to-top button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Images, Tables & Code Listings --- */
.imageblock,
.tableblock,
.listingblock,
.mathblock,
.section-title,
.chapter-title {
    scroll-margin-top: var(--header-height);
}

.imageblock .content {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.imageblock .content svg {
    max-width: 100%;
    height: auto;
}

.imageblock .content img {
    filter: invert(1);
}

[data-theme="light"] .imageblock .content img {
    filter: invert(0);
}

.imageblock .title,
.tableblock .title,
.listingblock .title,
.mathblock .title {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* --- Footer --- */
.site-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    /* font-family: 'Courier New', Courier, monospace; */
}

.site-footer p {
    margin-top: 0;
    margin-bottom: 0;
}

.nav-footer a,
.site-footer a {
    transition: color 0s ease;
}

.layout-container p code {
    font-family: var(--font-code);
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

[data-theme="light"] .layout-container p code {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.listingblock code {
    line-height: 1.4;
}

/* --- Tables --- */
.tableblock table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.tableblock th,
.tableblock td {
    border: 2px solid var(--text-main);
    padding: 0.25rem;
    color: var(--text-main);
}

.tableblock.halign-left {
    text-align: left;
}

.tableblock.valign-top {
    vertical-align: top;
}

.tableblock p.tableblock {
    margin: 0;
}

.mathblock .math-content {
    display: flex;
    justify-content: center;
    /* font-size: 1.5rem; */
}