/* Michael Horrorz banner positioning fix
   Put this file in your website folder and link it AFTER your main CSS file:
   <link rel="stylesheet" href="banner-fix.css">
*/

:root {
  --mh-banner-height-desktop: 420px;
  --mh-banner-height-tablet: 340px;
  --mh-banner-height-mobile: 260px;
}

/* Broad hero/banner targeting so this works even if your file uses a slightly different class name.
   The whole point: stop the background from drifting right like it has somewhere better to be. */
.hero,
.site-hero,
.home-hero,
.hero-section,
.banner,
.site-banner,
.header-banner,
.landing-hero,
main > section:first-child {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  min-height: var(--mh-banner-height-desktop) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* If the image itself is an <img> instead of a CSS background, center and crop it cleanly. */
.hero img,
.site-hero img,
.home-hero img,
.hero-section img,
.banner img,
.site-banner img,
.header-banner img,
.landing-hero img,
main > section:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Keep text readable over the banner without changing the image file. */
.hero::before,
.site-hero::before,
.home-hero::before,
.hero-section::before,
.banner::before,
.site-banner::before,
.header-banner::before,
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 0;
}

.hero > *,
.site-hero > *,
.home-hero > *,
.hero-section > *,
.banner > *,
.site-banner > *,
.header-banner > *,
.landing-hero > * {
  position: relative;
  z-index: 1;
}

/* Tablet */
@media (max-width: 900px) {
  .hero,
  .site-hero,
  .home-hero,
  .hero-section,
  .banner,
  .site-banner,
  .header-banner,
  .landing-hero,
  main > section:first-child {
    min-height: var(--mh-banner-height-tablet) !important;
    background-position: center center !important;
  }
}

/* Phone */
@media (max-width: 600px) {
  .hero,
  .site-hero,
  .home-hero,
  .hero-section,
  .banner,
  .site-banner,
  .header-banner,
  .landing-hero,
  main > section:first-child {
    min-height: var(--mh-banner-height-mobile) !important;
    background-position: center center !important;
  }

  .hero h1,
  .site-hero h1,
  .home-hero h1,
  .hero-section h1,
  .banner h1,
  .site-banner h1,
  .header-banner h1,
  .landing-hero h1 {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }
}