/* -----------------------------------------------------------------------------
   Color scheme (no toggle)

   This site follows the browser/OS preference via `prefers-color-scheme`.
   -----------------------------------------------------------------------------
*/

:root {
  /* Tell the UA that both schemes are supported (form controls, scrollbars, etc.). */
  color-scheme: light dark;

  /* Site tokens (light) */
  --cilia-bg: #ffffff;
  --cilia-fg: #1f2328;
  --cilia-muted: #57606a;
  --cilia-border: #d0d7de;
  --cilia-link: #0969da;
  --cilia-code-bg: #f6f8fa;

  /*
    Primer-ish variables used by GitHub Pages themes.
    Defining these here keeps our custom styles stable even if the theme changes.
  */
  --color-canvas-default: var(--cilia-bg);
  /* Many GitHub Pages/Jekyll styles use "canvas-subtle" for code blocks. */
  --color-canvas-subtle: var(--cilia-code-bg);
  --color-fg-default: var(--cilia-fg);
  --color-fg-muted: var(--cilia-muted);
  --color-border-default: var(--cilia-border);
  --color-accent-fg: var(--cilia-link);
  --color-neutral-muted: var(--cilia-code-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Site tokens (dark) */
    --cilia-bg: #0d1117;
    --cilia-fg: #c9d1d9;
    --cilia-muted: #8b949e;
    --cilia-border: #30363d;
    --cilia-link: #58a6ff;
    --cilia-code-bg: #161b22;
  }
}

html,
body {
  background: var(--color-canvas-default);
  color: var(--color-fg-default);
}

.markdown-body {
  color: var(--color-fg-default);
}

.markdown-body a {
  color: var(--color-accent-fg);
}

.markdown-body a:visited {
  color: var(--color-accent-fg);
}

.markdown-body code,
.markdown-body pre {
  background-color: var(--color-neutral-muted);
}

/* Syntax-highlight wrappers used by GitHub Pages / Jekyll / Rouge. */
.markdown-body :is(.highlight, div.highlight, figure.highlight, pre.highlight, .highlighter-rouge, .highlighter-rouge .highlight) {
  background-color: var(--color-neutral-muted) !important;
}

.markdown-body :is(.highlight pre, div.highlight pre, figure.highlight pre, pre.highlight) {
  background-color: var(--color-neutral-muted) !important;
  border: 1px solid var(--color-border-default) !important;
}

.markdown-body pre code {
  /* Ensure the inner <code> doesn't "reset" to a light background. */
  background-color: transparent !important;
}

.markdown-body :not(pre) > code {
  /* Inline code: keep a subtle pill in both themes. */
  border: 1px solid var(--color-border-default) !important;
}

/* Dark mode: override theme's hard-coded light code backgrounds and token colors. */
@media (prefers-color-scheme: dark) {
  /* Block code backgrounds */
  .markdown-body pre,
  .markdown-body .highlight pre,
  .markdown-body .highlighter-rouge .highlight pre,
  .markdown-body pre.highlight {
    background-color: var(--cilia-code-bg) !important;
    color: var(--cilia-fg) !important;
    border: 1px solid var(--cilia-border) !important;
  }

  /* Wrapper backgrounds (Rouge/Jekyll) */
  .markdown-body .highlight,
  .markdown-body .highlighter-rouge,
  .markdown-body .highlighter-rouge .highlight {
    background-color: var(--cilia-code-bg) !important;
  }

  /*
    The default GitHub Pages Rouge theme is light and sets many token colors to near-black.
    On a dark code background that becomes unreadable, so force tokens to inherit a light color.
  */
  .markdown-body .highlight,
  .markdown-body .highlight * {
    color: var(--cilia-fg) !important;
    background-color: transparent !important;
  }
}

.markdown-body hr {
  background-color: var(--color-border-default);
}

.markdown-body blockquote {
  color: var(--color-fg-muted);
  border-left-color: var(--color-border-default);
}

/* The theme uses these utility classes on the footer. */
.border-top {
  border-top-color: var(--color-border-default) !important;
}

.text-gray {
  color: var(--color-fg-muted) !important;
}

main p,
main li,
main blockquote,
main dl {
  max-width: 80ch;
}

/*main pre {
  max-width: 100ch;
}*/

.markdown-body :is(h1, h2, h3, h4, h5, h6) {
  border-bottom: none;
}

/* Reduce top spacing of the first heading in page content. */
.markdown-body main > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Navigation: horizontal list */
nav {
  /* Space above the navigation */
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

nav > ul.nav-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin: 0;
  padding: 0;
}

/* Navigation: optional second level */
nav ul.nav-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 0.25rem 0.75rem;
}

nav ul.nav-sub a {
  font-size: 1rem;
  font-weight: 500;
  border-radius: 10px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

nav a {
  display: inline-block;
  /* Make nav links use the surrounding text color. */
  color: inherit;
  /* Make nav items roughly the size of an H3 heading. */
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.1rem 0.35rem;
}

nav a:visited {
  color: inherit;
}

nav a:hover,
nav a:focus-visible {
  text-decoration: none;
  border-color: currentColor;
}

/* Current page: light text on dark background */
nav a[aria-current="page"],
nav a[aria-current="location"] {
  /* Invert using theme colors: background/border = normal text color, text = page background. */
  color: var(--color-canvas-default, #ffffff);
  background-color: var(--color-fg-default, #1f2328);
  border-color: var(--color-fg-default, #1f2328);
}

/* Mobile: reduce whitespace above the menu. */
@media (max-width: 600px) {
  body {
    /* Some GitHub Pages themes add generous body padding on small screens. */
    padding-top: 0 !important;
  }

  nav {
    margin-top: 0px;
  }
}