/* docs/stylesheets/theme.css: the site takes its colours from docs/images/banner.svg.
 *
 * The banner is a near-black #17181d plate with a cream #f5f1e6 wordmark, a grey
 * #a9adb8 subtitle, a #2a2c34 clapperboard body and #0c0d10 sticks. It has no
 * accent colour, so the link colour is chosen here: amber #e6b450 on the dark
 * page (9.3:1) and the same hue darkened to #7a5200 on white (6.9:1). Both pass
 * 4.5:1 for body links.
 */
:root {
  --md-primary-fg-color: #17181d; /* banner background */
  --md-primary-fg-color--light: #2a2c34; /* clapperboard body */
  --md-primary-fg-color--dark: #0c0d10; /* clapper sticks */
  --md-primary-bg-color: #f5f1e6; /* wordmark, text on the header */
  --md-primary-bg-color--light: #a9adb8; /* banner subtitle */

  --md-accent-fg-color: #e6b450;
  --md-accent-fg-color--transparent: #e6b4501a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #17181d;
  --md-code-bg-color: #2a2c34;
  --md-typeset-a-color: #e6b450;
}

/* Light scheme: #e6b450 on white is 1.9:1. #7a5200 is the same hue at 6.9:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #7a5200;
}

/* 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 the wordmark: heavy cream.
   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: #f5f1e6;
  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 --md-primary-fg-color, 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: #ffffff;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #7a5200 is 6.9:1; the gradient end #6b4a00 is 8.1:1. */
  background: linear-gradient(90deg, #7a5200 0%, #6b4a00 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 #e6b45059;
}

/* Grid cards: the border picks up the link colour on hover, so the cards match
   the buttons and 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: #e6b450;
}

/* The home page hides the table of contents, so its column is wide enough for
   three cards and the fourth wraps alone. Two columns keep the four cards in
   a 2x2 block; phones still get one column from Material's own rule. The
   grid is the .grid element itself (Material sets its <ul> to display:
   contents). */
@media screen and (min-width: 45em) {
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 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: # quality-gate-encoder { .qge-visually-hidden } */
.md-typeset h1.qge-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 table, such as SKIP_IF_LOW_QUALITY_EXISTS,
   must not wrap mid-word. Material sets word-break: break-word on code; normal
   keeps a name whole but still lets a long log line wrap at its spaces. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* Home page gallery: the phone shot, the player and the library grid in one
   row on a wide screen, stacked on a narrow one, each with a short caption. */
.md-typeset .qge-shot-gallery {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 0.8rem;
  align-items: start;
  margin: 1em 0;
}

.md-typeset .qge-shot-gallery figure {
  margin: 0;
}

.md-typeset .qge-shot-gallery img {
  border-radius: 0.4rem;
}

.md-typeset .qge-shot-gallery figcaption {
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

/* Getting started: the phone shot beside the player shot. The two images are
   Markdown images in their own paragraphs inside a <div markdown>, so MkDocs
   rewrites their paths for the /getting-started/ URL (a raw <img> is not
   rewritten and 404s there). */
.md-typeset .qge-shot-row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 1em 0;
}

.md-typeset .qge-shot-row > p {
  margin: 0;
}

.md-typeset .qge-shot-row > p:first-child {
  flex: 0 0 28%;
}

.md-typeset .qge-shot-row > p:last-child {
  flex: 0 0 70%;
}

.md-typeset .qge-shot-row img {
  width: 100%;
  border-radius: 0.4rem;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .qge-shot-gallery {
    grid-template-columns: 1fr;
  }

  .md-typeset .qge-shot-row {
    flex-direction: column;
  }

  .md-typeset .qge-shot-row > p:first-child,
  .md-typeset .qge-shot-row > p:last-child {
    flex: none;
  }
}