@media (prefers-color-scheme: light) {
  :root {
    --primary-text: #000;
    --secondary-text: #333;
    --primary-bkg: #FFF;
    --aside-bkg: #F5F5F5;
    --aside-highlight: #8c7430;
    --link-text: #8b5cf6;
    --hover-nav-background: #EEE;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-text: #DDD;
    --secondary-text: #BBB;
    --primary-bkg: #212121;
    --aside-bkg: #222;
    --aside-highlight: #E7CD78;
    --link-text: #bfa7fa;
    --hover-nav-background: #313131;
  }
}

:root {
  --nav-item-indent: 16px;
  --nav-item-padding: 8px;
  --main-column-padding: 32px;
  /* If these change, update the width media query below */
  --main-column-width: 800px;
  --nav-column-width: 250px;
  --nav-left-margin: calc((100vw - var(--main-column-width) - var(--nav-column-width)) / 2);
  --column-spacing: 32px;
}

html {
  font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji";
  color: var(--primary-text);
  background-color: var(--primary-bkg);
  font-size: 19px;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin-bottom: 2px;
}

h1 {
  margin-bottom: 16px;
}

a, a:hover, a:visited {
  color: var(--link-text);
  text-decoration: underline var(--link-text) dotted;
}

p {
  margin-top: 0px;
}

li {
  margin-bottom: 4px;
}

/* Two-column layout */

main {
  line-height: 1.4;
  padding: 16px var(--main-column-padding);
}

@media (width < 1100px) {
  main {
    max-width: 100%;
  }
}

@media (width >= 1100px) {
  nav {
    position: fixed;
    width: var(--nav-column-width);
    margin-left: var(--nav-left-margin);
    height: 100vh;
    overflow-y: auto;
    padding-right: var(--column-spacing);
  }

  main {
    margin-left: calc(var(--nav-left-margin) + var(--nav-column-width) + var(--column-spacing));
    width: calc(var(--main-column-width) - 2 * var(--main-column-padding));

  }
}

/* Sidebar */

nav h4 {
  padding-left: calc(var(--nav-item-indent) + var(--nav-item-padding) - 2px);
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin-left: var(--nav-item-indent);
}

nav li, nav a, nav .active-page {
  width: 100%;
}

nav a, nav a:hover, nav a:visited, nav .active-page {
  display: inline-block;
  padding: 4px;
  padding-left: var(--nav-item-padding);
  border-top-left-radius: var(--nav-item-padding);
  border-bottom-left-radius: var(--nav-item-padding);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

nav .active-page {
  font-weight: bold;
  background-color: var(--hover-nav-background);
}

nav a:hover {
  background-color: var(--hover-nav-background);
}

/* Don't show the default details marker */
nav summary  {
  list-style: none;
  display: flex;
  align-items: center;
}
/* Safari-specific */
nav summary::-webkit-details-marker {
  display: none;
}

/* Instead do some hacky stuff with an SVG */
nav summary .toggle {
  cursor: pointer;
}

nav summary .toggle svg {
  transform: rotate(90deg);
  height: 1em;
}

details[open] > summary .toggle svg {
  transform: rotate(270deg);
}

/* Tables */

table {
  border-collapse: collapse;
}

th {
  border-bottom: 1px solid var(--secondary-text);
  text-align: left;
  padding: 0px 8px;
}

td {
  border-bottom: 1px dashed var(--secondary-text);
  padding: 4px 8px;
}

/* Support for theming the Pagefind library */
@media (prefers-color-scheme: dark) {
  :root {
    --pagefind-ui-primary: var(--primary-text);
    --pagefind-ui-text: var(--primary-text);
    --pagefind-ui-background: var(--aside-bkg);
    --pagefind-ui-border: #152028;
    --pagefind-ui-tag: #152028;
  }
}

@media (prefers-color-scheme: dark) {
  mark {
    /* I don't love this !important, but it's the easiest way to get around Pagefind's style reset code. */
    background-color: var(--link-text) !important;
  }
}

/* Vibes page */
img {
  max-width: min(700px, 100%);
}

p:has(img) {
  text-align: center;
}

figcaption {
  margin: 4px;
  text-align: center;
}