/**
 * The logo in the header.
 *
 * The theme sizes any logo with `.site-logo img { height: 44px }`. That is
 * the right height for a square mark and too small for a lockup whose
 * second line has seventeen letters in it, so the height is raised here --
 * and kept well inside the header's own 84px so nothing is clipped.
 *
 * Everything is scoped to .site-header .site-logo. The theme uses the
 * class .site-logo in its footer as well, where the site name is typed out
 * in text and should stay that way.
 *
 * --ace-brand-h is set inline by the plugin from its own setting; the
 * value here is only a fallback for when that has not been printed.
 */

.site-header .site-logo .ace-brand-logo {
  display: block;
  height: var(--ace-brand-h, 50px);
  width: auto;
  max-width: 100%;
  /* The file is a fixed drawing: never let a stylesheet squash it. */
  object-fit: contain;
  object-position: left center;
}

/* The anchor is sized by the image, not by the font it no longer carries. */
.site-header .site-logo:has(.ace-brand-logo) {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  min-width: 0;
}

/* Room runs out before the hamburger does. */
@media (max-width: 860px) {
  .site-header .site-logo .ace-brand-logo { height: calc(var(--ace-brand-h, 50px) - 8px); }
}

@media (max-width: 420px) {
  .site-header .site-logo .ace-brand-logo { height: calc(var(--ace-brand-h, 50px) - 14px); }
}

/* Paper is white, and the reversed artwork is drawn for a dark page, so
   print swaps the file for the one drawn for light backgrounds. A browser
   that ignores `content` on an image simply prints the other one. */
@media print {
  .site-header .site-logo .ace-brand-logo { content: url("logo-header-on-light.svg"); }
}