/* Site-wide tweaks. Colors come from the theme, so light and dark mode both work. */

/* Secondary buttons: the primary color has too little contrast on the dark background,
   use the (lighter) link color instead. :where() keeps the specificity low, so the hero
   buttons below and the hover state still win. */
[data-md-color-scheme="slate"] .md-typeset :where(.md-button:not(.md-button--primary)) {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
}

/* Header and tabs: same indigo gradient as the home page hero. Both bars use a
   horizontal gradient, so they read as one block. */
.md-header,
.md-tabs {
  background: linear-gradient(90deg, var(--md-primary-fg-color) 0%, var(--md-primary-fg-color--dark) 100%);
}

/* Active tab: light underline instead of only a brighter label */
.md-tabs__item--active {
  box-shadow: inset 0 -0.15rem 0 var(--md-primary-bg-color);
}

.md-tabs__item--active .md-tabs__link {
  font-weight: 700;
}

/* Icon links in front of the repository link, see overrides/partials/source.html.
   The theme gives .md-header__source a fixed width, let it grow for the extra icons.
   Below 60em the theme hides it (the links are in the drawer then), so only touch wide screens. */
@media screen and (min-width: 60em) {
  .md-header__source {
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
  }
}

/* Keep the repository link at its original width so its label is not cut off */
.md-header__source .md-source {
  flex: 0 0 auto;
  width: 8.5rem;
}

.lp-header-links {
  display: flex;
  align-items: center;
  margin-right: 0.6rem;
  padding-right: 0.6rem;
  border-right: 1px solid var(--md-primary-bg-color--lightest);
}

.lp-header-links__link {
  display: inline-flex;
  margin: 0 0.25rem;
  color: var(--md-primary-bg-color);
  opacity: 0.75;
  transition: opacity 125ms;
}

.lp-header-links__link:hover,
.lp-header-links__link:focus {
  opacity: 1;
}

.lp-header-links__link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

/* Home page hero, see docs/index.md */

.lp-hero {
  margin: 0 0 2.4rem;
  padding: 2.4rem 1.6rem;
  border-radius: 0.4rem;
  text-align: center;
  color: var(--md-primary-bg-color);
  background: linear-gradient(135deg, var(--md-primary-fg-color) 0%, var(--md-primary-fg-color--dark) 100%);
}

.md-typeset .lp-hero__logo {
  width: 9rem;
  max-width: 60%;
  height: auto;
  margin: 0 auto 0.8rem;
}

.md-typeset .lp-hero .lp-hero__title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: inherit;
}

.md-typeset .lp-hero .lp-hero__tagline {
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  font-size: 0.9rem;
  color: var(--md-primary-bg-color--light);
}

/* Buttons on the colored background: light outline, inverted primary */
.md-typeset .lp-hero .md-button {
  margin: 0.2rem;
  color: var(--md-primary-bg-color);
  border-color: var(--md-primary-bg-color);
}

.md-typeset .lp-hero .md-button--primary {
  color: var(--md-primary-fg-color);
  background-color: var(--md-primary-bg-color);
}

.md-typeset .lp-hero .md-button:hover,
.md-typeset .lp-hero .md-button:focus {
  color: var(--md-accent-bg-color);
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* Larger icons in the cards */
.md-typeset .grid.cards .lg {
  height: 1.6em;
  width: 1.6em;
  vertical-align: middle;
  margin-right: 0.2em;
}

@media screen and (max-width: 44.9375em) {
  .lp-hero {
    padding: 1.6rem 1rem;
  }
}