/**
 * Common Design: Logo
 *
 * Replace images with your site logo.
 */

/* Logo is wrapped in H1 since it serves as top-level of outline. */
.cd-site-header h1 {
  margin: 0;
}

.cd-site-logo {
  display: block;
  float: left;
  width: var(--brand-logo-mobile-width, 52px);
  height: var(--cd-site-header-height);
  background:
    linear-gradient(transparent, transparent),
    url(../../../img/logos/ocha-logo-blue.svg) center no-repeat;
}

/* Mobile: Hides logo set in info.yml in favour of background image. */
.cd-site-logo img {
  display: none;
}

/**
 * Override default focus z-index. If the default applies, the logo might appear
 * on top of the opened OCHA Services menu. Alternative fix is ticketed:
 *
 * @see https://humanitarian.atlassian.net/browse/CD-173
 */
.cd-header a.cd-site-logo:focus-visible {
  z-index: var(--cd-z-default);
}

/**
 * Desktop logo
 *
 * Unhide logo set in info.yml once space permits.
 */
@media (min-width: 768px) {
  .cd-site-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: var(--brand-logo-desktop-width); /* adjust within sub-theme's brand.css */
    padding-top: 0;
    background: none;
  }

  /* Displays logo set in info.yml on larger viewports. */
  .cd-site-logo img {
    display: block;
    width: 100%;
  }
}