/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the wordmark in #f1f4f2 and the caption in #98a39c on a
 * #15191c plate; the four server blades are #1d2226 with #9be07a lights and
 * #67b028 labels. The mark is #0f8630 arcs over a #67b028 whale. The header
 * and the dark page use the plate; the green is the accent.
 */
:root {
  --md-primary-fg-color: #15191c; /* banner plate, used as the header */
  --md-primary-fg-color--light: #1d2226; /* server blade */
  --md-primary-fg-color--dark: #0e1113;
  --md-primary-bg-color: #f1f4f2; /* banner wordmark, text on the header */
  --md-primary-bg-color--light: #98a39c; /* banner caption */

  --md-accent-fg-color: #67b028; /* blade labels */
  --md-accent-fg-color--transparent: #67b0281a;
}

/* Dark scheme: the page body uses the plate too, so the header and the page
   read as one surface. #9be07a on #15191c is 11.2:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #15191c;
  --md-code-bg-color: #1d2226;
  --md-typeset-a-color: #9be07a;
}

/* Light scheme: #67b028 on white is 2.7:1, too faint for links. The
   mark's dark green #0f8630 is 4.7:1, so links use it at rest and on hover. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0f8630;
  --md-accent-fg-color: #0f8630;
  --md-accent-fg-color--transparent: #0f86301a;
}

/* 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: a heavy monospace face.
   Only the first topic is styled; Material puts the page title in a second
   .md-header__topic and swaps them on scroll. */
.md-header__topic:first-child .md-ellipsis {
  color: #f1f4f2;
  font-family: var(--md-code-font-family);
  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 the header colour, which on the
   dark page is also the page background. 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: #15191c;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #0f8630 is 4.7:1, on #0c6b26 6.7:1. */
  background: linear-gradient(90deg, #0f8630 0%, #0c6b26 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 #67b02859;
}

/* Grid cards: the border picks up the accent on hover, matching the 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: #67b028;
}

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

/* Paths and variable names in tables, such as
   /opt/genieacs/dist/bin/genieacs-<service> or GENIEACS_MONGODB_CONNECTION_URL,
   must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}