/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the name in #ffffff and the tagline in #9fb3c8 on #0c1a2b,
 * with a rooftop antenna whose radio unit has a green status light, #3ddc84.
 * The header and the dark page use the banner background; the accent is the
 * status light. mkdocs.yml sets `primary: custom` and `accent: custom`, so
 * Material paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color: #0c1a2b; /* banner background */
  --md-primary-fg-color--light: #1d2b3a; /* banner cable colour */
  --md-primary-fg-color--dark: #070f19;
  --md-primary-bg-color: #ffffff; /* banner wordmark */
  --md-primary-bg-color--light: #9fb3c8; /* banner tagline */

  --md-accent-fg-color: #3ddc84; /* status light */
  --md-accent-fg-color--transparent: #3ddc841a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. #3ddc84 on #0c1a2b is 9.8:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0c1a2b;
  --md-code-bg-color: #1d2b3a;
  --md-typeset-a-color: #3ddc84;
}

/* Light scheme: #3ddc84 on white is 1.8:1, too faint for body links.
   #1a7f4b is the same hue at 5.0:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1a7f4b;
}

/* 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: bold, 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: #ffffff;
  font-weight: 700;
  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: #0c1a2b; /* on #3ddc84: 9.8:1; white there would be 1.8:1 */
}

/* Light scheme: the hover fill is #1a7f4b, where white is 5.0:1. */
[data-md-color-scheme="default"] .md-typeset .md-button:focus,
[data-md-color-scheme="default"] .md-typeset .md-button:hover {
  color: #ffffff;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #3ddc84 is 1.8:1. #1a7f4b -> #0f5f35 keeps every point above
     4.5:1 (5.0:1 and 7.8:1). */
  background: linear-gradient(90deg, #1a7f4b 0%, #0f5f35 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 #3ddc8459;
}

/* Grid cards: the border picks up the accent on hover, so the cards match
   the buttons and 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: #3ddc84;
}

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

/* File names and column names in tables, such as listaEXCEEDfijo.csv, must
   not wrap mid-word. Material sets word-break: break-word on code; normal
   keeps a name whole but still lets a long line wrap at its spaces. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* The screenshots on the home page, once they exist (section 7 of the site
   plan): up to four in a row on a wide screen, two on a narrow one, each
   with a short caption. The app has no phone layout, so these are desktop
   crops of single tabs. */
.md-typeset .si-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

.md-typeset .si-gallery figure {
  margin: 0;
}

.md-typeset .si-gallery img {
  border-radius: 0.4rem;
}

.md-typeset .si-gallery figcaption {
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .si-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}