/* =============================================================
   NGBM Foundation — audit fixes, September 2026
   Loaded by mu-plugins/ngbm-fixes.php. Delete both to revert.
   Ordered by the finding number in the audit report.
   ============================================================= */

:root{
  /* The brand orange #FFA026 measures 2.04:1 on white and fails WCAG AA
     for body text (4.5:1) and even for large text (3:1). These two are the
     same hue, darkened only as far as needed to pass. Finding 9. */
  --ngbm-orange:        #FFA026;  /* large fills, icons, shapes only */
  --ngbm-orange-text:   #B85C00;  /* 4.60:1 on white — safe for text  */
  --ngbm-orange-btn:    #A85400;  /* white on this = 5.34:1           */
  --ngbm-orange-deep:   #8A4400;
  --ngbm-ink:           #23262B;
  --ngbm-ink-soft:      #464C54;  /* 8.1:1 on white                   */
  --ngbm-rule:          #E1E3E8;
  --ngbm-surface:       #F7F5F2;
}

/* -------------------------------------------------------------
   FINDING 9 — colour contrast
   ------------------------------------------------------------- */

/* Orange text on light grounds. Elementor writes colours inline, so these
   need !important to win; each selector is scoped to a text role. */
.elementor-widget-heading .elementor-heading-title[style*="FFA026"],
.elementor-widget-heading .elementor-heading-title[style*="ffa026"],
.elementor-widget-heading .elementor-heading-title[style*="FF8F00"],
.elementor-widget-heading .elementor-heading-title[style*="ff8f00"]{
  color: var(--ngbm-orange-text) !important;
}

/* Navigation, footer links and any orange body text */
.hfe-nav-menu a,
.elementor-nav-menu a,
.menu-item a,
.elementor-widget-text-editor a,
.elementor-icon-list-text a{
  color: var(--ngbm-ink-soft);
}
.hfe-nav-menu a:hover,
.elementor-nav-menu a:hover,
.menu-item a:hover,
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a{
  color: var(--ngbm-orange-text);
}

/* Primary buttons: white on orange was 2.04:1 */
.elementor-button,
.elementor-button-link,
input[type="submit"],
button[type="submit"],
.frm_submit button{
  background-color: var(--ngbm-orange-btn) !important;
  color: #fff !important;
}
.elementor-button:hover,
.elementor-button-link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.frm_submit button:hover{
  background-color: var(--ngbm-orange-deep) !important;
  color: #fff !important;
}

/* Footer body text was #979FA2 (2.69:1) and #7A7A7A (4.29:1) */
footer .elementor-icon-list-text,
footer .elementor-widget-text-editor,
footer p,
#colophon .elementor-icon-list-text,
#colophon p{
  color: var(--ngbm-ink-soft) !important;
}
#colophon a,
footer a{ color: var(--ngbm-ink-soft); }
#colophon a:hover,
footer a:hover{ color: var(--ngbm-orange-text); }

/* Visible keyboard focus — there was none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--ngbm-orange-btn);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------
   FINDING 13 — horizontal overflow on mobile
   The image carousel laid slides out at a fixed 435px inside a 390px
   viewport, so the homepage scrolled sideways.
   ------------------------------------------------------------- */
/* NOTE: an earlier version of this rule put `overflow-x: hidden` on
   .elementor-image-carousel — which is the swiper *track*, not the viewport.
   That turned the track into a scroll container and clipped every slide out
   of sight, emptying the gallery carousels. The mobile overflow is handled by
   `overflow-x: clip` on the body instead (see ngbm-design.css §13). Only the
   outer wrapper is constrained here, and it already clips natively. */
.elementor-image-carousel-wrapper{
  max-width: 100%;
}
.swiper-slide-image,
.elementor-image-carousel img{
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------
   FINDING 14 — tap targets and minimum text size
   ------------------------------------------------------------- */
@media (max-width: 1024px){
  #colophon a,
  footer a,
  .elementor-icon-list-item > a{
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
  }
  .swiper-pagination-bullet,
  .elementor-swiper .swiper-pagination-bullet{
    width: 12px; height: 12px; margin: 0 6px !important;
  }
  body, p, li, .elementor-widget-text-editor{ font-size: max(1em, 14px); }
  #colophon *{ font-size: max(1em, 13px); }
}

/* -------------------------------------------------------------
   FINDING 25 — justified text opened rivers of whitespace
   ------------------------------------------------------------- */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p,
.entry-content p,
.elementor-image-box-description,
.elementor-icon-box-description{
  text-align: left !important;
  hyphens: none;
}

/* -------------------------------------------------------------
   FINDING 4 — social icons with no destination are hidden by the
   PHP filter, which tags them .ngbm-social-unset
   ------------------------------------------------------------- */
a.ngbm-social-unset{ display: none !important; }
.elementor-grid-item:has(> a.ngbm-social-unset){ display: none !important; }

/* -------------------------------------------------------------
   FINDING 27 — footer: hit counter and star dividers
   ------------------------------------------------------------- */
/* The WPS Visitor Counter widget: a broken icon and a public hit count. */
.wps-visitor-counter,
#wps_visitor_counter,
[class*="wpsvc"],
.elementor-widget-wp-widget-wps_visitor_counter{
  display: none !important;
}

/* Oversized teal stars used as section dividers */
#colophon .elementor-widget-divider .elementor-divider__element,
footer .elementor-widget-divider .elementor-divider__element{
  display: none;
}
#colophon .elementor-widget-divider .elementor-divider-separator,
footer .elementor-widget-divider .elementor-divider-separator{
  border-top: 2px solid var(--ngbm-orange) !important;
  width: 56px;
  margin-inline: auto;
}

/* -------------------------------------------------------------
   FINDING 22 — the section cards used five unrelated gradients
   ------------------------------------------------------------- */
.ngbm-section-cards .elementor-widget-wrap,
.elementor-widget-icon-box.ngbm-flat .elementor-widget-container{
  background-image: none !important;
}

/* -------------------------------------------------------------
   Donation page  (finding 1)
   ------------------------------------------------------------- */

.ngbm-page-banner{
  position: relative;
  padding: 78px 24px 82px;
  text-align: center;
  background: #2C2A28 url("/wp-content/uploads/2021/04/bosa-charity-img10.jpg") center/cover no-repeat;
  color: #fff;
  margin-bottom: 0;
}
.ngbm-page-banner::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(24,22,20,.66);
}
.ngbm-page-banner > *{ position: relative; }
.ngbm-page-banner h1{
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
.ngbm-page-banner__sub{
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.9);
}

.ngbm-donate{
  max-width: 1060px;
  margin: 0 auto;
  padding: 52px 24px 72px;
  color: var(--ngbm-ink);
}
.ngbm-donate__intro{
  max-width: 62ch;
  margin: 0 auto 40px;
  text-align: center;
}
.ngbm-donate__intro p{
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ngbm-ink-soft);
}

.ngbm-donate__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}
@media (min-width: 880px){
  .ngbm-donate__grid{ grid-template-columns: 1.05fr 1fr; }
}

.ngbm-card{
  background: #fff;
  border: 1px solid var(--ngbm-rule);
  border-radius: 6px;
  padding: 30px 28px 32px;
}
.ngbm-card--qr{
  background: var(--ngbm-surface);
  border-color: #E6E0D8;
  text-align: center;
}
.ngbm-card h2{
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ngbm-ink);
}
.ngbm-card__lead{
  margin: 0 0 22px;
  color: var(--ngbm-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.ngbm-card--qr .ngbm-card__lead{ max-width: 34ch; margin-inline: auto; }

.ngbm-qr{
  margin: 0 auto 22px;
  width: min(260px, 72vw);
  background: #fff;
  padding: 14px;
  border: 1px solid var(--ngbm-rule);
  border-radius: 6px;
}
.ngbm-qr img{ display: block; width: 100%; height: auto; }

.ngbm-btn{
  display: inline-block;
  background: var(--ngbm-orange-btn);
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  min-height: 44px;
}
.ngbm-btn:hover{ background: var(--ngbm-orange-deep); color: #fff !important; }
.ngbm-btn--ghost{
  background: transparent;
  color: var(--ngbm-orange-text) !important;
  border: 1.5px solid var(--ngbm-orange-btn);
}
.ngbm-btn--ghost:hover{ background: var(--ngbm-orange-btn); color: #fff !important; }
.ngbm-hint{
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--ngbm-ink-soft);
}

.ngbm-field{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ngbm-rule);
}
.ngbm-field__label{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ngbm-ink-soft);
  margin-bottom: 9px;
}
.ngbm-field__row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}
code.ngbm-upi-id{
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--ngbm-rule);
  border-radius: 4px;
  padding: 11px 12px;
  overflow-wrap: anywhere;
  text-align: left;
  color: var(--ngbm-ink);
}
.ngbm-copy{
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ngbm-orange-btn);
  background: #fff;
  color: var(--ngbm-orange-text);
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.ngbm-copy:hover{ background: var(--ngbm-orange-btn); color: #fff; }
.ngbm-copy.is-done{ background: #1F6350; border-color: #1F6350; color: #fff; }

.ngbm-dl{ margin: 0 0 22px; }
.ngbm-dl > div{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ngbm-rule);
}
.ngbm-dl > div:last-child{ border-bottom: 0; }
.ngbm-dl dt{
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ngbm-ink-soft);
}
.ngbm-dl dd{ margin: 0; font-size: 15.5px; color: var(--ngbm-ink); }
.ngbm-dl dd code{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  background: var(--ngbm-surface);
  padding: 2px 6px;
  border-radius: 3px;
}
@media (max-width: 480px){
  .ngbm-dl > div{ grid-template-columns: 1fr; }
}

.ngbm-aside{
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--ngbm-surface);
  border-left: 3px solid var(--ngbm-orange);
  border-radius: 0 4px 4px 0;
}
.ngbm-aside h3{
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ngbm-ink);
}
.ngbm-aside p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ngbm-ink-soft);
}
.ngbm-aside a{ color: var(--ngbm-orange-text); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   Corrections after the first verification pass
   ============================================================= */

/* FINDING 13 — the carousel widget itself is laid out wider than the
   viewport, so clipping the inner slides was not enough. `overflow-x: clip`
   on the body stops the sideways scroll without creating a scroll
   container, so the sticky header keeps working. */
@media (max-width: 1024px){
  html, body{ overflow-x: clip; }
  .elementor-widget-image-carousel .elementor-widget-container,
  .elementor-image-carousel-wrapper{
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* FINDING 27 — WPS Visitor Counter. Real selectors, taken from the page. */
/* Split deliberately: a selector list containing :has() is dropped whole by
   browsers that do not support it, which would make the counter reappear. */
#mvcwid,
#wpsvctable,
#wpsvcviews,
.wps_visitor_title{
  display: none !important;
}
.elementor-element:has(> .elementor-widget-container > #mvcwid){
  display: none !important;
}

/* FINDING 27 — divider: replace the diamond pattern with a plain rule */
#colophon .elementor-widget-divider,
footer .elementor-widget-divider{
  --divider-pattern-url: none !important;
}
#colophon .elementor-divider-separator,
footer .elementor-divider-separator{
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-top: 2px solid var(--ngbm-orange) !important;
  height: 0 !important;
  width: 56px !important;
  margin-inline: auto !important;
}

/* The theme capitalises every heading. Our own components opt out so the
   copy reads as written (finding 25). */
.ngbm-donate h2,
.ngbm-donate h3,
.ngbm-card h2,
.ngbm-aside h3,
.ngbm-btn,
.ngbm-page-banner h1,
.ngbm-page-banner__sub{
  text-transform: none !important;
  letter-spacing: normal;
}

/* Theme styles <code> pink; keep it neutral inside our blocks. */
.ngbm-donate code,
.ngbm-dl dd code,
code.ngbm-upi-id{
  color: var(--ngbm-ink) !important;
  background: var(--ngbm-surface) !important;
}

/* Let the banner subtitle use the full measure before wrapping. */
.ngbm-page-banner__sub{ max-width: 62ch; }

/* Footer body copy was justified (finding 25). */
#colophon p,
#colophon .elementor-widget-text-editor,
footer p,
footer .elementor-widget-text-editor{
  text-align: left !important;
}