/* ==========================================================================
   Academic Pages - Pre-compiled CSS
   Based on Minimal Mistakes theme
   ========================================================================== */

/* CSS Variables - Light Theme */
:root {
    --global-base-color: #2f7f93;
    --global-bg-color: #fff;
    --global-footer-bg-color: #f2f3f3;
    --global-border-color: #e8e8e8;
    --global-dark-border-color: #bdc1c4;
    --global-code-background-color: #fafafa;
    --global-code-text-color: #333;
    --global-fig-caption-color: #666;
    --global-link-color: #2196F3;
    --global-link-color-hover: #1565C0;
    --global-link-color-visited: #64B5F6;
    --global-masthead-link-color: #333;
    --global-masthead-link-color-hover: #5c5c5c;
    --global-text-color: #333;
    --global-text-color-light: #7a8288;
    --global-thead-color: #e8e8e8;
}

/* CSS Variables - Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --global-base-color: #0ea1c5;
        --global-bg-color: #000;
        --global-footer-bg-color: #000;
        --global-border-color: #333;
        --global-dark-border-color: #222;
        --global-code-background-color: #1a1a1a;
        --global-code-text-color: #e0e0e0;
        --global-fig-caption-color: #999;
        --global-link-color: #0ea1c5;
        --global-link-color-hover: #0a7a96;
        --global-link-color-visited: #4dc4e0;
        --global-masthead-link-color: #fff;
        --global-masthead-link-color-hover: #0ea1c5;
        --global-text-color: #fff;
        --global-text-color-light: #999;
        --global-thead-color: #222;
    }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { box-sizing: border-box; background-color: var(--global-bg-color); font-size: 16px; scroll-behavior: smooth; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }
body { margin: 0; color: var(--global-text-color); background-color: var(--global-bg-color); font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; line-height: 1.5; padding: 60px 0 0; display: flex; flex-direction: column; min-height: 100vh; }

::selection { color: #fff; background: #0ea1c5; }
::-moz-selection { color: #fff; background: #0ea1c5; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

/* Typography */
h1, h2, h3, h4, h5, h6 { margin: 2em 0 0.5em; line-height: 1.2; font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-weight: bold; }
h1 { margin-top: 0; font-size: 1.563em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1em; }
h4, h5, h6 { font-size: 0.75em; }
small, .small { font-size: 0.75em; }
p { margin-bottom: 1.3em; }
ul li, ol li { margin-bottom: 0.5em; }
li ul, li ol { margin-top: 0.5em; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

/* Links */
a { color: var(--global-link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { outline: thin dotted var(--global-link-color); }

/* Images */
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
.icon { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }

/* Code */
tt, code, kbd, samp, pre { font-family: Monaco, Consolas, "Lucida Console", monospace; }
pre { overflow-x: auto; margin: 0 0 1.3em; padding: 0.75em 1em; background: var(--global-code-background-color); border: 1px solid var(--global-border-color); border-radius: 4px; }
pre code { padding: 0; background: none; border: none; }
a > code, li > code, p > code, td > code { color: var(--global-code-text-color); padding: 0.1rem 0.4rem; font-size: 0.85em; background: var(--global-code-background-color); border: 1px solid var(--global-thead-color); border-radius: 4px; }

/* HR */
hr { display: block; margin: 1em 0; border: 0; border-top: 1px solid var(--global-border-color); }

/* Nav */
nav ul { margin: 0; padding: 0; }
nav li { list-style: none; }
nav a { text-decoration: none; }
nav ul li, nav ol li { margin-bottom: 0; }
nav li ul, nav ol li { margin-top: 0; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 1.3em; }
th, td { padding: 0.5em 1em; text-align: left; border-bottom: 1px solid var(--global-border-color); }
th { font-weight: bold; background: var(--global-thead-color); }
thead { border-bottom: 2px solid var(--global-border-color); }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead { position: fixed; top: 0; width: 100%; z-index: 20; background: var(--global-bg-color); border-bottom: 1px solid var(--global-border-color); }
.masthead__inner-wrap { max-width: 900px; margin: 0 auto; padding: 0 1em; }
.masthead__menu { display: flex; align-items: center; justify-content: space-between; height: 60px; }

/* Greedy Nav */
.greedy-nav { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.greedy-nav a { color: var(--global-masthead-link-color); text-decoration: none; }
.greedy-nav a:hover { color: var(--global-masthead-link-color-hover); }
.masthead__title { font-weight: 700; font-size: 1em; white-space: nowrap; }
.masthead__title.selected { color: var(--global-text-color); border-bottom: 2px solid var(--global-text-color); pointer-events: none; cursor: default; }
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-toggle-label { display: none; }

/* Desktop: inline links (≤5 items) */
.greedy-nav .visible-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.greedy-nav .visible-links li { margin: 0; }
.greedy-nav .visible-links li a { display: block; padding: 0.5rem 1rem; position: relative; }
.greedy-nav .visible-links a::before { content: ""; position: absolute; left: 1rem; bottom: 0; height: 4px; background: var(--global-border-color); width: calc(100% - 2rem); transform: scaleX(0); transition: all 0.2s ease-in-out; }
.greedy-nav .visible-links a:hover::before { transform: scaleX(1); }

/* Hamburger icon (shared) */
.navicon { display: block; width: 24px; height: 3px; background: var(--global-text-color); position: relative; }
.navicon::before, .navicon::after { content: ""; display: block; width: 24px; height: 3px; background: var(--global-text-color); position: absolute; left: 0; }
.navicon::before { top: -7px; }
.navicon::after { top: 7px; }

/* When >5 items: show hamburger on all screen sizes */
.greedy-nav:has(.visible-links li:nth-child(6)) { justify-content: space-between; }
.greedy-nav:has(.visible-links li:nth-child(6)) .masthead__title { flex-shrink: 0; margin-right: auto; }
.greedy-nav:has(.visible-links li:nth-child(6)) .nav-toggle-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 10px; list-style: none; margin: 0; border: 1px solid var(--global-border-color); border-radius: 4px; background: var(--global-bg-color); z-index: 100; box-shadow: 0 0 10px rgba(128, 128, 128, 0.25); }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links::before { display: block; content: ""; position: absolute; top: -11px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-border-color) transparent; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links::after { display: block; content: ""; position: absolute; top: -10px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-bg-color) transparent; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links li { display: block; white-space: normal; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links li a { display: block; padding: 4px 5px; margin-bottom: 5px; color: var(--global-masthead-link-color); border: none; font-size: 0.8em; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links li a:hover { text-decoration: underline; }
.greedy-nav:has(.visible-links li:nth-child(6)) .visible-links li:last-child a { margin-bottom: 0; }
.greedy-nav:has(.visible-links li:nth-child(6)) #nav-toggle:checked ~ .visible-links { display: block; }

/* Small screens: always hamburger regardless of item count */
@media (max-width: 768px) {
    .greedy-nav { justify-content: space-between; }
    .masthead__title { flex-shrink: 0; margin-right: auto; }
    .nav-toggle-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; }
    .greedy-nav .visible-links { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 10px; list-style: none; margin: 0; border: 1px solid var(--global-border-color); border-radius: 4px; background: var(--global-bg-color); z-index: 100; box-shadow: 0 0 10px rgba(128, 128, 128, 0.25); }
    .greedy-nav .visible-links::before { display: block; content: ""; position: absolute; top: -11px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-border-color) transparent; }
    .greedy-nav .visible-links::after { display: block; content: ""; position: absolute; top: -10px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-bg-color) transparent; }
    .greedy-nav .visible-links li { display: block; white-space: normal; }
    .greedy-nav .visible-links li a { display: block; padding: 4px 5px; margin-bottom: 5px; color: var(--global-masthead-link-color); border: none; font-size: 0.8em; }
    .greedy-nav .visible-links li a:hover { text-decoration: underline; }
    .greedy-nav .visible-links li:last-child a { margin-bottom: 0; }
    #nav-toggle:checked ~ .visible-links { display: block; }
}

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
#main { max-width: 800px; margin: 2em auto; padding: 0 1em; animation: intro 0.3s both; animation-delay: 0.35s; flex: 1; width: 100%; }
@media (min-width: 768px) { #main { padding: 0 1em; } }

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
.toc { margin: 1.5em 0; padding: 1em 1.5em; border: 1px solid var(--global-border-color); border-radius: 6px; background: var(--global-bg-color); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: 1.2em; margin: 0.2em 0; }
.toc li { margin: 0.3em 0; }
.toc a { color: var(--global-link-color); text-decoration: none; font-size: 0.9em; }
.toc a:hover { text-decoration: underline; color: var(--global-link-color-hover); }

.archive-with-toc { display: flex; gap: 2em; align-items: flex-start; }
.toc-sidebar { position: sticky; top: 80px; flex-shrink: 0; width: 280px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--global-border-color) transparent; }
.toc-sidebar::-webkit-scrollbar { width: 6px; }
.toc-sidebar::-webkit-scrollbar-track { background: transparent; }
.toc-sidebar::-webkit-scrollbar-thumb { background: var(--global-border-color); border-radius: 3px; }
.toc-sidebar .toc { margin: 0; border: none; padding: 0; background: none; }
.archive-content { flex: 1; min-width: 0; }
@media (min-width: 1400px) {
    .toc-sidebar { position: fixed; left: 1em; top: 80px; width: 280px; max-height: calc(100vh - 100px); }
}
@media (max-width: 1100px) {
    .archive-with-toc { flex-direction: column; align-items: stretch; }
    .toc-sidebar { position: static; width: 100%; max-height: none; flex-shrink: 1; }
}
@media (min-width: 800px) { .page { width: 100%; } }
.page__title { margin-top: 0; margin-bottom: 0; line-height: 1; }
.page__title p { margin: 0; }
.page__meta { margin-top: 2em; color: var(--global-text-color-light); font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; }
.page__meta p { margin: 0; }
.page__date { margin-top: 0.5em; }
.page__content h2 { padding-bottom: 0.5em; border-bottom: 1px solid var(--global-border-color); }
.page__content p { margin: 0 0 1.3em; }
.page__content > hr:first-child { margin-top: 1em; }
.page__content a { text-decoration: underline; }
.page__content a:hover { text-decoration: underline; }
.page__taxonomy { margin-top: 1em; }
.page__taxonomy-item { display: inline-block; margin-right: 5px; margin-bottom: 8px; padding: 5px 10px; text-decoration: none; border: 1px solid var(--global-border-color); border-radius: 4px; }
.page__taxonomy-item:hover { text-decoration: none; color: var(--global-link-color-hover); }
.page__citation { font-size: 0.85em; }

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.archive { margin-bottom: 2em; }
.archive__subtitle { margin: 1.414em 0 0; padding-bottom: 0.5em; font-size: 1em; color: var(--global-text-color-light); border-bottom: 1px solid var(--global-border-color); }
.archive__item-title { margin-bottom: 0.25em; font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.archive__item-title a { color: var(--global-link-color); text-decoration: none; }
.archive__item-title a:hover { text-decoration: underline; }
.archive__item-excerpt { margin-top: 0; font-size: 0.75em; }
.archive a { text-decoration: underline; }
.archive a:hover { text-decoration: underline; }
.list__item { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--global-border-color); }
.list__item:last-child { border-bottom: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.page__footer { background-color: var(--global-footer-bg-color); color: var(--global-text-color-light); border-top: 1px solid var(--global-dark-border-color); position: relative; }
.page__footer footer { max-width: 900px; margin: 0 auto; padding: 1em; overflow: hidden; }
.page__footer a { color: inherit; text-decoration: none; }
.page__footer a:hover { text-decoration: underline; }
.page__footer-copyright { font-size: 0.6875em; }
.page__footer-follow { margin-bottom: 0.5em; }
.page__footer-follow ul { margin: 0; padding: 0; list-style-type: none; }
.page__footer-follow li { display: inline-block; padding: 5px 10px 5px 0; font-size: 0.75em; text-transform: uppercase; }
.page__footer-follow a { font-weight: bold; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes intro {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .masthead, .page__footer { display: none; }
    body { padding: 0; }
    #main { margin: 0; padding: 0; }
}