/* Match the docs to the banner.
 *
 * banner.svg draws the white wordmark on #12151C with an #A3ACB9 subline, an
 * amber #FFB547 divider stripe, and a wall of level meters: green #3BB273
 * base cells, amber #FFB547 middle cells, red #E6522C peaks, unlit #1C212B.
 * The accent is the amber; the logo is four of those meter columns.
 */
:root {
  --md-primary-fg-color:        #12151C;  /* banner background */
  --md-primary-fg-color--light: #1C212B;  /* unlit meter cells */
  --md-primary-fg-color--dark:  #0A0C10;
  --md-primary-bg-color:        #FFFFFF;  /* banner wordmark */
  --md-primary-bg-color--light: #A3ACB9;  /* banner subline */

  --md-accent-fg-color:         #FFB547;  /* banner divider and mid cells */
  --md-accent-fg-color--transparent: #FFB5471a;
}

/* 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:        #12151C;
  --md-code-bg-color:           #1C212B;
  --md-typeset-a-color:         #FFB547;
}

/* Light scheme: #FFB547 on white is 1.8:1, too faint for body links.
   #A66200 is the same hue at 4.8:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color:         #A66200;
  --md-accent-fg-color:         #A66200;  /* hovered links too */
}

/* Fixed logo size so the meter mark 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 it: 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 the header colour, which on the
   dark page is also the page background. Outline buttons take the link
   colour instead; primary buttons are amber with dark text (10.4:1). */
.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: #12151C;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background: #FFB547;
  border-color: transparent;
  color: #12151C;
}

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

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

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

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

/* The screenshot gallery on the home page: landscape crops of the dashboard
   and the alerts page, one per row at every width so each keeps the full
   content width, each with a short caption. (The reference site's three-across
   gallery is for portrait phone shots; this product has none.) */
.md-typeset .de-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 1em 0;
}

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

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

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