/* ==========================================================================
   Logo: the Qualytics wordmark with a small "User Guide" flush right beneath
   it.

   The theme renders it inline from overrides/.icons/qualytics/userguide-logo.svg
   (theme.icon.logo in zensical.toml), drawn in currentColor, so its color and
   the brick hover are plain CSS. It appears in the header on desktop and at
   the top of the navigation drawer. docs/assets/logo-userguide-light.svg and
   logo-userguide-dark.svg are the same lockup in white and black, for use
   outside the site.
   ========================================================================== */

/* Header (desktop only: the theme hides the header logo below 76.25em). The
   header is black in the light scheme and white in the dark one. */
.md-header__button.md-logo {
  color: var(--q-white);
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo {
  color: var(--q-black);
}

/* The theme pads the logo button 0.4rem with a 0.2rem margin, which would
   push the header past the 68px it has with the wordmark alone. Without the
   vertical padding the lockup fits inside the row the search field already
   sets, so the header keeps its height. */
.md-header__button.md-logo {
  padding-block: 0;
  margin-block: 0;
  margin-right: 0;
}

.md-header__button.md-logo svg {
  width: auto;
  height: 1.8rem;
}

/* The lockup already says "User Guide", so the site name beside it stays
   hidden on desktop, also after scrolling. Below 76.25em the theme hides the
   header logo and the site name is the only title, so it stays there. */
@media screen and (min-width: 76.25em) {
  .md-header__title .md-header__topic:first-child {
    visibility: hidden;
  }
}

/* Navigation drawer: the lockup in the drawer's text color, without the site
   name the theme writes beside it. The selectors below match the theme's own
   drawer title rules, which this file overrides by loading after them. */
.md-nav .md-nav__title[for="__drawer"] {
  font-size: 0;
}

.md-nav__title .md-nav__button.md-logo {
  transition: color 0.2s ease;
}

/* The theme boxes the drawer logo in a 1.6rem square; the lockup is wide. */
.md-nav .md-nav__title[for="__drawer"] .md-logo {
  width: auto;
  height: 2.4rem;
}

.md-nav .md-nav__title[for="__drawer"] .md-logo svg {
  max-width: none;
}

/* Brick on hover, in both places and both schemes. */
.md-header__button.md-logo:hover,
.md-nav__title .md-nav__button.md-logo:hover {
  color: var(--q-brick);
  opacity: 1;
}