/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

/* maple-mono-latin-400-normal */
@font-face {
  font-family: 'Maple Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff) format('woff');
}

/* Dark mode theme - Ayu Dark color scheme */
body.dark-mode {
    /* Terminal.css Colors */
    --background-color: #10141C;  /* ayu: editor.bg */
    --font-color: #BFBDB6;  /* ayu: editor.fg */
    --invert-font-color: #10141C;  /* ayu: editor.bg */
    --primary-color: #59C2FF;  /* ayu: entity */
    --secondary-color: #6C7380;  /* ayu: gutter.active */
    --error-color: #D95757;  /* ayu: common.error */
    --progress-bar-background: #161A24;  /* ayu: editor.line */
    --progress-bar-fill: #BFBDB6;  /* ayu: editor.fg */
    --code-bg-color: #0D1017;  /* ayu: ui.bg */
    --block-background-color: #141821;  /* ayu: ui.panel.bg */
    --border-muted: rgba(108, 115, 128, 0.2);  /* ayu: gutter.active with opacity */
    --color-muted: #3D4350;  /* midpoint between bg and secondary */

    /* TypeIt Colors */
    --ti-cursor-color: var(--font-color);
}

/* Mirage mode theme - Ayu Mirage color scheme */
body.mirage-mode {
    /* Terminal.css Colors */
    --background-color: #242936;  /* ayu: editor.bg */
    --font-color: #FCFCFC;  /* Light off-white */
    --invert-font-color: #242936;  /* ayu: editor.bg */
    --primary-color: #73D0FF;  /* ayu: entity */
    --secondary-color: #8A9199;  /* ayu: gutter.active */
    --error-color: #FF6666;  /* ayu: common.error */
    --progress-bar-background: #1A1F29;  /* ayu: editor.line */
    --progress-bar-fill: #FCFCFC;  /* Light off-white */
    --code-bg-color: #1F2430;  /* ayu: ui.bg */
    --code-text-color: #B8CFE6;  /* ayu: comment */
    --block-background-color: #282E3B;  /* ayu: ui.panel.bg */
    --border-muted: rgba(138, 145, 153, 0.2);  /* ayu: gutter.active with opacity */
    --color-muted: #575D67;  /* midpoint between bg and secondary */

    /* TypeIt Colors */
    --ti-cursor-color: var(--font-color);
}

/* Light mode theme - Ayu Light color scheme */
body.light-mode {
    /* Terminal.css Colors */
    --background-color: #FCFCFC;  /* ayu: editor.bg */
    --font-color: #5C6166;  /* ayu: editor.fg */
    --invert-font-color: #FCFCFC;  /* ayu: editor.bg */
    --primary-color: #399EE6;  /* ayu: entity */
    --secondary-color: #828E9F;  /* ayu: gutter.active */
    --error-color: #E65050;  /* ayu: common.error */
    --progress-bar-background: #F8F9FA;  /* ayu: ui.bg */
    --progress-bar-fill: #5C6166;  /* ayu: editor.fg */
    --code-bg-color: #F8F9FA;  /* ayu: ui.bg */
    --block-background-color: #FAFAFA;  /* ayu: ui.panel.bg */
    --border-muted: rgba(130, 142, 159, 0.2);  /* ayu: gutter.active with opacity */
    --color-muted: #B8C2CE;  /* midpoint between bg and secondary */

    /* TypeIt Colors */
    --ti-cursor-color: var(--font-color);
}

body {
    font-family: "Recursive", var(--font-stack);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "CASL" 0.25,
        "CRSV" 0.5,
        "MONO" 1;
}

/* Apply Maple Mono to all code elements (incl. docutils inline literals, which render as span.docutils.literal) */
code, pre, tt, kbd, samp, .docutils.literal {
  font-family: 'Maple Mono', var(--mono-font-stack);
}

/* ============================================================================
   LAYOUT & STRUCTURE
   ============================================================================ */

/* Header and footer separators */
.header-separator {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0.5em;
    margin-bottom: 0;
}

.banner-separator {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
}

main {
    margin-top: 2em;
}

footer {
    hr {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}


/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* All h1 tags with dotted underline */
h1 {
    display: inline-block;
    position: relative;
    border-bottom: 3px dotted var(--secondary-color);
    padding-bottom: 0.5em;
    margin-top: 0;
    margin-bottom: 1em;

    &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        border-bottom: 3px dotted var(--secondary-color);
    }
}


/* ============================================================================
   INDEX PAGE
   ============================================================================ */

hr {
    margin: calc(var(--global-space) * 2) 0;
}

/* Site banner ASCII art */
.site-banner {
    text-align: center;
    margin: 0;
    padding: 2em 0;
    font-size: 0.7em;
    line-height: 1.2;
    color: var(--primary-color);
    background-color: rgba(128, 128, 128, 0.1);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border: none;
    white-space: pre !important;
    overflow: hidden;
    word-wrap: normal;
    word-break: normal;
}

/* Show desktop banner on larger screens */
.site-banner-desktop {
    display: block;
}

.site-banner-mobile {
    display: none;
}

/* Switch to mobile banner on smaller screens */
@media screen and (max-width: 1220px) {
    .site-banner-desktop {
        display: none;
    }

    .site-banner-mobile {
        display: block;
        font-size: 1.6vw;
    }
}

/* Two-column layout for article listings on index page */
.article-listing {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2em;

    h1 {
        padding-top: 0;
    }

    .post-count {
        float: right;
        color: var(--secondary-color);
        font-size: 0.9em;
    }

    /* Responsive: stack on smaller screens */
    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

.article-meta-column {
    font-size: 0.9em;
}

/* Align with content, not title - offset by h1 height + margins */
@media screen and (min-width: 769px) {
    .article-meta-column {
        margin-top: 4em;
    }
}

.article-meta {
    display: grid;
    grid-template-columns: auto;
    gap: 0.5em;
}

/* Mobile: 2-column grid — dates stack left, tags fill right */
@media screen and (max-width: 768px) {
    .article-meta {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        gap: 0;
    }

    .article-meta .meta-item {
        border: 1px solid var(--secondary-color);
        border-right: none;
        border-bottom: none;
        background-color: var(--block-background-color);
        padding: 1em;
    }

    /* Date items get bottom border; remove top on stacked items to avoid doubling */
    .article-meta .meta-item:not(.meta-item-tags) {
        border-bottom: 1px solid var(--secondary-color);
    }

    .article-meta .meta-item:not(.meta-item-tags):not(:first-child) {
        border-top: none;
    }

    /* Tags: pin to right column, span all date rows */
    .article-meta .meta-item-tags {
        grid-column: 2 / 3;
        grid-row: 1 / -1;
        border-right: 1px solid var(--secondary-color);
        border-bottom: 1px solid var(--secondary-color);
    }

    /* Single item (no tags) spans full width */
    .article-meta .meta-item:only-child {
        grid-column: 1 / -1;
        border-right: 1px solid var(--secondary-color);
    }
}

/* AI disclaimer styling */
.meta-item-ai {
    grid-column: 1 / -1 !important;
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.article-meta-column .terminal-prompt {
    font-weight: 600;
}

.article-content-column {
    h2 {
        margin-top: 0;
    }
}

.article-summary {
    margin: 1em 0;
}

/* Page metadata (for pages, not articles) */
.page-meta {
    margin-bottom: 1em;
    font-size: 0.9em;

    .terminal-prompt {
        font-weight: 600;
    }
}


/* ============================================================================
   ARTICLE PAGE
   ============================================================================ */

/* Article page layout - same two-column grid as index page */
.article-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2em;
    margin-top: 1em;

    /* Responsive: stack on smaller screens */
    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

.article-main {
    max-width: 100%;
}

/* Table of contents styling */
.article-toc {
    font-size: 0.9em;
    color: var(--font-color);
    margin-top: 2em;
    position: sticky;
    top: 20px;

    h3 {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    ul {
        margin-top: 0;
    }
}

/* Markdown-style headings with # signs for article content */
.article-content {
    h1::before {
        content: "# ";
        color: var(--secondary-color);
    }

    h2 {
        font-weight: 700;
        margin-top: 2em;
        margin-bottom: 1.4em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid var(--secondary-color);

        &::before {
            content: "## ";
            color: var(--secondary-color);
        }
    }

    h3 {
        font-weight: 700;
        margin-top: 1.5em;
        margin-bottom: 1.4em;

        &::before {
            content: "### ";
            color: var(--secondary-color);
        }
    }

    h4 {
        font-weight: 700;
        margin-top: 1.25em;
        margin-bottom: 1.4em;

        &::before {
            content: "#### ";
            color: var(--secondary-color);
        }
    }

    h5 {
        font-weight: 700;
        margin-top: 1em;
        margin-bottom: 1.4em;

        &::before {
            content: "##### ";
            color: var(--secondary-color);
        }
    }

    h6 {
        font-weight: 700;
        margin-top: 1em;
        margin-bottom: 1.4em;

        &::before {
            content: "###### ";
            color: var(--secondary-color);
        }
    }
}


/* ============================================================================
   TAG/CATEGORY PAGES
   ============================================================================ */

/* Two-column layout for tag/category article lists */
.article-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    margin: 2em 0;

    .article-date {
        padding: 0.25em 2em 0.25em 0;
        color: var(--secondary-color);
    }

    .article-title {
        padding: 0.25em 0;
    }

    .year-header {
        grid-column: 1 / -1;
        font-weight: bold;
        font-size: 1.2em;
        padding: 0.5em 0 0.25em 0;
        color: var(--primary-color);
    }

    .year-separator {
        grid-column: 1 / -1;
        height: 1.5em;
    }
}

.article-list-item {
    display: contents;
}


/* ============================================================================
   PROJECTS PAGE
   ============================================================================ */

/* Project grid for displaying admonitions in a responsive grid */
.project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    margin: 2em 0;

    /* 2x2 grid on larger screens */
    @media screen and (min-width: 769px) {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Remove vertical margins from admonitions inside grid (gap handles spacing) */
    .admonition {
        margin-top: 0;
        margin-bottom: 0;
    }
}


/* ============================================================================
   CONTENT STYLES (shared by article and page templates)
   ============================================================================ */

/* Admonitions using terminal-card style */
.admonition {
    margin: 1.5em 0;
    border: 1px solid var(--secondary-color);
    padding: calc(var(--global-space) * 1.5) var(--global-space) calc(var(--global-space) * 0.5) var(--global-space);

    & > *:last-child {
        margin-bottom: 0;
    }

    .admonition-title {
        color: var(--font-color);
        padding: 0.5em 1em;
        margin: calc(-1.5 * var(--global-space)) calc(-1 * var(--global-space)) var(--global-space) calc(-1 * var(--global-space));
        font-weight: 600;
        border-bottom: 1px solid var(--secondary-color);
    }

    /* Images inside admonitions should be full width */
    img {
        max-width: 100%;
    }

    /* Colored admonition types */
    &.note,
    &.seealso {
        border-color: #7A9BBE;
        background-color: rgba(122, 155, 190, 0.1);

        .admonition-title {
            border-bottom-color: #7A9BBE;
            color: #7A9BBE;
        }
    }

    &.warning,
    &.attention,
    &.caution {
        border-color: #C9A66B;
        background-color: rgba(201, 166, 107, 0.1);

        .admonition-title {
            border-bottom-color: #C9A66B;
            color: #C9A66B;
        }
    }

    &.danger,
    &.error {
        border-color: #C98888;
        background-color: rgba(201, 136, 136, 0.1);

        .admonition-title {
            border-bottom-color: #C98888;
            color: #C98888;
        }
    }

    &.tip,
    &.hint,
    &.important {
        border-color: #88AC88;
        background-color: rgba(136, 172, 136, 0.1);

        .admonition-title {
            border-bottom-color: #88AC88;
            color: #88AC88;
        }
    }
}

/* Blockquotes with lighter text color */
.terminal blockquote {
    color: var(--secondary-color);
    font-style: italic !important;
}

/* Inline code (tt elements and docutils inline literals, which render as span.docutils.literal) with background */
tt, .docutils.literal {
    background-color: var(--code-bg-color);
    padding: 0.2em 0.25em;
    border-radius: 3px;
    border: 1px solid var(--border-muted);
    font-size: 0.9em;
}

/* Code blocks with muted border and subtle background */
pre {
    border: 1px solid var(--border-muted);
    background-color: var(--code-bg-color);
    padding-left: calc(var(--global-space) * 2);
    font-size: 0.9em;

    code {
        background-color: var(--code-bg-color);

        /* Make monospace fonts the same weight as proportional fonts */
        font-size: 0.9em;
    }
}

/* Normalize table-based code blocks (with line numbers) */
div.highlight {
    /* Remove any default borders/spacing from the highlight container */
    border: none;
    padding: 0;
    margin: 0;
    position: relative;

    /* Set base text color for syntax-highlighted code */
    pre {
        color: var(--code-text-color, inherit);
    }

    table {
        /* Remove table spacing and borders */
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin: 0;
        border: none !important;
    }

    tr {
        border: none !important;
    }

    td.linenos {
        /* Line numbers column styling */
        padding: var(--global-space);
        min-width: 4em;
        border: none !important;
        background-color: var(--code-bg-color);
        vertical-align: top;

        pre {
            /* Reset pre styles for line numbers */
            border: none;
            padding: 0;
            margin: 0;
            background-color: transparent;
            color: var(--secondary-color);
            text-align: right;
            line-height: inherit;
        }
    }

    td.code {
        /* Code column should take remaining space */
        width: 100%;
        padding: 0;
        border: none !important;
        vertical-align: top;

        pre {
            /* Match the standalone pre styling */
            border: 1px solid var(--border-muted);
            background-color: var(--code-bg-color);
            padding-left: calc(var(--global-space) * 2);
            margin: 0;
            line-height: inherit;
        }
    }
}

/* Copy button for code blocks */
.code-copy-button {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    padding: 0.25em 0.75em;
    font-size: 0.8em;
    background-color: var(--code-bg-color);
    border: 1px solid var(--border-muted);
    color: var(--secondary-color);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-family: inherit;
    opacity: 0.7;

    &:hover {
        opacity: 1;
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    &.copied {
        color: #88AC88;
        border-color: #88AC88;
    }
}

/* Fix list item formatting when RST generates p tags inside li
   RST creates p.first tags when there's a blank line between the list marker
   and its content. By default, this renders the text below the list number.
   We display it inline to keep it on the same line, then add padding below
   to separate it from subsequent paragraphs. Subsequent paragraphs are indented
   to align with the first paragraph's text. */
ol li,
ul li {
    p.first {
        display: inline;
        margin: 0;

        &::after {
            content: "";
            display: block;
            padding-bottom: 0.5em;
        }
    }

    p:not(.first) {
        margin-left: 1.5em;
    }
}

/* Images narrower than text with centered alignment */
img {
    max-width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--global-line-height);
}

/* Figure captions and legends - RST generates div.figure, p.caption, div.legend
   rather than HTML5 semantic figure/figcaption elements */
.figure {
    max-width: 85%;
    margin: 2em auto;
    text-align: center;

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

    .caption {
        color: var(--secondary-color);
        text-align: center;
        font-size: 0.9em;
        margin: 1em 0 0.5em 0;
        font-style: italic;

        em {
            font-style: normal;
            color: var(--secondary-color);
        }
    }

    .legend {
        color: var(--font-color);
        text-align: center;
        font-size: 0.85em;
        margin: 0.5em 0 0 0;
    }
}

/* Definition lists with bold titles and spacing between entries */
dt {
    font-weight: bold;
    margin-top: 1em;
}

dd {
    margin-left: 1em;
    margin-bottom: 1em;
}


/* ============================================================================
   AI USE DISCLAIMER
   ============================================================================ */

.ai-disclaimer {
    background-color: var(--block-background-color);

    ul {
        margin-top: 0.5em;
        margin-left: 0;
        padding-left: 0;
    }

    li {
        display: flex;
        align-items: baseline;
        margin: 0;
        padding: 0;

        &::before,
        &::after {
            content: none !important;
        }

        &.inactive {
            opacity: 0.5;
            color: var(--secondary-color);
        }

        .checkbox {
            margin-right: 0.5em;
            flex-shrink: 0;
        }

        .checkbox-icon {
            width: 0.7em;
            height: 0.7em;
        }
    }

    /* When followed by context, remove bottom margin and border */
    &:has(+ .ai-disclaimer-context) {
        margin-bottom: 0;
        border-bottom: none;
    }
}

.ai-disclaimer-context {
    background-color: var(--block-background-color);
    border: 1px solid var(--secondary-color);
    border-top: none;
    margin: 0 0 1.5em 0;
    padding: var(--global-space);
    font-size: 0.9em;
}

/* ============================================================================
   GIT HISTORY
   ============================================================================ */

.admonition.git-history {
    grid-column: 1 / -1;
    border-color: var(--color-muted);

    .admonition-title {
        border-bottom-color: var(--color-muted);
        color: var(--color-muted);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9em;

        td {
            padding: 0.15em 0;
            border: none;
            vertical-align: top;
        }

        .commit-date {
            white-space: nowrap;
            padding-right: 1.5em;
            color: var(--secondary-color);
        }

        .commit-message a {
            color: var(--secondary-color);
            font-weight: 600;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        .commit-body {
            margin: 0.25em 0 0 0;
            color: var(--secondary-color);
            font-size: 0.9em;
        }
    }
}

/* Footnote styling with muted colors */
a.footnote-reference {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.85em;
    vertical-align: super;

    &:hover {
        color: var(--primary-color);
    }
}

.footnote {
    display: flex;
    gap: 0.5em;
    align-items: baseline;
    color: var(--secondary-color);
    font-size: 0.9em;
    margin-top: 2em;

    p {
        color: var(--secondary-color);
        margin: 0;
    }

    .label {
        color: var(--secondary-color);
        white-space: nowrap;
        flex-shrink: 0;
    }

    td {
        border: none;
        color: var(--secondary-color);
    }

    em {
        color: var(--secondary-color);
        font-style: italic;
        font-size: inherit;
    }
}