/* Copyright (C) 2020  Matthew "strager" Glazar */
/* See end of file for extended copyright information. */

html {
  color-scheme: light dark;
}

body {
  font-family: sans-serif;
  margin-left: auto;
  margin-right: auto;
  max-width: 45rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

figure {
  margin: 0;
  margin-bottom: 1rem;
}

header {
  margin-top: 1rem;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
}
h1 a:link {
  text-decoration: none;
}

header nav.main-nav {
  margin-top: 0;
  text-align: right;
}
header nav.main-nav > ul {
  margin: 0;
  padding: 0;
}
header nav.main-nav li {
  --nav-entry-padding: 0px;
  list-style: none;
  padding: 0;
  margin: 0;
}
header nav.main-nav li.side-bar-only {
  display: none;
}
header nav.main-nav li a:link,
header nav.main-nav li .current-page {
  padding: var(--nav-entry-padding);
}

/* Make the nav more compact by hiding all sub-nav entries except the current
   one. */
header nav.main-nav li li a:link {
  display: none;
}

/* For sub-nav entries, show bullets (circles) connected with a vertical
   line. This visually groups the sub-nav entries under its parent nav entry.

   :before holds the vertical line. :after holds the bullet. */
header nav.main-nav li li {
  --bullets-circle-width: 5px;
  --bullets-current-color: #000;
  --bullets-line-color: #999;
  --bullets-line-width: 1px;
  --bullets-link-color: #999;
}
header nav.main-nav li li a:link,
header nav.main-nav li li .current-page {
  position: relative;
}
header nav.main-nav li li a:link:before,
header nav.main-nav li li .current-page:before {
  /* Vertical line */
  background-color: var(--bullets-line-color);
  bottom: 50%;
  content: " ";
  display: inline-block;
  position: absolute;
  right: calc(
    var(--nav-entry-padding) + (var(--bullets-circle-width) / 2) -
      (var(--bullets-line-width) / 2)
  );
  top: 0;
  width: var(--bullets-line-width);
}
header nav.main-nav li li a:link:after,
header nav.main-nav li li .current-page:after {
  /* Bullet (circle) */
  border-radius: 100%;
  content: " ";
  display: inline-block;
  height: var(--bullets-circle-width);
  margin-left: 0.25em;
  width: var(--bullets-circle-width);
  /* Center the bullet vertically within the nav entry. */
  bottom: calc((1em - var(--bullets-circle-width)) / 2);
  vertical-align: bottom;
  /* Show the bullet in front of the vertical line. */
  position: relative;
  z-index: 1;
}
header nav.main-nav li li a:link:after {
  background-color: var(--bullets-link-color);
}
header nav.main-nav li li .current-page:after {
  background-color: var(--bullets-current-color);
}
header nav.main-nav li li:first-child a:link:before,
header nav.main-nav li li:first-child .current-page:before {
  /* Extend the vertical line to the baseline of the parent nav entry. */
  top: calc(var(--nav-entry-padding) * -1);
}
@media (prefers-color-scheme: dark) {
  header nav.main-nav li li {
    --bullets-current-color: #eee;
    --bullets-line-color: #999;
    --bullets-link-color: #999;
  }
}

header {
  --tag-line-height: calc(0.5rem + 2rem * 1.2); /* Assumes two lines. */
  --title-height: calc(2rem * 1.2); /* Assumes no word-wrapping. */
  --mascot-height: calc(var(--title-height) + var(--tag-line-height));
  --mascot-width: var(--mascot-height) / 874.176 * 1126.752;
  display: grid;
  grid-template-areas:
    "mascot title main-nav"
    "mascot tag-line main-nav"
    "breadcrumbs breadcrumbs main-nav";
  grid-template-columns: calc(var(--mascot-width) + 0.5rem) auto auto;
  grid-template-rows: auto minmax(var(--tag-line-height), auto) auto;
}
header > h1 {
  grid-area: title;
}
header > .mascot {
  grid-area: mascot;
}
header > .tag-line {
  grid-area: tag-line;
}
header > nav.main-nav {
  grid-area: main-nav;
}
header > nav.breadcrumbs {
  grid-area: breadcrumbs;
}

header > .tag-line {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
header .mascot {
  align-self: start;
  width: var(--mascot-width);
  height: var(--mascot-height);
}

/* On smaller screens, put the mascot under the title. */
@media only screen and (max-width: 32em) {
  header {
    --mascot-height: var(--tag-line-height);
    grid-template-areas:
      "title title main-nav"
      "mascot tag-line main-nav"
      "breadcrumbs breadcrumbs main-nav";
  }
  header > .mascot {
    margin-top: 0.5rem;
  }
}

footer,
h2 {
  border-top: 1px solid #ccc;
  padding-top: 1rem;
}
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin-left: 2rem;
  margin-right: 2rem;
}

main > h2:first-child {
  border-top: 0;
  padding-top: 0;
}

nav.breadcrumbs ol {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
nav.breadcrumbs ol > li {
  margin: 0 0.125em;
  padding: 0;
}

nav.breadcrumbs ol > li {
  list-style-type: none;
}
nav.breadcrumbs ol > li:not(:first-child)::before {
  content: "➤ ";
}

@media (prefers-color-scheme: dark) {
  a:link {
    color: #3398e0;
  }
  a:visited {
    color: #979ef8;
  }
  html,
  body {
    /* HACK(strager): !important on html is needed to work around quirks in the
       Dark Reader browser extension (https://darkreader.org/). */
    background-color: #002b36 !important;
  }
  body {
    color: white;
  }
  .os-logo[src="macos.svg"],
  .os-logo[src$="/macos.svg"] {
    filter: invert(100%);
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}

/* Comparison tables */
.comparison td.good {
  background-color: #ddffdd;
}
.comparison td.bad {
  background-color: #ffdddd;
}
.comparison td.meh {
  background-color: #ffeecc;
}
@media (prefers-color-scheme: dark) {
  .comparison td.bad {
    color: rgb(255, 255, 255);
    background-color: #661919;
  }
  .comparison td.meh {
    color: rgb(255, 255, 255);
    background-color: #665519;
  }
  .comparison td.good {
    color: rgb(255, 255, 255);
    background-color: #195519;
  }
}

.eslint-comparison {
  display: grid;
  grid-template-areas: "eslint qljs";
  grid-template-columns: 50% 50%;
  grid-gap: 0.5rem;
}
.eslint-comparison .example p {
  margin-top: 0.5rem;
  font-size: 0.9em;
}
.eslint-comparison .example pre {
  margin: 0;
  border: 1px dashed rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.03);
  padding: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  .eslint-comparison .example pre {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.eslint-comparison code {
  font-size: 1em;
}
.eslint-comparison figcaption {
  font-weight: bold;
  margin: 0.5rem 0;
  text-align: center;
}

/* Make errors stand out. */
pre mark {
  color: unset;
  text-decoration: underline;
  background-color: #ffdddd;
  text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-style: wavy;
}
pre mark:empty::before {
  color: red;
  content: url("demo/carat.svg") / "^";
  content: url("demo/carat.svg");
  margin-left: -2px; /* (width of SVG) / 2 */
  margin-top: 4px; /* height of SVG */
  position: absolute;
}
@media (prefers-color-scheme: dark) {
  pre mark {
    background-color: #7a1965;
  }
}

/* text-decoration-style: wavy; is buggy in several browsers:

   * Wavy underline causes rendering artifacts
     (https://github.com/quick-lint/quick-lint-js/issues/513)
     * Not buggy: Brave version 0.61.51 Chromium: 73.0.3683.75 (Official Build) (64-bit)
     * Brave version 1.31.91 Chromium: 95.0.4638.69 (Official Build) (64-bit)
     * Brave version 1.32.106 Chromium: 96.0.4664.45 (Official Build) (arm64)
     * Chromium version 96.0.4664.45 (Official Build) for Linux Mint (64-bit)
     * Microsoft Edge version 91.0.864.15 (Official build) beta (64-bit)
   * Doesn't show wavy underline if text is too narrow (font-dependent;
     zoom-dependent)
     * Brave version 0.61.51 Chromium: 73.0.3683.75 (Official Build) (64-bit)
     * Chromium version 96.0.4664.45 (Official Build) for Linux Mint (64-bit)
     * Microsoft Edge version 91.0.864.15 (Official build) beta (64-bit)
   * Doesn't show wavy underline across full text sometimes
     * Microsoft Edge version 91.0.864.15 (Official build) beta (64-bit)
     * macOS Safari version 15.1 (17612.2.9.1.20)

  For now, use a simpler underlining scheme on possibly-buggy browsers.
*/
@supports (not (-moz-appearance: none)) {
  pre mark {
    text-decoration-style: solid;
  }
}

pre mark.unmark {
  text-decoration: none;
  background-color: transparent;
}
pre mark.unmark:empty::before {
  content: unset;
}

.install-logo,
.os-logo {
  height: 1.2em;
  vertical-align: text-bottom;
}

.inline-logo {
  height: 1em;
  vertical-align: text-bottom;
  width: 1em;
}

.os-column-table {
  display: grid;
  grid-template-areas: "linux macos windows";
}
.os-column-table h3 {
  margin-top: 0;
}
.os-column-table {
  margin-bottom: 1em;
  margin-top: 1em;
}

.os-column-table > * {
  border-left: 1px solid #ccc;
  padding-left: 1rem;
  padding-right: 1rem;
}
.os-column-table > .linux {
  border-left-color: transparent;
  grid-area: linux;
}
.os-column-table > .macos {
  grid-area: macos;
}
.os-column-table > .windows {
  grid-area: windows;
}

code.shell-session .long-shell-command-line {
  /* 6 = "$ ".length + 4 spaces of indentation */
  display: inline-block;
  padding-left: 6ch;
  text-indent: -6ch;
  white-space: normal;
}

code.shell-session kbd::before {
  content: "$ ";
}

/* Make keystrokes like "CTRL-S" and "RET" distinct from regular key presses. */
kbd.keystroke {
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0 0.25em;
}
@media (prefers-color-scheme: dark) {
  kbd.keystroke {
    border-color: rgba(255, 255, 255, 0.3);
  }
}

#error-box {
  background-color: #252526;
  color: yellow;
  border: 1px solid #fff;
  padding: 5px;
  font-size: 0.8rem;
  max-width: 300px;
  z-index: 999999;
}

@media only screen and (min-width: 34em) and (max-width: 40em) {
  .os-column-table ul {
    margin-left: 0;
    padding-left: 1em;
  }
}

/* Stack items on top of each other if the screen isn't wide enough to
         arrange them horizontally. */
@media only screen and (max-width: 34em) {
  .os-column-table {
    grid-template-areas: "linux" "macos" "windows";
  }
  .os-column-table > * {
    border-left: 0;
  }
}

.install-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem 0;
  padding: 0;
}
.install-options > li {
  list-style-type: none;
  margin: 0.375rem 0.5rem;
  padding: 0;
  white-space: nowrap;
}

.install-options a {
  /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
  background-color: rgb(240, 219, 79);
  border-radius: 0.5rem;
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.75px;
  padding: 0.75rem 1.25rem 0.5em 1.25rem;
  text-decoration: none;
}
.install-options a,
.install-options a:visited {
  /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
  color: rgb(50, 51, 48);
}
.install-options a:hover {
  /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
  background-color: rgba(240, 219, 79, 0.75);
}

.install-options {
  line-height: 1.4em;
}
.install-logo {
  height: 1.2em;
  width: 1.2em;
  vertical-align: text-bottom;
}

/* Side-bar navigation, if the viewport is wide enough. */
/* HACK(strager): max-width in this query should equal body's max-width (plus
   padding-left and padding-right), but we need to add a little bit in case of a
   scroll bar. 1em seems to be enough. */
@media only screen and (min-width: 51em) {
  body.side-bar-nav {
    --page-width: 49em;
    --side-bar-width: 8rem;
    max-width: var(--page-width);
  }

  /* Move the main content to the right to make room for the side bar. */
  .side-bar-nav > #content,
  .side-bar-nav > #header,
  .side-bar-nav > footer,
  .side-bar-nav > header,
  .side-bar-nav > main {
    margin-left: calc(var(--side-bar-width) + 0.5rem);
  }

  /* Make the side bar colors inverted from the main content's colors. */
  .side-bar-nav header nav.main-nav {
    background-color: #073642;
    color: #93a1a1;
  }
  .side-bar-nav header nav.main-nav a:link,
  .side-bar-nav header nav.main-nav a:visited {
    color: #eee8d5;
  }
  .side-bar-nav header nav.main-nav li a:hover {
    --hover-background-color: #586e75;
    background-color: var(--hover-background-color);
    background: linear-gradient(
      to left,
      var(--hover-background-color) 0,
      var(--hover-background-color) calc(var(--side-bar-width) + 1rem),
      rgba(0, 0, 0, 0) calc(var(--side-bar-width) + 25rem)
    );
  }
  @media (prefers-color-scheme: dark) {
    .side-bar-nav header nav.main-nav {
      background-color: #93a1a1;
      color: #586e75;
    }
    .side-bar-nav header nav.main-nav a:link,
    .side-bar-nav header nav.main-nav a:visited {
      color: #073642;
    }
    .side-bar-nav header nav.main-nav li a:hover {
      --hover-background-color: #839496;
    }
  }

  /* Move the side bar to the left of the content. */
  .side-bar-nav header nav.main-nav {
    bottom: 0;
    left: 0;
    margin-top: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: calc((100% - var(--page-width)) / 2 + var(--side-bar-width));
  }

  .side-bar-nav header nav.main-nav {
    word-break: break-word;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }

  .side-bar-nav header nav.main-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .side-bar-nav header nav.main-nav ul li {
    padding: 0;
    --nav-entry-padding: 0.5em;
  }

  .side-bar-nav header nav.main-nav li a:link,
  .side-bar-nav header nav.main-nav li .current-page {
    display: block;
    text-decoration: none;
  }

  .side-bar-nav header nav.main-nav li .current-page li {
    font-weight: initial;
  }

  .side-bar-nav header nav.main-nav li .current-page {
    font-weight: bold;
  }

  .side-bar-nav header nav.main-nav li.side-bar-only {
    display: unset;
  }

  .side-bar-nav header nav.main-nav li li a:link:after,
  .side-bar-nav header nav.main-nav li li .current-page:after {
    margin-left: 0.5em;
  }
  .side-bar-nav header nav.main-nav li li {
    --bullets-circle-width: 7px;
    --bullets-current-color: #93a1a1;
    --bullets-line-color: #93a1a1;
    --bullets-link-color: #eee8d5;
  }
  @media (prefers-color-scheme: dark) {
    .side-bar-nav header nav.main-nav li li {
      --bullets-current-color: #586e75;
      --bullets-line-color: #073642;
      --bullets-link-color: #073642;
    }
  }

  /* Extend the vertical line through each bullet (but not the last bullet). */
  .side-bar-nav header nav.main-nav li li:not(:nth-last-child(1)) a:link:before,
  .side-bar-nav
    header
    nav.main-nav
    li
    li:not(:nth-last-child(1))
    .current-page:before {
    bottom: 0;
  }
}

/*
 * quick-lint-js finds bugs in JavaScript programs.
 * Copyright (C) 2020  Matthew "strager" Glazar
 *
 * quick-lint-js is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * quick-lint-js is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
 */
