/* Shared hero treatment for Topsy's custom Elementor hero widget.
 * The warm orange tint remains in the widget's own background layer. This is
 * a separate dark readability layer controlled by one easy-to-edit variable. */
.topsy-contact-hero-widget,
.topsy-helping-hero {
  --topsy-hero-dark-opacity: .28;
}

.topsy-contact-hero-widget {
  background-position: center 35% !important;
}

/* Let the first page content sit 40px beneath the header so the hero can
 * visually tuck into the header treatment. */
.site-content {
  margin-top: -40px !important;
}

.topsy-contact-hero-widget::after,
.topsy-helping-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--topsy-hero-dark-opacity, .28));
}

.topsy-contact-hero-overlay {
  z-index: 0;
}

.topsy-contact-hero-inner,
.topsy-helping-hero-inner {
  position: relative;
  z-index: 2;
}

/* Helping Topsy has a warm gradient plus its image in one inline declaration. */
.topsy-helping-hero {
  background-position: center calc(50% - 20px), center calc(50% - 20px) !important;
}

@media (max-width: 767px) {
  .topsy-contact-hero-widget,
  .topsy-helping-hero {
    background-position: center calc(50% - 20px), center calc(50% - 20px) !important;
  }

  .topsy-contact-hero-widget {
    background-position: center 35% !important;
  }
}