/* Shared final hero-sign contract for the protected app and public landing. */
.app-shell-header {
  width: min(calc(100% - 40px), 1180px);
}

.page:not(.is-answering):not(.is-asking) .app-shell-header {
  grid-template-columns: minmax(340px, 370px) minmax(0, 1fr);
  align-items: start;
  min-height: 220px;
}

.app-shell-header .home-sign {
  position: absolute;
  top: -14px;
  left: calc((100vw - 100%) / -2 - 12px);
  z-index: 2;
  display: block;
  width: clamp(330px, 24vw, 350px);
  pointer-events: auto;
  transform: none;
  transform-origin: top left;
  filter: drop-shadow(0 8px 22px rgba(255, 143, 24, 0.22));
}

.app-shell-header .landing-sign,
.app-shell-header .landing-sign-fallback,
.app-shell-header .hero-hanging-sign.is-animated .landing-sign {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top left;
  image-rendering: auto;
}

.app-shell-header .landing-sign { display: none; }
.app-shell-header .hero-hanging-sign.is-animated .landing-sign { display: block; }
.app-shell-header .hero-hanging-sign.is-animated .landing-sign-fallback { display: none; }

@media (max-width: 1099px) {
  .app-shell-header {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 6px;
    padding-top: 8px;
  }

  .page:not(.is-answering):not(.is-asking) .app-shell-header {
    min-height: 0;
    padding-top: 230px;
  }

  .app-shell-header .home-sign {
    top: -12px;
    width: clamp(300px, 40vw, 340px);
  }
}

@media (max-width: 699px) {
  .app-shell-header {
    width: min(calc(100% - 24px), 1180px);
    gap: 4px;
  }

  .page:not(.is-answering):not(.is-asking) .app-shell-header {
    padding-top: 215px;
  }

  .app-shell-header .home-sign {
    top: -10px;
    width: min(290px, 86vw);
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 520px) {
  .app-shell-header .landing-sign,
  .app-shell-header .hero-hanging-sign.is-animated .landing-sign {
    display: none;
  }

  .app-shell-header .landing-sign-fallback,
  .app-shell-header .hero-hanging-sign.is-animated .landing-sign-fallback {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell-header .landing-sign,
  .app-shell-header .hero-hanging-sign.is-animated .landing-sign {
    display: none;
  }

  .app-shell-header .landing-sign-fallback,
  .app-shell-header .hero-hanging-sign.is-animated .landing-sign-fallback {
    display: block;
  }
}