/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws on #1e1a17: the ring of the mark in rust #c4502a, the
 * network inside it in #e07a4a with #f2b36b nodes, the wordmark in #f6ede4
 * and the tagline in #f2b36b. The header and the dark page use the banner
 * background; links and the accent use #e07a4a. mkdocs.yml sets primary and
 * accent to custom, so nothing is painted until these variables exist.
 */
:root {
  --md-primary-fg-color: #1e1a17; /* banner background */
  --md-primary-fg-color--light: #2a2420;
  --md-primary-fg-color--dark: #14110f;
  --md-primary-bg-color: #f6ede4; /* banner wordmark */
  --md-primary-bg-color--light: #f2b36b; /* banner tagline */

  --md-accent-fg-color: #e07a4a; /* banner network lines */
  --md-accent-fg-color--transparent: #e07a4a1a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. #e07a4a on #1e1a17 is 5.8:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1e1a17;
  --md-code-bg-color: #2a2420;
  --md-typeset-a-color: #e07a4a;
}

/* Light scheme: #e07a4a on white is 3.0:1, too faint for body links. The
   banner's darker rust #a8401f is 6.1:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #a8401f;
}

/* 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 the wordmark: heavy and tight.
   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: #f6ede4;
  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 #a8401f is 6.1:1, on #7a2e14 9.4:1. */
  background: linear-gradient(90deg, #a8401f 0%, #7a2e14 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 #e07a4a59;
}

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

/* 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: # tailscale-rs { .tr-visually-hidden } */
.md-typeset h1.tr-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;
}

/* Type and method names in tables, such as tsnet::Server or
   listen_funnel(...), must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}