/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is an amber plate (#F2B33D) with the wordmark in #1A1A1A and the
 * tagline in #3A2A12. The header is that plate; the page body stays Material's
 * own dark or light surface, because an amber page would be unreadable.
 * mkdocs.yml sets `primary: custom` and `accent: custom`, so Material paints
 * nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #f2b33d; /* banner plate: header and tabs */
  --md-primary-fg-color--light: #f7c766;
  --md-primary-fg-color--dark: #d99a1f;
  --md-primary-bg-color: #1a1a1a; /* banner wordmark: text on the header */
  --md-primary-bg-color--light: #3a2a12; /* banner tagline */

  --md-accent-fg-color: #f2b33d; /* banner plate as the accent */
  --md-accent-fg-color--transparent: #f2b33d1a;
}

/* Dark scheme: amber links on the slate surface (about 9:1). */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #f2b33d;
}

/* Light scheme: #F2B33D on white is under 2:1, too faint for body links.
   #8A5A00 is the same hue darkened to 5.9:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #8a5a00;
  --md-accent-fg-color: #8a5a00;
  --md-accent-fg-color--transparent: #8a5a001a;
}

/* 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: heavy and tight.
 *
 * 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: #1a1a1a;
  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 amber
   header reads as a blob. 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: #1a1a1a;
}

/* Grid cards: the border picks up the link colour on hover. */
.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: var(--md-typeset-a-color);
}

/* 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: # WhisperSubs { .ws-visually-hidden } */
.md-typeset h1.ws-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;
}

/* Setting names and file templates in tables must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* The screenshots on the home page: two desktop shots per row on a wide
   screen, one per row on a narrow one, each with a short caption. The phone
   shot is narrower and sits centred in its cell. */
.md-typeset .ws-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

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

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

.md-typeset .ws-gallery figure.ws-phone img {
  max-height: 24rem;
  width: auto;
}

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

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