/* =========================================================================
   DIVI OVERRIDES
   The translation layer: everything here exists because Divi's own defaults
   would otherwise fight the system. Nothing here is new design.

   Two facts about Divi shape this file:
     1. Divi ships a lot of !important, especially on buttons. Matching it is
        not sloppiness, it is the only way through. Where a plain override
        works, no !important is used.
     2. Divi's selectors are versioned. If a rule here stops biting after a
        Divi update, inspect the element and fix the selector; do not pile a
        more specific rule on top of a dead one.

   Verify the Divi major version on the install before trusting the module
   selectors below. See CLAUDE.md, "Before you build".
   ========================================================================= */

/* ---- Ground --------------------------------------------------------------
   Divi paints the page container white. The system's ground is cream. */
#page-container,
#et-main-area,
.et_pb_section {
  background-color: var(--bg-page);
}

/* ---- Measure -------------------------------------------------------------
   Divi rows default to 80% / 1080px. The system's container is 1320px. */
.et_pb_row {
  width: 90%;
  max-width: var(--container);
}

.et_pb_row.cg-row-narrow { max-width: var(--container-narrow); }
.et_pb_row.cg-row-wide   { max-width: var(--container-wide); }

/* Section rhythm is defined in each native Divi section. */
/* Section padding is controlled in native Divi Spacing settings. */
.et_pb_section.cg-section-flush { padding-block: 0; }

/* ---- Type ----------------------------------------------------------------
   Divi applies one heading face globally from Theme Options. H6 is a UI
   heading in this system, not a display one, so it needs an explicit override
   here as well as in Theme Customizer. Both are required: the Customizer sets
   the picker, this holds the rendered output. */
#et-boc h6,
#page-container h6,
.et_pb_module h6 {
  font-family: var(--font-ui) !important;
  font-weight: var(--w-control);
  letter-spacing: 0;
}

/* Divi text modules set line-height on the module, not the paragraph. Hold
   the measure so body copy never runs the full 1320. Modules that should
   ignore it take .cg-measure-none. */
.et_pb_text:not(.cg-measure-none) p { max-width: var(--measure); }

/* ---- Buttons -------------------------------------------------------------
   Divi's button is a 3px-radius, 2px-bordered box with a sliding arrow glyph
   in ::after. All of it goes. The system's button is a pill with an optional
   leading glyph, and the arrow-on-hover is exactly the templated tell the
   design brief rules out. */
.et_pb_button,
.et_pb_button:hover {
  padding: var(--s-4) 28px !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: var(--w-control) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: capitalize;
  box-sizing: border-box;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transition:
    transform var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

/* Kill the sliding arrow. Divi reserves right padding for it on hover, which
   is what makes an un-neutralised Divi button shift sideways under the
   cursor. */
.et_pb_button::after,
.et_pb_button::before { display: none !important; }

.et_pb_button:hover {
  transform: translateY(-2px);
  box-shadow: none !important;
}

/* The variants reuse the component classes. In the builder, put cg-btn--primary
   (or --donate, --brand, --outline) in the button module's CSS Class field. */
.et_pb_button.cg-btn--primary { background: var(--cta-primary-bg) !important; color: var(--cta-primary-text) !important; }
.et_pb_button.cg-btn--primary:hover { background: var(--cta-primary-bg-hover) !important; }

.et_pb_button.cg-btn--donate { background: var(--cta-donate-bg) !important; color: var(--cta-donate-text) !important; }
.et_pb_button.cg-btn--donate:hover { background: var(--cta-donate-bg-hover) !important; }

.et_pb_button.cg-btn--brand { background: var(--green-600) !important; color: #FFFFFF !important; }
.et_pb_button.cg-btn--brand:hover { background: var(--green-700) !important; }

.et_pb_button.cg-btn--outline {
  background: transparent !important;
  color: var(--cta-secondary-text) !important;
  border: 1.5px solid var(--cta-secondary-border) !important;
}

.et_pb_button.cg-btn--outline:hover { background: var(--green-600) !important; color: #FFFFFF !important; }

.et_pb_button.cg-btn--outline-light {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, .5) !important;
}

.et_pb_button.cg-btn--outline-light:hover {
  background: rgba(255, 255, 255, .12) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}


/* Divi 5 keeps split-row columns in a horizontal flex track unless the row is
   explicitly collapsed. The home hero must place its orbit after the CTA on
   tablet and phone, never beside or beneath the copy as an overlapping layer. */
@media (max-width: 980px) {
  .cgmoh-home-hero__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cgmoh-home-hero__row > .et_pb_column {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .cgmoh-home-hero__row > .et_pb_column:first-child {
    margin-bottom: 44px !important;
  }
}

/* ---- Blurb (programme pillars) -------------------------------------------
   The Blurb's icon becomes a medallion. Note the standing rule: the four
   pillars must NOT ship as four identical blurbs in a row. Compose them
   asymmetrically. See CLAUDE.md. */
.et_pb_blurb.cg-pillar .et_pb_main_blurb_image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--green-100);
}

.et_pb_blurb.cg-pillar .et_pb_image_wrap { display: inline-flex; }
.et_pb_blurb.cg-pillar--shelter   .et_pb_main_blurb_image { background: var(--green-100); }
.et_pb_blurb.cg-pillar--orphanage .et_pb_main_blurb_image { background: var(--gold-100); }
.et_pb_blurb.cg-pillar--food      .et_pb_main_blurb_image { background: var(--orange-100); }
.et_pb_blurb.cg-pillar--education .et_pb_main_blurb_image { background: var(--coral-100); }

/* ---- Cards on Divi columns -----------------------------------------------
   Put cg-card on a Column or a Blurb and it becomes a system card. */
.et_pb_column.cg-card,
.et_pb_module.cg-card { padding: var(--s-6); }

/* ---- Accordion / Toggle --------------------------------------------------
   The native <details> accordion in 20-components.css is preferred. When
   Divi's own module is used instead, this brings it into the system. */
.et_pb_toggle {
  margin-bottom: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: #FFFFFF;
}

.et_pb_toggle_title { font-family: var(--font-display) !important; font-weight: var(--w-display) !important; }
.et_pb_toggle_open { background: var(--green-800); border-color: var(--green-800); }
.et_pb_toggle_open .et_pb_toggle_title,
.et_pb_toggle_open .et_pb_toggle_content { color: #FFFFFF !important; }

/* Divi draws its toggle glyph from its icon font in ::before. Recolour rather
   than replace: swapping the glyph means fighting the font. */
.et_pb_toggle_title::before { color: var(--coral-600); }
.et_pb_toggle_open .et_pb_toggle_title::before { color: var(--gold-300); }

/* ---- Contact form --------------------------------------------------------
   Filled cream fields at 12px, no border at rest. Divi's default is a grey
   box with a 3px radius. */
.et_pb_contact_form_container .et_pb_contact_field .input,
.et_pb_contact_form_container .et_pb_contact_field textarea,
.et_pb_contact_form_container .et_pb_contact_field select {
  padding: 15px 22px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  background-color: var(--sand-100) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.et_pb_contact_form_container .input::placeholder,
.et_pb_contact_form_container textarea::placeholder { color: var(--sand-600) !important; opacity: 1; }

.et_pb_contact_form_container .input:focus,
.et_pb_contact_form_container textarea:focus,
.et_pb_contact_form_container select:focus {
  outline: none;
  background-color: #FFFFFF !important;
  border-color: var(--green-600) !important;
  box-shadow: 0 0 0 3px var(--green-100);
}

.et_contact_error { border-color: var(--coral-400) !important; background-color: var(--coral-50) !important; }
.et-pb-contact-message p { color: var(--coral-700); font-weight: var(--w-label); }

/* ---- Number counter / Bar counter ---------------------------------------- */
.et_pb_number_counter .percent-value,
.et_pb_number_counter .percent p {
  font-family: var(--font-display) !important;
  font-weight: var(--w-display) !important;
  letter-spacing: -.02em;
}

.et_pb_counter_container { border-radius: var(--r-pill); background: var(--sand-200); overflow: visible; }
.et_pb_counter_amount { border-radius: var(--r-pill); background: var(--green-600); position: relative; }

/* The gold knob riding the fill edge. */
.cg-progress-knob .et_pb_counter_amount::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: var(--gold-400);
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);
}

/* ---- Header and nav ------------------------------------------------------
   The nav is a solid green pill at 12px overlapping the hero. Built in Theme
   Builder; this holds the pill shape, the hover colour and the one-line rule. */
.cg-nav-pill {
  border-radius: var(--r-sm);
  background: var(--green-700);
  box-shadow: var(--shadow-md);
}

.cg-nav-pill .et_pb_menu__menu > nav > ul > li > a {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 15px;
  color: rgba(255, 255, 255, .9);
  text-transform: capitalize;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.cg-nav-pill .et_pb_menu__menu > nav > ul > li > a:hover,
.cg-nav-pill .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: var(--gold-300);
  opacity: 1;
}

/* ---- Blog and gallery ----------------------------------------------------- */
.et_pb_blog_grid .et_pb_post {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: #FFFFFF;
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}

.et_pb_blog_grid .et_pb_post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.et_pb_gallery_item img,
.et_pb_image_wrap img.cg-rounded { border-radius: var(--r-sm); }

/* ---- Things Divi does that this site does not ----------------------------
   Divi's default animations are entrance animations. The brief rules them
   out: motion confirms an interaction the visitor started, and nothing else.
   This neutralises any that get switched on in the builder by habit. */
.et_pb_section .et-waypoint:not(.et_pb_counter_amount) {
  animation: none !important;
  opacity: 1 !important;
}

/* Responsive global header: two independent layouts. */
.cg-header-mobile { display: none !important; }
@media (min-width: 981px) { .cg-header-desktop { display: block !important; } }
@media (max-width: 980px) {
  .cg-header-desktop { display: none !important; }
  .cg-header-mobile { --cg-mobile-header-height: 140px; display: block !important; position: sticky !important; top: 0; z-index: 10001; overflow: visible !important; padding: 10px 0 12px !important; background: var(--green-700, #06331F) !important; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(3,29,18,.08); }
  .cg-header-mobile .cg-header-mobile__top { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 92% !important; max-width: none !important; margin: 0 auto !important; }
  .cg-header-mobile .cg-header-mobile__top > .et_pb_column { float: none !important; width: auto !important; margin: 0 !important; }
  .cg-header-mobile .cg-header-mobile__brand { flex: 1 1 auto !important; min-width: 0 !important; }
  .cg-header-mobile .cg-header-mobile__brand .et_pb_image, .cg-header-mobile .cg-header-mobile__brand .et_pb_image_wrap { display: block !important; }
  .cg-header-mobile .cg-header-mobile__menu { flex: 0 0 48px !important; width: 48px !important; overflow: visible !important; }
  .cg-header-mobile .et_pb_menu__menu { display: none !important; }
  .cg-header-mobile .et_mobile_nav_menu { display: block !important; }
  .cg-header-mobile .mobile_menu_bar { display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0 !important; background: transparent !important; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
  .cg-header-mobile .mobile_menu_bar:before { content: '' !important; display: block !important; width: 27px !important; height: 3px !important; background: #fff !important; border-radius: 3px !important; box-shadow: 0 -9px 0 #fff, 0 9px 0 #fff !important; }
  .cg-header-mobile .et_mobile_menu { position: fixed !important; top: var(--cg-mobile-header-height) !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: calc(100dvh - var(--cg-mobile-header-height)) !important; max-height: none !important; margin: 0 !important; padding: 8px 0 24px !important; overflow-y: auto !important; box-sizing: border-box !important; background: #06331F !important; border-top: 3px solid #F2B01E !important; border-radius: 0 !important; box-shadow: 0 18px 40px rgba(3,29,18,.28) !important; z-index: 10000 !important; }
  .cg-header-mobile .et_mobile_menu a { display: flex !important; align-items: center; min-height: 60px; padding: 12px 4vw !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; font-family: var(--font-ui, Mulish, sans-serif) !important; font-weight: 800 !important; white-space: nowrap !important; }
  @media (min-width: 783px) { body.admin-bar .cg-header-mobile .et_mobile_menu { top: calc(var(--cg-mobile-header-height) + 32px) !important; height: calc(100dvh - var(--cg-mobile-header-height) - 32px) !important; } }
  @media (max-width: 782px) { body.admin-bar .cg-header-mobile .et_mobile_menu { top: calc(var(--cg-mobile-header-height) + 46px) !important; height: calc(100dvh - var(--cg-mobile-header-height) - 46px) !important; } }
  .cg-header-mobile .cg-header-mobile__cta { width: 92% !important; max-width: none !important; margin: 10px auto 0 !important; }
  .cg-header-mobile .cg-header-mobile__cta > .et_pb_column { float: none !important; width: 100% !important; margin: 0 !important; }
  .cg-header-mobile .cg-header-mobile__cta .et_pb_button_module_wrapper { width: 100% !important; }
  .cg-header-mobile .cg-header-mobile__cta .et_pb_button { display: flex !important; width: 100% !important; min-height: 48px; align-items: center; justify-content: center; padding: 14px 20px !important; white-space: nowrap !important; }
}


/* ---- Global header host ---------------------------------------------------
   Wrapper for [cgmoh_global_header] placed in a Divi Theme Builder header
   layout. Strips Divi's section/row/column chrome so the component's own
   full-width sticky bar spans the viewport. Apply the CSS Class
   'cg-header-host' on the header section. */
.cg-header-host.et_pb_section { padding: 0 !important; }
.cg-header-host > .et_pb_row, .cg-header-host .et_pb_row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cg-header-host .et_pb_column { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.cg-header-host .et_pb_module { margin: 0 !important; }
.cg-header-host .et_pb_code_inner { margin: 0 !important; }


/* ---- Header menu inside a Divi Text module -------------------------------
   [cgmoh_global_header] outputs wp_nav_menu anchors without the .cg-nav__link
   / .cg-drawer__link classes the component styles, and Divi's Text-module
   content CSS adds list bullets and drops the link padding. Re-assert the
   component's menu styling, scoped to the header host. Deliberately does NOT
   touch .cg-nav__menu display so the base responsive hide/show still wins. */
.cg-header-host .cg-global-header ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cg-header-host .cg-global-header li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.cg-header-host .cg-global-header li::before { content: none !important; display: none !important; }

.cg-header-host .cg-nav__menu > li { display: inline-flex; }
.cg-header-host .cg-nav__menu > li > a {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-weight: var(--w-control);
  font-size: 15px; line-height: 1; color: var(--text-nav);
  text-decoration: none; white-space: nowrap;
  padding: 10px 13px; border-radius: 8px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cg-header-host .cg-nav__menu > li > a:hover { color: var(--green-700); }
.cg-header-host .cg-nav__menu > li.current-menu-item > a,
.cg-header-host .cg-nav__menu > li.current_page_item > a { color: var(--green-700); position: relative; }
.cg-header-host .cg-nav__menu > li.current-menu-item > a::after,
.cg-header-host .cg-nav__menu > li.current_page_item > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background: var(--gold-400);
}

.cg-header-host .cg-drawer__menu { display: block; }
.cg-header-host .cg-drawer__menu li { display: block; }
.cg-header-host .cg-drawer__menu > li > a {
  display: block; font-family: var(--font-ui); font-weight: var(--w-control);
  font-size: 18px; color: #FFFFFF; text-decoration: none;
  padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cg-header-host .cg-drawer__menu > li > a:hover { color: var(--gold-300); }


/* ---- Button labels inside dark bands --------------------------------------
   cg-band-dark recolors descendant links; buttons must keep their own label
   colour so gold fills stay ink (never light-gold on gold) and green fills
   stay white. */
.cg-band-dark a.cg-btn--donate { color: var(--cta-donate-text) !important; }
.cg-band-dark a.cg-btn--primary { color: var(--cta-primary-text) !important; }
.cg-band-dark a.cg-btn--brand { color: #FFFFFF !important; }


/* ---- Home elevate sections: responsive polish ----------------------------
   Stack the Where-we-work two-column row on tablet and phone, and stop the
   decorative hero orbit from nudging a few pixels of horizontal scroll on
   small screens. */
@media (max-width: 980px) {
  .cg-where-section .et_pb_row { flex-direction: column !important; }
  .cg-where-section .et_pb_row > .et_pb_column { width: 100% !important; }
  .cg-where-section .et_pb_row > .et_pb_column:first-child { margin-bottom: 28px; }
}
.et-l--body { overflow-x: clip; }


/* ---- Global header stacking + drawer -------------------------------------
   The Divi Theme Builder header column establishes a low z-index stacking
   context, which trapped the fixed mobile/tablet drawer beneath the page body
   (the drawer appeared to sink behind the hero). Lift the whole header layer
   above the body so the sticky bar and the drawer overlay content correctly. */
.et-l--header { position: relative; z-index: 9999; }
.cg-drawer { z-index: 10000; }

/* The drawer no longer repeats the brand lockup: the header already shows it,
   so the drawer head carries just the close control. */
.cg-drawer__brand { display: none; }
.cg-drawer__head { justify-content: flex-end; }

/* ---- Non-home interaction hardening --------------------------------------
   The homepage is an approved frozen surface. These size and scroll-lock
   corrections therefore apply only to the remaining routes. */
body:not(.home).cg-menu-open { overflow: hidden; }

body:not(.home) .et_pb_contact_form_container .et_pb_contact_field .input,
body:not(.home) .et_pb_contact_form_container .et_pb_contact_field textarea,
body:not(.home) .et_pb_contact_form_container .et_pb_contact_field select,
body:not(.home) .et_pb_contact_form_container .et_pb_contact_captcha {
  font-size: 16px !important;
}

@media (max-width: 1120px) {
  body:not(.home) .cg-nav__toggle,
  body:not(.home) .cg-drawer__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body:not(.home) .cg-nav-dock .cg-btn--donate { min-height: 44px; }

  body:not(.home) .cg-drawer__contact a,
  body:not(.home) .cg-footer__contact a,
  body:not(.home) .et-l--footer a[href^="tel:"],
  body:not(.home) .et-l--footer a[href^="mailto:"],
  body:not(.home) .et-l--footer .cg-legal__links a,
  body:not(.home) #terms-content a[href^="#"],
  body:not(.home) #privacy-policy-content a[href^="#"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ---- Photographic hero ---------------------------------------------------
   Documentary hero photo under a deep-green brand overlay so the headline and
   copy stay legible over it. Applied via the CSS Class 'cg-hero-photo' on the
   hero section. The overlay leans slightly stronger on the copy (left) side. */
.et-l--body .cg-hero-photo.et_pb_section {
  background-color: #06331F !important;
  background-image:
    linear-gradient(90deg, rgba(6, 51, 31, .90) 0%, rgba(6, 51, 31, .80) 50%, rgba(8, 74, 44, .70) 100%),
    url("https://caribbeangirlsmission.org/wp-content/uploads/2026/08/cgmoh-hero-section.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
}
@media (max-width: 980px) {
  .et-l--body .cg-hero-photo.et_pb_section {
    background-image:
      linear-gradient(180deg, rgba(6, 51, 31, .84) 0%, rgba(6, 51, 31, .90) 100%),
      url("https://caribbeangirlsmission.org/wp-content/uploads/2026/08/cgmoh-hero-section.jpg") !important;
  }
}


/* =========================================================================
   COMMUNITY BAND  ("Together, care travels further")
   Two Divi rows on the home page. Row 1 holds the panels: a green column and
   a gold column. Row 2 holds the wide photograph on its own, so it can span
   past both panels the way the reference composition does. Divi owns every
   editable thing: content, colours, fonts, padding, radii, the panel borders
   and the photograph's cream frame. Only the art direction Divi columns
   cannot express lives here - the gold panel's bite over the green, its
   chevron point, the decorative leaf and swirl, the photograph's pull-up
   over both panels, and the mobile collapse. Scoped under .cg-community.
     section  cg-community           row 1  cg-community__row
     col 1    cg-community__green    col 2  cg-community__gold
     row 2    cg-community__stage    col 3  cg-community__stage-col
     modules  cg-community__leaf / __ribbon / __photo / __cta / __statement
   ========================================================================= */

/* --- Row 1: the two panels ---------------------------------------------- */
.et-l--body .cg-community__row.et_pb_row {
  max-width: 1200px;
  position: relative;
  z-index: 1;
  align-items: flex-start;
  overflow: visible;
}

/* Green panel: the base of the composition. Its foot stays visible to the
   left of the photograph, which is why the photo is offset rather than
   centred. Clipped so the decorative art honours the 30px radius. */
.et-l--body .cg-community__green.et_pb_column {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* The headline's measure is set on the module in Divi, not here - a ch unit
   would resolve against the wrapper's inherited body size, not the display
   size, and crush the heading to a narrow column. */

/* Gold panel: pulled left so it bites over the green. The cream border set
   in Divi is what reads as the gap between the two panels. */
.et-l--body .cg-community__gold.et_pb_column {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-left: clamp(-150px, -11vw, -60px);
  margin-top: clamp(34px, 4vw, 70px);
  display: flex;
  align-items: center;
  background-clip: padding-box;
}

/* The chevron point on the gold panel's left edge. Two triangles: a cream
   one behind carrying the same separation as the panel's border, and the
   gold point on top of it. Offsets allow for the 14px cream border, since
   an absolute child is placed against the padding box. */
.et-l--body .cg-community__gold.et_pb_column::before,
.et-l--body .cg-community__gold.et_pb_column::after {
  content: "";
  position: absolute;
  top: 32%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.et-l--body .cg-community__gold.et_pb_column::before {
  left: -72px;
  margin-top: -78px;
  border-top: 78px solid transparent;
  border-bottom: 78px solid transparent;
  border-right: 58px solid var(--sand-100, #FFF8EC);
}
.et-l--body .cg-community__gold.et_pb_column::after {
  left: -60px;
  margin-top: -62px;
  border-top: 62px solid transparent;
  border-bottom: 62px solid transparent;
  border-right: 46px solid var(--gold-400, #F2B01E);
}

/* Decorative art, held inside the green panel, behind the words. The swirl
   is drawn cropped at its own left edge, so it sits flush to the panel. */
.et-l--body .cg-community__leaf.et_pb_module,
.et-l--body .cg-community__ribbon.et_pb_module {
  position: absolute;
  z-index: 0;
  margin: 0 !important;
  pointer-events: none;
}
.et-l--body .cg-community__leaf.et_pb_module {
  top: clamp(6px, 1.4vw, 22px);
  right: clamp(24px, 4vw, 64px);
  width: clamp(200px, 27vw, 340px);
  opacity: .4;
}
.et-l--body .cg-community__ribbon.et_pb_module {
  top: clamp(20px, 2.6vw, 44px);
  left: 0;
  width: clamp(70px, 8vw, 112px);
  opacity: .42;
}
.et-l--body .cg-community__leaf img,
.et-l--body .cg-community__ribbon img { width: 100%; height: auto; display: block; }

/* Words sit above the art. */
.et-l--body .cg-community__green .et_pb_text,
.et-l--body .cg-community__green .et_pb_heading,
.et-l--body .cg-community__statement.et_pb_text { position: relative; z-index: 2; }

/* --- Row 2: the photograph ---------------------------------------------- */
/* Pulled up over the lower half of both panels and offset from the left, so
   the green shows down its left flank and the gold down its right. */
.et-l--body .cg-community__stage.et_pb_row {
  max-width: 1200px;
  position: relative;
  z-index: 3;
  overflow: visible;
  margin-top: clamp(-360px, -29vw, -190px) !important;
}
.et-l--body .cg-community__photo.et_pb_module {
  width: 86%;
  margin: 0 0 0 6% !important;
}
.et-l--body .cg-community__photo .et_pb_image_wrap { display: block; width: 100%; }
.et-l--body .cg-community__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  object-fit: cover;
  object-position: center 32%;
}

/* CTA rides the photograph's lower seam. */
.et-l--body .cg-community__cta.et_pb_button_module_wrapper,
.et-l--body .cg-community__cta.et_pb_module {
  position: relative;
  z-index: 4;
  text-align: center;
  margin: -30px 0 0 !important;
}

/* --- Stacked once Divi drops the columns to full width -------------------- */
@media (max-width: 980px) {
  .et-l--body .cg-community__gold.et_pb_column {
    margin-left: 0;
    margin-top: 22px;
  }
  .et-l--body .cg-community__gold.et_pb_column::before,
  .et-l--body .cg-community__gold.et_pb_column::after { display: none; }
  .et-l--body .cg-community__stage.et_pb_row { margin-top: 22px !important; }
  .et-l--body .cg-community__photo.et_pb_module { width: 100%; margin-left: 0 !important; }
  .et-l--body .cg-community__photo img { aspect-ratio: 1.7 / 1; }
  .et-l--body .cg-community__cta.et_pb_module { margin-top: -26px !important; }
}
@media (max-width: 560px) {
  .et-l--body .cg-community__leaf.et_pb_module   { width: 150px; right: 14px; opacity: .34; }
  /* On a narrow panel the swirl runs off its own left edge, so it reads as
     texture behind the words rather than crowding them. */
  .et-l--body .cg-community__ribbon.et_pb_module { width: 66px; left: -28px; opacity: .34; }
  .et-l--body .cg-community__photo img { aspect-ratio: 1.45 / 1; }
}


/* ---- Mobile touch-target completion --------------------------------------
   Final responsive pass for generated event controls and the injected
   Our Work carousel navigation. Inline prose links remain inline. */
@media (max-width: 767px) {
  body.page-id-922 .cgm-impact-project-carousel .cgm-carousel-control {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .single-tribe_events .tribe-events-back a,
  .single-tribe_events .tribe-events-event-categories a,
  .single-tribe_events .tribe-events-gmap,
  .single-tribe_events .tribe-organizer-url a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .single-tribe_events .tribe-events-c-subscribe-dropdown__button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .single-tribe_events .tribe-events-c-subscribe-dropdown__button-text {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    min-height: 44px;
  }
}


/* ---- Team footer column contract -----------------------------------------
   Divi's Team-page critical CSS omits the standard one-third/one-sixth
   widths required by the shared Theme Builder footer. Restore the established
   desktop footer proportions only on Team; roster rows remain untouched. */
@media (min-width: 981px) {
  body.page-id-971 .et-l--footer .et_pb_row_0_tb_footer > .et_pb_column_1_3 {
    width: 29.6667% !important;
    max-width: none !important;
  }

  body.page-id-971 .et-l--footer .et_pb_row_0_tb_footer > .et_pb_column_1_6 {
    width: 12.0833% !important;
    max-width: none !important;
  }

  body.page-id-971 .et-l--footer .et_pb_row_0_tb_footer > .et_pb_column:not(:last-child) {
    margin-right: 5.5% !important;
  }

  body.page-id-971 .et-l--footer .et_pb_row_1_tb_footer > .et_pb_column {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ---- Divi contact verification and recovery -----------------------------
   Turns Divi's arithmetic CAPTCHA into a clearly named form step and gives
   returned status/error messages a stable, readable state. */
.et_pb_contact_form_container .et_contact_bottom_container {
  align-items: flex-end;
  gap: var(--s-3);
}

.et_pb_contact_form_container .et_pb_contact_right {
  min-width: 190px;
  margin: 0 !important;
}

.et_pb_contact_form_container .et_pb_contact_right p,
.et_pb_contact_form_container .et_pb_contact_right label {
  width: 100%;
  margin: 0;
}

.et_pb_contact_form_container .et_pb_contact_right label {
  display: grid;
  grid-template-columns: auto auto 70px;
  align-items: center;
  justify-content: end;
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
}

.et_pb_contact_form_container .cg-verification-label,
.et_pb_contact_form_container .cg-verification-help {
  grid-column: 1 / -1;
  text-align: right;
}

.et_pb_contact_form_container .cg-verification-label {
  color: var(--green-900);
  font-size: 15px;
  font-weight: var(--w-label);
}

.et_pb_contact_form_container .cg-verification-help {
  margin-bottom: var(--s-1);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--w-body);
}

.et_pb_contact_form_container .et_pb_contact_captcha {
  width: 70px !important;
  min-width: 70px;
  height: 52px !important;
  padding: 12px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.et_pb_contact_form_container .cg-form-expectation {
  max-width: 68ch;
  margin: var(--s-4) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

.et_pb_contact_form_container .et-pb-contact-message:not(:empty) {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--coral-50);
}

.et_pb_contact_form_container .et-pb-contact-message:not(:empty) p,
.et_pb_contact_form_container .et-pb-contact-message:not(:empty) li {
  margin: 0;
  color: var(--text-coral-tinted);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--w-label);
  line-height: 1.55;
}

@media (max-width: 540px) {
  .et_pb_contact_form_container .et_contact_bottom_container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .et_pb_contact_form_container .et_pb_contact_right,
  .et_pb_contact_form_container .et_pb_button_wrapper,
  .et_pb_contact_form_container .et_pb_contact_submit {
    width: 100%;
  }

  .et_pb_contact_form_container .et_pb_contact_right label {
    justify-content: start;
  }

  .et_pb_contact_form_container .cg-verification-label,
  .et_pb_contact_form_container .cg-verification-help {
    text-align: left;
  }

  .et_pb_contact_form_container .et_pb_contact_submit {
    justify-content: center;
    margin-top: var(--s-2);
  }
}

/* The mobile drawer already carries the full site navigation. Repeating both
   desktop link directories below it made the shared phone footer 1,322px
   tall. Keep the identity/contact block, mission follow-up and legal links. */
@media (max-width: 640px) {
  .et-l--footer .et_pb_column_1_tb_footer,
  .et-l--footer .et_pb_column_2_tb_footer {
    display: none !important;
  }
}

/* The Events Calendar renders the semantic control as a text-only button
   inside a larger decorative shell. Let the actual button own a 44px target
   while preserving the plugin's established 48px visual container. */
.single-tribe_events .tribe-events-c-subscribe-dropdown__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-block: 0 !important;
}

.single-tribe_events .tribe-events-c-subscribe-dropdown__button-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}