/* Match the docs to the banner.
 *
 * banner.svg draws the wordmark in white on #3b0764 (deep purple), the
 * tagline in #fed7aa (pale orange) and the cassette in #f97316 (orange).
 * The logo is the cassette. These values keep the header, the logo and the
 * page in one palette.
 */
:root {
  --md-primary-fg-color:        #3B0764;  /* banner background */
  --md-primary-fg-color--light: #581C87;
  --md-primary-fg-color--dark:  #2A0548;
  --md-primary-bg-color:        #FFF7ED;  /* text on the header: the cassette label cream */
  --md-primary-bg-color--light: #FED7AA;  /* banner tagline */

  --md-accent-fg-color:         #F97316;  /* banner accent: the cassette */
  --md-accent-fg-color--transparent: #F973161a;
}

/* 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:        #3B0764;
  --md-code-bg-color:           #2A0548;
  --md-typeset-a-color:         #F97316;
}

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

/* The header logo is the cassette, wider than tall. Fix the height and let
   the width follow, so it is not squeezed into a square. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* The site name, set the way banner.svg sets the wordmark: white, heavy,
   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: #FFFFFF;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 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. On
 * the dark page that is also the page background, so a button would show as
 * plain text. 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 #F97316 is 2.8:1. #C2410C -> #9A3412 keeps every point above
     4.5:1. */
  background: linear-gradient(90deg, #C2410C 0%, #9A3412 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 #F9731659;
}

/* Grid cards: the border picks up the accent 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: #F97316;
}

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

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

/* The screenshot gallery on the home page: two wide shots per row on a wide
   screen, one per row on a narrow one, each with a short caption. */
.md-typeset .wa-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

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

.md-typeset .wa-gallery img {
  border-radius: 0.4rem;
  border: 1px solid #F973164d;
}

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

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