/*
 * Color tokens. Dark is the default. Light applies only when the visitor
 * chose it with the header toggle.
 */
:root {
  color-scheme: dark;
  --bg: #1b1d2b;
  --surface: #252839;
  --border: #383c55;
  --text: #d3d8f0;
  --heading: #bfa8f4;
  --muted: #a3a9cb;
  --link: #86d8cf;
  --link-hover: #bfa8f4;
  --accent: #bfa8f4;
  --shadow: rgba(0, 0, 0, 0.5);
  --quote-mark: rgba(191, 168, 244, 0.2);
  --icon-moon: none;
  --icon-sun: inline-block;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfe;
  --surface: #f0f0f8;
  --border: #d5d8e8;
  --text: #2b2d42;
  --heading: #6a4bc4;
  --muted: #5b6082;
  --link: #0f766e;
  --link-hover: #6a4bc4;
  --accent: #6a4bc4;
  --shadow: rgba(43, 45, 66, 0.25);
  --quote-mark: rgba(106, 75, 196, 0.18);
  --icon-moon: inline-block;
  --icon-sun: none;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Roboto Slab", serif;
  color: var(--text);
  background-color: var(--bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
time {
  font-family: "Ruda", sans-serif;
}

#container main h1,
#container main h2,
#container main h3,
#container main h4,
#container main h5,
#container main h6 {
  color: var(--heading);
}

#container {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container > * {
  width: 700px;
  margin: 0 auto;
}

@media only screen and (max-width: 800px) {
  #container > * {
    width: auto;
    margin: 0 1.2em;
  }
}

/* The title and the icon list share a row, vertically centered, so the icons
   line up with the title whatever the font. The logo and tagline take full
   rows. The icon list comes before the title in the markup, so the title and
   list are ordered explicitly. */
#container header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1em;
}

#container header > * {
  flex: 0 0 100%;
  order: 3;
}

#container header h1 {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
  font-size: 2.4rem;
}

#container header h1 a {
  color: var(--heading);
}

#container header ul {
  display: flex;
  flex: 0 0 auto;
  order: 2;
  margin: 0 0 0 0.5em;
  padding: 0;
  list-style: none;
}

#container header ul li {
  margin: 0 0 0 0.5em;
}

#container nav {
  display: flex;
  align-items: center;
  border-bottom: solid 3px var(--border);
  padding-bottom: 0.5em;
  font-family: "Ruda", sans-serif;
}

#container nav a {
  text-decoration: none;
}

/* Search sits on the menu row, at the left. */
#container #site-search {
  width: 9rem;
  flex: 0 0 auto;
}

#container #site-search pagefind-modal-trigger {
  --pf-input-height: 2rem;
}

#container #site-search pagefind-modal-trigger {
  display: block;
}

#container nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

#container nav ul li {
  margin-left: 1em;
}

#container nav ul li a.active {
  border-bottom: 0.5em solid var(--accent);
}

#container main {
  flex: 1 0 0;
  line-height: 1.5;
  font-size: 1.2rem;
}

#container main section#home ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#container main section#home ul li {
  margin: 0.5em 0;
  padding-bottom: 0.5em;
}

#container main section#home ul li h2 {
  margin: 0.2em 0;
}

#container main section#home span {
  color: var(--muted);
}

#container main section#list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#container main section#list ul li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--border);
}

#container main section#list ul li time, #container main section#list ul li span.count {
  float: right;
}

#container main section#list ul li:last-child {
  border-bottom: none;
}

#container main section.post-nav ul {
  margin: 0.5em 0;
  padding: 0.5em 0 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: 0.9em;
}

#container main section.post-nav ul li:last-child {
  text-align: right;
}

#container main article > pre {
  background-color: var(--surface);
  overflow-x: auto;
  padding: 0.8em;
  font-size: 0.9em;
  box-shadow: 0 -1px 0 var(--border) inset;
}

#container main article .highlight pre {
  overflow-x: auto;
  font-size: 0.9em;
  padding: 0.8em;
}

#container main article pre code {
  font-size: 0.9em;
}

#container main article p code {
  padding: 0.2em;
  color: var(--accent);
  background-color: var(--surface);
  font-size: 0.9em;
}

#container main article p kbd {
  display: inline-block;
  padding: 0.2em 0.3em;
  font-size: 0.8em;
  line-height: 1em;
  color: var(--text);
  vertical-align: middle;
  background-color: var(--surface);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-image: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 var(--border) inset;
}

#container main h1 {
  margin-bottom: 1rem;
}

#container footer {
  border-top: solid 1px var(--border);
}

#container footer h6 {
  font-size: 0.8em;
}

#container footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

#container footer ul li:first-child {
  margin-right: auto;
}

#container footer ul li:not(:first-child) {
  margin-left: 1em;
  white-space: nowrap;
}

#container footer ul li a.active {
  border-bottom: 0.2em solid var(--accent);
}

#container textarea, input {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
color: var(--text);
/*display: -webkit-inline-box;*/
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 14px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 24px;
padding: 8px;
position: relative;
box-shadow: inset 0 1px 2px var(--shadow);
max-width: 100%;
width: 100%;
}

#container button {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  background-color: var(--surface);
  /*display: -webkit-inline-box;*/
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

#container button:hover {
 border: solid var(--accent) 2px;
 text-decoration: none;
}

.meta-aside, #container main section#home ul li aside, #container main article aside {
  margin: 0.5em 0;
  font-family: "Ruda", sans-serif;
  color: var(--muted);
  font-size: 0.9em;
}

.meta-aside ul, #container main section#home ul li aside ul, #container main article aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta-aside ul li, #container main section#home ul li aside ul li, #container main article aside ul li {
  margin: 0;
  padding: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.image, figure img, img {
  width: 100%;
  box-shadow: 0 3px 3px var(--shadow);
}

/**
:not(#home) and :not(#list) is avoiding full width image in list of posts, e.g. home and taxonomy pages
 */
header .full-image, header figure.full img, header img[src*="full"],
article .full-image, article figure.full img, article img[src*="full"],
section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] {
  width: 100%;
  box-shadow: 0 3px 3px var(--shadow);
}

@supports (width: 100vw) {
  header .full-image, header figure.full img, header img[src*="full"],
  article .full-image, article figure.full img, article img[src*="full"],
  section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

.mid-image, figure.mid img, img[src*="mid"] {
  width: 100%;
  box-shadow: 0 3px 3px var(--shadow);
}

@supports (width: 100vw) {
  .mid-image, figure.mid img, img[src*="mid"] {
    width: 800px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -400px;
    margin-right: -400px;
  }
  @media only screen and (max-width: 800px) {
    .mid-image, figure.mid img, img[src*="mid"] {
      width: 100%;
      left: 0;
      right: 0;
      margin: 0;
    }
  }
}

.float-image, figure.float img, img[src*="float"] {
  width: 300px;
  float: left;
  margin: 0 1em 1em -3em;
  box-shadow: 0 3px 3px var(--shadow);
}

@media only screen and (max-width: 800px) {
  .float-image, figure.float img, img[src*="float"] {
    float: none;
    margin: 0;
    width: 100%;
  }
}

.float-image-right, figure.float-right img, img[src*="float-right"] {
  width: 300px;
  float: right;
  margin: 0 -3em 1em 1em;
  box-shadow: 0 3px 3px var(--shadow);
}

@media only screen and (max-width: 800px) {
  .float-image-right, figure.float-right img, img[src*="float-right"] {
    float: none;
    margin: 0;
    width: 100%;
  }
}

figure {
  margin: 0;
}

figure figcaption p {
  margin-top: 0.3em;
  font-size: 0.8em;
  font-style: italic;
}

figure.full {
  margin: 0;
}

figure.mid {
  margin: 0;
}

figure.float {
  margin: 0;
  float: left;
}

figure.float-right {
  margin: 0;
  float: right;
}

figure.float-right figcaption {
  margin-left: 1em;
}

table {
  width: 100%;
  border-bottom: solid 1px var(--border);
}

table thead {
  background-color: var(--surface);
}

blockquote {
  margin: 1em;
  border-left: solid 0.1em var(--accent);
  padding: 0.5em 2em;
  position: relative;
  background-color: var(--surface);
  box-shadow: 0 -1px 0 var(--border) inset;
}

blockquote::before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 3em;
  color: var(--quote-mark);
  position: absolute;
  left: 6px;
  top: 0;
}

@media only screen and (max-width: 800px) {
  blockquote {
    margin: 1em 0;
    padding: 0.5em;
  }
}

dl dd {
  font-style: italic;
}

ul.pagination {
  display: flex;
  justify-content: center;
  margin: 1em 0 0;
  padding: 0.5em 0;
  list-style: none;
}

ul.pagination li {
  padding: 0 1em;
}

/* Search. Map the Pagefind component UI onto the theme colors so it follows
   the light and dark themes. Pagefind does not detect the color scheme. */
:root {
  --pf-text: var(--text);
  --pf-text-secondary: var(--muted);
  --pf-text-muted: var(--muted);
  --pf-background: var(--bg);
  --pf-border: var(--border);
  --pf-border-focus: var(--muted);
  --pf-hover: var(--surface);
  --pf-skeleton: var(--surface);
  --pf-skeleton-shine: var(--border);
  --pf-mark: var(--text);
  --pf-outline-focus: var(--accent);
}

/* Theme toggle. Hidden until the init script marks the page as JS-enabled. */
#container #theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    border-color 150ms ease-out;
}

.js #container #theme-toggle {
  display: inline-flex;
}

#container #theme-toggle:hover,
#container #theme-toggle:focus-visible {
  color: var(--link-hover);
  background: var(--surface);
  border: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  #container #theme-toggle {
    transition: none;
  }
}

#theme-toggle .icon-moon {
  display: var(--icon-moon);
}

#theme-toggle .icon-sun {
  display: var(--icon-sun);
}