/* ---------------------------------------------------------------------------
   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 was narrower than the prose column in the original theme */
pre.giallo > code {
  display: inline-block;
  box-sizing: border-box;
  max-width: 30rem;
  width: calc(100vw - 4rem);
}
@media all and (min-width: 620px) {
  pre.giallo > code {
    max-width: 37.5em;
  }
}

/* -- base colours: giallo.css sets a white background, the Ascent theme uses
      --code-bg-color (and follows the dark-mode toggle) --------------------- */
.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);
}