/* One stable title position and hierarchy across primary app destinations. */
.app-heading-page {
  box-sizing: border-box;
}

.app-page-heading {
  position: relative;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1.25rem !important;
  padding: 0.35rem 0 1.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4eee4;
  background: transparent !important;
  box-shadow: none !important;
}

.app-page-heading h1,
.app-theme .app-page-heading h1 {
  margin: 0 !important;
  color: #f8f3eb !important;
  font-size: clamp(2.25rem, 6vw, 3.5rem) !important;
  font-weight: 650;
  letter-spacing: -0.055em !important;
  line-height: 1 !important;
}

.app-page-heading > p,
.app-theme .app-page-heading > p {
  max-width: 680px;
  margin: 0.85rem 0 0 !important;
  color: #aaa198 !important;
  font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  font-weight: 400;
  line-height: 1.45 !important;
}

.app-page-heading.horses-hero > div:first-child {
  padding-right: 8rem;
}

.app-page-heading.horses-hero .horse-limit-pill {
  position: absolute;
  top: 0.45rem;
  right: 0;
}

.app-page-heading.learn-hero {
  width: min(100%, 900px);
  margin-right: auto !important;
  margin-left: auto !important;
}

html.browser-mode body .app-heading-page {
  padding-top: clamp(1rem, 3vw, 2rem) !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

html.pwa-mode body .app-heading-page {
  padding-top: max(3.5rem, calc(0.75rem + env(safe-area-inset-top))) !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

@media (max-width: 620px) {
  .app-page-heading h1,
  .app-theme .app-page-heading h1 {
    font-size: clamp(2.2rem, 10.5vw, 2.9rem) !important;
  }

  .app-page-heading.horses-hero > div:first-child {
    padding-right: 0;
  }

  .app-page-heading.horses-hero .horse-limit-pill {
    position: static;
    margin-top: 0.8rem;
  }
}