/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the wordmark in #16241b on a #e3e8ec plate, with the
 * GenieACS mark (arcs #0F8630, whale #67B028) in a white disc. The header
 * uses the wordmark colour, the accent the whale green, the same palette as
 * the genieacs-mcp and genieacs-container sites. 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 */
  --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
   mark'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 for Home Assistant { .gha-visually-hidden } */
.md-typeset h1.gha-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;
}

/* Parameter paths in tables, such as
   WANDevice.1.WANConnectionDevice.1.WANIPConnection.1.ExternalIPAddress,
   must not wrap mid-word; Material scrolls a table that is too wide. */
.md-typeset table:not([class]) code {
  word-break: normal;
}