@import "https://unpkg.com/@lumeland/ds@0.5.2/ds.css";
/* Lume's design system */
/* Custom components */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 1rem;
  justify-content: space-between;
  padding: 1rem min(5vw, 5rem);
  align-items: center;
}
.navbar-links {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  font: var(--font-ui-bold);
  align-items: center;

  & [aria-current="page"] {
    text-decoration: none;
  }
}
.navbar-search {
  padding: 0 1em;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.navbar-home {
  text-decoration: none;
}
.page-header {
  margin-bottom: var(--row-gap-small);

  &>p:first-child {
    margin-top: 0;
  }
}
.page-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0;
  text-wrap: balance;
  color: var(--color-base);
}
.page-navigation {
  margin-bottom: var(--row-gap-small);

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
  }

  & h2 {
    font: var(--font-body-bold);
    letter-spacing: var(--font-body-spacing);
    margin: .5em 0;
  }
}
.page-pagination {
  border-top: solid 1px var(--color-line);
  margin-top: var(--row-gap-xsmall);
}
.postList {
  list-style: none;
  padding: 0;

  & article.post+article.post {
    margin-top: var(--row-gap-xsmall);
  }

  & li.post+li.post {
    margin-top: var(--row-gap-xsmall);
  }

  & .post-header {
    margin-bottom: var(--row-gap-xsmall);
  }

  & .post-details {
    font: var(--font-small);
  }

  & .post-title {
    font: var(--font-title);
    letter-spacing: var(--font-title-spacing);
    display: block;

    & a {
      text-decoration: none;
    }
  }
}
/* Custom media queries */
/* Breakpoint calculation: content (70em) + sidebar (20em) + gap (2em) + margins = ~95em */
/* Post layout variables */
:root {
  --post-content-width: 70em;
  --post-sidebar-width: 20em;
  --post-sidebar-gap: 2em;
}
.post-header {
  margin-bottom: var(--row-gap-small);
}
.post {
  position: relative;
  max-width: var(--post-content-width);
  margin: 0 auto;
}
.post-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0 0 0.2em;
  text-wrap: balance;
  color: var(--color-base);
}
.post-description {
  letter-spacing: var(--font-display-spacing);
  margin: 0 0 0.2em;
  text-wrap: balance;
  color: var(--color-base);
}
.post-details {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1em;
  column-gap: .5em;
  align-items: center;
  font: var(--font-small);
  color: var(--color-dim);

  & p {
    margin: 0;
  }

  & p:nth-child(-n+2)::after {
    content: "•";
    padding-left: .5em;
    align-self: stretch;
  }

  & p:last-of-type {
    margin-right: .5em;
  }

  & a {
    color: inherit;
  }
}
/* Hide date and tags on larger screens only for individual post pages (shown in sidebar) */
.body-post .post-details {
  @media (min-width: 120em) {
    & time,
    & .post-tags {
      display: none;
    }
  }
}
.post-tags {
  display: flex;
  flex-flow: row wrap;
  gap: .5em;
  align-items: center;
}
.post-link {
  display: inline-block;
}
/* Code block filename styling */
.code-filename {
  padding: 0.5em 1em;
  background: var(--color-background-shade, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--color-line);
  border-radius: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-dim);
  margin-top: 1em;
  margin-bottom: 0.5em;
  -webkit-user-select: text;
          user-select: text;
}
.code-filename+pre.has-filename {
  margin-top: 0;
  margin-bottom: 1.5em;
}
@media (prefers-color-scheme: dark) {
  .code-filename {
    background: var(--color-background-shade, rgba(255, 255, 255, 0.05));
  }
}
/* TOC (Table of Contents) styling */
.toc {
  position: sticky;
  top: 6rem;
  float: right;
  width: var(--post-sidebar-width);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  margin: 0 0 1em var(--post-sidebar-gap);
  padding: 1em;
  background: var(--color-background-shade, rgba(0, 0, 0, 0.02));
  border: 0.0625em solid var(--color-line);
  border-radius: 0.5em;
  font-size: 0.9em;

  & h2 {
    margin: 0 0 0.75em;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-base);
  }

  & ol, & ul {
    margin: 0;
    padding-left: 1.5em;
    list-style: none;
  }

  & ol {
    counter-reset: toc-counter;
  }

  & ol > li {
    counter-increment: toc-counter;
    position: relative;
    margin-bottom: 0.5em;
  }

  & ol > li::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: -1.5em;
    color: var(--color-dim);
  }

  & ul > li {
    margin-bottom: 0.3em;
    position: relative;
  }

  & ul > li::before {
    content: "•";
    position: absolute;
    left: -1.2em;
    color: var(--color-dim);
  }

  & a {
    color: var(--color-base);
    text-decoration: none;
    transition: color 0.2s;
  }

  & a:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}
@media (prefers-color-scheme: dark) {
  .toc {
    background: var(--color-background-shade, rgba(255, 255, 255, 0.03));
  }
}
/* Post sidebar styling */
.post-sidebar {
  /* Default (small screen) styles */
  position: static;
  width: auto;
  max-height: none;
  margin: 0 0 2em 0;

  @media (min-width: 120em) {
    position: fixed;
    top: 6rem;
    left: calc(50% + var(--post-content-width) / 2 + var(--post-sidebar-gap)); /* Position outside post body */
    width: var(--post-sidebar-width);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0;
  }
}
.post-sidebar .toc {
  position: static;
  float: none;
  width: auto;
  max-height: none;
  margin: 0;
}
.post-title-sidebar {
  display: none;

  @media (min-width: 120em) {
    font: var(--font-display);
    font-size: 1.5em;
    letter-spacing: var(--font-display-spacing);
    color: var(--color-base);
    padding: 1em;
    background: var(--color-background-shade, rgba(0, 0, 0, 0.02));
    border: 0.0625em solid var(--color-line);
    border-radius: 0.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}
@media (prefers-color-scheme: dark) and (min-width: 120em) {
  .post-title-sidebar {
    background: var(--color-background-shade, rgba(255, 255, 255, 0.03));
  }
}
.post-meta-sidebar {
  display: none;

  @media (min-width: 120em) {
    display: block;
    padding: 1em;
    background: var(--color-background-shade, rgba(0, 0, 0, 0.02));
    border: 0.0625em solid var(--color-line);
    border-radius: 0.5em;
    font-size: 0.9em;

    & time {
      display: block;
      text-align: left;
      font-weight: 600;
      color: var(--color-dim);
      margin-bottom: 0.75em;
      padding-bottom: 0.75em;
      border-bottom: 0.0625em solid var(--color-line);
    }

    & .post-tags-sidebar {
      display: flex;
      flex-flow: row wrap;
      gap: 0.5em;
    }
  }
}
@media (prefers-color-scheme: dark) and (min-width: 120em) {
  .post-meta-sidebar {
    background: var(--color-background-shade, rgba(255, 255, 255, 0.03));
  }
}
/* @import "css/code-highlight.css"; */
/* Code highlighting themes */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
@media (prefers-color-scheme: dark) {
  pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}
/* Manual theme override support */
[data-theme="dark"] {
  pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}
[data-theme="light"] {
  pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}
/* Theme variables: default (light) + prefers-color-scheme and manual override */
:root {
  /* Background and borders */
  --color-bg: #ffffff;
  --color-line: rgba(0, 0, 0, 0.15);

  --color-link: var(--color-base);
  --color-link-hover: var(--color-dim);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1117;
    --color-line: rgba(255, 255, 255, 0.35);
  }
}
[data-theme="dark"] {
  --color-bg: #0d1117;
  --color-line: rgba(255, 255, 255, 0.35);
}
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-line: rgba(0, 0, 0, 0.15);
}
/* Code copy button */
.code-copy-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  font-family: var(--font-ui);
  background: var(--color-background, rgba(128, 128, 128, 0.2));
  color: var(--color-text, var(--color-base));
  border: 1px solid var(--color-line);
  border-radius: 0.3em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.1s;
  line-height: 1;
}
.code-copy-button svg {
  display: block;
  width: 16px;
  height: 16px;
}
.code-copy-button:hover {
  background: var(--color-background, rgba(128, 128, 128, 0.3));
}
.code-copy-button:active {
  transform: scale(0.95);
}
pre:has(> code.hljs) {
  position: relative;
}
pre:has(> code.hljs):hover .code-copy-button {
  opacity: 0.7;
}
pre:has(> code.hljs):hover .code-copy-button:hover {
  opacity: 1;
}
/* Ensure body uses the background color */
body {
  background: var(--color-bg);
  color: var(--color-base);
  padding-top: 5rem;
}
/* Page layout */
main {
  padding: var(--row-gap-medium) 0;
  max-width: min(100% - 15vw, 70em);
  margin: 0 auto;

  &> :first-child {
    margin-top: 0;
  }
}
/* Search tweak */
.search {
  margin-top: var(--row-gap-xsmall);
}