/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is a cream plate (#f6f1e7) with the name in near-black
 * (#1c1917) and a row of base tiles in green #16a34a (A), blue #2563eb (C),
 * amber #d97706 (G) and red #dc2626 (T). The header inverts the banner: the
 * near-black as the surface, the cream as the text, the blue as the accent.
 * mkdocs.yml sets `primary: custom` and `accent: custom`, so Material paints
 * nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #1c1917; /* banner wordmark, the header surface */
  --md-primary-fg-color--light: #292524;
  --md-primary-fg-color--dark: #0c0a09;
  --md-primary-bg-color: #f6f1e7; /* banner plate, the text on the header */
  --md-primary-bg-color--light: #d6d3d1;

  --md-accent-fg-color: #2563eb; /* the C tile */
  --md-accent-fg-color--transparent: #2563eb1a;
}

/* Dark scheme: the page body uses the header colour too, so the header and
   the page read as one surface. #2563eb on #1c1917 is 3.9:1, too faint for
   body text; #60a5fa is the same hue at 7.4:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1c1917;
  --md-code-bg-color: #292524;
  --md-typeset-a-color: #60a5fa;
}

/* Light scheme: #2563eb on white is 4.5:1, on the edge. #1d4ed8 is the same
   hue at 6.3:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1d4ed8;
}

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

/* Grid cards: the border picks up the accent 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: #2563eb;
}

/* 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: # Personal Genome Pipeline { .pgp-visually-hidden } */
.md-typeset h1.pgp-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;
}

/* Tool, gene and file names in tables (quay.io/biocontainers/expansionhunter:5.0.0,
   ${SAMPLE}_sorted.bam) must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* The banner is a cream plate with rounded corners in the SVG itself; on the
   dark page it needs no frame. Give it the same radius as the cards. */
.md-typeset .pgp-banner img {
  border-radius: 0.5rem;
}