/* =========================
   Campaign: Hero + Layout fixes
   ========================= */

/* ---- Variables (optional but keeps things consistent) ---- */
:root{
  --hero-bg: #13529c;
--stacked-logo: url("/-/media/images/svg-logos/mhs-logo-stacked.svg");
}


/* ---- HERO base ---- */
.hero::before{
  background: none; /* removes background arrows */
}


/* Desktop hero background */
.hero{
  background: var(--hero-bg);
    margin-bottom: 0;
}





/* Desktop tweak: allow hero inner wrapper to behave when only one CTA */
@media screen and (min-width: 64em){
  .hero .hero_inner_wrapper{
    display: block;
  }
}




/* =========================
   Rich Text w/ Background
   ========================= */

/* Remove italic/default bold from the component */
.rich-text-with-background{
  font-style: normal;
  font-weight: 400;
  margin: 0 auto 3.75rem;
}

/* Replace vertical cyan line with stacked logo */
.rich-text-line{
  background: var(--stacked-logo) no-repeat center;
  border: none;
  margin: 1rem 2.5rem 1rem 0;
  padding: 0 15.6875rem 5.75rem 0;
}

/* Make the container wider */
.rich-text-with-background .rich-container{
  max-width: 69.375rem;
}

/* Mobile spacing: center logo + better margins */
@media screen and (max-width: 47.99875em){
  .rich-text-line{
    width: auto;
    margin: 1rem 1rem 2rem;
  }
}



/* =========================
   Tablet / Mobile behavior
   ========================= */

/* <= 63.9988em: show the hero image <img>, hide wide background */
@media screen and (max-width: 63.9988em){
  .hero__bg-image img{
    display: block;
    width: 100%;
  }

  .hero{
    background: var(--hero-bg); /* hides wide background hero image */
  }

  .rich-text-with-background{
    margin-bottom: auto;
  }

  .hero__title-container{
    max-height: 230px;
    background-position: center;
  }

  .hero__ctas{
    margin: 2.5rem auto;
  }
}



/* <= 48em: tighten title container + make CTAs span */
@media screen and (max-width: 48em){
 

  .hero__ctas{
    margin: 1.875rem 0;
  }
	
	.hero .hero__inner {
    padding-bottom: 1rem;
    padding-top: 1.875rem;
    position: relative
	}
}


/* =========================
   Rich Text w/ Background
   ========================= */

/* Remove italic/default bold from the component */
.rich-text-with-background{
  font-style: normal;
  font-weight: 400;
  margin: 0 auto 3.75rem;
}

/* Replace vertical cyan line with stacked logo */
.rich-text-line{
  background: var(--stacked-logo) no-repeat center;
  border: none;
  margin: 1rem 2.5rem 1rem 0;
  padding: 0 15.6875rem 5.75rem 0;
}

/* Make the container wider */
.rich-text-with-background .rich-container{
  max-width: 69.375rem;
}

/* Mobile spacing: center logo + better margins */
@media screen and (max-width: 47.99875em){
  .rich-text-line{
    width: auto;
    margin: 1rem 1rem 2rem;
  }
}