/* Self-hosted fonts (IBM Plex, SIL Open Font License, see assets/fonts) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  --md-text-font: "IBM Plex Sans";
  --md-code-font: "IBM Plex Mono";
}

[data-md-color-scheme="default"] {
  --md-default-fg-color: #13151a;
  --md-default-fg-color--light: rgba(19, 21, 26, 0.8);
  --md-default-fg-color--lighter: rgba(19, 21, 26, 0.5);
  --md-primary-fg-color: #2e8555;
  --md-primary-fg-color--light: #33925d;
  --md-primary-fg-color--dark: #29784c;
  --md-accent-fg-color: #1f5a3a;
  --md-code-bg-color: #f3f5f4;
  --md-code-fg-color: #1b1b1d;
  --md-code-hl-color: rgba(46, 133, 85, 0.15);
  --md-code-hl-color--light: rgba(46, 133, 85, 0.1);
  --md-code-hl-keyword-color: #932e31;
  --md-code-hl-function-color: #3f5919;
  --md-code-hl-name-color: #0c5b57;
  --md-code-hl-string-color: #714a00;
  --md-code-hl-number-color: #823566;
  --md-code-hl-constant-color: #823566;
  --md-code-hl-variable-color: #1b1b1d;
  --md-code-hl-operator-color: #8a3a0c;
  --md-code-hl-punctuation-color: #4b5550;
  --md-code-hl-comment-color: #4a5350;
  --md-code-hl-generic-color: #3a3f44;
  --md-code-hl-special-color: #8a3a0c;
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color: #f4f5f7;
  --md-default-fg-color--light: rgba(244, 245, 247, 0.82);
  --md-default-fg-color--lighter: rgba(244, 245, 247, 0.5);
  --md-code-fg-color: #d3c6aa;
  --md-code-bg-color: #2b3339;
  --md-code-hl-color: rgba(167, 192, 128, 0.2);
  --md-code-hl-color--light: rgba(167, 192, 128, 0.12);
  --md-code-hl-keyword-color: #f0b2b3;
  --md-code-hl-function-color: #b2c88f;
  --md-code-hl-name-color: #9bcac4;
  --md-code-hl-string-color: #dcbd82;
  --md-code-hl-number-color: #e1b4c9;
  --md-code-hl-constant-color: #e1b4c9;
  --md-code-hl-variable-color: #d3c6aa;
  --md-code-hl-operator-color: #edb59c;
  --md-code-hl-punctuation-color: #bac3bc;
  --md-code-hl-comment-color: #bac3bc;
  --md-code-hl-generic-color: #d3c6aa;
  --md-code-hl-special-color: #edb59c;
  --md-primary-fg-color: #25c2a0;
  --md-primary-fg-color--light: #29d5b0;
  --md-primary-fg-color--dark: #1fa588;
  --md-primary-bg-color: #1b1b1d;
  --md-primary-bg-color--light: #1b1b1dcc;
  --md-accent-fg-color: #55cfb5;
  --md-default-bg-color: #1b1b1d;
  --md-hue: 165;
}

[data-md-color-scheme="default"] img[src$="#only-dark"],
[data-md-color-scheme="slate"] img[src$="#only-light"] {
  display: none;
}

html:has(.yake-hero) {
  overflow-x: clip;
}

.yake-hero {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  margin: 0 calc(50% - 50vw) 2rem;
  width: 100vw;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.yake-hero h1 {
  margin-bottom: 0.2rem;
  color: inherit;
}

.yake-hero .md-button,
.yake-hero .md-button:hover {
  color: var(--md-primary-bg-color);
  border: 0.1rem solid var(--md-primary-bg-color);
  background-color: transparent;
}

.yake-hero .md-button--primary,
.yake-hero .md-button--primary:hover {
  color: var(--md-primary-fg-color);
  background-color: var(--md-primary-bg-color);
}

.yake-hero .yake-overview {
  display: block;
  max-width: min(100%, 62rem);
  margin: 1.5rem auto 0;
}

.md-content:has(.yake-hero) .md-content__button,
.md-content:has(.yake-hero) .headerlink {
  display: none;
}

.yake-alasca {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}

.yake-alasca p:first-child {
  margin-top: 0;
}

@media (max-width: 44.9375em) {
  .yake-alasca {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 60em) {
  .md-typeset .grid.yake-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The feature cards are not clickable, so no hover effect */
.md-typeset .grid.yake-cards > ul > li:hover,
.md-typeset .grid.yake-cards > ul > li:focus-within {
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-header .md-logo img {
  filter: invert(1);
}

/* No gap between the header and the hero banner */
.md-main__inner:has(.yake-hero) {
  margin-top: 0;
}

.md-content__inner:has(.yake-hero) {
  padding-top: 0;
}

.md-content__inner:has(.yake-hero)::before {
  display: none;
}

/* Header color as on the previous site (dark scheme) */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #242526;
}

/* Links and the active navigation item in the brand green, not the theme's indigo */
[data-md-color-scheme="default"][data-md-color-primary][data-md-color-accent] {
  --md-typeset-a-color: #1f5a3a;
  --md-accent-fg-color--transparent: rgba(46, 133, 85, 0.1);
}

[data-md-color-scheme="slate"][data-md-color-primary][data-md-color-accent] {
  --md-typeset-a-color: #25c2a0;
  --md-accent-fg-color--transparent: rgba(37, 194, 160, 0.14);
}

/* Bold navigation text */
.md-nav--primary .md-nav__link {
  font-weight: 500;
}

/* Keep short code names in tables on one line */
.yake-nowrap code {
  white-space: nowrap;
}

.md-tabs__link {
  font-weight: 600;
  opacity: 1;
  color: var(--md-default-fg-color--light);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--md-default-fg-color);
}

.md-footer__direction {
  opacity: 1;
}