/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is beige paper (#eadcc6) with the wordmark in heavy dark brown
 * ink (#2b2118) and the tagline in a lighter brown (#7a6650). The header is
 * the ink, the text on it is the paper, and links are the tagline brown:
 * lightened to #c9a97a on the dark page (7.1:1 on #2b2118), as is on white
 * (5.5:1). mkdocs.yml sets `primary: custom` and `accent: custom`, so Material
 * paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #2b2118; /* banner ink */
  --md-primary-fg-color--light: #3a2e23;
  --md-primary-fg-color--dark: #1c1610;
  --md-primary-bg-color: #eadcc6; /* banner paper: text on the header */
  --md-primary-bg-color--light: #b5ab9b; /* banner receipt grey */

  --md-accent-fg-color: #c9a97a; /* tagline brown, lightened for the dark page */
  --md-accent-fg-color--transparent: #c9a97a1a;
}

/* Dark scheme: the page body uses the header colour too, so the header and
   the page read as one surface. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #2b2118;
  --md-code-bg-color: #3a2e23;
  --md-typeset-a-color: #c9a97a;
}

/* Light scheme: the tagline brown itself, 5.5:1 on white. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #7a6650;
}

/* 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 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: #eadcc6;
  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 #7a6650 is 5.5:1 and on #6b5747 6.8:1. */
  background: linear-gradient(90deg, #7a6650 0%, #6b5747 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 #c9a97a59;
}

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

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

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

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

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

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

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