/**
 * Faithful Development polish layer.
 *
 * Fixes legibility defects carried over from the WordPress site. Every rule
 * here corrects a measured WCAG contrast failure or a real overflow — see
 * screenshots/VISUAL-AUDIT.md for the before/after counts.
 *
 * Loaded last, so it wins without needing !important except where Divi sets
 * colours inline.
 */

/* ------------------------------------------------------------------ *
 * Homepage feature cards
 * The three cards sit on near-black panels (rgb 11–14) but Divi left the
 * body copy and buttons pure black — contrast ratio 1.07, invisible.
 * ------------------------------------------------------------------ */
body.home .et_pb_column_2,
body.home .et_pb_column_3,
body.home .et_pb_column_4 {
  color: #e8e8e8;
}

body.home .et_pb_column_2 p,
body.home .et_pb_column_2 li,
body.home .et_pb_column_2 em,
body.home .et_pb_column_2 span,
body.home .et_pb_column_3 p,
body.home .et_pb_column_3 li,
body.home .et_pb_column_3 em,
body.home .et_pb_column_3 span,
body.home .et_pb_column_4 p,
body.home .et_pb_column_4 li,
body.home .et_pb_column_4 em,
body.home .et_pb_column_4 span {
  color: #e8e8e8 !important;
}

/* "Learn More" buttons were black-on-black with a black border. */
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 {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body.home .et_pb_column_2 .et_pb_button:hover,
body.home .et_pb_column_3 .et_pb_button:hover,
body.home .et_pb_column_4 .et_pb_button:hover {
  color: #0d0d0d !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

/* The third card's button overflowed the panel because the columns were not
   equal height. Let the row stretch and pin the buttons to the bottom. */
@media (min-width: 981px) {
  body.home .et_pb_row .et_pb_column_2,
  body.home .et_pb_row .et_pb_column_3,
  body.home .et_pb_row .et_pb_column_4 {
    display: flex;
    flex-direction: column;
  }
  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;
    padding-bottom: 8px;
  }
}

/* ------------------------------------------------------------------ *
 * Abandoned empty Divi Code module
 * Renders as a solid blue rectangle beside GIVE and GO. Verified empty on
 * the live site too, so this is a pre-existing defect, not capture loss.
 * Hide it and let the two real panels centre.
 * ------------------------------------------------------------------ */
body.home .et_pb_code:empty { display: none; }

body.home .et_pb_column:has(> .et_pb_code:empty) { display: none; }

@media (min-width: 981px) {
  body.home .et_pb_row:has(> .et_pb_column > .et_pb_code:empty) {
    display: flex;
    justify-content: center;
    gap: 5.5%;
  }
  body.home .et_pb_row:has(> .et_pb_column > .et_pb_code:empty) > .et_pb_column {
    float: none;
    margin-right: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Blog, archive and single-post pages
 * Post titles, meta and sidebar widgets render white on the light grey
 * page background (ratio 1.2) — effectively unreadable.
 * ------------------------------------------------------------------ */
.archive #main-content .entry-title,
.archive #main-content .entry-title a,
.blog #main-content .entry-title,
.blog #main-content .entry-title a,
.single #main-content .entry-title,
.single #main-content .entry-title a,
#main-content .et_pb_post .entry-title,
#main-content .et_pb_post .entry-title a {
  color: #14385c !important;
}

#main-content .et_pb_post .entry-title a:hover {
  color: #2f6ea8 !important;
}

#main-content .post-meta,
#main-content .post-meta a,
#main-content .post-meta span,
#main-content .published,
#main-content .updated {
  color: #4a5a68 !important;
}

#main-content .post-meta a:hover {
  color: #14385c !important;
}

/* Sidebar widgets: titles, links and the calendar were all near-white. */
#sidebar .widgettitle,
#sidebar h4.widgettitle,
#main-content .widget h4.widgettitle {
  color: #14385c !important;
}

#sidebar a,
#sidebar li a,
#main-content .widget a {
  color: #1d5a92 !important;
}

#sidebar a:hover,
#main-content .widget a:hover {
  color: #14385c !important;
}

#wp-calendar,
#wp-calendar caption,
#wp-calendar th,
#wp-calendar td,
#wp-calendar tbody td a {
  color: #3a4a58 !important;
}

#wp-calendar caption,
#wp-calendar th {
  color: #14385c !important;
  font-weight: 600;
}

#wp-calendar #today {
  color: #14385c !important;
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Body copy that inherited white on light backgrounds
 *
 * Whole page bodies (/about/, /contact/thank-you/) and form intro copy
 * rendered white on the light page background — invisible. Divi marks each
 * module with its own background polarity, so use that convention rather
 * than guessing per page.
 * ------------------------------------------------------------------ */

/* Conversely, modules Divi marks as sitting on a dark background must not
   inherit black text (e.g. the church-planter page header). */

/* Page titles rendered white on the light grey page background. */
#main-content .entry-title.main_title,
#main-content h1.entry-title {
  color: #14385c !important;
}

/* ------------------------------------------------------------------ *
 * Gravity Forms labels
 * Sub-labels ("First", "Last", "Street Address") and inline choice labels
 * ("Male", "No") were white on white across every form page.
 * ------------------------------------------------------------------ */
#main-content .gform_wrapper .gform-field-label,
#main-content .gform_wrapper .gform-field-label--type-sub,
#main-content .gform_wrapper .gform-field-label--type-inline,
#main-content .gform_wrapper .gfield_label,
#main-content .gform_wrapper legend,
#main-content .gform_wrapper label,
#main-content .gform_wrapper .ginput_complex label,
#main-content .gform_wrapper p,
#main-content .gform_wrapper li,
#main-content .gform_wrapper em,
#main-content .gform_wrapper strong,
#main-content .gform_wrapper h2,
#main-content .gform_wrapper h3 {
  color: var(--hbm-ink, #1f2a36) !important;
}

#main-content .gform_wrapper .gform-field-label--type-sub,
#main-content .gform_wrapper .gfield_description {
  color: #5a6b7a !important;
  font-weight: 500;
}


/* Text modules on interior pages inherited white on the light page
   background. Scoped off body.home so the dark homepage cards keep their
   light text — an unscoped #main-content rule would out-specify them. */

/* Classic WordPress content (not a Divi module) on /about/, /contact/thank-you/
   and similar pages inherited white text on the light page background. */

/* The church-planter hero heading is black on a dark section. */
body.page-id-6086 #main-content .et_pb_heading .et_pb_module_header,
body.page-id-6086 #main-content .et_pb_section_0 p {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Full-width header modules sit on photographic backgrounds; black text
   disappeared against them. White plus a soft shadow reads on any image. */
#main-content .et_pb_fullwidth_header .et_pb_module_header,
#main-content .et_pb_fullwidth_header .et_pb_header_content,
#main-content .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ *
 * Footer
 * The Faithful Development credit and footer links sat at ratio 3.12
 * against the dark footer — legible but below the 4.5 threshold.
 * ------------------------------------------------------------------ */
#main-footer #footer-info,
#main-footer #footer-info a,
#footer-bottom #footer-info,
#footer-bottom #footer-info a {
  color: #b8c2cc !important;
}

#main-footer #footer-info a:hover,
#footer-bottom #footer-info a:hover {
  color: #ffffff !important;
}

/* ------------------------------------------------------------------ *
 * Desktop navigation fit
 * Six top-level items plus the search icon need 781px but Divi allots 623px
 * beside the logo, so the header overflowed by 86px on 48 pages and pushed
 * the whole document into horizontal scroll. Tighten spacing rather than
 * dropping an item.
 * ------------------------------------------------------------------ */
@media (min-width: 981px) {
  #top-menu li {
    padding-right: 13px;
  }
  #top-menu > li > a {
    font-size: 15px;
    letter-spacing: 0;
  }
  #et-top-navigation {
    padding-left: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1150px) {
  #top-menu li { padding-right: 9px; }
  #top-menu > li > a { font-size: 14px; }
}

/* ------------------------------------------------------------------ *
 * Horizontal scroll containment
 *
 * Divi's .logo_container is absolutely positioned at width:100% inside a
 * container that carries 30px of horizontal padding, so its right edge lands
 * past the viewport. This is Divi's own markup — the live WordPress site
 * scrolls sideways the same way. Rewriting that positioning risks moving the
 * logo, so contain it at the root instead.
 *
 * overflow-x: clip rather than hidden — hidden on html/body silently kills
 * position: sticky further down the tree.
 * ------------------------------------------------------------------ */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ------------------------------------------------------------------ *
 * Embedded frames
 * A reCAPTCHA/document iframe on the funds-request and return-of-donation
 * forms sat past the right edge on mobile.
 * ------------------------------------------------------------------ */
#main-content iframe,
.gform_wrapper iframe {
  max-width: 100%;
}

@media (max-width: 782px) {
  #main-content iframe,
  .gform_wrapper iframe,
  .gform_wrapper .ginput_recaptcha,
  .gform_wrapper .ginput_recaptcha > div {
    max-width: 100% !important;
    transform-origin: 0 0;
  }
  /* reCAPTCHA renders at a fixed 304px; scale it to fit narrow screens. */
  .gform_wrapper .ginput_recaptcha > div {
    transform: scale(0.86);
  }
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ *
 * Overflow guards
 * Long unbroken strings (URLs, email addresses) in narrow columns and
 * form labels were pushing past their containers on mobile.
 * ------------------------------------------------------------------ */
#main-content .et_pb_text_inner,
#main-content .entry-content,
#sidebar .widget {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#main-content table {
  max-width: 100%;
}

/* Wide tables scroll inside their own box instead of stretching the page. */
#main-content .entry-content > table,
#main-content .et_pb_text_inner > table {
  display: block;
  overflow-x: auto;
}

/* =====================================================================
 * Home page, 2026-08-17.
 *
 * The home page was the one page the restyle never reached, and it is the
 * page every visitor sees first. Four things, all leftover Divi.
 * ================================================================== */

/* ---- 1. the black band ----
   .et_pb_section_3 took #000000 from Divi's preset, and its three columns
   were #0b0b0b / #0d0d0d / #0e0e0e — eleven to fourteen levels above the
   field, so the card edges were invisible and the band read as one void with
   photographs floating in it. Black is in no token and on no other page. */
body.home .et_builder_inner_content .et_pb_section.et_pb_section_3 {
  background-color: #0f2c49 !important;
}

body.home .et_pb_section_3 .et_pb_column {
  background-color: #fff;
  border: 1px solid #dde3e9;
  border-radius: 14px;
  overflow: hidden;
}

body.home .et_pb_section_3 .et_pb_column h1,
body.home .et_pb_section_3 .et_pb_column h2,
body.home .et_pb_section_3 .et_pb_column h3,
body.home .et_pb_section_3 .et_pb_column h4 {
  color: #14385c !important;
}

body.home .et_pb_section_3 .et_pb_column p,
body.home .et_pb_section_3 .et_pb_column li,
body.home .et_pb_section_3 .et_pb_column span,
body.home .et_pb_section_3 .et_pb_column em {
  color: #1f2a36 !important;
}

/* ---- 2. the sheared wedge ----
   .et_pb_section_2 is #70a4bb — a colour in no token — under a white SVG mask
   set to preserveAspectRatio:none, so the diagonal shears at every width that
   is not 4:3. At 1440 its edge crossed the first line of the quote and cut the
   word "considered;" in half, "con" on white and "sidered;" on blue. It cannot
   be tuned clear of the text, so the mask goes and the band takes the navy. */
body.home .et_pb_section_2 > .et_pb_background_mask {
  display: none !important;
}

body.home .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-color: #0f2c49 !important;
}

body.home .et_pb_section_2 .et_pb_text_inner p,
body.home .et_pb_section_2 .et_pb_text_inner span,
body.home .et_pb_section_2 .et_pb_text_inner strong,
body.home .et_pb_section_2 .et_pb_text_inner em {
  color: #fff !important;
}

/* ---- 3. the president's closing letter ----
   It sat at x=20 with a width of 619 while the content column runs x=180 to
   1260, leaving 821px of empty gradient beside it and its left edge outside
   the column entirely. Body copy was 14px pure black — never restyled. */
body.home .et_pb_row_5.et_pb_row {
  width: 100% !important;
  max-width: 1080px !important;
  margin: 36px auto 0 !important;
  padding: 28px 32px !important;
  background: #fff;
  border: 1px solid #dde3e9;
  border-radius: 12px;
}

body.home .et_pb_row_5 .et_pb_text_inner,
body.home .et_pb_row_5 p,
body.home .et_pb_row_5 span {
  color: #1f2a36 !important;
  font-size: 16px;
  line-height: 1.7;
}

/* ---- 4. the three feature cards ----
   Card three carried padding-left:92px against the other two at 34px, so its
   heading, bullets and button sat 36px right of the card's own centre — plain
   at 390 and 768 where the cards stack and the buttons should line up. The
   buttons also floated at three different heights because the middle card's
   video reflows; pushing them to the foot of a flex column levels them. */
body.home .et_pb_text_4 {
  padding-left: 34px !important;
}

body.home .et_pb_section_3 .et_pb_column {
  display: flex;
  flex-direction: column;
}

body.home .et_pb_section_3 .et_pb_button_module_wrapper {
  margin-top: auto;
  padding-top: 14px;
}

@media (max-width: 767px) {
  body.home .et_pb_row_5.et_pb_row {
    margin: 28px 20px 0 !important;
    padding: 20px !important;
  }
}

/* The Learn More buttons were white type on a transparent ground with a white
   border — correct against the black band, invisible on a white card. Navy
   outline, and pinned to the foot of each column so the three line up whatever
   the middle card's video does when it reflows. */
body.home .et_pb_section_3 a.et_pb_button {
  color: #14385c !important;
  border-color: #14385c !important;
  background-color: transparent !important;
}

body.home .et_pb_section_3 a.et_pb_button:hover,
body.home .et_pb_section_3 a.et_pb_button:focus-visible {
  color: #fff !important;
  background-color: #14385c !important;
  border-color: #14385c !important;
}

body.home .et_pb_section_3 .et_pb_column > *:last-child {
  margin-top: auto;
}

body.home .et_pb_section_3 .et_pb_column {
  padding-bottom: 22px;
}

/* =====================================================================
 * The wheat, moving a little. Mrs. Taylor, 2026-08-17.
 *
 * The banner is one flat PNG with the field, the people and the lettering
 * all baked into it, so the whole image cannot be swayed — the faces and
 * the type would wobble with it.
 *
 * Instead a second copy of the same picture is laid exactly over the first
 * and masked to the foreground wheat only, below where anyone is standing.
 * At rest it sits pixel-for-pixel on top of what is already there, so it is
 * invisible; when it leans, only the wheat leans. The origin is the bottom
 * edge, so the stalks are anchored at the ground and the heads travel
 * furthest, which is how wheat actually moves.
 * ================================================================== */

body.home .et_pb_image_0 .et_pb_image_wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

body.home .et_pb_image_0 .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/uploads/2026/07/HomePageWheat-e1785530977809.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* Only the foreground wheat: everything above 70% is left to the static
     image underneath, which is where the people and the lettering are. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 68%, #000 84%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 68%, #000 84%, #000 100%);
  transform-origin: 50% 100%;
  will-change: transform;
  animation: hbm-wheat-sway 7.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hbm-wheat-sway {
  from { transform: skewX(-0.5deg) translateX(2px); }
  to   { transform: skewX(0.9deg) translateX(-3px); }
}

/* Anyone who has asked their machine for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
  body.home .et_pb_image_0 .et_pb_image_wrap::after {
    animation: none;
    transform: none;
  }
}