/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg weaves coral strips (#ff7a59, shaded to #b8472f) through cyan
 * strips (#4cc9f0, shaded to #2a86a8), one colour per language, and sets the
 * name in white serif on a #15131f plate. The header and the dark page use
 * the plate; links are cyan and turn coral on hover. mkdocs.yml sets
 * `primary: custom` and `accent: custom`, so Material paints nothing until
 * these variables exist.
 */
:root {
  --md-primary-fg-color: #15131f; /* banner plate */
  --md-primary-fg-color--light: #1e1b2b;
  --md-primary-fg-color--dark: #0f0d17; /* the gaps in the weave */
  --md-primary-bg-color: #ffffff; /* banner wordmark */
  --md-primary-bg-color--light: #b9b3c9; /* banner tagline */

  --md-accent-fg-color: #ff7a59; /* coral strip */
  --md-accent-fg-color--transparent: #ff7a591a;
}

/* Dark scheme: the page body uses the plate colour too, so the header and
   the page read as one surface. #4cc9f0 on #15131f is 9.5:1, #ff7a59 7.2:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #15131f;
  --md-code-bg-color: #1e1b2b;
  --md-typeset-a-color: #4cc9f0;
}

/* Light scheme: #4cc9f0 on white is 1.9:1 and #ff7a59 2.6:1, too faint.
   #1f7390 is the cyan at 5.4:1 and #b8472f, the banner's own coral shade,
   is 5.3:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1f7390;
  --md-accent-fg-color: #b8472f;
  --md-accent-fg-color--transparent: #b8472f1a;
}

/* 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: a bold serif.
 * The banner draws it in a Palatino-style face as outlines; the header uses
 * the closest installed serif, no web font.
 *
 * 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-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}

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

[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 #1f7390 is 5.4:1. */
  background: #1f7390;
  border-color: transparent;
  color: #ffffff;
}

/* Grid cards: the border picks up the coral on hover, the second strip of
   the weave next to the cyan 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: var(--md-accent-fg-color);
}

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

/* Phone-sized screenshots on the home page (the merged book, one per
   language order): side by side on a wide screen, each with a caption. */
.md-typeset .elm-phone-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 16rem));
  justify-content: center;
  gap: 1.2rem;
  margin: 1em 0;
}

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

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

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