/* ---------------------------------------------------------------------------
   Syntax highlighting parity layer.

   Zola >= 0.22 renders code with Giallo (VSCode TextMate grammars) instead of
   highlight.js, so the markup is completely different:

     Hexo:  <figure class="highlight bash"><table><tr><td class="gutter">...<span class="line">
     Zola:  <pre class="giallo z-code"><code data-lang="bash"><span class="giallo-l">
              <span class="giallo-ln">1</span><span class="z-1">--save</span>

   `/giallo.css` (generated by Zola from the `github-light` theme) is loaded
   first and provides a colour for every token class. This file loads after it
   and

     1. reproduces the line-number gutter of the original theme,
     2. maps the token classes used by this site onto the Ascent palette that
        `css/highlight.css` defines for highlight.js.

   The mapping follows the *role* of each class (verified by diffing the old
   highlight.js markup against Giallo's output for every language used on the
   site). Grammars tokenise differently, so a Giallo token occasionally gets a
   colour where highlight.js left the text plain; roles that are not listed
   here keep the Giallo theme's own colour.
   --------------------------------------------------------------------------- */

/* -- line layout, from the Giallo documentation --------------------------- */
.giallo-l {
  display: inline-block;
  min-height: 1lh;
  width: 100%;
}
.giallo-ln {
  display: inline-block;
  user-select: none;
  text-align: right;
  min-width: 2em;
  margin-right: 0.5em;
  padding: 0 0.5em 0 0;
  /* the gutter of the original theme: a --bg-color column in a code block
     whose own background is --code-bg-color */
  background-color: var(--bg-color);
  color: var(--secondary-color);
}
.highlight .gutter {
  position: relative;
  top: -0.2em;
}

/* The code cell. The original theme sized it to the prose column and bled the
   gutter further left, which stops working the moment the block gets a padding
   and a border of its own: the cell then wanted 30em inside a 30em minus
   padding-and-border box, so every block overflowed by ~19px and WebKit drew a
   scrollbar for content that was not actually too wide. `max-content` sizes the
   cell to its longest line instead, and `min-width: 100%` keeps short blocks
   filling the box, so the scrollbar only appears for genuinely long lines. */
pre.giallo > code {
  display: block;
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
}

/* -- base colours: giallo.css sets a white background, the Ascent theme uses
      --code-bg-color (and follows the system color scheme) --------------------- */
.z-code {
  color: var(--text-color);
  background-color: var(--code-bg-color);
}

/* -- token colours -------------------------------------------------------- */
/* numbers, literals, constants, shell parameters (highlight.js: number,
   literal, params) */
.z-1 {
  color: var(--highlight-orange-color);
}

/* strings and string-ish scalars (highlight.js: string, value) */
.z-2 {
  color: var(--highlight-green-color);
}

/* YAML keys: highlight.js emitted `.attr`, which the original theme never
   styled, so they stayed at the text colour. Keep that. */
.z-3 {
  color: inherit;
}

/* comments (highlight.js: comment, title) */
.z-5 {
  color: var(--highlight-comment-color);
}

/* built-ins, shell commands and function names
   (highlight.js: built_in, function) */
.z-6 {
  color: var(--highlight-orange-color);
}

/* keywords (highlight.js: keyword) */
.z-8 {
  color: var(--highlight-purple-color);
}

/* variables, parameters and call targets (highlight.js: variable, params) */
.z-9 {
  color: var(--highlight-red-color);
}