/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the wordmark in white on a plum plate #1d1428, the tagline
 * in #c7b6d6, and the book in cream #f3ead8 with a coral band #e76f51. The
 * logo is the same book. These values keep the header, the logo and the page
 * in one palette. mkdocs.yml sets `primary: custom` and `accent: custom`, so
 * Material paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #1d1428; /* banner plate */
  --md-primary-fg-color--light: #2a1e3a;
  --md-primary-fg-color--dark: #140e1c;
  --md-primary-bg-color: #ffffff; /* wordmark */
  --md-primary-bg-color--light: #c7b6d6; /* tagline */

  --md-accent-fg-color: #e76f51; /* the coral band on the book */
  --md-accent-fg-color--transparent: #e76f511a;
}

/* Dark scheme: the page body uses the banner plate too, so the header and
   the page read as one surface. Coral on the plate is 5.7:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1d1428;
  --md-code-bg-color: #2a1e3a;
  --md-typeset-a-color: #e76f51;
}

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

/* 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: 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 --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 #e76f51 is 3.1:1; white on #b8482c is 5.3:1. */
  background: #b8482c;
  border-color: transparent;
  color: #ffffff;
}

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

/* Four cards read as two rows of two. With the side nav and the table of
   contents hidden, the home page is wide enough for Material's default 16rem
   minimum (set on .grid; the list inside it is display: contents) to fit
   three cards in a row and leave the fourth alone on a second row. A 22rem
   minimum gives two columns on a wide screen and one on a narrow one. */
.md-typeset .grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 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: # smart-covers { .sc-visually-hidden } */
.md-typeset h1.sc-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 in tables must not wrap mid-word. Material sets
   word-break: break-word on code; normal keeps a name whole. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

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

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

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

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

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