/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is a light scene: sky #8cc4f5, grass #6fb43f, the name in a
 * blocky capital wordmark in navy #0f1a2e with the tagline in #1e3a5f, and a
 * white viewfinder with a red recording dot #e62117. The site is dark first,
 * so the header and the dark page take the wordmark navy, and the accent is
 * the sky. mkdocs.yml sets `primary: custom` and `accent: custom`, so
 * Material paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #0f1a2e; /* banner wordmark */
  --md-primary-fg-color--light: #1e3a5f; /* banner tagline */
  --md-primary-fg-color--dark: #080e19;
  --md-primary-bg-color: #ffffff; /* banner viewfinder */
  --md-primary-bg-color--light: #8cc4f5; /* banner sky */

  --md-accent-fg-color: #8cc4f5; /* banner sky */
  --md-accent-fg-color--transparent: #8cc4f51a;
}

/* Dark scheme: the page body uses the header navy too, so the header and the
   page read as one surface. #8cc4f5 on #0f1a2e is 9.4:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1a2e;
  --md-code-bg-color: #162640;
  --md-typeset-a-color: #8cc4f5;
}

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

/* 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 capitals
 * with open spacing.
 *
 * 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.04em;
  text-transform: uppercase;
}

/* 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);
  /* The page colour: navy on the sky in the dark scheme (9.4:1), white on
     #1f6fb5 in the light one (5.3:1). */
  color: var(--md-default-bg-color);
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* The sky and the grass, each darkened until white text passes 4.5:1
     (#1f6fb5 5.3:1, #3f7d2a 5.0:1). */
  background: linear-gradient(90deg, #1f6fb5 0%, #3f7d2a 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 #8cc4f559;
}

/* Grid cards: the border picks up the banner's grass 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: #6fb43f;
}

/* 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: # Minecraft YouTube Follower { .myf-visually-hidden } */
.md-typeset h1.myf-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 CAMERA_UPDATE_INTERVAL_MS,
   must not wrap mid-word. Material sets word-break: break-word on code;
   normal keeps a name whole but still lets a long line wrap at its spaces. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* Stream frames on the home page, once they exist (section 7 of the site
   plan): a row of stills with a short caption each, two on a narrow screen. */
.md-typeset .myf-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

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

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

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

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