/* Compact pill row for the Google Doc / PDF links at the top of every
   synced page (scripts/sync_gdocs.py build_page). Material's default
   .md-button is wide enough that the three links stack vertically on
   phones; sized as pills they share a single row. */
.md-typeset .doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1em;
}

.md-typeset .doc-links .md-button {
  margin: 0;
  padding: 0.3em 0.9em;
  font-size: 0.64rem;
  border-radius: 2em;
}

/* Title + lead + CTA shrink-wrap to the subtitle so the
   button is that same width and sits directly under it. */
.md-typeset .home-landing .home-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.md-typeset .home-landing .home-hero > h1 {
  margin-bottom: 0.4em;
  font-size: 2.25em;
}

.md-typeset .home-landing .home-hero > h1 + p {
  margin: 0;
}

.md-typeset .home-landing .home-cta {
  margin: 1em 0 1.25em;
}

.md-typeset .home-landing .home-cta .md-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

/* Home cards: same flat surface as the header bar, hairline
   border, indigo accent on hover. Columns go on .grid (the ul
   is display:contents), not the list. About stays one column;
   destinations are three-across. */
.md-typeset .home-landing .grid.cards {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 45em) {
  .md-typeset .home-landing .home-destinations.grid.cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.md-typeset .home-landing .grid.cards > ul > li {
  background-color: var(--md-default-bg-color);
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

.md-typeset .home-landing .home-destinations.grid.cards > ul > li {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.md-typeset .home-landing .home-destinations.grid.cards > ul > li > :last-child {
  margin-top: auto;
}

.md-typeset .home-landing .home-destinations.grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .home-landing .home-about.grid.cards > ul > li:hover {
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: none;
}

.md-typeset .home-landing .grid.cards .lg {
  color: var(--md-primary-fg-color);
}

/* Modern slate's default page fill is 5% lightness (near-black). Lift
   only that; leave admonitions, headings, and the rest of the theme. */
[data-md-color-scheme="slate"] {
  --md-hue: 232;
  --md-default-bg-color: hsla(var(--md-hue), 15%, 11%, 1);
  --md-default-bg-color--light: hsla(var(--md-hue), 15%, 11%, 0.54);
  --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 11%, 0.26);
  --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 11%, 0.07);
}