/* Game hero: section-level hooks on top of the ported design CSS.

   misfit/css/landing.css draws the hero exactly as the approved design does,
   including the two background plates and the whole desktop/mobile override
   stack. This file only re-points the parts a merchant can change from the
   section's settings, so the design remains the default. */

.hero {
  background-color: var(--mm-hero-bg, var(--mm-ink, #17142f));
}

/* The mobile plate's shape is a setting, because a replacement render will not
   necessarily be 1440x1650 and the design derives the hero's height from it. */
@media (max-width: 900px) {
  .hero:before {
    aspect-ratio: var(--mm-hero-mobile-ratio, 1440/1650);
  }
}

/* The design's <h1> is the logo, so it has no text of its own. When no logo is
   uploaded the wordmark takes over and needs the heading styles back. */
.hero h1:not(:has(.hero-logo)) {
  font-size: inherit;
}

/* F-49: with a logo the design shows no heading text, and landing.css hid it by
   setting the <h1> to font-size 0 and the text to display:none, which left the
   page's only <h1> with no accessible name. The logo is display:block at every
   breakpoint, so the <h1> can keep a normal font size, and the heading text is
   visually hidden the standard way: off-screen to the eye, still read out. */
.hero h1:has(.hero-logo) {
  font-size: inherit;
}
.hero h1:has(.hero-logo) .hero-heading {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  /* Browser D2: Chrome reads the transformed text, so the inherited uppercase
     would name the heading "MURDER ON THE ROCKS". */
  text-transform: none;
}
.hero h1:has(.hero-logo) .hero-heading span {
  display: inline;
}