/* docs/stylesheets/theme.css: the site takes its two colours from the banner
 * (windmills at dusk): the night sky and the glow on the horizon.
 *
 * mkdocs.yml sets `primary: custom` and `accent: custom`, which means Material
 * paints nothing until these variables exist.
 */
:root {
  --md-primary-fg-color:        #11162C;  /* banner background */
  --md-primary-fg-color--light: #22335A;
  --md-primary-fg-color--dark:  #0A0A10;
  --md-primary-bg-color:        #F7F5F0;  /* text on the header */
  --md-primary-bg-color--light: #C9B6A0;

  --md-accent-fg-color:         #FFE0B8;  /* banner accent */
  --md-accent-fg-color--transparent: #FFE0B81A;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #11162C;
  --md-code-bg-color:           #22335A;
  --md-typeset-a-color:         #FFE0B8;
}

/* Light scheme: the glow on white is far too faint for body links. #8A6A44 is
   the banner's own warm brown and passes 4.5:1 on white (about 5.0:1). */
[data-md-color-scheme="default"] {
  --md-typeset-a-color:         #8A6A44;
  --md-accent-fg-color:         #8A6A44;
}

/* Give the header logo a fixed 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 its wordmark: weight 700, white,
   letter-spacing 1.5 on 52px, which is 0.03em.
 *
 * 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 the page title too.
 */
.md-header__topic:first-child .md-ellipsis {
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.03em;
}

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

/* 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: var(--md-typeset-a-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: # Awesome Spain { .as-visually-hidden } */
.md-typeset h1.as-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;
}

/* The per-entry shields.io badges are inline images inside list items. Keep
   them on the text baseline and stop a wrapped line from opening a gap. */
.md-typeset li > a > img,
.md-typeset li > img {
  vertical-align: middle;
}

/* Gallery class from the kit, kept for parity with the other sites: a row of
   figures with captions, four across on a wide screen, two on a narrow one.
   Unused today (a list has no screenshots). */
.md-typeset .as-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

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

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

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

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