/* DEA brand on Material for MkDocs (mkdocs.yml: palette primary/accent "custom", font Noto Sans). */

/* The logo's yellow, rgb(229, 199, 45), is the primary color; text on it is #0a0b0e. */
:root > * {
  --md-primary-fg-color: #e5c72d;
  --md-primary-fg-color--light: #edd76a;
  --md-primary-fg-color--dark: #c4a815;
  --md-primary-bg-color: #0a0b0e;
  --md-primary-bg-color--light: #0a0b0eb3;
  --md-accent-fg-color: #f58020;
  --md-accent-fg-color--transparent: #f580201a;
  --md-accent-bg-color: #0a0b0e;
  --md-accent-bg-color--light: #0a0b0eb3;
}

/* Links are the primary yellow in both light and dark mode. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #e5c72d;
}

/* Material greys some headings out; here every heading takes one color per mode. */
[data-md-color-scheme="default"] .md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: #000;
}

[data-md-color-scheme="slate"] .md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: #f0f1f4;
}

/* The header (tabs included) and the drawer's title bar are dark with light text, not primary. */
.md-header,
.md-nav--primary .md-nav__title[for="__drawer"] {
  --md-primary-fg-color: #0a0b0e;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

.md-header {
  padding-top: 4px;
  border-bottom: 1px solid #2b303c;
}

/* Material's selector, so this wins over its 1rem. */
[dir="ltr"] .md-header__title {
  margin-left: 4px;
}

/* The site name next to the logo, in the header and atop the drawer; not the page title the header swaps in on scroll. */
.md-header__topic:first-child,
.md-nav--primary .md-nav__title[for="__drawer"] {
  color: #e5c72d;
}

/* Material's search field is a dark tint, which vanishes on a dark header. */
@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: #ffffff12;
  }
}