/* Keep the guide's standard layout with DBW's charcoal header colours. */
.md-header {
  --md-primary-fg-color: #303030;
  --md-primary-bg-color: #eeeeee;
  --md-primary-bg-color--light: #cecece;
  color: #eeeeee;
  background: linear-gradient(110deg, #383838, #262626);
}

.md-header__inner {
  min-height: 4rem;
}

.md-header .md-search__form {
  background-color: rgb(0 0 0 / 18%);
}

[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__input,
[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__icon {
  color: #eeeeee;
}

[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__input::placeholder {
  color: #cecece;
  opacity: 1;
}

/* Zensical's header search is a button, so it needs the light text and icon too. */
.md-header .md-search__button {
  color: #eeeeee;
  background-color: rgb(255 255 255 / 10%);
}

.md-header .md-search__button:hover,
.md-header .md-search__button:focus {
  color: #ffffff;
  background-color: rgb(255 255 255 / 16%);
}

.md-header .md-search__button:before {
  background-color: #eeeeee;
}

/* Hide the theme's ⌘K shortcut hint from the search button. */
.md-header .md-search__button:after {
  display: none;
}

/* Expanded search keeps the theme's readable results surface. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--md-default-bg-color);
}

/* The wide DBW logo replaces the default square icon, so size it by height and let the width follow. */
.md-header .md-logo img {
  width: auto;
  height: 1.6rem;
}

/* Hide the permanent-link pilcrow shown after headings. */
.md-typeset .headerlink {
  display: none;
}

/* The header has an empty slot for a link to a source repository; it reserves about 230px, which pushed the colour toggle and search away from the right edge. */
.md-header__source {
  display: none;
}