/* Additive styles for the blog index and post pages. Loaded alongside style.css. */

/* ------- Post header ------- */

.post-header {
  margin-bottom: 2em;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.6em;
  font-size: .9em;
  opacity: .8;
}

.post-header h1 {
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .3em 0;
}

.post-header time {
  font-size: .85em;
  opacity: .7;
}

/* ------- Blog index ------- */

#blog-index h2 {
  margin-top: 0;
}

/* ------- Tables (benchmark results, etc) ------- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.2em 0;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
  min-width: 420px;
}

th, td {
  padding: .5em .9em;
  text-align: left;
  white-space: nowrap;
}

td {
  font-variant-numeric: tabular-nums;
}

th {
  font-weight: 600;
  border-bottom: 2px solid rgba(128, 128, 128, .4);
}

td {
  border-bottom: 1px solid rgba(128, 128, 128, .2);
}

/* ------- Syntax highlighting -------
   Minimal token palette built from the site's own two accent colors
   rather than a stock hljs theme, so code blocks stay in keeping with
   the rest of the design in both light and dark mode. */

:root {
  --code-string: #a05a2c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-string: #e2b98f;
  }
}

.hljs {
  color: inherit;
  background: none;
}

.hljs-keyword,
.hljs-built_in,
.hljs-type,
.hljs-literal,
.hljs-number,
.hljs-symbol,
.hljs-selector-tag {
  color: var(--highlight);
}

.hljs-string,
.hljs-char,
.hljs-regexp,
.hljs-attr {
  color: var(--code-string);
}

.hljs-title,
.hljs-title.function_,
.hljs-section {
  color: inherit;
  font-weight: 600;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  opacity: .55;
  font-style: italic;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}