/*
CSS for syntax highlighting, based on the template generated with

pandoc --template hl-css.template --highlight-style kate site/directional-coupler.md > site/css/syntax-highlighting.css

where `hl-css.template` is a file with just the following contents:

$highlighting-css$

See https://stackoverflow.com/questions/62774695/pandoc-where-are-css-files-for-syntax-highlighting-code/62778531#62778531

Some notes on the structure of syntax-highlighted code blocks:

Basic structure seems to be

  div.pre-wrapper (possibly)
    div.sourceCode#cb<n>, where <n> is the index of the code block
      pre.sourceCode.<language>, where <language> is the language, like python
        code.sourceCode.<language>
          span#cb<n>-<l>, where <l> is the line number

So it's a bit unclear what is the purpose of the .sourceCode class (ws just pre / code) by itself.
Anyway, <pre><code>... seems to be the correct way to include code blocks, see https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets
*/

/* custom variables for colors */
code {
  --purple: #644a9b;
  --magenta: #bf037e;
  /*--orange: #8c5705;*/
  --orange: #b73c00;
  --green: #006a00;
  --blue: #004488;

}

pre {
  --code-background-color: var(--base-accent-color);
  --code-block-border: solid 2px var(--base-accent-color2);
}

pre {
  background: var(--code-background-color);
  border: var(--code-block-border);
  /* background-color: #f2deff; TODO: consider, pinkish color */
  overflow-x: auto;
}

pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
/* .sourceCode { overflow: visible; } */
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre > code {
  /* having less vertical spacing feels symmetric, I guess because of how (lowercase) text looks */
  margin: var(--default-spacing-per2) var(--default-spacing);
  /* this combined with overflow-x: auto in pre enables correct (?) scrollbar behavior */
  display: inline-block;
}

/*
 * have to specify pre.sourceCode instead of just .sourceCode because pandoc
 * generates multiple nested sourceCode tags
 */
pre.sourceCode { margin: 0; border: var(--code-block-border); }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    background-color: #ffffff;
    color: #a0a0a0;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #a0a0a0;  padding-left: 4px; }
div.sourceCode
  { color: #1f1c1b; background-color: #ffffff; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span { color: #1f1c1b; } /* Normal */
code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
code span.an { color: #ca60ca; } /* Annotation */
code span.at { color: #0057ae; } /* Attribute */
code span.bn { color: #b08000; } /* BaseN */
code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
code span.cf { color: var(--purple); font-weight: bold; } /* ControlFlow (default: #1f1c1b) */
code span.ch { color: #924c9d; } /* Char */
code span.cn { color: #aa5500; } /* Constant */
code span.co { color: #888888; } /* Comment (default: #898887) */
code span.cv { color: #0095ff; } /* CommentVar */
code span.do { color: #607880; } /* Documentation */
code span.dt { color: #0057ae; } /* DataType */
code span.dv { color: var(--orange); } /* DecVal (default #b08000) */
code span.er { color: #bf0303; text-decoration: underline; } /* Error */
code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
code span.fl { color: var(--orange); } /* Float (default #b08000)  */
code span.fu { color: #644a9b; } /* Function */
code span.im { color: var(--purple); font-weight: bold; } /* Import (default: #ff5500 */
code span.in { color: #b08000; } /* Information */
code span.kw { color: var(--purple); font-weight: bold; } /* Keyword (default: #1f1c1b) */
code span.op { color: #1f1c1b; } /* Operator */
code span.ot { color: #006e28; } /* Other */
code span.pp { color: #006e28; } /* Preprocessor */
code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
code span.sc { color: #3daee9; } /* SpecialChar */
code span.ss { color: var(--purple); } /* SpecialString */
code span.st { color: var(--magenta); } /* String (default: #bf0303) */
code span.va { color: var(--blue); } /* Variable (default: #0057ae) */
code span.vs { color: #bf0303; } /* VerbatimString */
code span.wa { color: #bf0303; } /* Warning */