/* ---------------------------------------------------------------------
 * The wheat banner. Mrs. Taylor, 2026-08-18: she photographed the schools
 * page and said "this is how I want it for the missionaries and teams page
 * and about page".
 *
 * So it is one component rather than four lookalikes. These rules are the
 * schools hero's own, lifted here verbatim and given a second selector, and
 * hbm-schools.css no longer carries its own copy — there is one source, and
 * a change to the wheat on one page is a change to it on all four. That is
 * the whole point of her asking for the same thing in four places.
 *
 * .ics-hero is kept alongside .hbm-hero so the schools markup did not have
 * to be rewritten to gain this.
 * ------------------------------------------------------------------ */

.hbm-hero,
.ics-hero {
  --hero-gold: #d8a33c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 72px 20px;
  background-image: var(--hbm-hero-bg, var(--ics-hero-bg));
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

.hbm-hero--slim,
.ics-hero--slim {
  min-height: 210px;
  padding: 48px 20px;
}

/* The wash. Lightened 2026-08-18 at her request — it was 52-72% navy, which
   held the type easily but left the wheat brown. Shaped rather than flat:
   lightest across the crop, deepening toward the foot where the type sits. */
.hbm-hero::before,
.ics-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 20, 36, 0.16) 0%,
    rgba(6, 20, 36, 0.30) 45%,
    rgba(6, 20, 36, 0.50) 100%);
}

.hbm-hero__inner,
.ics-hero__inner {
  position: relative;
  width: min(900px, 100%);
  text-align: center;
}

.hbm-hero__title,
.ics-hero__title {
  margin: 0;
  padding-bottom: 0;
  color: #fff;
  font-size: clamp(28px, 5.2vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* With the wash lightened the type carries its own contrast. */
  text-shadow: 0 2px 14px rgba(6, 20, 36, 0.75), 0 1px 3px rgba(6, 20, 36, 0.55);
}

.hbm-hero__title::after,
.ics-hero__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 20px auto 0;
  background: var(--ics-gold, var(--hero-gold));
  border-radius: 2px;
}

.hbm-hero__tagline,
.ics-hero__tagline {
  margin: 18px 0 0;
  padding-bottom: 0;
  color: #fff;
  font-size: clamp(15px, 1.9vw, 20px);
  font-style: italic;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(6, 20, 36, 0.85), 0 1px 3px rgba(6, 20, 36, 0.6);
}

@media (max-width: 640px) {
  .hbm-hero,
  .ics-hero { min-height: 250px; padding: 52px 16px; }
  .hbm-hero--slim,
  .ics-hero--slim { min-height: 170px; padding: 38px 16px; }
}

/* ---------------------------------------------------------------------
 * Full bleed.
 *
 * On /schools/ the banner is a direct child of a full-width wrapper, so it
 * already spans the viewport. On the other three it sits inside Divi's
 * 1080px content column, which left navy down both sides and made the same
 * component look like a different one. This breaks it out of whatever
 * column it finds itself in, without needing the markup around it changed.
 * ------------------------------------------------------------------ */

.hbm-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 100vw includes the scrollbar on desktop Windows, which would push a few
   pixels of horizontal scroll. Where the browser can tell us the real width,
   use it. */
@supports (width: 100dvw) {
  .hbm-hero {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

/* ---------------------------------------------------------------------
 * Mrs. Vicki, 2026-08-21: the black space above the header on the
 * Missionaries and Teams pages.
 *
 * It is Divi's own top padding on the section that wraps the banner, and the
 * section carries the HBM navy, so the padding shows as a band of dark colour
 * between the white navigation and the top of the wheat. 21px on Missionaries
 * and 46px on Teams — which is also why the two pages did not look alike.
 *
 * The banner is a full-bleed photograph and wants to meet the navigation with
 * nothing between them, the way it does on Schools and the application page.
 * The padding goes; the section keeps its navy for everything below the
 * banner, which still needs it.
 * ------------------------------------------------------------------ */
body.page-id-4074 #main-content .et_pb_section_0,
body.page-id-1273 #main-content .et_pb_section_0 {
  padding-top: 0 !important;
}

/* Teams carried a second helping of the same thing — 12.8px on the row inside
   the section, which is why it still sat 13px low after the section padding
   went. Missionaries has none, so zeroing both costs nothing there. */
body.page-id-4074 #main-content .et_pb_section_0 > .et_pb_row_0,
body.page-id-1273 #main-content .et_pb_section_0 > .et_pb_row_0 {
  padding-top: 0 !important;
}