/**
 * Faithful Development — visual modernization layer.
 *
 * The Divi build is structurally fine but reads as mid-2010s: hard corners,
 * flat panels, no motion, cramped forms. This layer updates the surface
 * treatment without touching layout or content, so the site keeps its
 * familiar structure while looking current.
 *
 * Design notes
 *   Palette is taken from the existing logo and headings — deep navy, a
 *   lighter accent blue, warm neutral greys. Nothing invented.
 *   Radii step 8 / 12 / 16px. Shadows are low-alpha navy, not black, so
 *   they read as depth rather than grime.
 */

:root {
  --hbm-navy: #14385c;
  --hbm-blue: #1d5a92;
  --hbm-accent: #2f7fb8;
  --hbm-ink: #1f2a36;
  --hbm-muted: #5a6b7a;
  --hbm-line: #dde3e9;
  --hbm-surface: #ffffff;
  --hbm-r-sm: 8px;
  --hbm-r-md: 12px;
  --hbm-r-lg: 16px;
  --hbm-shadow-sm: 0 1px 2px rgba(20, 56, 92, 0.06), 0 2px 8px rgba(20, 56, 92, 0.06);
  --hbm-shadow-md: 0 2px 6px rgba(20, 56, 92, 0.08), 0 12px 28px rgba(20, 56, 92, 0.10);
  --hbm-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------------------ *
 * Typography — looser leading and a comfortable measure
 * ------------------------------------------------------------------ */
#main-content p,
#main-content li {
  line-height: 1.75;
}

#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4 {
  letter-spacing: -0.012em;
  line-height: 1.22;
}

/* ------------------------------------------------------------------ *
 * Cards — the homepage feature panels and any coloured column
 * ------------------------------------------------------------------ */
body.home .et_pb_column_2,
body.home .et_pb_column_3,
body.home .et_pb_column_4 {
  border-radius: var(--hbm-r-lg);
  overflow: hidden;
  box-shadow: var(--hbm-shadow-md);
  transition: transform 0.28s var(--hbm-ease), box-shadow 0.28s var(--hbm-ease);
}

body.home .et_pb_column_2:hover,
body.home .et_pb_column_3:hover,
body.home .et_pb_column_4:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(20, 56, 92, 0.14), 0 20px 44px rgba(20, 56, 92, 0.18);
}

/* Media sitting flush at the top of a card should follow its corners. */
body.home .et_pb_column_2 .et_pb_image:first-child img,
body.home .et_pb_column_3 .et_pb_image:first-child img,
body.home .et_pb_column_4 .et_pb_image:first-child img,
body.home .et_pb_column_2 video,
body.home .et_pb_column_3 video,
body.home .et_pb_column_4 video {
  display: block;
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * Panels — every Divi block that paints a background reads as a card
 *
 * Divi ships hard 0px corners everywhere, which is the single strongest
 * "old website" signal on the page. Radius is applied to the module types
 * that can carry a background; on a transparent module it is simply
 * invisible, so this is safe to apply broadly rather than page by page.
 * ------------------------------------------------------------------ */
#main-content .et_pb_text,
#main-content .et_pb_blurb,
#main-content .et_pb_cta,
#main-content .et_pb_code,
#main-content .et_pb_promo,
#main-content .et_pb_toggle,
#main-content .et_pb_tabs,
#main-content .et_pb_testimonial,
#main-content .et_pb_pricing_table,
#main-content .et_pb_column[class*="et_pb_column_"] {
  border-radius: var(--hbm-r-md);
}

/* Panels with real presence — a solid fill or a border — get depth too. */
#main-content .et_pb_blurb,
#main-content .et_pb_cta,
#main-content .et_pb_promo,
#main-content .et_pb_testimonial {
  box-shadow: var(--hbm-shadow-sm);
}

/* Full-bleed sections and rows stay square; rounding those looks like a
   mistake rather than a card. */
#main-content .et_pb_section,
#main-content .et_pb_row,
#main-content .et_pb_fullwidth_header,
#main-content .et_pb_slider,
#main-content .et_pb_fullwidth_section {
  border-radius: 0;
}

/* The GIVE and GO panels on the homepage are the most visible pair. */
body.home #main-content .et_pb_text[class*="et_pb_text_"] {
  border-radius: var(--hbm-r-lg);
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
#main-content .et_pb_button,
#main-content .gform_button,
#main-content input[type="submit"] {
  border-radius: var(--hbm-r-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.72em 1.6em !important;
  transition: transform 0.2s var(--hbm-ease), box-shadow 0.2s var(--hbm-ease),
              background-color 0.2s var(--hbm-ease), color 0.2s var(--hbm-ease),
              border-color 0.2s var(--hbm-ease);
}

#main-content .et_pb_button:hover,
#main-content .gform_button:hover,
#main-content input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--hbm-shadow-sm);
}

#main-content .et_pb_button:active,
#main-content .gform_button:active,
#main-content input[type="submit"]:active {
  transform: translateY(0);
}

/* The primary submit gets real presence. */
#main-content .gform_button,
#main-content input[type="submit"] {
  background-color: var(--hbm-navy) !important;
  border: 1px solid var(--hbm-navy) !important;
  color: #fff !important;
}

#main-content .gform_button:hover,
#main-content input[type="submit"]:hover {
  background-color: var(--hbm-blue) !important;
  border-color: var(--hbm-blue) !important;
}

/* ------------------------------------------------------------------ *
 * Forms — the heaviest surface on this site (16 forms, 821 fields)
 * ------------------------------------------------------------------ */

/* Divi rendered the Gravity heading white on white; it was invisible. */
#main-content .gform_heading,
#main-content .gform_title,
#main-content .gform_description {
  color: var(--hbm-navy) !important;
}

#main-content .gform_title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.35em;
}

#main-content .gform_description {
  display: block;
  color: var(--hbm-muted) !important;
  font-size: 0.95rem;
  margin-bottom: 1.4em;
}

#main-content .gform_wrapper .gfield_label {
  font-weight: 600;
  color: var(--hbm-ink);
  margin-bottom: 0.4em;
  display: inline-block;
}

#main-content .gform_wrapper input[type="text"],
#main-content .gform_wrapper input[type="email"],
#main-content .gform_wrapper input[type="tel"],
#main-content .gform_wrapper input[type="url"],
#main-content .gform_wrapper input[type="number"],
#main-content .gform_wrapper input[type="password"],
#main-content .gform_wrapper input[type="date"],
#main-content .gform_wrapper select,
#main-content .gform_wrapper textarea {
  border: 1px solid var(--hbm-line) !important;
  border-radius: var(--hbm-r-sm) !important;
  padding: 0.68em 0.85em !important;
  background-color: #fff;
  color: var(--hbm-ink);
  transition: border-color 0.18s var(--hbm-ease), box-shadow 0.18s var(--hbm-ease);
  max-width: 100%;
}

#main-content .gform_wrapper input:focus,
#main-content .gform_wrapper select:focus,
#main-content .gform_wrapper textarea:focus {
  border-color: var(--hbm-accent) !important;
  box-shadow: 0 0 0 3px rgba(47, 127, 184, 0.18) !important;
  outline: none;
}

#main-content .gform_wrapper textarea {
  line-height: 1.6;
}

/* Section breaks become real dividers instead of bare bold text. */
#main-content .gform_wrapper .gsection {
  border-bottom: 2px solid var(--hbm-line) !important;
  margin-top: 2.2em !important;
  padding-bottom: 0.5em !important;
}

#main-content .gform_wrapper .gsection_title {
  color: var(--hbm-navy) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#main-content .gform_wrapper .gfield_required {
  color: #c02b0a !important;
}

#main-content .gform_wrapper .gfield_description {
  color: var(--hbm-muted);
  font-size: 0.9rem;
}

/* Give the whole form a surface so it stops floating on the page. */
#main-content .gform_wrapper {
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
  padding: 2rem 2rem 1.5rem;
}

@media (max-width: 600px) {
  #main-content .gform_wrapper { padding: 1.25rem 1rem 1rem; border-radius: var(--hbm-r-md); }
}

/* ------------------------------------------------------------------ *
 * Blog / archive posts
 * ------------------------------------------------------------------ */
#main-content .et_pb_post {
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
  padding: 1.6rem 1.8rem;
  margin-bottom: 2rem;
  transition: transform 0.24s var(--hbm-ease), box-shadow 0.24s var(--hbm-ease);
}

#main-content .et_pb_post:hover {
  transform: translateY(-2px);
  box-shadow: var(--hbm-shadow-md);
}

#main-content .et_pb_post .entry-featured-image-url img,
#main-content .et_pb_post a img {
  border-radius: var(--hbm-r-md);
}

#main-content .et_pb_post .entry-title {
  margin-bottom: 0.3em;
}

#main-content .et_pb_post .post-meta {
  font-size: 0.88rem;
  margin-bottom: 1em;
}

/* ------------------------------------------------------------------ *
 * Sidebar widgets
 * ------------------------------------------------------------------ */
#sidebar .widget,
#main-content .et_pb_widget {
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-md);
  box-shadow: var(--hbm-shadow-sm);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.5rem;
}

#sidebar .widgettitle,
#main-content .et_pb_widget .widgettitle {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.7em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--hbm-line);
}

#sidebar .widget li,
#main-content .et_pb_widget li {
  padding: 0.32em 0;
  border-bottom: 1px solid rgba(221, 227, 233, 0.6);
}

#sidebar .widget li:last-child { border-bottom: none; }

#sidebar a,
#main-content .et_pb_widget a {
  transition: color 0.16s var(--hbm-ease);
}

#wp-calendar { width: 100%; }
#wp-calendar td, #wp-calendar th { padding: 0.3em 0; text-align: center; }

/* Search field in the sidebar. */
#sidebar input[type="text"],
#sidebar input[type="search"] {
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-sm);
  padding: 0.6em 0.8em;
}

/* ------------------------------------------------------------------ *
 * Header / navigation
 * ------------------------------------------------------------------ */
#main-header {
  box-shadow: 0 1px 3px rgba(20, 56, 92, 0.08), 0 4px 16px rgba(20, 56, 92, 0.05);
}

#top-menu li a {
  transition: color 0.18s var(--hbm-ease);
}

/* Underline that grows from the centre on hover. */
#top-menu > li > a::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.35em;
  height: 2px;
  background: var(--hbm-accent);
  border-radius: 2px;
  transition: left 0.22s var(--hbm-ease), right 0.22s var(--hbm-ease);
}

#top-menu > li > a { position: relative; }

#top-menu > li:hover > a::before,
#top-menu > li.current-menu-item > a::before {
  left: 0.1em;
  right: 0.1em;
}

/* Dropdowns get depth and rounded corners. */
#top-menu li ul.sub-menu {
  border-radius: var(--hbm-r-md);
  box-shadow: var(--hbm-shadow-md);
  overflow: hidden;
  border: 1px solid var(--hbm-line);
}

/* ------------------------------------------------------------------ *
 * Images and media
 * ------------------------------------------------------------------ */
#main-content .et_pb_image img,
#main-content .entry-content img {
  border-radius: var(--hbm-r-md);
}

/* Full-bleed sliders and headers keep square corners. */
#main-content .et_pb_slider img,
#main-content .et_pb_fullwidth_header img,
#main-header img,
#main-footer img {
  border-radius: 0;
}

/* ------------------------------------------------------------------ *
 * Popup Maker — its content inherited page colours and could render
 * white-on-light. Give it an explicit surface.
 * ------------------------------------------------------------------ */
.pum-container {
  border-radius: var(--hbm-r-lg) !important;
  box-shadow: var(--hbm-shadow-md) !important;
}

.pum-container,
.pum-container p,
.pum-container span,
.pum-container em,
.pum-container strong,
.pum-container .pum-title {
  color: var(--hbm-ink) !important;
}

.pum-container .pum-title {
  color: var(--hbm-navy) !important;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
#main-footer .et_pb_widget {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#footer-bottom { padding: 1.2em 0; }

#footer-info a { transition: color 0.16s var(--hbm-ease); }

/* ------------------------------------------------------------------ *
 * Skip link — visible only on keyboard focus
 * ------------------------------------------------------------------ */
.hbm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--hbm-navy);
  color: #fff !important;
  padding: 0.8em 1.4em;
  border-radius: 0 0 var(--hbm-r-sm) 0;
  font-weight: 600;
  text-decoration: none;
}

.hbm-skip:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

#main-content:focus { outline: none; }

/* Anchor targets must clear the fixed header. */
[id] { scroll-margin-top: 90px; }

html { scroll-behavior: smooth; }

/* ------------------------------------------------------------------ *
 * Back to top
 * ------------------------------------------------------------------ */
.hbm-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--hbm-navy);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--hbm-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.24s var(--hbm-ease), transform 0.24s var(--hbm-ease),
              visibility 0.24s var(--hbm-ease), background-color 0.2s var(--hbm-ease);
}

.hbm-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hbm-top:hover { background: var(--hbm-blue); }

@media (max-width: 600px) {
  .hbm-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ------------------------------------------------------------------ *
 * Print — the policy PDFs and forms get printed by missionaries
 * ------------------------------------------------------------------ */
@media print {
  #main-header,
  #main-footer,
  #et-top-navigation,
  .et_pb_menu,
  .hbm-top,
  .hbm-skip,
  .pum-overlay,
  #sidebar,
  .et-social-icons,
  video,
  iframe {
    display: none !important;
  }

  body, #main-content, .entry-content {
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
  }

  #left-area, #content-area, .container { width: 100% !important; max-width: 100% !important; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  .et_pb_post, .gform_wrapper, #main-content .et_pb_column {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  h1, h2, h3 { break-after: avoid; }
}

/* ------------------------------------------------------------------ *
 * Accessibility and motion
 * ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(47, 127, 184, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  #main-content .et_pb_post:hover,
  body.home .et_pb_column_2:hover,
  body.home .et_pb_column_3:hover,
  body.home .et_pb_column_4:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Homepage PRAY / GIVE / GO
 *
 * The Divi original shipped three mismatched panels: an empty box tinted
 * from --gcid-link-color, a GIVE panel darkened 23%, and a GO panel on the
 * raw brand blue — three different blues, three different sizes, and the
 * words themselves no larger than body copy.
 *
 * This block unifies them onto one blue at one size, and gives the three
 * words the weight the section was asking for. Markup hooks come from
 * capture/pray-give-go.mjs.
 * ------------------------------------------------------------------ */

/* One blue for all three. #0047ff is the brand blue already carried by the
   GO panel; the other two were tinted variants of it and of the link colour. */
body.home .et_pb_code_0,
body.home .et_pb_text_6,
body.home .et_pb_text_7 {
  background-color: var(--gcid-1f1b4e15-7cc6-4e13-8154-74d77a956460, #0047ff) !important;
}

/* Equal size. Divi gave each panel its own width, margin and height
   (97%/none/90%, 303px/auto/303px). Stretch the row instead so all three
   are identical and grow with the tallest content. */
@media (min-width: 981px) {
  body.home .et_pb_row_4 {
    display: flex !important;
    align-items: stretch;
    gap: 24px;
    padding-right: 20px !important;
  }

  body.home .et_pb_row_4 > .et_pb_column {
    display: flex;
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    max-width: none !important;
  }
}

body.home .et_pb_code_0,
body.home .et_pb_text_6,
body.home .et_pb_text_7 {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  height: auto !important;
  min-height: 340px !important;
  margin: 0 !important;
  padding: 26px 22px 22px !important;
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-md);
  text-align: center !important;
  color: #ffffff !important;
}

/* The GO panel's copy was left-aligned and text-shadowed; the other two were
   not. Match them. */
body.home .et_pb_text_7 .et_pb_text_inner {
  text-align: center !important;
  font-size: 17px !important;
  text-shadow: none !important;
}

body.home .et_pb_code_0 .et_pb_code_inner,
body.home .et_pb_text_6 .et_pb_text_inner,
body.home .et_pb_text_7 .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: #ffffff !important;
}

/* ---- The three words -------------------------------------------- */

body.home .hbm-cta-heading {
  margin: 0 0 14px !important;
  /* Generous bottom padding: the calligraphic G in GIVE and GO carries a deep
     descender that otherwise crosses the rule. */
  padding: 0 0 22px !important;
  font-size: 46px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-indent: 0.14em; /* balances the trailing letter-spacing */
  text-transform: uppercase;
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}

body.home .hbm-cta-heading strong,
body.home .hbm-cta-heading span {
  color: #ffffff !important;
  font-weight: inherit !important;
}

/* Item 4 — oversized calligraphic initial.
   Lucida Calligraphy ships on Windows and Lucida Handwriting / Apple Chancery
   cover macOS; Great Vibes is the webfont fallback for everything else. */
body.home .hbm-initial {
  font-family: 'Lucida Calligraphy', 'Lucida Handwriting', 'Apple Chancery',
    'Great Vibes', cursive !important;
  font-size: 1.75em;
  font-weight: 400 !important;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: -0.12em;
  padding-right: 0.02em;
}

/* ---- Panel copy -------------------------------------------------- */

body.home .hbm-cta-lead {
  margin: 0 0 16px !important;
  font-size: 17px;
  line-height: 1.5;
  color: #ffffff !important;
}

body.home .hbm-cta-foot {
  margin: auto 0 0 !important;
  padding-top: 14px;
}

body.home .hbm-cta-foot a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--hbm-r-sm);
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--hbm-ease), color 180ms var(--hbm-ease);
}

body.home .hbm-cta-foot a:hover,
body.home .hbm-cta-foot a:focus-visible {
  background-color: #ffffff;
  color: #0047ff !important;
}

/* ---- Missionary spotlight cards ---------------------------------- *
 * Built to the supplied reference: a full-bleed portrait, a dark fade at
 * the foot of the image, then given names in script over the surname in
 * heavy uppercase, with the field beneath.
 *
 * Markup comes from capture/pray-give-go.mjs, populated from the real
 * roster on /missionary/.
 * ------------------------------------------------------------------ */
body.home .hbm-pray-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 4px;
}

body.home .hbm-mcard {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--hbm-r-md);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

body.home .hbm-mcard__photo {
  display: block;
  width: 100%;
  height: 100%;
  /* The roster portraits are a mix of landscape and portrait crops; cover
     with a high focal point keeps faces in frame. */
  object-fit: cover;
  object-position: 50% 22%;
}

/* Missionaries whose portrait is missing upstream get a labelled slot. */
body.home .hbm-mcard__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.12);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* The gradient the reference fades its text into. */
body.home .hbm-mcard__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 8px 10px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.75) 34%,
    rgba(0, 0, 0, 0.35) 66%,
    rgba(0, 0, 0, 0) 100%
  );
  text-align: center;
  line-height: 1;
}

/* Given names — the same calligraphic face as the PRAY/GIVE/GO drop caps. */
body.home .hbm-mcard__first {
  font-family: 'Lucida Calligraphy', 'Lucida Handwriting', 'Apple Chancery',
    'Great Vibes', cursive;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

body.home .hbm-mcard__last {
  margin-top: -0.06em;
  font-size: clamp(21px, 2.05vw, 30px);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

body.home .hbm-mcard__where {
  margin-top: 3px;
  font-size: clamp(9.5px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Field not stated upstream — reads as a slot, not as fact. */
body.home .hbm-mcard--needs-location .hbm-mcard__where {
  color: rgba(255, 255, 255, 0.82);
  font-style: italic;
}

/* ---- Item 3 — the tagline above the cards ------------------------ *
 * Was 49px italic pure black on the light end of the section gradient,
 * reading as body copy rather than as the section's headline.
 * ------------------------------------------------------------------ */
body.home .hbm-section-tagline {
  margin: 0 auto 8px !important;
  padding: 0 16px;
  max-width: 20ch;
  font-size: clamp(34px, 4.4vw, 58px) !important;
  font-style: italic;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: center;
  color: var(--hbm-navy) !important;
  text-wrap: balance;
}

body.home .hbm-section-tagline span {
  color: var(--hbm-navy) !important;
}

/* The PRAY / GIVE / GO strip under the tagline was removed at Mrs. Taylor's
   request (2026-08-13). The three panel headings carry the message already. */


/* ---- Narrow screens ---------------------------------------------- */
@media (max-width: 980px) {
  body.home .et_pb_code_0,
  body.home .et_pb_text_6,
  body.home .et_pb_text_7 {
    min-height: 0 !important;
    margin-bottom: 20px !important;
  }

  body.home .hbm-cta-heading {
    font-size: 38px !important;
  }
}

/* ------------------------------------------------------------------ *
 * Missionary roster — uniform portraits
 * Mrs. Taylor, 2026-08-13: "Missionary pictures should all be the same size."
 * The roster mixes 400x284 landscape crops with tall portraits and squares,
 * so each entry sat at a different height. A fixed 4:3 box with object-fit
 * keeps faces centred without distorting anyone.
 * ------------------------------------------------------------------ */
body.page-id-4074 #main-content .et_pb_image img,
body.page-id-4074 #main-content .et_pb_gallery_image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 30%;   /* bias toward faces, not chins */
  border-radius: var(--hbm-r-md);
  background: #eef1f4;
}

body.page-id-4074 #main-content .et_pb_image {
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * Page-password gate (internal finance forms)
 * ------------------------------------------------------------------ */
.hbm-gate {
  max-width: 460px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
  text-align: left;
}

.hbm-gate h2 { color: var(--hbm-navy); margin: 0 0 .5rem; font-size: 1.4rem; }
.hbm-gate p  { color: var(--hbm-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 1.2rem; }
.hbm-gate label { display: block; font-weight: 600; color: var(--hbm-ink); margin-bottom: .4rem; }

.hbm-gate input[type="password"] {
  width: 100%;
  font-size: 1.05rem;          /* comfortably legible */
  padding: .7em .85em;
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-sm);
  margin-bottom: 1rem;
}

.hbm-gate input[type="password"]:focus {
  border-color: var(--hbm-accent);
  box-shadow: 0 0 0 3px rgba(47,127,184,.18);
  outline: none;
}

.hbm-gate button {
  background: var(--hbm-navy);
  color: #fff;
  border: 1px solid var(--hbm-navy);
  border-radius: var(--hbm-r-sm);
  font-size: 1.02rem;
  font-weight: 600;
  padding: .7em 1.6em;
  cursor: pointer;
}

.hbm-gate button:hover { background: var(--hbm-blue); border-color: var(--hbm-blue); }
.hbm-gate .hbm-gate-err { color: #a5250a; font-weight: 600; margin: .9rem 0 0; }

/* Roster index names.
 *
 * This rule used to read "the first column sits over a lighter part of the
 * header band, so its names washed out" and set them dark navy with a white
 * glow. That diagnosis was wrong: the first column was not washed out, it was
 * off the page — held at translateX(-100%) by Divi's animation scaffolding
 * and clipped by the page's overflow (see the .et_animated note in round
 * seven). Nothing was ever wrong with its colour.
 *
 * With the section wash now a deep navy, the names are simply white. The
 * glow went with the old diagnosis. */
body.page-id-4074 #main-content .et_pb_text a[href^="/missionary/#"],
body.page-id-4074 #main-content .et_pb_code a[href^="/missionary/#"] {
  color: #f2f5f8 !important;
  font-weight: 600;
  text-shadow: none;
}

body.page-id-4074 #main-content a[href^="/missionary/#"]:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ================================================================== *
 * Mrs. Taylor's home page review — 2026-08-13
 *
 * 2. Three DIFFERENT blues again. The original Divi build had three
 *    distinct blues; an earlier pass unified them. These three are taken
 *    from the site's own palette (the deep navy the GIVE panel already
 *    used, the brand blue from GO, and the accent blue) and run light to
 *    dark. PROVISIONAL — awaiting Mrs. Taylor's reference picture for the
 *    exact shades she wants.
 * 3. Same size, much smaller.
 * 4. PRAY / GIVE / GO slanted, not bold.
 * 5. The tagline on one line.
 * ================================================================== */

/* ---- 2. three distinct blues ------------------------------------- */
body.home .et_pb_code_0 { background-color: #0A518B !important; }  /* PRAY  — confirmed by Mrs. Taylor */
body.home .et_pb_text_6 { background-color: #00227F !important; }  /* GIVE  — confirmed by Mrs. Taylor */
body.home .et_pb_text_7 { background-color: #003EFF !important; }  /* GO    — confirmed by Mrs. Taylor */

/* ---- 3. same size, much smaller ---------------------------------- */
@media (min-width: 981px) {
  body.home .et_pb_row_4 {
    max-width: 880px !important;   /* was full width */
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 18px;
  }
}

body.home .et_pb_code_0,
body.home .et_pb_text_6,
body.home .et_pb_text_7 {
  min-height: 200px !important;    /* was 340 */
  padding: 18px 16px 16px !important;
  border-radius: var(--hbm-r-md);
}

/* Body copy scales down with the panels so nothing overflows. */
body.home .et_pb_code_0 .et_pb_code_inner,
body.home .et_pb_text_6 .et_pb_text_inner,
body.home .et_pb_text_7 .et_pb_text_inner,
body.home .et_pb_text_7 .et_pb_text_inner p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.home .hbm-cta-lead {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ---- 4. slanted, not bold ---------------------------------------- */
body.home .hbm-cta-heading {
  font-size: 30px !important;      /* was 46 */
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  padding-bottom: 12px !important;
  margin-bottom: 10px !important;
}

body.home .hbm-cta-heading strong,
body.home .hbm-cta-heading span {
  font-weight: 400 !important;
  font-style: italic !important;
}

body.home .hbm-initial {
  font-size: 1.55em;
  font-style: italic !important;
}

/* ---- 5. tagline on one line -------------------------------------- */
body.home .hbm-section-tagline {
  white-space: nowrap;
  font-size: clamp(26px, 4.4vw, 52px) !important;
  line-height: 1.2 !important;
}

/* Below ~600px one line would overflow the screen, so let it wrap there
   rather than force a horizontal scrollbar. */
@media (max-width: 600px) {
  body.home .hbm-section-tagline {
    white-space: normal;
    font-size: clamp(22px, 7vw, 34px) !important;
  }
}

/* Title case, not all-caps: Mrs. Taylor wrote the three words as
   "Pray. Give. Go." and her second reference is the words themselves. The
   oversized calligraphic initial from her earlier note is kept. */
body.home .hbm-cta-heading {
  text-transform: none !important;
  letter-spacing: 0.02em;
  text-indent: 0;
}

/* ------------------------------------------------------------------ *
 * Mrs. Taylor, 2026-08-13 (second round)
 *
 * 1. Centre the tagline. Forcing it onto one line made the text (761px)
 *    wider than its own container (572px), so it overflowed right and
 *    text-align:center centred it inside the wrong box — its optical
 *    centre landed at 830 while the panels centred at 711. Giving the
 *    tagline the same 880px centred container as the panels puts both on
 *    the page's centre line.
 * 2. A little more air between the panels: 18px -> 30px.
 * ------------------------------------------------------------------ */

@media (min-width: 981px) {
  /* The row carried a 20px right pad that pulled the panels 9px off centre. */
  body.home .et_pb_row_4 {
    /* Divi's own left/right padding was uneven (20 / 30), leaving the panel
       group 5px left of the page centre while the tagline sat dead centre. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 30px;
    /* Something downstream leaves ~31px of slack in this row. Centring the
       flex contents splits whatever remains evenly, so the panel group shares
       the page centre with the tagline regardless of the cause. */
    justify-content: center;
  }

  /* Let the panels size to the row rather than being pinned narrower. */
  body.home .et_pb_row_4 > .et_pb_column {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* Match the tagline's container to the panel group so both share a centre. */
body.home .hbm-section-tagline {
  display: block;
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Its Divi wrapper is the element that was too narrow — widen that too,
   otherwise the nowrap text still overflows a 572px parent. */
body.home .et_pb_text_5,
body.home .et_pb_text_5 .et_pb_text_inner {
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* Divi gives .et_pb_row a clearfix ::before/::after. In a flex container those
   pseudo-elements become real flex items, so the row counted THREE gaps for
   three columns (3x263.3 + 3x30 = 880) and pushed the panel group 15px left of
   the tagline. Removing them restores two gaps and a true centre. */
@media (min-width: 981px) {
  body.home .et_pb_row_4::before,
  body.home .et_pb_row_4::after {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * Final informational band — Mrs. Taylor, 2026-08-13
 * A photo band with a darker panel over it carrying the logo, address,
 * phone and website.
 * ------------------------------------------------------------------ */
.hbm-contact-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 64px 20px;
  background-image: var(--hbm-band-bg);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* Darkening wash so the panel and its text read over any photo. */
.hbm-contact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0.45), rgba(6, 20, 36, 0.65));
}

.hbm-contact-band__panel {
  position: relative;
  width: min(560px, 100%);
  padding: 36px 40px 32px;
  text-align: center;
  background: rgba(8, 26, 46, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--hbm-r-lg);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(2px);
}

.hbm-contact-band__logo {
  display: block;
  width: min(260px, 70%);
  height: auto;
  margin: 0 auto 22px;
}

.hbm-contact-band__details {
  font-style: normal;          /* <address> italicises by default */
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #eef3f8;
  font-size: 17px;
  line-height: 1.6;
}

.hbm-contact-band__details a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.hbm-contact-band__details a:hover,
.hbm-contact-band__details a:focus-visible {
  border-bottom-color: #ffffff;
}

/* Unconfirmed details are visibly provisional, so nobody mistakes a
   placeholder for the real address or phone number. */
.hbm-contact-band--pending .hbm-contact-band__details span:has(> a[href^="tel"]),
.hbm-contact-band--pending .hbm-contact-band__details > span:not(:has(a)) {
  color: #ffd9a8;
  font-style: italic;
}

@media (max-width: 600px) {
  .hbm-contact-band { min-height: 320px; padding: 44px 16px; }
  .hbm-contact-band__panel { padding: 28px 22px 24px; }
  .hbm-contact-band__details { font-size: 16px; }
}

/* Officer list in the closing band, as on the letterhead. */
.hbm-contact-band__officers {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 22px;
  text-align: left;
}

.hbm-contact-band__officers li { color: #dfe8f1; font-size: 14px; line-height: 1.45; }
.hbm-officer-title { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fb6cc; }
.hbm-officer-name { font-weight: 600; color: #ffffff; }

@media (max-width: 600px) {
  .hbm-contact-band__officers { grid-template-columns: 1fr; }
}

/* Staff contacts in the closing band — name, role, email, phone. */
.hbm-contact-band__people {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  text-align: left;
}

.hbm-contact-band__people li { display: flex; flex-direction: column; gap: 2px; }
.hbm-person-name  { font-weight: 700; color: #ffffff; font-size: 15px; }
.hbm-person-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fb6cc; }
.hbm-person-mail,
.hbm-person-tel   { font-size: 13px; color: #dbe7f2; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); align-self: flex-start; }
.hbm-person-mail  { word-break: break-word; }
.hbm-person-mail:hover, .hbm-person-tel:hover { color: #fff; border-bottom-color: #fff; }

.hbm-contact-band__site { margin: 20px 0 0; }
.hbm-contact-band__site a { color: #fff; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }

.hbm-contact-band__panel { width: min(720px, 100%); }

@media (max-width: 640px) {
  .hbm-contact-band__people { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Closing band, statement + address — Mrs. Taylor, 2026-08-13
 *
 * She asked that the box carry "what is written in gold" on HBM's printed
 * brochure. The wording is transcribed verbatim and coloured to match the
 * brochure's gold rather than reworded.
 * ------------------------------------------------------------------ */
.hbm-contact-band__statement {
  margin: 4px auto 22px;
  max-width: 56ch;
  color: #f0b429;                 /* the brochure gold */
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

.hbm-contact-band__statement strong {
  color: #f8c455;                 /* the org name is set brighter on the brochure */
  font-weight: 700;
}

/* The address sits between the statement and the staff list, so it needs a
   little separation from both without inventing a rule line. */
.hbm-contact-band__details {
  margin-bottom: 18px;
}

@media (max-width: 600px) {
  .hbm-contact-band__statement { font-size: 15.5px; max-width: none; }
}

/* The HBM logo is dark navy artwork, so on the dark panel it was very nearly
   invisible. It sits on a white plate now — the mark keeps its own colours and
   the address baked into the artwork stays readable. */
.hbm-contact-band__logo {
  background: #ffffff;
  padding: 14px 22px;
  border-radius: var(--hbm-r-md, 10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  width: min(300px, 78%);
}

/* Mrs. Taylor's wheat photo is bright and warm; the original wash was heavy
   enough to read as dark blue-grey instead. Every piece of text in this band
   sits on the panel, which carries its own 86% background, so the wash does no
   contrast work and can be light enough to let the photo look like her photo. */
.hbm-contact-band::before {
  background: linear-gradient(180deg, rgba(10, 26, 44, 0.20), rgba(10, 26, 44, 0.34));
}

/* ------------------------------------------------------------------ *
 * Closing band, round three — Mrs. Taylor, 2026-08-13
 *  - statement lightened from gold to wheat
 *  - white logo plate elongated
 * ------------------------------------------------------------------ */

/* She asked for "a lighter wheat colour" rather than the brochure gold. These
   two are sampled from the wheat heads in her own background photo — #E8CAA9
   is the mean of the lightest fifth, #F2DFBC the brighter tone for the org
   name. 10.8:1 and 12.6:1 on the panel, so both read better than the gold did. */
.hbm-contact-band__statement { color: #e8caa9; }
.hbm-contact-band__statement strong { color: #f2dfbc; }

/* "Elongate the white HBM logo" — the plate, not the artwork. border-box means
   the width below is the white box itself, so the generous side padding
   lengthens the plate without scaling the mark up, and it still can't overflow
   the panel on a narrow screen. */
.hbm-contact-band__logo {
  box-sizing: border-box;
  width: min(440px, 100%);
  padding: 16px 56px;
}

@media (max-width: 600px) {
  /* Keep the mark a usable size once the plate is only ~314px wide. */
  .hbm-contact-band__logo { padding: 14px 26px; }
}

/* ------------------------------------------------------------------ *
 * Mrs. Taylor, 2026-08-13 (round four)
 * ------------------------------------------------------------------ */

/* 1. The home hero stopped short of the edges on wide screens. Nothing had
      changed - the image is 1536px natively and carried max-width:100% with no
      width, so it simply stopped at 1536 and centred. On a 1920 monitor that
      is 192px of margin each side; at 2560 it is 512px. Giving it width:100%
      makes it span the viewport at any size. Note it is upscaled past 1536px,
      about 1.25x at 1920 - the 1536 file is the largest that exists, so a
      bigger original is the only way to sharpen it further. */
body.home .et_pb_row_0,
body.home .et_pb_row_0 .et_pb_image,
body.home .et_pb_row_0 .et_pb_image_wrap {
  width: 100%;
  max-width: none;
}

body.home .et_pb_row_0 .et_pb_image_wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. The menu dropdowns were red (rgba(224,43,32,.73)) from Divi's theme
      colour. Light blue instead, per her request. The dropdown links were
      white, which would vanish on a light panel, so they go dark navy - that
      pairs at about 12:1, well past AA. Top-level nav is left alone. */
#top-menu li ul.sub-menu,
.nav li ul,
.et-menu li ul,
#et-secondary-nav li ul {
  background-color: #dceaf6 !important;
  border-top-color: #8fbfdf !important;
  box-shadow: 0 8px 22px rgba(10, 40, 70, 0.18);
}

#top-menu li ul.sub-menu li a,
.nav li ul li a,
.et-menu li ul li a {
  color: #0b2e4f !important;
}

#top-menu li ul.sub-menu li a:hover,
.nav li ul li a:hover,
.et-menu li ul li a:hover {
  background-color: #c2ddf1 !important;
  color: #08243f !important;
  opacity: 1;
}

/* The phone menu takes the same red from the same theme colour. */
.et_mobile_menu,
.et_mobile_menu li a {
  background-color: #dceaf6 !important;
  color: #0b2e4f !important;
}

.et_mobile_menu li a:hover {
  background-color: #c2ddf1 !important;
}

/* ------------------------------------------------------------------ *
 * Pray box — Mrs. Taylor's prayer list, 2026-08-13
 * Added beneath the existing copy, not in place of it: she asked for a
 * replacement and then corrected herself to leave what was there.
 * The three panels already stretch to the tallest, so the extra lines grow
 * all three together and they stay identical.
 * ------------------------------------------------------------------ */
body.home .hbm-pray__for {
  margin: 14px 0 6px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.home .hbm-pray__list {
  list-style: none;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.home .hbm-pray__list li {
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

body.home .hbm-pray__ref {
  margin: 10px 0 0 !important;
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* Divi paints a bullet before list items inside its modules. */
body.home .hbm-pray__list li:before { content: none !important; }

/* ------------------------------------------------------------------ *
 * Mrs. Taylor, 2026-08-13 (round six)
 * ------------------------------------------------------------------ */

/* 1. "Move PRAY for: up." The gap above it measured 30px — much the largest in
      the panel — built from the lead's 16px bottom margin, an inherited 14px
      bottom padding and the heading's own 14px top margin. Trimming all three
      lifts the list and the verse by roughly 45px. */
body.home .hbm-pray .hbm-cta-lead {
  margin-bottom: 6px !important;
  padding-bottom: 2px !important;
}

body.home .hbm-pray__for {
  margin-top: 2px !important;
  padding-bottom: 0 !important;
}

/* 2. The GO box's closing sentence, out of italics so it stands apart from the
      italic copy above it. The class is applied in pray-give-go.mjs, keyed on
      the sentence rather than its position. */
body.home .hbm-go-closing,
body.home .hbm-go-closing em {
  font-style: normal !important;
}

/* ================================================================== *
 * Polish pass — 2026-08-13 (round seven)
 *
 * Everything in this block came out of a measured audit of all 49
 * pages rather than a look at the home page, so each rule below names
 * the defect it corrects.
 * ================================================================== */

/* ---- 1. Content that never appears ------------------------------- *
 * Divi ships every "animated" module at opacity:0 and relies on its
 * builder JS to add an animation-name class when the module scrolls
 * into view. On this mirror that trigger fires for some modules and
 * not others: after loading /missionary/, scrolling the whole page and
 * waiting six seconds, 13 modules were still at opacity 0 — every one
 * of them a missionary's portrait (Nalty, Noble, Pineda, Powell,
 * Riddick, Small, Sandres, Silva, Tabor and more). They are invisible
 * to a visitor, permanently, with no way to recover them.
 *
 * Content must not depend on a scroll trigger firing. Divi's animation
 * is switched off outright rather than patched: the same modules get
 * the reveal defined at the foot of this file, which is driven by
 * IntersectionObserver and degrades to plain visible content with no
 * JS at all.
 * ------------------------------------------------------------------ */
.et_animated {
  opacity: 1 !important;
  animation: none !important;
  /* Divi's JS writes the animation's start offset as an inline style —
   * "opacity:0; transform:translate3d(-100%,0,0); animation-delay:1500ms".
   * With the animation switched off that offset is never played out, so the
   * module keeps it: this is what held the first column of the /missionary/
   * roster at x=-45, one full column width off the left edge, where the
   * page's own overflow clipping hid seven missionaries — Bacon, Broc,
   * Munguia, Cristinoiu, Escobar, Hinds and Hodges.
   *
   * Checked across all 49 pages before overriding: no animated module carries
   * a transform from a stylesheet, only ever this inline one, so nothing
   * deliberate is lost here. */
  transform: none !important;
}

/* Divi's own end-state class, for the modules whose animation did run. */
.et_had_animation {
  opacity: 1;
}

/* ---- 2. Washes no text colour can win against -------------------- *
 * Both pages paint their sections with a translucent overlay, which
 * composites against the near-white page to a mid-tone:
 *
 *   /about/staff/   rgba(0,0,0,0.41)      -> rgb(138,138,138)
 *   /missionary/    rgba(36,60,102,0.6)   -> rgb(115,130,155)
 *
 * 290 text elements sit on those two colours. A mid-tone is the one
 * case where neither polarity rescues the text: the best any colour
 * can reach is 4.22:1 on the staff page and 4.06:1 on the missionary
 * page, both under the 4.5:1 body-copy threshold. The background is
 * the defect, so the background is what changes.
 *
 * Both are deepened onto the brand navy (#243c66) the missionary page
 * already uses, which keeps the intended hue, makes the two interior
 * pages agree with each other, and takes white text to about 6:1.
 * ------------------------------------------------------------------ */
/* Opaque navy, not a translucent slate. At 0.78 over Divi's #eaeaea this
   composited to #506384 — a colour in no token, on the one page most
   visitors come to, so Teams -> Missionaries -> Schools shifted field
   colour mid-journey. */
body.page-id-4420 #main-content .et_pb_section,
body.page-id-4074 #main-content .et_pb_section {
  background-color: #0f2c49 !important;
}

/* ---- 3. Sidebar search --------------------------------------------
 * Divi absolutely positions the submit button at right:0 over a
 * full-width input. That worked while the button was Divi's small grey
 * one; once this stylesheet restyled every submit to navy with roomier
 * padding, the button grew and started covering the input's right edge
 * — and anything typed ran underneath it. Lay the form out as a flex
 * row so the two sit side by side and neither can overlap the other.
 * ------------------------------------------------------------------ */
#main-content .widget_search #searchform > div,
#sidebar .widget_search #searchform > div {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

#main-content .widget_search #s,
#sidebar .widget_search #s {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  height: 42px !important;
  border: 1px solid var(--hbm-line) !important;
  border-radius: var(--hbm-r-sm) !important;
  padding: 0 0.75em !important;
  color: var(--hbm-ink);
  transition: border-color 0.18s var(--hbm-ease), box-shadow 0.18s var(--hbm-ease);
}

#main-content .widget_search #s:focus,
#sidebar .widget_search #s:focus {
  border-color: var(--hbm-accent) !important;
  box-shadow: 0 0 0 3px rgba(47, 127, 184, 0.18) !important;
  outline: none;
}

#main-content .widget_search #searchsubmit,
#sidebar .widget_search #searchsubmit {
  position: static !important;
  flex: 0 0 auto;
  height: 42px !important;
  padding: 0 1.1em !important;
  border-radius: var(--hbm-r-sm) !important;
}

/* ---- 4. Widget list rules ------------------------------------------
 * The separators are drawn by "#main-content .et_pb_widget li" but the
 * reset that drops the last one was written against "#sidebar .widget
 * li:last-child". Nothing in this markup carries a bare "widget" class
 * — the widgets are ".et_pb_widget" — so the reset never matched and
 * every widget list ended on a rule with nothing under it.
 * ------------------------------------------------------------------ */
#main-content .et_pb_widget li:last-child,
#sidebar .et_pb_widget li:last-child {
  border-bottom: none;
}

/* ---- 5. The navigation underline ---------------------------------
 * It was animated by moving left and right from 50% to 0.1em. Two
 * problems. The pair never resolves to exactly zero width — "Teams"
 * and "Contact" measured 0.015625px at rest, which the compositor
 * rounds up and paints as a permanent 1px blue speck beside each of
 * them. And animating left/right is a layout property, so it cannot
 * run on the compositor.
 *
 * A scaleX transform is exactly zero when it is zero, and animates on
 * the compositor instead. Same effect, no speck.
 * ------------------------------------------------------------------ */
#top-menu > li > a::before {
  left: 0.1em;
  right: 0.1em;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.24s var(--hbm-ease);
}

#top-menu > li:hover > a::before,
#top-menu > li.current-menu-item > a::before,
#top-menu > li.current-menu-ancestor > a::before,
#top-menu > li.current_page_item > a::before {
  left: 0.1em;
  right: 0.1em;
  transform: scaleX(1);
}

/* ---- 6. Dropdown motion -------------------------------------------
 * Divi runs "Grow" — scaleY(.5) to scale(1) over 0.4s from the top
 * left corner. It is slow for a menu, it skews the panel on the way in
 * because it scales only one axis, and being an animation rather than
 * a transition it plays on open and then snaps away on close.
 *
 * A short fade and rise reads as the panel settling into place, runs
 * both ways because it is a transition, and is half the duration.
 * ------------------------------------------------------------------ */
#top-menu li ul.sub-menu,
.et-menu li ul,
.nav li ul {
  animation: none !important;
  transform: translateY(-8px);
  transform-origin: 50% 0;
  transition: opacity 0.18s var(--hbm-ease),
              transform 0.18s var(--hbm-ease),
              visibility 0.18s var(--hbm-ease);
}

#top-menu li:hover > ul.sub-menu,
#top-menu li.et-hover > ul.sub-menu,
.et-menu li:hover > ul,
.nav li:hover > ul,
.nav li.et-touch-hover > ul {
  transform: translateY(0);
}

/* The mobile menu is toggled open, not hovered — it must not inherit
   the closed transform or it renders 8px high of its own position. */
.et_mobile_menu,
.et_mobile_menu li ul {
  transform: none !important;
}

/* ---- 7. No reveal-on-scroll --------------------------------------
 * Deliberately absent, and worth recording so it is not "added back"
 * as an oversight.
 *
 * A fade-and-rise reveal was built here to replace Divi's animation.
 * Measured on the home page it left four rows at opacity 0 until the
 * observer fired — among them the PRAY / GIVE / GO row, the main call
 * to action on the site. In a normal browser those reveal on scroll
 * and it looks well. But that is the same shape of dependency that had
 * just been removed from this file: content that is invisible until a
 * scroll event runs correctly, on a page where exactly that mechanism
 * had already failed and taken 13 missionary photographs with it.
 *
 * A subtle fade is not worth the chance of a blank panel on someone's
 * screen. The motion on this site is all on interaction instead —
 * hover, focus, the menus, the buttons, images fading in as they
 * decode — none of which can leave content hidden.
 * ------------------------------------------------------------------ */

/* ---- 8. Images settle in rather than pop -------------------------- */
#main-content img {
  transition: opacity 0.4s var(--hbm-ease);
}

#main-content img.hbm-img-loading {
  opacity: 0;
}

/* ---- 9. Interior pages had their body copy on the bare page -------
 * /about/ and /contact/thank-you/ use the classic template, where the
 * article is not a Divi module and so paints nothing. Their text sat
 * straight on the grey page background while the sidebar beside them
 * carried white cards, which read as an unfinished page rather than a
 * deliberate one. The post templates already get this treatment from
 * the .et_pb_post rules further up; this extends it to the two pages
 * that are not posts.
 * ------------------------------------------------------------------ */
#left-area > article.page {
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
  padding: 2rem 2.2rem 1.6rem;
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  #left-area > article.page { padding: 1.4rem 1.2rem 1rem; border-radius: var(--hbm-r-md); }
}

/* ---- 10. The footer floated on short pages ------------------------
 * Measured at 1440x900: /category/long-term/ and the date archives
 * left 386px of bare grey under the footer, /about/ 147px and
 * /contact/thank-you/ 168px. Divi's wrapper has no minimum height, so
 * a short page simply stops. Push the footer to the bottom.
 * ------------------------------------------------------------------ */
#page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page-container > #et-main-area {
  flex: 1 0 auto;
  /* The footer lives inside this wrapper, not beside it, so this has to be a
     flex column as well — otherwise the wrapper stretches to fill the page
     and the footer just sits wherever the content ended, with the leftover
     height showing as bare grey underneath it. */
  display: flex;
  flex-direction: column;
}

#et-main-area > #main-content {
  flex: 1 0 auto;
}

#page-container > #main-footer,
#et-main-area > #main-footer {
  margin-top: auto;
  flex: 0 0 auto;
}

/* ---- 11. Motion preferences ---------------------------------------
 * The reveal and the dropdown rise both resolve to their end state
 * rather than merely running fast, so nothing is left mid-transform.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #top-menu li ul.sub-menu,
  .et-menu li ul,
  .nav li ul {
    transform: none;
  }

  #main-content img.hbm-img-loading { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * The photographs flanking PRAY / GIVE / GO — Mrs. Taylor, 2026-08-13
 *
 * One picture outside the Pray box, one outside the Go box, filling
 * margin that was already empty at desktop width. Markup comes from
 * addFlankPhotos() in capture/pray-give-go.mjs.
 *
 * The three panels keep the size she approved. The row was capped at
 * 880px for them; that cap now covers the panels only, and the row
 * widens by exactly the two photo columns plus their gaps, so the
 * panels are the same width to the pixel as before the photos existed.
 * ------------------------------------------------------------------ */
body.home .hbm-cta-flank {
  position: relative;
  z-index: 3;              /* rides over the panel it overlaps */
  margin: 0;
  padding: 0;
  /* Both pictures share one box so the pair reads as a matched set —
     one is a tall portrait, the other nearly square. */
  aspect-ratio: 4 / 5;
  /* drop-shadow, not box-shadow: it follows the feathered edge below,
     where box-shadow would draw a hard rectangle behind the soft one. */
  filter: drop-shadow(0 8px 20px rgba(20, 56, 92, 0.20));
}

body.home .hbm-cta-flank img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--hbm-r-md);
  transition: transform 0.6s var(--hbm-ease);
}

/* Mrs. Taylor, 2026-08-13: "on both I wanted them to overlap the box a
   tiny bit — however we could leave the background and fuzzy the edges."
   Both, rather than either: the picture laps onto the panel, and the
   edge that does the lapping is feathered so it dissolves into the
   panel instead of cutting a hard line across it. The other three edges
   stay crisp and rounded. */
body.home .hbm-cta-flank--pray img {
  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}

body.home .hbm-cta-flank--go img {
  -webkit-mask-image: linear-gradient(to left, #000 90%, transparent 100%);
  mask-image: linear-gradient(to left, #000 90%, transparent 100%);
}

body.home .hbm-cta-flank:hover img {
  transform: scale(1.04);
}

@media (min-width: 981px) {
  /* 880px of panels + 2 photos + 4 gaps. */
  body.home .et_pb_row_4 {
    max-width: calc(880px + 2 * 200px + 4 * 30px) !important;
    /* Stretch, not centre. The three panels are height-matched on purpose —
       "same size" was the request — and centring each flex item instead lets
       them fall to their natural heights. The photographs stretch with them,
       so picture and panel share a top and bottom edge. */
    align-items: stretch;
  }

  body.home .hbm-cta-flank {
    flex: 0 0 200px;
    align-self: stretch;
    aspect-ratio: auto;
  }

  /* Close the 30px gap, then lap 14px onto the panel — "a tiny bit". */
  body.home .hbm-cta-flank--pray { margin-right: -44px; }
  body.home .hbm-cta-flank--go { margin-left: -44px; }

  /* Pin the panels to the width they had at an 880px row, so widening
     the row for the photos does not resize them. */
  body.home .et_pb_row_4 > .et_pb_column {
    flex: 0 0 calc((880px - 2 * 30px) / 3) !important;
  }
}

/* Below the desktop breakpoint the row stacks, so the photographs stack
   with it rather than squeezing into a column of their own. */
@media (max-width: 980px) {
  body.home .hbm-cta-flank {
    width: min(360px, 82%);
    margin: 0 auto 22px;
  }

  body.home .hbm-cta-flank--go {
    margin-top: 22px;
    margin-bottom: 0;
  }

  /* Stacked, there is no panel edge to melt into — a picture fading out on
     one side for no reason just looks like a rendering fault. */
  body.home .hbm-cta-flank--pray img,
  body.home .hbm-cta-flank--go img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hbm-cta-flank:hover img { transform: none; }
}

/* ================================================================== *
 * Missionary card grid — Mrs. Taylor's design, 2026-08-13
 *
 * Picture, name, country, flag, then Learn More and Donate. Modelled
 * on the reference she sent: a photograph on top, a deep navy panel
 * beneath it, and outlined buttons at the foot.
 *
 * Markup comes from capture/missionary-cards.mjs. The grid replaced
 * the four columns of surnames that used to head this page.
 * ================================================================== */
body.page-id-4074 .hbm-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
  margin: 8px 0 4px;
}

body.page-id-4074 .hbm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--hbm-r-lg);
  background: #0f2a47;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 14px 32px rgba(0, 0, 0, 0.22);
  transition: transform 0.28s var(--hbm-ease), box-shadow 0.28s var(--hbm-ease);
}

body.page-id-4074 .hbm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24), 0 22px 48px rgba(0, 0, 0, 0.3);
}

/* The photographs are a mix of couples, families and single portraits,
   so they are boxed to one ratio and cropped rather than left to set
   their own height — otherwise no two cards in a row would line up. */
body.page-id-4074 .hbm-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #16375c;
}

body.page-id-4074 .hbm-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 0;
  transition: transform 0.5s var(--hbm-ease);
}

body.page-id-4074 .hbm-card:hover .hbm-card__photo {
  transform: scale(1.04);
}

body.page-id-4074 .hbm-card__photo--empty {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.09) 12px 24px);
}

body.page-id-4074 .hbm-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 20px;
  text-align: center;
}

body.page-id-4074 .hbm-card__name {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  text-wrap: balance;
}

body.page-id-4074 .hbm-card__where {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px !important;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #cfe0f0;
}

/* Flags are images, never emoji — emoji flags render as two letters on
   Windows, which is what both Mrs. Taylor and Collin are using.
 *
 * Mrs. Taylor, 2026-08-14: they should look like waving flags rather than
 * flat rectangles. The artwork is untouched — the same self-hosted SVGs — and
 * the wave comes from clipping each one to a wave-shaped path and laying a
 * fold shading gradient over it. That way it applies to every flag, including
 * any added later, without a second artwork set to keep in step with the
 * first. The clip path is emitted once per page by missionary-cards.mjs.
 */
body.page-id-4074 .hbm-flag-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body.page-id-4074 .hbm-card__flagwrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  /* Taller than the 4:3 artwork because the wave clips a tenth off the top
     and the bottom; this keeps the visible band a sensible size next to the
     text rather than a sliver. */
  width: 30px;
  height: 23px;
  line-height: 0;
}

body.page-id-4074 .hbm-card__flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  clip-path: url(#hbm-flag-wave);
}

/* The folds. Mrs. Taylor, 2026-08-14: the flags should fly without soft
 * edges. So the shading is now hard-stepped rather than a smooth blend —
 * each fold is a flat band meeting the next on a crisp line, the way a
 * drawn flag reads, instead of an airbrushed gradient. The clip path
 * itself already gives a sharp silhouette. */
body.page-id-4074 .hbm-card__flagwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: url(#hbm-flag-wave);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.22) 18%,
    rgba(255, 255, 255, 0.16) 18%,
    rgba(255, 255, 255, 0.16) 40%,
    rgba(0, 0, 0, 0.16) 40%,
    rgba(0, 0, 0, 0.16) 62%,
    rgba(255, 255, 255, 0.13) 62%,
    rgba(255, 255, 255, 0.13) 84%,
    rgba(0, 0, 0, 0.20) 84%,
    rgba(0, 0, 0, 0.20) 100%
  );
  pointer-events: none;
}

/* Keep the artwork itself crisp rather than letting the browser smooth it
   when it scales the SVG down to flag size. */
body.page-id-4074 .hbm-card__flag {
  image-rendering: -webkit-optimize-contrast;
}

/* Should a browser not support clip-path on an image, the flag simply stays
   rectangular — readable, just not waving. */
@supports not (clip-path: url(#hbm-flag-wave)) {
  body.page-id-4074 .hbm-card__flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
  body.page-id-4074 .hbm-card__flagwrap::after { display: none; }
}

body.page-id-4074 .hbm-card__where--unknown {
  color: #9fb6cc;
  font-style: italic;
}

/* Buttons sit on the bottom edge of every card whatever the name length
   above them, so a row of cards reads as one band of buttons. */
body.page-id-4074 .hbm-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

body.page-id-4074 .hbm-card__btn {
  flex: 1 1 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--hbm-r-sm);
  color: #ffffff !important;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--hbm-ease), color 0.18s var(--hbm-ease),
              border-color 0.18s var(--hbm-ease);
}

body.page-id-4074 .hbm-card__btn:hover,
body.page-id-4074 .hbm-card__btn:focus-visible {
  background: #ffffff;
  color: #0f2a47 !important;
  border-color: #ffffff;
}

body.page-id-4074 .hbm-card__btn--give {
  background: rgba(255, 255, 255, 0.14);
}

body.page-id-4074 .hbm-card__btn--give:hover,
body.page-id-4074 .hbm-card__btn--give:focus-visible {
  background: #ffffff;
}

@media (max-width: 480px) {
  body.page-id-4074 .hbm-card-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-4074 .hbm-card:hover { transform: none; }
  body.page-id-4074 .hbm-card:hover .hbm-card__photo { transform: none; }
}

/* ================================================================== *
 * A page of their own — Bro. Taylor, 2026-08-13
 *
 * Learn More now goes to /missionary/<surname>/ rather than off to a
 * personal site. Laid out after the two examples he gave, scaled to
 * what Heartland actually holds for each person: a portrait and name
 * at the top, their story, prayer letters, and a way to give.
 *
 * Markup comes from capture/missionary-pages.mjs.
 * ================================================================== */
body.hbm-missionary-page #main-content .et_pb_section {
  background-color: transparent !important;
}

/* Widened 2026-08-14: "Can their picture be enlarged?" — the portrait at the
   top of a missionary's own page now takes the larger share of a wider page,
   so a family of seven is legible rather than thumbnail-sized. */
.hbm-mp {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 22px 64px;
  color: var(--hbm-ink);
}

.hbm-mp__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  margin-bottom: 40px;
}

.hbm-mp__portrait {
  overflow: hidden;
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-md);
  aspect-ratio: 4 / 3;
  background: #eef2f6;
}

.hbm-mp__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 0;
}

.hbm-mp__eyebrow {
  margin: 0 0 8px !important;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hbm-mp__eyebrow a { color: var(--hbm-accent); text-decoration: none; }
.hbm-mp__eyebrow a:hover { text-decoration: underline; }

.hbm-mp__name {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--hbm-navy);
  text-wrap: balance;
}

.hbm-mp__role {
  margin: 0 0 4px !important;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hbm-blue);
}

.hbm-mp__where {
  margin: 0 0 18px !important;
  color: var(--hbm-muted);
  font-size: 1rem;
}

.hbm-mp__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hbm-mp__btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--hbm-navy);
  border-radius: var(--hbm-r-sm);
  color: var(--hbm-navy) !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s var(--hbm-ease), color 0.18s var(--hbm-ease);
}

.hbm-mp__btn:hover { background: var(--hbm-navy); color: #fff !important; }

.hbm-mp__btn--give {
  background: var(--hbm-navy);
  color: #fff !important;
}

.hbm-mp__btn--give:hover { background: var(--hbm-blue); border-color: var(--hbm-blue); }

.hbm-mp__block {
  margin: 0 0 34px;
  padding: 26px 28px;
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-sm);
}

.hbm-mp__block h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  color: var(--hbm-navy);
}

/* The write-ups come straight off the roster page, where they were white
   text on a navy wash. On this white card they have to be ink again, and
   the inline colours Divi put on them have to be overridden. */
.hbm-mp__block p,
.hbm-mp__block span,
.hbm-mp__block em,
.hbm-mp__block strong,
.hbm-mp__block font {
  color: var(--hbm-ink) !important;
  line-height: 1.75;
}

.hbm-mp__block a { color: var(--hbm-blue); }

.hbm-mp__pending { color: var(--hbm-muted) !important; font-style: italic; margin: 0 !important; }

/* Divi restyles every ul under .entry-content back to discs, and beats a
   bare .hbm-mp__letters on specificity — so a bullet appeared beside each
   prayer-letter pill. Qualifying with the block and the tag wins. */
.hbm-mp__block ul.hbm-mp__letters,
.hbm-mp__block ul.hbm-mp__letters li {
  list-style: none !important;
  list-style-type: none !important;
}
.hbm-mp__block ul.hbm-mp__letters {
  margin: 0;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hbm-mp__letters a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-sm);
  background: #f6f9fc;
  color: var(--hbm-blue);
  font-size: 0.94rem;
  text-decoration: none;
  text-transform: capitalize;
  transition: border-color 0.18s var(--hbm-ease), background-color 0.18s var(--hbm-ease);
}

.hbm-mp__letters a:hover { border-color: var(--hbm-accent); background: #eaf3fa; }

.hbm-mp__back { margin: 6px 0 0 !important; }
.hbm-mp__back a { color: var(--hbm-blue); text-decoration: none; font-weight: 600; }
.hbm-mp__back a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .hbm-mp__hero { grid-template-columns: 1fr; gap: 22px; }
  .hbm-mp { padding: 28px 16px 48px; }
  .hbm-mp__block { padding: 20px 18px; }
}

/* ================================================================== *
 * Staff page — 2026-08-14
 * ================================================================== */

/* ---- The officer list --------------------------------------------
 * Was a six-column Divi row carrying seven officers, so two columns
 * held two people, one held none, and the pairs did not line up. The
 * gap between a title and its own name was sometimes bigger than the
 * gap to the next officer's title, which is what made it hard to read
 * — nothing but proximity said which name went with which title, and
 * the proximity was wrong. One even grid instead.
 * ------------------------------------------------------------------ */
body.page-id-4420 .hbm-officers {
  list-style: none;
  display: grid;
  /* Four across at desktop, so the seven officers fall 4 + 3 rather than the
     5 + 2 that auto-fit produced — a lone pair on the second row reads as
     though somebody had been left off. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 4px 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  body.page-id-4420 .hbm-officers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  body.page-id-4420 .hbm-officers { grid-template-columns: 1fr; }
}

body.page-id-4420 .hbm-officers__item {
  margin: 0;
  padding: 0;
  border: none;
}

body.page-id-4420 .hbm-officers__item::before { content: none !important; }

body.page-id-4420 .hbm-officers__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--hbm-r-md);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s var(--hbm-ease);
}

body.page-id-4420 .hbm-officers__item a:hover,
body.page-id-4420 .hbm-officers__item a:focus-visible {
  background: rgba(255, 255, 255, 0.10);
}

/* Title above name, the title quieter, so the pairing is unmistakable
   and the eye groups them rather than reading a column of alternating
   lines with no relationship. */
body.page-id-4420 .hbm-officers__title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9cde0;
  line-height: 1.3;
}

body.page-id-4420 .hbm-officers__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

/* ---- Dr. Chestnut's three buttons --------------------------------
 * "Donate to Legacy Fund" wraps onto three lines where the other two
 * take one, so against a shared top edge the row measured 101px,
 * 169px and 101px and read as though the buttons had collided. They
 * are in separate Divi columns, so the row is made a flex line and
 * every button stretched to the tallest — no wording is shortened.
 * ------------------------------------------------------------------ */
@media (min-width: 981px) {
  body.page-id-4420 #main-content .et_pb_row_inner_1 {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
  }

  body.page-id-4420 #main-content .et_pb_row_inner_1 > .et_pb_column_inner {
    display: flex;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }

  body.page-id-4420 #main-content .et_pb_row_inner_1 .et_pb_button_module_wrapper {
    display: flex;
    width: 100%;
  }

  body.page-id-4420 #main-content .et_pb_row_inner_1 .et_pb_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1.25;
  }
}

/* Below the desktop breakpoint the columns stack, so they just need
   room to breathe rather than matching heights. */
@media (max-width: 980px) {
  body.page-id-4420 #main-content .et_pb_row_inner_1 .et_pb_button_module_wrapper {
    margin-bottom: 12px;
  }
}

/* ---- What the missionaries send in ---------------------------------
 * Prayer card, presentation video and links to their own letters, from
 * capture/missionary-extras.json. The first of these arrived within
 * hours of Mrs. Taylor asking for them on 2026-08-14.
 * ------------------------------------------------------------------ */
.hbm-mp__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.hbm-mp__cards a {
  display: block;
  max-width: min(320px, 100%);
  border-radius: var(--hbm-r-md);
  overflow: hidden;
  box-shadow: var(--hbm-shadow-sm);
  transition: transform 0.24s var(--hbm-ease), box-shadow 0.24s var(--hbm-ease);
}

.hbm-mp__cards a:hover {
  transform: translateY(-3px);
  box-shadow: var(--hbm-shadow-md);
}

.hbm-mp__cards img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* 16:9 box so the video never pushes the page sideways on a phone. */
.hbm-mp__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--hbm-r-md);
  overflow: hidden;
  background: #0d1b2a;
}

.hbm-mp__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hbm-mp__cards a:hover { transform: none; }
}

/* ================================================================== *
 * Half-screen / tablet layout — Collin's review, 2026-08-14
 * ================================================================== */

/* ---- 1. The Contact dropdown ran off the right edge ---------------
 * Its parent is the rightmost menu item, so a menu opening from the
 * left pushed the panel past the viewport at widths where the desktop
 * menu still shows (measured ending 93px off-screen at 1000px). The
 * last item's dropdown opens leftward instead, so it can never overflow.
 * ------------------------------------------------------------------ */
@media (min-width: 981px) {
  #top-menu > li:last-child > ul.sub-menu,
  #top-menu > li:nth-last-child(2) > ul.sub-menu {
    left: auto !important;
    right: 0 !important;
    transform-origin: 100% 0;
  }
}

/* ---- 2. The three feature cards broke 2 + 1 ----------------------
 * At the tablet width Divi drops the three homepage cards to two on
 * one row and one alone on the next, off-centre. Below the desktop
 * breakpoint they stack one per row instead, each full width and
 * centred, so none is ever left stranded beside empty space.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
  body.home #main-content .et_pb_row:has(> .et_pb_column_2),
  body.home #main-content .et_pb_row:has(> .et_pb_column_3),
  body.home #main-content .et_pb_row:has(> .et_pb_column_4) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.home #main-content .et_pb_column_2,
  body.home #main-content .et_pb_column_3,
  body.home #main-content .et_pb_column_4 {
    float: none !important;
    width: min(520px, 100%) !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ---- 3. Pray / Give / Go and the closing note, off to the left ----
 * Below the desktop breakpoint the CTA panels and their flanking
 * photos stack, but the stack sat hard against the left with a wide
 * empty band on the right. Centre the row and everything in it, and
 * centre the "Yours for souls, Bob Taylor" note that sits under it.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
  body.home .et_pb_row_4 {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .et_pb_row_4 > .et_pb_column,
  body.home .et_pb_code_0,
  body.home .et_pb_text_6,
  body.home .et_pb_text_7 {
    float: none !important;
    width: min(520px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The paragraph that follows — "Our goal is… Yours for souls, Bob
     Taylor" — is a plain text module left-aligned by Divi. */
  body.home .et_pb_row_5,
  body.home .et_pb_row_5 .et_pb_text_inner,
  body.home .et_pb_row_5 .et_pb_text_inner p {
    text-align: center !important;
  }

  body.home .et_pb_row_5 {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- 4. The search field, when opened ----------------------------
 * The Divi search field spans the whole header. The global
 * focus-visible outline then drew a blue rule along the top, bottom
 * and both sides of that full-width field — the "highlight bars all
 * the way up and down". A search field does not need that outline to
 * be obviously focused; give it a soft inner ring instead.
 *
 * What the search does: it is a Google search limited to this site
 * (action = google.com/search, scoped to the domain), since a static
 * site has no search backend of its own.
 * ------------------------------------------------------------------ */
.et_search_form_container input.et-search-field:focus-visible,
.et-search-form input:focus-visible,
#et_top_search input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 -2px 0 rgba(47, 127, 184, 0.7) !important;
}

.et_search_form_container input.et-search-field,
.et-search-form input {
  color: var(--hbm-ink);
}

/* ================================================================== *
 * Responsive audit follow-ups — 2026-08-14
 * ================================================================== */

/* ---- The closing note was crushed to a 128px column on mobile -----
 * "Our goal is to exalt… Yours for souls, Bob Taylor" sits in a Divi
 * specialty column that stayed narrow at phone width, so every line
 * broke after two or three words against the blue diagonal. Give its
 * column and text module the full width, centred.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* The row itself was pinned to ~168px; widen it, then let everything
     inside fill it. */
  body.home .et_pb_row_5 {
    width: min(560px, 92%) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .et_pb_row_5 .et_pb_column,
  body.home .et_pb_row_5 .et_pb_column_inner,
  body.home .et_pb_text_8,
  body.home .et_pb_text_8 .et_pb_text_inner {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
  }
}

/* ---- The Hudson Taylor quote collided with the decorative chevron -
 * The blue angled shape behind the quote band reaches into the right
 * of the text at narrow widths, so the last words of each line sat on
 * top of it. Hold the quote to a comfortable measure, centred, so it
 * clears the shape.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* The decorative blue chevron reaches into the quote at narrow widths, so
     rather than fight its position, the quote sits on its own soft panel and
     stays legible wherever the chevron falls behind it. */
  body.home .et_pb_row_1 .et_pb_text_inner {
    position: relative;
    z-index: 2;
    max-width: 28ch;
    margin: 0 auto !important;
    padding: 18px 20px !important;
    background: rgba(255, 255, 255, 0.86);
    border-radius: var(--hbm-r-lg);
    backdrop-filter: blur(2px);
  }
}

/* ---- The three homepage feature buttons were uneven ---------------
 * "Learn More" on the three cards came out three different widths and
 * sat at staggered heights. Pin each to the foot of its card and give
 * them one width, so the row reads as a set.
 * ------------------------------------------------------------------ */
@media (min-width: 981px) {
  body.home .et_pb_column_2 .et_pb_button_module_wrapper,
  body.home .et_pb_column_3 .et_pb_button_module_wrapper,
  body.home .et_pb_column_4 .et_pb_button_module_wrapper {
    margin-top: auto !important;
    text-align: center;
  }

  body.home .et_pb_column_2 .et_pb_button,
  body.home .et_pb_column_3 .et_pb_button,
  body.home .et_pb_column_4 .et_pb_button {
    display: inline-block !important;
    width: auto !important;
    min-width: 160px;
    text-align: center;
  }
}

/* ---- Mark Schuler's three empty bullets --------------------------
 * His staff entry carries three <li> items with no text — placeholders
 * that render as bare red markers. Hide any empty list item on the
 * staff page rather than leave stray dots.
 * ------------------------------------------------------------------ */
body.page-id-4420 #main-content li:empty,
body.page-id-4420 #main-content li:has(> span:only-child:empty) {
  display: none;
}

/* ---- Grey corners at the top of the missionary page --------------
 * The "HBM Missionaries" heading section carried max-width:90% with
 * auto side margins, so its navy band stopped ~86px short of each edge
 * while the card-grid section below it ran full width. That left two
 * grey wedges of page background in the top corners. The heading band
 * spans the full width now, matching the grid; its heading text still
 * sits in the centred row inside.
 * ------------------------------------------------------------------ */
body.page-id-4074 #main-content .et_pb_section,
body.page-id-4420 #main-content .et_pb_section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------------------
 * Mrs. Taylor, 2026-08-17 — the missionary roster and the schools page.
 * ------------------------------------------------------------------ */

/* -------------------------------------------------- missionary roster */

/* A title that reads as one: centred, heavy, and given a rule beneath it
   the way the schools hero has, rather than a small line of text sitting
   in the top corner. */
body.page-id-4074 .hbm-roster__title {
  margin: 6px 0 0;
  padding-bottom: 0;
  color: #fff;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  letter-spacing: -0.01em;
}

/* Mrs. Taylor, 2026-08-17: the gold dash under the title runs the width of
   the page now rather than sitting as a short mark, with more air beneath it
   before the first row of missionaries. */
body.page-id-4074 .hbm-roster__title::after {
  content: "";
  display: block;
  width: min(1180px, calc(100vw - 40px));
  height: 3px;
  margin: 22px auto 0;
  background: #d8a33c;
  border-radius: 2px;
}

body.page-id-4074 .hbm-roster__title {
  margin-bottom: 46px;
}

/* Heads were being cut off. The photographs run from tall portraits to wide
   snapshots (0.64 to 1.41), and a 4:3 window cropped the top off everything
   narrower than it — which was most of them, the median being 1.14. A square
   window sits close to that median, so the crop is slight either way and
   faces stay whole. */
body.page-id-4074 .hbm-card__media {
  aspect-ratio: 1 / 1;
}

body.page-id-4074 .hbm-card__photo {
  object-position: 50% 30%;
}

/* The flags flew with a curved wave, which rounded off their corners. Square
   them: a flag's corners are points. The stepped fold shading stays, so they
   still read as cloth rather than as swatches. */
body.page-id-4074 .hbm-card__flag,
body.page-id-4074 .hbm-card__flagwrap::after {
  clip-path: none;
}

body.page-id-4074 .hbm-card__flagwrap {
  height: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------- schools */

/* The roll of schools sat on near-white, which left it looking like a
   different site from the pages either side of it. Same navy as the About
   pages; the cards keep their own white so the reading matter is unchanged.

   Both the cards and the buttons below them were 1180px-wide centred boxes,
   so colouring them left pale margins down each side and stranded the buttons
   on the old background. They run the full width now, with the padding doing
   the centring instead, which puts the navy edge to edge and the two blocks
   into one field. */
.ics-page .ics-schools,
.ics-page .ics-actions {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #0f2c49;
  padding-left: max(20px, calc((100% - 1180px) / 2));
  padding-right: max(20px, calc((100% - 1180px) / 2));
}

.ics-page .ics-schools { padding-top: 48px; padding-bottom: 8px; }
.ics-page .ics-actions { padding-top: 30px; padding-bottom: 52px; }

/* Navy buttons on a navy field disappeared. */
.ics-page .ics-actions .ics-button--solid {
  color: #0f2c49;
  background: #fff;
  border-color: #fff;
}

.ics-page .ics-actions .ics-button--solid:hover,
.ics-page .ics-actions .ics-button--solid:focus-visible {
  color: #0f2c49;
  background: #cfe0ef;
  border-color: #cfe0ef;
}

/* Bolder, not bigger, as asked. The emblems are small artwork on white and
   were washing out, so they get their contrast lifted and a little weight
   under them to lift them off the card. */
.ics-page .ics-card__logo {
  filter: saturate(1.25) contrast(1.12) drop-shadow(0 2px 3px rgba(15, 44, 73, 0.32));
}

/* ---------------------------------------------------------------------
 * Missionary pages: what comes in on the praises-and-prayer-requests form.
 * Mrs. Taylor forwards these as they arrive, so the two blocks below are
 * built to be filled in repeatedly rather than styled once for one person.
 * ------------------------------------------------------------------ */

/* Dated, because a prayer request without a date goes stale silently and
   nobody can tell how old it is. */
.hbm-mp__asof {
  margin: -6px 0 16px !important;
  color: var(--hbm-muted, #6b7a89);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hbm-mp__pp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 34px;
}

.hbm-mp__pp h3 {
  margin: 0 0 10px;
  padding-bottom: 0;
  color: var(--hbm-navy);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hbm-mp__pplist {
  margin: 0;
  padding-left: 20px;
  list-style: disc outside;
}

.hbm-mp__pplist li {
  margin-bottom: 8px;
  color: var(--hbm-ink, #1f2a36);
  line-height: 1.6;
}

/* Ministry photographs. They arrive at every shape and size, so each sits in
   a frame of its own rather than the row being held to one aspect. */
.hbm-mp__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.hbm-mp__shots figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hbm-r-md, 10px);
  background: #eef2f6;
}

.hbm-mp__shots img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ---------------------------------------------------------------------
 * Per-card framing. Mrs. Taylor, 2026-08-17.
 *
 * A square window and one object-position cannot serve every photograph:
 * a 4:3 group shot loses the sides, a tall portrait loses heads, and a
 * close crop that was already tight ends tighter still. These two
 * modifiers let a card be framed on its own terms.
 * ------------------------------------------------------------------ */

body.page-id-4074 .hbm-card__photo {
  --zoom: 1;
  transform: scale(var(--zoom));
}

body.page-id-4074 .hbm-card:hover .hbm-card__photo {
  transform: scale(calc(var(--zoom) * 1.04));
}

/* Whole photograph, nothing cropped away. The frame behind is the card's
   own navy, so what fills the margin reads as a mount rather than a gap. */
body.page-id-4074 .hbm-card__photo--whole {
  object-fit: contain;
  background: #16375c;
}

body.page-id-4074 .hbm-card__photo--closer { --zoom: 1.34; }


/* The roster carried a leftover Divi divider whose ::before drew a 1px white
   rule the full width of the column, 5px under the title's gold dash — the
   only .et_pb_divider anywhere on the site. */
body.page-id-4074 .et_pb_divider,
body.page-id-4074 .et_pb_divider_0 {
  display: none !important;
}

/* QA, 2026-08-17 — missionary detail pages. */

/* "All our missionaries" at the top and "Back to all missionaries" at the
   foot are the same link doing the same job, and were two different blues,
   the lighter one at 3.6:1 on the page field. Both take the darker. */
.hbm-mp__eyebrow a { color: #1d5a92; }



/* The footer stood 93px on missionary detail pages against 67px everywhere
   else. Those pages carry no page-id class to hook on, and the height is not
   the footer's own — it is .container inheriting a 58px top padding from the
   article the footer is nested inside. */
body:has(.hbm-mp) #main-footer #footer-bottom .container {
  padding-top: 0 !important;
}