/*
 * Plain CSS for Hugo posts. Hugo must use markup.highlight.noClasses = false.
 * Edit these variables to customize every code block. The navy surface and
 * token colors deliberately stay the same in light and dark site modes.
 * Inline code follows the site's existing --accent, --bg-alt and --fg colors.
 */
:root {
  --code-bg: #18243b;
  --code-header-bg: #202e49;
  --code-fg: #e3e9f5;
  --code-border: #405171;
  --code-muted: #a6b4cc;
  --code-purple: #cbb2ff;
  --code-teal: #91dfd2;
  --code-blue: #a8d5ff;
  --code-gold: #f2d193;
  --code-red: #ffb0bb;
  --code-selection: #425780;
  --code-line-highlight: #2c3e5c;
  --code-label: #ffffff;
  --code-radius: 0.65rem;
  --code-font: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --code-font-size: 0.9rem;
}

.single-content .code-block {
  /* Semantic colors can be overridden for each language below. */
  --syntax-accent: var(--code-purple);
  --syntax-key: var(--code-blue);
  --syntax-string: var(--code-teal);
  --syntax-number: var(--code-gold);
  margin: 1.4rem 0;
  overflow: hidden;
  border: 1px solid var(--code-border);
  border-radius: var(--code-radius);
  background: var(--code-bg);
  color: var(--code-fg);
  color-scheme: dark;
}

/* Language palettes: YAML / shell / Java share a surface, with unique accents. */
.single-content .code-block[data-language="yaml"] {
  --syntax-accent: var(--code-purple);
  --syntax-key: var(--code-purple);
  --syntax-string: var(--code-teal);
}

.single-content .code-block[data-language="shell"] {
  --syntax-accent: var(--code-teal);
  --syntax-key: var(--code-blue);
  --syntax-string: var(--code-gold);
}

.single-content .code-block[data-language="java"] {
  --syntax-accent: var(--code-purple);
  --syntax-key: var(--code-blue);
  --syntax-string: var(--code-teal);
}

.single-content .code-block-label {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--code-border);
  background: var(--code-header-bg);
  color: var(--syntax-accent);
  font: 600 0.75rem / 1.5 var(--code-font);
  letter-spacing: 0.06em;
}

.single-content pre {
  margin: 1.4rem 0;
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--code-radius);
  background: var(--code-bg);
  color: var(--code-fg);
  tab-size: 2;
}

.single-content code {
  font-family: var(--code-font);
  font-size: var(--code-font-size);
}

.single-content :not(pre) > code {
  padding: 0.12em 0.35em;
  border-radius: 0.25rem;
  background: var(--bg-alt);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.single-content .code-block pre {
  margin: 0;
  border-radius: 0;
  line-height: 1.65;
}

.single-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  white-space: pre;
}

.single-content .code-block .highlight {
  overflow-x: auto;
}

.single-content pre:focus-visible {
  outline: 2px solid var(--code-purple);
  outline-offset: -3px;
}

.single-content pre ::selection {
  background: var(--code-selection);
  color: var(--code-fg);
}

/* Chroma token classes emitted by Hugo; no JavaScript highlighter needed. */
.single-content .chroma { color: var(--code-fg); background: var(--code-bg); }
.chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .ow) { color: var(--syntax-accent); }
.chroma :is(.na, .nc, .nd, .ne, .nl, .nn, .nt, .py) { color: var(--syntax-key); }
.chroma :is(.nb, .bp, .nf, .fm) { color: var(--code-teal); }
.chroma :is(.nv, .vc, .vg, .vi, .vm, .si) { color: var(--code-purple); }
.chroma :is(.s, .sa, .sb, .sc, .dl, .sd, .s1, .s2, .sh, .sx, .sr, .ss, .l, .ld) { color: var(--syntax-string); }
.chroma :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .no) { color: var(--syntax-number); }
.chroma :is(.se, .o) { color: var(--code-gold); }
.chroma :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) { color: var(--code-muted); font-style: italic; }
.chroma :is(.err, .gr, .gt, .gd) { color: var(--code-red); }
.chroma .gi { color: var(--code-teal); }
.chroma :is(.gh, .gu, .gp) { color: var(--syntax-accent); font-weight: 600; }
.chroma .go { color: var(--code-muted); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .gl { text-decoration: underline; }
.chroma .hl { display: block; background: var(--code-line-highlight); }
.chroma .line { display: flex; }
.chroma .cl { flex: 1; }
.chroma :is(.ln, .lnt) {
  flex-shrink: 0;
  margin-right: 1rem;
  color: var(--code-muted);
  user-select: none;
}

/* Also support Hugo's optional table-based line numbers. */
.single-content .chroma .lntable {
  width: 100%;
  margin: 0;
  border: 0;
  border-spacing: 0;
}
.single-content .chroma .lntd { padding: 0; border: 0; vertical-align: top; }
.single-content .chroma .lntd:first-child { width: 1%; }