/* RED LIVE 1.3: one header geometry for public HTML and account PHP pages.
   The original 1585 x 781 logo (including its balanced transparent canvas)
   is unchanged. Contain the whole image; do not crop or translate the mark. */
.red-site-header .red-header-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: 8px;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
}

/* Equal navigation box metrics keep the centered logo at the same height
   on legacy static pages (content-box) and account pages (border-box). */
.red-site-header .red-header-inner *,
.red-site-header .red-header-inner *::before,
.red-site-header .red-header-inner *::after {
  box-sizing: border-box;
}

/* Legacy pages use different global box models. A percentage-height image
   must not keep an intrinsic minimum larger than its fixed logo container. */
.red-site-header .red-brand {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.red-site-header .red-brand img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: left center;
  transform: none;
}

@media (min-width: 901px) {
  .red-site-header .red-primary-nav {
    padding-inline: 0;
  }

  .red-site-header .red-nav-main,
  .red-site-header .red-nav-actions {
    justify-content: flex-end;
  }

  /* Long translated navigation may wrap instead of leaving the viewport. */
  .red-site-header .red-nav-main {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .red-site-header .red-header-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .red-site-header .red-primary-nav {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .red-site-header .red-primary-nav.is-open {
    max-height: min(720px, calc(100dvh - 90px));
  }
}