/**
* Theme Name: Gainlove2 Child
* Description: Child theme for Endurable Peace and Unity Ambassadors Initiative (ENPUAI). Overrides parent theme colors with ENPUAI brand palette derived from the official NGO logo.
* Author: <a href="http://themelexus.com/">Themelexus</a>
* Template: gainlove2
* Version: 2.0.1
*/

/* =============================================================================
   ENPUAI BRAND COLOR PALETTE
   Extracted from the official ENPUAI logo:
   - Primary Forest Green   #2D7D41  (hexagon border, handshake icon)
   - Emerald Green          #3BAF6A  (left panel gradient highlight)
   - Royal Blue             #2B52CC  (right panel accent)
   - Charcoal Dark          #2A2A2A  (bottom panel / dark areas)
   - Text Green             #1A5E30  (NGO name text beneath logo)
   - White                  #FFFFFF  (inner separator ring)
   ============================================================================= */

:root {
  /* ── Core brand colors ─────────────────────────────────────────── */
  --enpuai-green-primary:  #2D7D41;   /* Forest green – main brand color     */
  --enpuai-green-emerald:  #3BAF6A;   /* Emerald green – lighter accent       */
  --enpuai-blue-royal:     #2B52CC;   /* Royal blue – secondary accent        */
  --enpuai-charcoal:       #2A2A2A;   /* Charcoal dark – strong contrast      */
  --enpuai-green-dark:     #1A5E30;   /* Dark forest green – links, headings  */
  --enpuai-green-pale:     #EAF6ED;   /* Very light green – backgrounds       */

  /* ── Elementor Global Color overrides ─────────────────────────── */
  /* These override the parent theme's amber (#FF9F0D) with ENPUAI greens */
  --e-global-color-primary:         #2D7D41;  /* Forest green  (was amber #FF9F0D) */
  --e-global-color-secondary:       #1A2B5E;  /* Deep navy (complements royal blue) */
  --e-global-color-text:            #3D3D3D;  /* Dark charcoal text                 */
  --e-global-color-accent:          #2B52CC;  /* Royal blue    (was amber #FF9F0D)  */
  --e-global-color-lighter:         #7A9E85;  /* Muted green-grey                   */
  --e-global-color-highlight:       #3BAF6A;  /* Emerald green (was teal #0E926B)   */
  --e-global-color-dark:            #2A2A2A;  /* Charcoal dark (was #000000)        */
  --e-global-color-border:          #C8DFD0;  /* Subtle green-tinted border         */
  --e-global-color-backgroundfield: #F0FAF4;  /* Very light green field background  */
}

/* =============================================================================
   GLOBAL TYPOGRAPHY COLORS
   ============================================================================= */

body {
  color: var(--e-global-color-text);
}

a {
  color: var(--enpuai-green-primary);
}

a:hover, a:focus {
  color: var(--enpuai-green-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--enpuai-charcoal);
}

/* =============================================================================
   HEADER & NAVIGATION
   ============================================================================= */

.site-header,
#masthead {
  border-bottom: 3px solid var(--enpuai-green-primary);
}

/* Primary navigation links */
.main-navigation a,
.gainlove2-menu a {
  color: var(--enpuai-charcoal);
}

.main-navigation a:hover,
.gainlove2-menu a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--enpuai-green-primary);
}

/* Navigation active highlight bar */
.main-navigation li:hover > a,
.main-navigation ul li.current-menu-item > a {
  color: var(--enpuai-green-primary);
}

/* Dropdown / sub-menu */
.main-navigation ul ul,
.gainlove2-menu .sub-menu {
  border-top: 3px solid var(--enpuai-green-primary);
}

.main-navigation ul ul a:hover {
  background-color: var(--enpuai-green-pale);
  color: var(--enpuai-green-primary);
}

/* =============================================================================
   BUTTONS & CALLS TO ACTION
   ============================================================================= */

.btn,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
  background-color: var(--enpuai-green-primary);
  border-color: var(--enpuai-green-primary);
  color: #ffffff;
}

.btn:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--enpuai-green-dark);
  border-color: var(--enpuai-green-dark);
  color: #ffffff;
}

/* Secondary / outline buttons */
.btn-secondary,
.button.alt {
  background-color: var(--enpuai-blue-royal);
  border-color: var(--enpuai-blue-royal);
  color: #ffffff;
}

.btn-secondary:hover,
.button.alt:hover {
  background-color: #1A3EAA;
  border-color: #1A3EAA;
  color: #ffffff;
}

/* =============================================================================
   ELEMENTOR WIDGET OVERRIDES
   (buttons, headings, icons, progress bars rendered by Elementor)
   ============================================================================= */

/* Elementor default button */
.elementor-button.elementor-button-default,
.elementor-button {
  background-color: var(--enpuai-green-primary);
  border-color: var(--enpuai-green-primary);
}

.elementor-button.elementor-button-default:hover,
.elementor-button:hover {
  background-color: var(--enpuai-green-dark);
  border-color: var(--enpuai-green-dark);
}

/* Elementor icon colour */
.elementor-icon,
.elementor-icon i {
  color: var(--enpuai-green-primary);
}

/* Progress bar fill */
.elementor-progress-bar {
  background-color: var(--enpuai-green-primary);
}

/* Divider */
.elementor-divider-separator {
  border-color: var(--enpuai-green-emerald);
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer,
#colophon,
.elementor-location-footer,
.hfe-footer {
  background-color: #f8f9fa !important;
  color: var(--enpuai-charcoal);
  border-top: 4px solid var(--enpuai-green-primary);
}

.site-footer a,
#colophon a,
.elementor-location-footer a {
  color: var(--enpuai-green-primary);
}

.site-footer a:hover,
#colophon a:hover,
.elementor-location-footer a:hover {
  color: var(--enpuai-green-dark);
}

.site-footer .widget-title,
#colophon .widget-title,
.elementor-location-footer .widget-title {
  color: var(--enpuai-charcoal);
  border-bottom: 2px solid var(--enpuai-green-primary);
  padding-bottom: 8px;
}

/* =============================================================================
   WOOCOMMERCE OVERRIDES (Donations / Checkout)
   ============================================================================= */

.woocommerce-Price-currencySymbol,
.woocommerce .price {
  color: var(--enpuai-green-primary);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--enpuai-green-primary);
  color: #ffffff;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--enpuai-green-dark);
  color: #ffffff;
}

/* =============================================================================
   SITE LOGO SIZING
   ============================================================================= */

.custom-logo {
  max-height: 80px;
  width: auto;
}

/* =============================================================================
   VISION & MISSION SECTION — Gradient + Pattern Background
   Applied via .enpuai-vision-section CSS class on the Elementor section.
   Gradient: Deep navy → Dark forest green (135°) with a subtle dot pattern.
   ============================================================================= */

.elementor-section.enpuai-vision-section,
.e-con.enpuai-vision-section {
  background:
    url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='white' fill-opacity='0.07'/%3E%3C/svg%3E") repeat,
    linear-gradient(135deg, #0e1b40 0%, #0d3319 100%) !important;
}

/* Ensure inner content sits above the pattern layer */
.elementor-section.enpuai-vision-section > .elementor-container,
.e-con.enpuai-vision-section > .elementor-container {
  position: relative;
  z-index: 1;
}

/* Section heading ("Our Vision & Mission") */
.elementor-section.enpuai-vision-section .elementor-heading-title {
  color: #ffffff !important;
}

/* Decorative top border accent on the section */
.elementor-section.enpuai-vision-section,
.e-con.enpuai-vision-section {
  border-top: 4px solid var(--enpuai-green-emerald) !important;
}

/* "Our Guiding Light" + "Vision & Mission" sub-title (gainlove2-heading widget) */
.enpuai-vision-section .heading-title,
.enpuai-vision-section .sub-title,
.enpuai-vision-section .opal-heading-wrapper .heading-title,
.enpuai-vision-section .opal-heading-wrapper .sub-title,
.enpuai-vision-section .elementor-widget-gainlove2-heading *,
.enpuai-vision-section .elementor-heading-title {
  color: #ffffff !important;
}

/* =============================================================================
   FOOTER — Button visibility (normal + hover, all states)
   ============================================================================= */

.elementor-location-footer .elementor-button,
.elementor-location-footer .elementor-widget-button .elementor-button {
  background-color: var(--enpuai-green-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--enpuai-green-primary) !important;
}

/* Explicitly target button text span — overrides any Elementor-generated inline style */
.elementor-location-footer .elementor-button .elementor-button-text,
.elementor-location-footer .elementor-button .elementor-button-content-wrapper,
.elementor-location-footer .elementor-button span {
  color: #ffffff !important;
}

.elementor-location-footer .elementor-button:hover,
.elementor-location-footer .elementor-widget-button .elementor-button:hover {
  background-color: var(--enpuai-green-dark) !important;
  border-color: var(--enpuai-green-dark) !important;
  color: #ffffff !important;
}

.elementor-location-footer .elementor-button:hover .elementor-button-text,
.elementor-location-footer .elementor-button:hover .elementor-button-content-wrapper,
.elementor-location-footer .elementor-button:hover span {
  color: #ffffff !important;
}

/* Footer contact icon-boxes: icon + title in ENPUAI green */
.elementor-location-footer .elementor-widget-icon-box .elementor-icon,
.elementor-location-footer .elementor-widget-icon-box .elementor-icon svg,
.elementor-location-footer .elementor-widget-icon-box .elementor-icon i {
  color: var(--enpuai-green-primary) !important;
  fill: var(--enpuai-green-primary) !important;
}

.elementor-location-footer .elementor-widget-icon-box .elementor-icon-box-title,
.elementor-location-footer .elementor-widget-icon-box .elementor-icon-box-title a {
  color: var(--enpuai-green-primary) !important;
}

/* Footer bottom bar text color on light bg */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor a {
  color: var(--enpuai-charcoal) !important;
}

.elementor-location-footer .elementor-widget-text-editor a:hover {
  color: var(--enpuai-green-primary) !important;
}

/* =============================================================================
   MOBILE HEADER — ENPUAI Brand
   Fixes:
   1. Header becomes solid navy (sticky) on mobile — no content overlap
   2. Logo capped at 120 px width (set in Elementor JSON too)
   3. Hamburger bars are thicker + force-white for visibility
   =============================================================================*/

/* 1. Solid sticky header on mobile */
@media (max-width: 767px) {
  .header-absolute {
    position: sticky !important;
    top: 0;
    background-color: #1a2b5e !important;
    z-index: 9999 !important;
  }
}

/* 2. Hamburger bars — thicker, clearly white, larger touch area */
@media (max-width: 1023px) {
  .menu-mobile-nav-button .gainlove2-icon > span {
    height: 2.5px !important;
    width: 26px !important;
    margin-bottom: 6px !important;
    background-color: #ffffff !important;   /* Force white on any bg */
  }
  .menu-mobile-nav-button .gainlove2-icon .icon-2 {
    width: 18px !important;               /* Classic "shorter middle bar" look */
  }
  .menu-mobile-nav-button .gainlove2-icon .icon-3 {
    width: 26px !important;
  }
  /* Generous touch target + subtle hover */
  .menu-mobile-nav-button {
    display: flex !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
  }
  .menu-mobile-nav-button:hover,
  .menu-mobile-nav-button:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
}

/* =============================================================================
   MOBILE NAVIGATION DRAWER — ENPUAI Brand Colors
   Classes:  .gainlove2-mobile-nav  /  .mobile-nav-tabs  /  .mobile-nav-close
   =============================================================================*/

/* Drawer panel background — navy */
.gainlove2-mobile-nav {
  background-color: #1a2b5e !important;
}

/* "Main Menu" tab strip — green accent */
.gainlove2-mobile-nav .mobile-nav-tabs {
  background-color: #2d7d41 !important;
  padding: 0 24px !important;
}

/* Tab title text */
.gainlove2-mobile-nav .mobile-nav-tabs ul li {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Active indicator underline — emerald */
.gainlove2-mobile-nav .mobile-nav-tabs ul li:before {
  background-color: #3baf6a !important;
}

/* Nav links — white on navy */
.gainlove2-mobile-nav a,
.gainlove2-mobile-nav .handheld-navigation a,
.gainlove2-mobile-nav ul li a {
  color: rgba(255, 255, 255, 0.90) !important;
}
.gainlove2-mobile-nav a:hover,
.gainlove2-mobile-nav ul li a:hover {
  color: #3baf6a !important;           /* Emerald green on hover */
}

/* Sub-menu indent border */
.gainlove2-mobile-nav .handheld-navigation .sub-menu,
.gainlove2-mobile-nav ul .sub-menu {
  border-left: 2px solid rgba(255, 255, 255, 0.20) !important;
  margin-left: 10px !important;
}
.gainlove2-mobile-nav .sub-menu li a,
.gainlove2-mobile-nav ul .sub-menu a {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Close × button */
.mobile-nav-close {
  color: #ffffff !important;
}
.mobile-nav-close:hover,
.mobile-nav-close:focus {
  color: #3baf6a !important;
}

/* Social icons section divider */
.gainlove2-mobile-nav .gainlove2-social {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}
body .gainlove2-mobile-nav .gainlove2-social ul li a:before {
  color: #ffffff !important;
}

/* =============================================================================
   MISSION STRIP — 2×2 grid on mobile
   4 items (Conflict Resolution, National Unity, Youth Empowerment, Justice & Equity)
   Pipe separators hidden; items wrap to 2 per row
   Using body-prefixed selectors to beat Elementor's internal generated CSS
   =============================================================================*/
@media (max-width: 767px) {
  /* Nuclear: body prefix increases specificity over Elementor generated rules */
  body .elementor-element-ba15e51.e-con > .e-con-inner,
  body .elementor-element-ba15e51 > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* Force all direct widget children of mission strip to 50% — 2 per row */
  body .elementor-element-ba15e51 > .e-con-inner > .elementor-widget {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 12px 6px !important;
  }

  /* Hide the 3 pipe | separator widgets completely */
  .elementor-element-10a5b19,
  .elementor-element-ee84b6a,
  .elementor-element-dd86844 {
    display: none !important;
    flex: none !important;
    width: 0 !important;
    padding: 0 !important;
  }
}

/* =============================================================================
   IMPACT NUMBERS — 2×2 grid on mobile
   Override Elementor's CSS *variables* directly — Elementor base CSS reads
   these vars (e.g. gap: var(--column-gap)) so overriding the var is the only
   reliable way to win the cascade.
   =============================================================================*/
@media (max-width: 767px) {
  /* Override the CSS variables ON the container element itself */
  body .elementor-element-f9deb69 {
    --flex-direction: row !important;
    --flex-wrap: wrap !important;
    --column-gap: 0px !important;
    --row-gap: 16px !important;
    --gap: 16px 0px !important;
  }

  /* Also target the inner flex container directly */
  body .elementor-element-f9deb69 > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    column-gap: 0 !important;
    row-gap: 16px !important;
  }

  /* Cap each stat item at 48% — 2 per row with gap room */
  .elementor-element-bd04688,
  .elementor-element-88ee29d,
  .elementor-element-e067073,
  .elementor-element-b482bce {
    --width: 48% !important;
    width: 48% !important;
    flex: 0 0 48% !important;
    max-width: 48% !important;
    box-sizing: border-box !important;
  }
}

/* =============================================================================
   NEWSLETTER SECTION — bottom spacing on mobile
   Override both the Elementor CSS variable AND the real property so it wins
   regardless of which mechanism the browser is using to compute the padding.
   =============================================================================*/
@media (max-width: 767px) {
  body .elementor-element-b20d58a {
    --padding-bottom: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* =============================================================================
   MOBILE FOOTER — stack columns vertically
   (Elementor JSON also updated; CSS reinforces for any inherited widths)
   =============================================================================*/
@media (max-width: 767px) {
  /* Force all direct e-con children in footer to stack */
  .elementor-location-footer .e-con-inner {
    flex-direction: column !important;
  }
  /* Footer link/text alignment on small screens */
  .elementor-location-footer .elementor-widget-text-editor,
  .elementor-location-footer .elementor-widget-heading {
    text-align: left !important;
  }
  /* Bottom bar centred on mobile */
  .elementor-location-footer .elementor-element-d3e0e35 .e-con-inner {
    align-items: center !important;
    text-align: center !important;
  }
  .elementor-location-footer .elementor-element-d3e0e35 .elementor-widget-text-editor,
  .elementor-location-footer .elementor-element-d3e0e35 p,
  .elementor-location-footer .elementor-element-d3e0e35 a {
    text-align: center !important;
  }
}

/* =============================================================================
   MOBILE HAMBURGER MENU — SUBMENU REDESIGN
   nav-mobile.js injects <button class="dropdown-toggle"> after every parent
   <a>. We make the button a clearly visible circular pill, draw a pure-CSS
   chevron (no gainlove2-icon font dependency), and style the sub-menu panel
   with a branded left-border accent so it reads as an expansion of the row.
   ============================================================================= */

/* 1 — Flex layout on the parent <li> so the toggle stays in the header row
   and the sub-menu expands as a full-width second row beneath it.
   This prevents the "button drifts down with the expanding container" bug
   that happens when position:absolute + top:50% is used on a growing <li>. */
.gainlove2-mobile-nav .mobile-navigation ul > li.menu-item-has-children,
.gainlove2-mobile-nav .mobile-navigation-categories ul > li.menu-item-has-children {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  position: relative;
  /* Border on the <li> so the line runs the full row width, past the toggle button */
  border-bottom: 1px solid var(--e-global-color-border) !important;
}
.gainlove2-mobile-nav .mobile-navigation ul > li.menu-item-has-children:last-child,
.gainlove2-mobile-nav .mobile-navigation-categories ul > li.menu-item-has-children:last-child {
  border-bottom: none !important;
}
/* Parent link stretches to fill available width; small right gap before button.
   Remove its own border-bottom so it doesn't double up or stop short of the button. */
.gainlove2-mobile-nav .mobile-navigation ul > li.menu-item-has-children > a,
.gainlove2-mobile-nav .mobile-navigation-categories ul > li.menu-item-has-children > a {
  flex: 1 1 auto !important;
  padding-right: 8px !important;
  border-bottom: none !important;
}

/* 2 — Toggle button: in-flow flex item (NOT absolute), transparent chevron ─────── */
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: none !important;
  box-shadow: none !important;
}
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle:hover,
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle:focus,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle:hover,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle:focus {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3 — Suppress icon-font ::before; draw white CSS chevron via ::after ───── */
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle::before,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle::before {
  display: none !important;
}
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle::after,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle::after {
  font-family: initial !important;
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2.5px solid #ffffff !important;
  border-bottom: 2.5px solid #ffffff !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.25s ease !important;
  color: transparent !important;
  font-size: 0 !important;
  margin: 0 !important;
}

/* 4 — Chevron flips to point up when the sub-menu is open ───────────────── */
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle.toggled-on,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle.toggled-on {
  background-color: transparent !important;
  box-shadow: none !important;
}
.gainlove2-mobile-nav .mobile-navigation .dropdown-toggle.toggled-on::after,
.gainlove2-mobile-nav .mobile-navigation-categories .dropdown-toggle.toggled-on::after {
  font-family: initial !important;
  content: '' !important;
  transform: rotate(225deg) translateY(2px) !important;
}

/* 5 — Sub-menu panel: full-width flex row below the link+button row ─────── */
.gainlove2-mobile-nav .mobile-navigation ul ul.sub-menu,
.gainlove2-mobile-nav .mobile-navigation-categories ul ul.sub-menu {
  display: none;                       /* JS slideToggle controls open/close */
  flex-basis: 100% !important;         /* occupies its own full row in the flex <li> */
  width: 100% !important;
  margin: 4px 0 8px 0 !important;
  padding: 4px 0 4px 16px !important;
  border-left: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* 6 — Sub-menu item links: white text, subtle dividers ─────────────────── */
.gainlove2-mobile-nav .mobile-navigation ul ul.sub-menu > li.menu-item > a,
.gainlove2-mobile-nav .mobile-navigation-categories ul ul.sub-menu > li.menu-item > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  padding: 10px 4px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: block !important;
  position: relative !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.gainlove2-mobile-nav .mobile-navigation ul ul.sub-menu > li.menu-item:last-child > a,
.gainlove2-mobile-nav .mobile-navigation-categories ul ul.sub-menu > li.menu-item:last-child > a {
  border-bottom: none !important;
  margin-bottom: 4px !important;
}

/* 7 — Hover: brand-green colour + gentle indent ─────────────────────────── */
.gainlove2-mobile-nav .mobile-navigation ul ul.sub-menu > li.menu-item > a:hover,
.gainlove2-mobile-nav .mobile-navigation-categories ul ul.sub-menu > li.menu-item > a:hover {
  color: var(--e-global-color-primary, #10B981) !important;
  padding-left: 6px !important;
}

/* 8 — Current / active page ─────────────────────────────────────────────── */
.gainlove2-mobile-nav .mobile-navigation ul ul.sub-menu > li.menu-item.current-menu-item > a,
.gainlove2-mobile-nav .mobile-navigation-categories ul ul.sub-menu > li.menu-item.current-menu-item > a {
  color: #10B981 !important;
  font-weight: 600 !important;
}

/* =============================================================================
   HIDE "MISSION STRIP" (Conflict Resolution / National Unity / Empowerment /
   Justice & Equity bar) on mobile — desktop-only section
   Elementor ID: ba15e51
   ============================================================================= */
@media (max-width: 767px) {
  .elementor-element-ba15e51 {
    display: none !important;
  }
}