/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the name in white on #0e1330, the buildings in #1b2048
 * and #232a5a with windows lit #ffd67a, a black #050608 caption strip, and
 * the tagline and the "YOU:" caption in amber #ffb347. The header and the
 * dark page use the banner background, the accent is the amber. mkdocs.yml
 * sets primary and accent to custom, so nothing is painted until these
 * variables exist.
 */
:root {
  --md-primary-fg-color: #0e1330; /* banner background */
  --md-primary-fg-color--light: #1b2048; /* banner building */
  --md-primary-fg-color--dark: #050608; /* banner caption strip */
  --md-primary-bg-color: #ffffff; /* banner wordmark */
  --md-primary-bg-color--light: #9aa0c3; /* muted header text, 7.1:1 on the header */

  --md-accent-fg-color: #ffb347; /* banner tagline and caption */
  --md-accent-fg-color--transparent: #ffb3471a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. #ffb347 on #0e1330 is 10.2:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0e1330;
  --md-code-bg-color: #1b2048;
  --md-typeset-a-color: #ffb347;
}

/* Light scheme: #ffb347 on white is 1.8:1, far too faint for body links.
   #a35a00 is the same hue at 5.2:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #a35a00;
}

/* Fixed logo size so it does not crowd the site name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* The site name, set the way banner.svg sets it: white and heavy.
 *
 * Only the first topic is styled. Material puts the site name in one
 * .md-header__topic and the page title in a second one, and swaps them on
 * scroll. Styling both would change every page title too.
 */
.md-header__topic:first-child .md-ellipsis {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Keep the mark and the name close, so they read as one unit. */
.md-header__button.md-logo {
  padding-right: 0.2rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

/* Buttons. Material paints .md-button in the header colour, which on the
   dark page is also the page background. Outline buttons take the link
   colour instead. */
.md-typeset .md-button {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  border-radius: 0.5rem;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  color: #0e1330;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #a35a00 is 5.2:1, on #8a4b00 6.8:1. */
  background: linear-gradient(90deg, #a35a00 0%, #8a4b00 100%);
  border-color: transparent;
  color: #ffffff;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  box-shadow: 0 0.2rem 0.8rem #ffb34759;
}

/* Grid cards: the border picks up the accent on hover, matching the links. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:focus-within,
.md-typeset .grid > .card:hover {
  border-color: #ffb347;
}

/* The home page keeps an H1 for search, screen readers and the browser tab.
   The banner under it already shows the name, so the H1 is hidden visually.
   Use it as: # hark-viewer { .hv-visually-hidden } */
.md-typeset h1.hv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Variable names in the Configuration tables, such as
   HARK_VIEWER_START_TIMEOUT, must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* Screenshots of the page: a thin border, so the dark page shot does not
   melt into the dark site. */
.md-typeset img.hv-shot {
  border: 1px solid #232a5a;
  border-radius: 0.5rem;
}