.koravik-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.koravik-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* The sidebar continues to use the existing navigation asset and crop. */
.sidebar-logo-link {
  width: 100%;
  height: 94px;
  margin: .5rem 0 1.5rem;
  padding: 0;
  justify-content: center;
  overflow: hidden;
}

.sidebar-logo-link .koravik-logo {
  width: 122%;
  max-width: none;
  height: auto;
  transform: translateX(1%);
  transform-origin: center;
}

/* Koravik-dark.png is purpose-built for light public headers, so it needs no
   background field, crop, transform, or artificial scaling. */
.public-logo-link {
  width: min(300px, 44vw);
  justify-content: flex-start;
}

.public-logo-link .koravik-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: none;
}

/* Mobile app bars are light surfaces, so use the same properly cropped
   wordmark asset as the public/sign-in header rather than trying to crop the
   oversized transparent canvas in Koravik-logo.png. */
.mobile-logo-link {
  display: none;
  width: 220px;
  height: 60px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  justify-content: flex-start;
  overflow: visible;
}

.mobile-logo-link .koravik-logo {
  content: url("../img/Koravik-dark.png");
  position: static;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: left center;
  transform: none !important;
}

@media (max-width: 860px) {
  .mobile-logo-link {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .health-shell .app-header .mobile-logo-link {
    display: flex !important;
    width: 220px !important;
    height: 60px !important;
    padding: 0 !important;
    background: transparent !important;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
  }

  .health-shell .app-header .mobile-logo-link .koravik-logo {
    content: url("../img/Koravik-dark.png");
    position: static;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .public-logo-link {
    width: min(230px, 58vw);
  }

  .mobile-logo-link {
    width: 205px;
    height: 56px;
  }

  .health-shell .app-header .mobile-logo-link {
    width: 205px !important;
    height: 56px !important;
  }
}

@media (max-width: 420px) {
  .mobile-logo-link {
    width: 190px;
    height: 52px;
  }

  .health-shell .app-header .mobile-logo-link {
    width: 190px !important;
    height: 52px !important;
  }
}