/* Match the docs to the banner and the app icon.
 *
 * banner.svg is a fuel-station price board: near-black #050505, amber #f59e0b
 * digits, and one price lit in emerald #34d399 as the cheapest, with the
 * tagline in the same emerald. The app icon is an emerald-to-cyan tile. The
 * header and the page take the board's black; links take the emerald.
 */
:root {
  --md-primary-fg-color:        #050505;  /* banner background */
  --md-primary-fg-color--light: #1d1a14;  /* unlit segments */
  --md-primary-fg-color--dark:  #000000;
  --md-primary-bg-color:        #ffffff;  /* wordmark */
  --md-primary-bg-color--light: #a3a3a3;

  --md-accent-fg-color:         #34d399;  /* the cheapest price, lit */
  --md-accent-fg-color--transparent: #34d3991a;
}

/* 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:        #050505;
  --md-code-bg-color:           #171717;
  --md-typeset-a-color:         #34d399;
}

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

/* Give the header logo a fixed 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 its wordmark: white, 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: #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: #050505;
}

/* The primary button takes the board's amber. Black on #f59e0b is 9.6:1. */
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  border-color: transparent;
  color: #050505;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  box-shadow: 0 0.2rem 0.8rem #f59e0b59;
}

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

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

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

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

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

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

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

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