/* Fonts */
:root {
  font-size: 16px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: none;
  color-scheme: light dark;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.2rem;
}
h3 {
  font-size: 1.8rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.3rem;
}
h6 {
  font-size: 1.1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;

  /* Use em, not rem - top margin varies */
  margin-top: 0.3em;
  margin-bottom: 0;
}

/* Prevents situations where more whitespace above than below a heading */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 0;
}

p {
  /* No bottom margin so less spacing between paragraph and list */
  margin-top: 1rem;
  margin-bottom: 0;
}


body {
  background-color: var(--background);
  color: var(--foreground);
}

/* Variables */
body {
  --background: white;
  --foreground: black;

  --border-grey: #999;

  --close-to-foreground-grey: #333;
  --close-to-background-grey: #f9f9f9;
  --somewhat-close-to-background-grey: #BBB;
  --close-to-foreground-muted-accent: #e4eeff;
  
  --link-color: #316bcd;
  --link-color-hover: #00348f;
  --link-color-visited: #9c31cd;
  --indentation: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  body {
    --background: black;
    --foreground: white;

    --border-grey: #999;

    --close-to-foreground-grey: #f6f6f6;
    --close-to-background-grey: #222;
    --somewhat-close-to-background-grey: #777;
    --close-to-foreground-muted-accent: #26334a;

    --link-color: #bbd4ff;
    --link-color-hover: #e1e8f5;
    --link-color-visited: #e9baff;
  }

  img {
    filter: invert(1) hue-rotate(180deg);
  }
}



/* Body and body wrapper centering */
body {
  scroll-behavior: smooth;
  width: 100%;
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
}

body > main {
  max-width: min(50rem, calc(100% - max(env(safe-area-inset-left), 2rem)));
  margin-left: auto;
  margin-right: auto;
}

body > main > h1:first-child {
  /* The page title H1 doesn't need top margin */
  margin-top: 0;
}



/* General element styling */
/* Lists */
ul, ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: var(--indentation);
}

li ul, li ol {
  /* No vertical margin between list item and nested list */
  margin-top: 0;
  margin-bottom: 0;
}


/* Blockquotes */
blockquote {
  border-left: 0.3rem solid var(--border-grey);
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--indentation);
  color: var(--close-to-foreground-grey);
}


/* Code and math blocks (markdown-it-textmath) */
pre, .katex-display {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem 0;
  /* keep scroll-bar away from content */
  margin: 0;
}

@media print {
  pre {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
}


/* Footnotes (markdown-it-footnotes) */
.footnotes-sep {
  margin-top: 2em;
}

section.footnotes > ol.footnotes-list {
  padding-left: 0;
}

section.footnotes > ol.footnotes-list::before {
  content: "Footnotes";
}

/* Strike-through */
s {
  text-decoration-thickness: from-font;
}

/* Links */
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-color-hover);
}
a:visited {
  color: var(--link-color-visited);
}

/* markdown-it-anchors and page titles */
a.header-anchor {
  text-decoration: none;
  color: inherit;
}
a.header-anchor:hover {
  text-decoration: underline;
}

/* Breadcrumbs
From https://codepen.io/nana8/pen/VEeoPW
 */
.breadcrumbs {
  list-style: none;
  padding-left: 0;
  --breadcrumb-angle: 40deg;
  margin-bottom: 0;
}

.breadcrumbs li {
  display: inline-block;
  position: relative;

  padding-left: 0.5rem;
  padding-right: 0.5rem;

  margin-bottom: 0.20rem;
  --border-width: 1px;
}

.breadcrumbs li::before, .breadcrumbs li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  background-color: var(--close-to-background-grey);
  border-color: var(--somewhat-close-to-background-grey);
  border-left-style: solid;
  border-right-style: solid;
  border-width: 0;
  z-index: -1;
}

.breadcrumbs li:hover::before, .breadcrumbs li:hover::after {
  border-width: var(--border-width);
}
.breadcrumbs li:hover::before {
  /* Adding the border causes sizing to change, so need to set height differently */
  top: calc(-1 * var(--border-width));
}
.breadcrumbs li:hover::after{
  bottom: calc(-1 * var(--border-width));
}

.breadcrumbs li::before {
  transform: skewX(var(--breadcrumb-angle));
  top: 0;
  border-top-style: solid;
}

.breadcrumbs li::after {
  transform: skewX(calc(-1 * var(--breadcrumb-angle)));
  bottom: 0;
  border-bottom-style: solid;
}

.breadcrumbs a {
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.9rem;
}

.breadcrumbs.highlight-last-element li:last-child::before,
.breadcrumbs.highlight-last-element li:last-child::after {
  background-color: var(--close-to-foreground-muted-accent);
}

.breadcrumbs li.reversed-angle::before {
  transform: skewX(calc(-1 * var(--breadcrumb-angle)));
}
.breadcrumbs li.reversed-angle::after {
  transform: skewX(var(--breadcrumb-angle));
}
.breadcrumbs li.reversed-angle + li:not(.reversed-angle) {
  /* need to increase margin between reversed and non-reversed breadcrumbs */
  margin-left: 0.5rem;
}

/* links to previous/next pages */
.breadcrumbs.neighbour-links::after {
  content: "";
  display: block;
  clear: both;
}

.breadcrumbs.neighbour-links li.next-page {
  float: right
}

@media print {
  .breadcrumbs.neighbour-links {
    display: none
  }
}

/* On index pages don't want headers coloured */
.unstyled-header-links h1 a,
.unstyled-header-links h2 a,
.unstyled-header-links h3 a,
.unstyled-header-links h4 a,
.unstyled-header-links h5 a,
.unstyled-header-links h6 a {
  text-decoration: none;
  color: var(--foreground);
}

.unstyled-header-links h1 a:hover,
.unstyled-header-links h2 a:hover,
.unstyled-header-links h3 a:hover,
.unstyled-header-links h4 a:hover,
.unstyled-header-links h5 a:hover,
.unstyled-header-links h6 a:hover {
  text-decoration: underline;
}

/* Add #'s to left of headers (excluding title).
   Doesn't work well in mobile
*/
article h1, article h2,
article h3, article h4,
article h5, article h6 {
  position: relative
}

article h1::before, article h2::before,
article h3::before, article h4::before,
article h5::before, article h6::before {
  color: var(--somewhat-close-to-background-grey);
  font-size: 1rem;
  font-family: monospace;
  position: absolute;
  right: 100%;
  bottom: 0.5ex; /* roughly align with baseline */
  margin-right: 0.2rem;
}

article h1::before { content: "#"     ; bottom:  1.0ex; }
article h2::before { content: "##"    ; bottom:  0.6ex; }
article h3::before { content: "###"   ; bottom:  0.4ex; }
article h4::before { content: "####"  ; bottom:  0.2ex; }
article h5::before { content: "#####" ; bottom:  0.0ex; }
article h6::before { content: "######"; bottom: -0.1ex; }

@media (max-width: 58rem) {
  /* article width + ~4rem * 2 to ensure all hashes are visible */
  article h1::before, article h2::before,
  article h3::before, article h4::before,
  article h5::before, article h6::before {
    content: none;
  }
}

/* Image and video centering, sizing */
img, video {
  max-height: 120vh;
  max-width: 100%;

  /* center image */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media paper {
  img, video {
    max-height: 100vh;
  }
}


/* Horizontal rules */
hr {
  background: linear-gradient(to right, transparent, var(--border-grey), transparent);
  border: none;
  padding-top: 1px;
  padding-bottom: 1px;
}


/* Tables */
table {
  border-collapse: collapse;
  min-width: 100%;
  overflow-y: auto;
}

table td, table th {
  border: 1px solid var(--border-grey);
  padding: 0.2rem 0.4rem;
}

table tbody tr:nth-child(2n - 1) {
  background-color: var(--close-to-background-grey);
}

/* no outer table borders */
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}


/* Table of contents (markdown-it-toc-done-right) */

.table-of-contents > ol::before, section.footnotes > ol.footnotes-list::before {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  font-variant: small-caps;
}

.table-of-contents > ol::before {
  content: "Table of Contents";
}

.table-of-contents ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

/* top level OL has background etc. so that it can be hidden if there are no
   children in the table of contents
*/
.table-of-contents > ol {
  /* H1 is not present, H2, has no left margin,so padding inline just adds
     padding so the content isn't right against the background
  */
  padding: 1rem;
  padding-top: 0.2rem;

  margin-top: 1rem;

  background-color: var(--close-to-background-grey);
  border-radius: 0.4rem;
}

/* This no longer does anything since the ToC is removed in the render process
   if it is empty
*/
.table-of-contents > ol:empty {
  display: none;
}

.table-of-contents li {
  display: block;
  list-style-type: none;
}

.table-of-contents li > a {
  text-decoration: none;
}

.table-of-contents li > a:hover {
  text-decoration: underline;
}

/*
When body.toc-show-h1, top-level links in the ToC are shown (except the first
element - the title of the page). When false, top-level links are hidden.

Either way, top-level links will NOT show numbering - .toc-show-h1 is used
in concat pages where it combines contents from all files in a directory - all
titles are numbered so having the counter in addition to this is overkill.

That said, the children elements will show the numbering of the h1s.

There is no way to 'delete' a CSS counter so some immediate children selectors
are required to exclude the top level H1 links from having a counter
*/

.table-of-contents > ol > li ol {
 /* After every ol (at a given nesting level), reset the counter
    (for that level) to 0. Exclude the top-level ol elements
 */
  counter-reset: toc-counter;
}
.table-of-contents > ol > li ol li {
  /* After every li, increment the counter for immediate parent ol element by 1 */
  counter-increment: toc-counter;
}
.table-of-contents > ol > li ol li > a::before {
  /* Shows contents of all counters in the hierarchy with the given formatting */
  content: counters(toc-counter, ".") ". ";
  font-variant-numeric: tabular-nums;
}
body:not(.toc-show-h1) .table-of-contents > ol > li > ol > li > a::before {
  /* For main page ToC, align course names. Can't do it when there is nesting */
  display: inline-block;
  width: 1.5em; /* Hopefully won't have any three digit numbers */
  text-align: right;
  margin-right: 0.2em;
}

/* Define counter when showing H1 elements so that the H2 and other child ToC
 entries will have the counter for the H1 element */
.toc-show-h1 .table-of-contents > ol {
  counter-reset: toc-counter;
}
.toc-show-h1 .table-of-contents > ol > li:not(:first-child) {
  /* First child is page title which will always be hidden, so don't increment
     counter */
  counter-increment: toc-counter;
}

/* Hide ToC entry for the page title. If display:none used counter doesn't
   increment or something (and can't display:none the li itself since that would
   hide the nested ol's. Since .toc-show-h1 is only ever used when there are
   multiple h1s in a page, this will hide all h1s if .toc-show-h1 is not present
*/
.table-of-contents > ol > li:first-child > a {
  visibility: hidden;
  display: block;
  height: 0;
}

/*
  Remove the padding from the hidden top-level list when not showing top-level links
*/
body:not(.toc-show-h1) .table-of-contents > ol > li > ol {
  padding-left: 0;
}