/* 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 auto 1rem auto;
}
img + figcaption,
picture + figcaption,
video + figcaption,
.side-by-side-comparison + figcaption,
pre + figcaption {
  font-style: italic;
}
figure > picture > img,
figure > img,
figure > svg,
figure > video {
  width: 100%;
  height: auto;
}
img + figcaption,
picture + figcaption,
pre.emphasized + figcaption,
video + figcaption,
.side-by-side-comparison + figcaption {
  text-align: center;
}

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
table thead th,
table tfoot th {
  background-color: rgba(0, 0, 0, 0.03);
}
table th,
table td {
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
table caption {
  font-style: italic;
  text-align: center;
  margin-bottom: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  table thead th,
  table tfoot th {
    background-color: rgba(255, 255, 255, 0.1);
  }
  table th,
  table td {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

figure > pre + figcaption,
.eslint-comparison figcaption {
  margin: 0.5rem 0;
  text-align: center;
}

figure > pre:first-child,
figure > figcaption + pre,
.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) {
  figure > pre:first-child,
  figure > figcaption + pre,
  .eslint-comparison .example pre {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.1);
  }
}

.side-by-side-comparison {
  display: grid;
  grid-template-areas: "before after";
}
.side-by-side-comparison .before {
  grid-area: before;
}
.side-by-side-comparison .after {
  grid-area: after;
}
.side-by-side-comparison figure {
  margin: 0.5em;
}
.side-by-side-comparison figcaption {
  font-style: italic;
  text-align: center;
  margin-bottom: 0.5em;
}

header {
  margin-top: 1rem;
}

#title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}
#title 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 [aria-current] {
  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 [aria-current] {
  position: relative;
}
header nav.main-nav li li a:link:before,
header nav.main-nav li li [aria-current]: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 [aria-current]: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 [aria-current]: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 [aria-current]: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);
  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 > #title {
  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, hide the tag line. */
@media only screen and (max-width: 32em) {
  header {
    grid-template-areas:
      "mascot title main-nav"
      "mascot title main-nav"
      "breadcrumbs breadcrumbs main-nav";
  }
  header > .tag-line {
    display: none;
  }
}

footer,
h2 {
  border-top: 1px solid #ccc;
  padding-top: 1rem;
}
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin-left: 2rem;
  margin-right: 2rem;
}
h1 + h2 {
  /* Don't add a border between two headings. */
  border-top: 0;
  padding-top: 0;
}

h1 {
  /* TODO(strager): Tweak this for better aesthetics. */
  margin-bottom: 1.25rem;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.17rem;
  margin-bottom: 1.17rem;
  margin-top: 1.17rem;
}
h3 {
  font-size: 1rem;
  margin-bottom: 1.33rem;
  margin-top: 1.33rem;
}
h4 {
  font-size: 1rem;
  margin-bottom: 1.67rem;
  margin-top: 1.67rem;
}

main > h1:first-child,
main > hgroup:first-child > h1:first-child {
  margin-top: 0;
}

/* Style subtitles. */
hgroup p {
  font-style: italic;
}

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: "➤ ";
}

/* HACK(strager): The '>' symbol pushes some breadcrumbs down for some reason.
   This causes vertical misalignment between breadcrumbs. Fix this by tweaking
   line-height. I don't know why this works. */
nav.breadcrumbs ol > li {
  line-height: 100%;
}

@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;
  }
  .logo[data-icon="macos"] {
    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 code {
  font-size: 1em;
}
.eslint-comparison figcaption {
  font-weight: bold;
}

ins {
  text-decoration: none;
}

/* Make errors stand out. */
pre mark,
.diagnostic {
  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 {
  --svg-height: 4px;
  background: none;
  display: inline-block;
  height: 1em;
  height: calc(1lh + var(--svg-height));
  margin-left: -2px; /* (width of SVG) / 2 */
  position: absolute;
  width: 6px;
}
pre mark:empty::before {
  color: red;
  content: url("demo/carat.svg") / "^";
  content: url("demo/carat.svg");
  margin-top: var(--svg-height);
  position: absolute;
}
@media (prefers-color-scheme: dark) {
  pre mark,
  .diagnostic {
    background-color: #7a1965;
  }
}

/* Make diffs look pretty. */
pre ins {
  text-decoration: none;
}
pre del {
  text-decoration: none;
  opacity: 0.5;
}

.diff ins::before {
  content: "+";
}
.diff ins {
  color: rgb(68, 141, 20);
}
@media (prefers-color-scheme: dark) {
  .diff ins {
    color: rgb(98, 181, 60);
  }
}
.diff del::before {
  content: "-";
}
.diff del {
  color: rgb(220, 50, 47);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  .diff del {
    color: rgb(240, 90, 87);
  }
}

/* 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;
}

/* Make the details summaries (which are clickable) look more like links. */
summary {
  cursor: pointer;
  text-decoration: underline;
}

/* Make details summaries act like unobtrusive section headings. */
summary {
  margin-top: 1em;
  font-weight: bold;
}
summary h3 {
  display: inline;
  font-size: inherit;
}
summary + h4 {
  margin-top: 0.75em;
}

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

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

.os-column-table {
  display: grid;
  grid-template-areas: "linux macos windows";
}
.os-column-table h2 {
  margin-top: 0;
  /* Disable default top border for <h2>. */
  border-top: 0;
  padding-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: "$ ";
}
code.shell-session.windows 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,
.error-box {
  background-color: #252526;
  color: yellow;
  border: 1px solid #fff;
  padding: 5px;
  font-size: 0.8rem;
  max-width: 300px;
  user-select: none;
  z-index: 100;
}

@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;
  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;
}

/* 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 [aria-current] {
    display: block;
    text-decoration: none;
  }

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

  .side-bar-nav header nav.main-nav li [aria-current] {
    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 [aria-current]: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))
    [aria-current]:before {
    bottom: 0;
  }
}
.show-in-mobile {
  display: none;
}
#supported-editors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2em;
  text-align: center;
  padding: 2em;
}
#supported-editors .logo {
  width: 2rem;
  height: 2rem;
}
#supported-editors a {
  background-color: rgb(240, 219, 79);
  border-radius: 0.5rem;
  margin: 0 0.5rem 0 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  text-decoration: none;
}
#supported-editors a {
  color: rgb(50, 51, 48);
}
@media only screen and (max-width: 43em) {
  .hide-in-mobile {
    display: none;
  }

  .show-in-mobile {
    display: initial;
  }
  .comparison table {
    border: 1px solid gray;
  }
  /*Hide call to action section*/
  #install-section {
    display: none;
  }
  #editors-support img {
    padding-bottom: 1rem;
  }
}

@media only screen and (max-width: 46em) {
  .eslint-comparison {
    border-bottom: solid 1px #aaaa;
    grid-template-areas: "eslint" "qljs";
    grid-template-columns: 100%;
    grid-gap: 0;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }

  .eslint-comparison figure {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 37em) {
  #supported-editors {
    font-size: small;
  }
}

/* Scrollable container */
@media screen and (max-width: 670px) {
  pre {
    overflow-x: auto;
    max-height: 400px;
  }
}

/*
 * 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/>.
 */