/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the wordmark in #16241b on a #f7f8f6 plate, the arcs of
 * the mark and the "mcp" of the wordmark in #0F8630, and the whale and the
 * divider in #67B028. The header uses the wordmark colour, the accent the
 * whale green. mkdocs.yml sets primary and accent to custom, so nothing is
 * painted until these variables exist.
 */
:root {
  --md-primary-fg-color: #16241b; /* banner wordmark, used as the header */
  --md-primary-fg-color--light: #22352a;
  --md-primary-fg-color--dark: #0f1a13;
  --md-primary-bg-color: #f2f6f2; /* text on the header */
  --md-primary-bg-color--light: #9fb3a6;

  --md-accent-fg-color: #67b028; /* banner accent: the whale and the divider */
  --md-accent-fg-color--transparent: #67b0281a;
}

/* Dark scheme: the page body uses the header colour too, so the header and
   the page read as one surface. #67b028 on #16241b is 6.0:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #16241b;
  --md-code-bg-color: #1f3126;
  --md-typeset-a-color: #67b028;
}

/* Light scheme: #67b028 on white is 2.7:1, too faint for body links. The
   banner's dark green #0f8630 is 4.7:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0f8630;
}

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

.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-mcp { .gm-visually-hidden } */
.md-typeset h1.gm-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;
}

/* Variable names and parameter paths in tables, such as
   InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.SSID, must not wrap
   mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}