/* The Metrale logo in the book's menu bar.

   Colours and the two type stacks come from css/metrale-tokens.css, and the
   faces from fonts/fonts.css. The skin
   (css/metrale.css) keeps every rule it has. This file only places the
   logo that ../metrale.js puts where mdBook set the book's title in type,
   with "Engine docs" beside it, and keeps the title readable for the
   accessibility tree through the link's name. The logo is the kit's
   dark-ground cut at 34 px tall, 167 px wide: the kit's minimum for the
   horizontal logo is 160 px. */

/* mdBook centres the title in the bar with text-align, which a flex box
   ignores, so the centring is restated for the flex layout. */
.menu-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 0.65rem;
  font-size: 1rem;
  line-height: 1;
}
.menu-title .metrale-lockup {
  display: inline-flex;
  align-items: center;
  height: 34px;
  color: inherit;
  text-decoration: none;
}
.menu-title .metrale-lockup svg {
  height: 34px;
  width: auto;
  display: block;
}
.menu-title .metrale-docs {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
  padding-top: 0.15rem;
}
.menu-title .metrale-lockup:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (max-width: 480px) {
  .menu-title .metrale-docs {
    display: none;
  }
}