/* Light theme: white header with navy text. */
[data-md-color-scheme="default"] {
  --md-primary-bg-color: #163a69;
  --md-primary-bg-color--light: #53657c;
  --md-typeset-a-color: #246bce;
  --diy-header-border: #e2e8f0;
}

/* Dark theme: navy header with white text. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #142235;
  --md-primary-fg-color--light: #20344d;
  --md-primary-fg-color--dark: #0f1b2a;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #bdcadb;
  --md-typeset-a-color: #80b5ff;
  --diy-header-border: #2b3d54;
}

.md-header {
  border-bottom: 1px solid var(--diy-header-border);
}

/* Fit a 32px logo into the header without increasing its height. */
.md-header__button.md-logo {
  padding: 0.2rem;
}

/* Transparent logo treatment in the header and mobile navigation. */
.md-header .md-logo img,
.md-nav__title .md-logo img {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

/* Light-mode logo is the default. */
[data-md-color-scheme] .md-logo img.diy-logo--light {
  display: block;
}

[data-md-color-scheme] .md-logo img.diy-logo--dark {
  display: none;
}

/* Switch immediately when the site enters dark mode. */
[data-md-color-scheme="slate"] .md-logo img.diy-logo--light {
  display: none;
}

[data-md-color-scheme="slate"] .md-logo img.diy-logo--dark {
  display: block;
}

/* Welcome-page wordmark: responsive, with no backing panel. */
.md-typeset .diy-wordmark {
  width: 16rem;
  max-width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}