/*
Theme Name:        Hello Elementor — ECxP
Theme URI:         https://build.eswatinicxp.org
Description:       ECxP child theme for the Eswatini Customer Experience Practitioners website redesign. Built on Hello Elementor.
Author:            Lead WordPress Architect — ECXP Redesign
Author URI:        https://build.eswatinicxp.org
Template:          hello-elementor
Version:           1.0.0
Text Domain:       hello-elementor-ecxp
Tags:              custom, elementor
*/

/* ============================================================
   ECXP BRAND DESIGN TOKENS
   All brand colours and spacing defined as CSS custom properties.
   Elementor Global Colours reference these via its own system;
   these tokens are used for any custom CSS needed in this file.
   ============================================================ */

:root {

  /* --- Colour Palette --- */
  --ecxp-navy:       #0B1F54;   /* Primary — header, nav, headlines, buttons, footer */
  --ecxp-deep-navy:  #071633;   /* Hero overlay, footer bg, mega-menu, CTA bands */
  --ecxp-gold:       #C6A451;   /* Accent — icons, highlights, dividers, hovers */
  --ecxp-gold-dark:  #B28E3C;   /* Gold hover / pressed state */
  --ecxp-light-bg:   #F7F8FA;   /* Alternate section backgrounds, form fields */
  --ecxp-white:      #FFFFFF;   /* Dominant background (70% of site) */
  --ecxp-text-1:     #1B1B1B;   /* Primary body copy */
  --ecxp-text-2:     #5F6B7A;   /* Secondary text — captions, descriptions */
  --ecxp-border:     #E5E7EB;   /* Card borders, dividers, form field borders */

  /* --- Spacing Scale (8-base) --- */
  --sp-xs:   20px;
  --sp-sm:   40px;
  --sp-md:   60px;
  --sp-lg:   80px;
  --sp-xl:   120px;
  --sp-2xl:  160px;

  /* --- Container Widths --- */
  --container-max: 1400px;
  --content-max:   1200px;

  /* --- Border Radius --- */
  --radius-card:   24px;
  --radius-btn:    4px;
  --radius-input:  6px;
  --radius-img:    16px;

  /* --- Shadows --- */
  --shadow-card:   0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover:  0 8px 32px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--ecxp-text-1);
  background-color: var(--ecxp-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Skip to main content */
.skip-to-content {
  position: absolute;
  top: -60px;
  left: 0;
  background: var(--ecxp-navy);
  color: #fff;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  z-index: 99999;
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 0;
}

/* Global focus ring — Gold on all focusable elements */
:focus-visible {
  outline: 2px solid var(--ecxp-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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


/* ============================================================
   TYPOGRAPHY — matches Elementor Global Font settings
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--ecxp-navy);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; }
h2 { font-size: clamp(26px, 3vw, 42px); }
h3 { font-size: clamp(22px, 2.5vw, 32px); }
h4 { font-size: clamp(18px, 2vw, 24px); }

p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--ecxp-text-1);
  line-height: 1.7;
}

a {
  color: var(--ecxp-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ecxp-gold);
}


/* ============================================================
   ELEMENTOR CONTAINER WIDTHS
   Targets Elementor 4.x Flexbox Container system.
   .e-con-full  = outer full-width section wrapper
   .e-con-boxed = inner content wrapper (must be constrained)
   ============================================================ */

/* Outer full-width sections span 100% — no constraint */
.e-con-full {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Inner boxed wrappers: constrain to content max-width, centered */
.e-con-full > .e-con-boxed {
  max-width: var(--content-max) !important; /* 1200px */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
}

/* Prevent any nested container from exceeding parent width */
.e-con-boxed .e-con {
  max-width: 100%;
  box-sizing: border-box;
}

/* Legacy selectors — kept for compatibility */
.elementor-section-boxed .elementor-container {
  max-width: var(--container-max) !important;
}

/* ─── RESPONSIVE: Tablet (≤1024px) ─── */
@media (max-width: 1024px) {
  .e-con-full > .e-con-boxed {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ─── RESPONSIVE: Mobile (≤767px) ─── */
@media (max-width: 767px) {
  .e-con-full > .e-con-boxed {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ============================================================
   HEADER — Two States
   ============================================================ */

/* State 1: Transparent (on homepage hero scroll position 0) */
.elementor-location-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* State 2: Sticky white (activated by JS on scroll) */
.elementor-location-header.ecxp-header-sticky {
  background-color: var(--ecxp-white) !important;
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.elementor-location-header.ecxp-header-sticky .elementor-nav-menu a {
  color: var(--ecxp-navy) !important;
}


/* ============================================================
   BUTTONS — Global component styles
   ============================================================ */

/* Primary Button */
.ecxp-btn-primary,
.elementor-button.ecxp-btn-primary {
  background-color: var(--ecxp-navy) !important;
  color: #ffffff !important;
  border: 2px solid var(--ecxp-navy) !important;
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  display: inline-block;
  cursor: pointer;
  min-width: 160px;
  text-align: center;
}
.ecxp-btn-primary:hover {
  background-color: var(--ecxp-deep-navy) !important;
  border-color: var(--ecxp-deep-navy) !important;
  color: #ffffff !important;
}

/* Secondary Button */
.ecxp-btn-secondary,
.elementor-button.ecxp-btn-secondary {
  background-color: var(--ecxp-gold) !important;
  color: #ffffff !important;
  border: 2px solid var(--ecxp-gold) !important;
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  display: inline-block;
  cursor: pointer;
  min-width: 160px;
  text-align: center;
}
.ecxp-btn-secondary:hover {
  background-color: var(--ecxp-gold-dark) !important;
  border-color: var(--ecxp-gold-dark) !important;
  color: #ffffff !important;
}

/* Outline Button */
.ecxp-btn-outline,
.elementor-button.ecxp-btn-outline {
  background-color: transparent !important;
  color: var(--ecxp-gold) !important;
  border: 2px solid var(--ecxp-gold) !important;
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
  display: inline-block;
  cursor: pointer;
  min-width: 160px;
  text-align: center;
}
.ecxp-btn-outline:hover {
  background-color: var(--ecxp-gold) !important;
  color: #ffffff !important;
}

/* Outline White (for dark backgrounds) */
.ecxp-btn-outline-white {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  display: inline-block;
  cursor: pointer;
}
.ecxp-btn-outline-white:hover {
  border-color: #ffffff !important;
  background-color: rgba(255,255,255,0.1) !important;
}


/* ============================================================
   CARDS — Global card system
   ============================================================ */

/* Standard Card */
.ecxp-card {
  background-color: var(--ecxp-white);
  border: 1px solid var(--ecxp-border);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ecxp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--ecxp-gold);
}

/* Feature Card (recommended/highlighted) */
.ecxp-card-feature {
  border: 2px solid var(--ecxp-gold) !important;
  box-shadow: 0 4px 20px rgba(198, 164, 81, 0.15);
}

/* Event Card */
.ecxp-card-event {
  border-radius: var(--radius-img);
  overflow: hidden;
  border: 1px solid var(--ecxp-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ecxp-card-event:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.ecxp-card-event img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ecxp-card-event:hover img {
  transform: scale(1.03);
}

/* Pillar Card */
.ecxp-pillar-card {
  background-color: var(--ecxp-white);
  border: 1px solid var(--ecxp-border);
  border-radius: var(--radius-img);
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ecxp-pillar-card:hover {
  transform: translateY(-6px);
  border-color: var(--ecxp-gold);
  box-shadow: var(--shadow-hover);
}


/* ============================================================
   FORMS
   ============================================================ */

.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form textarea,
.elementor-form select,
.elementor-field-type-text .elementor-field,
.elementor-field-type-email .elementor-field,
.elementor-field-type-tel .elementor-field,
.elementor-field-type-textarea .elementor-field,
.elementor-field-type-select .elementor-field {
  background-color: var(--ecxp-light-bg) !important;
  border: 1.5px solid var(--ecxp-border) !important;
  border-radius: var(--radius-input) !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: var(--ecxp-text-1) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
}

.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
  border-color: var(--ecxp-gold) !important;
  box-shadow: 0 0 0 3px rgba(198, 164, 81, 0.15) !important;
  outline: none !important;
}

.elementor-field-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ecxp-navy) !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 6px !important;
}


/* ============================================================
   SECTION LABELS (Overline style)
   ============================================================ */

.ecxp-overline {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ecxp-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.ecxp-gold-divider {
  width: 48px;
  height: 3px;
  background-color: var(--ecxp-gold);
  border-radius: 2px;
  margin: 16px 0;
}


/* ============================================================
   ACCORDION — normalise typography
   Elementor accordion inherits --e-global-typography-primary-font-size
   which resolves to 56px (the global heading size). Override to match
   the site's body/card text scale throughout.
   ============================================================ */

.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--ecxp-navy) !important;
  letter-spacing: 0 !important;
}

.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-accordion .elementor-accordion-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--ecxp-text-2) !important;
}

/* Icon size to match title */
.elementor-widget-accordion .elementor-accordion-icon {
  font-size: 13px !important;
}


/* ============================================================
   NAV MENU TYPOGRAPHY FIX
   Root cause: --e-global-typography-primary-font-size resolves to
   56px on this install (identical issue to accordion above). The
   Nav Menu widget inherits this variable, rendering links at heading
   scale with dark navy colour. Fix mirrors the accordion approach:
   explicit !important overrides per context (header / mobile / footer).
   ============================================================ */

/* ── Desktop header navigation — default (transparent bg) ── */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main a.elementor-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main a.elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #C6A451 !important;
}

/* ── Sticky header — white bg, switch to navy text ── */
.ecxp-header-sticky .elementor-nav-menu--main .elementor-item,
.ecxp-header-sticky .elementor-nav-menu--main a.elementor-item {
  color: #0B1F54 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.ecxp-header-sticky .elementor-nav-menu--main .elementor-item:hover,
.ecxp-header-sticky .elementor-nav-menu--main a.elementor-item:hover {
  color: #C6A451 !important;
}

/* ── Mobile / hamburger dropdown ── */
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.5 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  text-decoration: none !important;
}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item:hover {
  color: #C6A451 !important;
}

/* ── Footer navigation ── */
.elementor-location-footer .elementor-nav-menu .elementor-item,
.elementor-location-footer .elementor-nav-menu a.elementor-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 2 !important;
  text-decoration: none !important;
}
.elementor-location-footer .elementor-nav-menu .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu a.elementor-item:hover {
  color: #C6A451 !important;
  opacity: 1 !important;
}

/* ── Responsive: clamp mobile font size ── */
@media (max-width: 767px) {
  .elementor-nav-menu--dropdown .elementor-item,
  .elementor-nav-menu--dropdown a.elementor-item {
    font-size: 22px !important;
  }
}


/* ============================================================
   BUTTON TYPOGRAPHY FIX
   Same root cause as accordion and nav menu:
   --e-global-typography-primary-font-size resolves to 56px on
   this install. Elementor button widgets inherit this when no
   explicit font-size is set in the widget, producing oversized
   buttons with extreme height.
   ============================================================ */

.elementor-widget-button .elementor-button {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  transition: background-color 0.25s ease,
              border-color     0.25s ease,
              color            0.25s ease,
              box-shadow       0.25s ease,
              transform        0.25s ease !important;
}

/* Size variants — restore correct proportions */
.elementor-widget-button .elementor-button.elementor-size-xs { font-size: 11px !important; padding: 8px 16px !important; }
.elementor-widget-button .elementor-button.elementor-size-sm { font-size: 12px !important; padding: 10px 20px !important; }
.elementor-widget-button .elementor-button.elementor-size-md { font-size: 14px !important; padding: 12px 24px !important; }
.elementor-widget-button .elementor-button.elementor-size-lg { font-size: 15px !important; padding: 14px 32px !important; }
.elementor-widget-button .elementor-button.elementor-size-xl { font-size: 17px !important; padding: 16px 40px !important; }


/* ============================================================
   BUTTON HOVER EFFECTS — all pages

   Root cause of missing hovers: Elementor generates per-element
   CSS scoped as .elementor-element-XXXX .elementor-button:hover
   (specificity 0,3,0). The previous a.elementor-button:hover
   selector only reached 0,2,1 and was overridden.

   Fix: prefix with body + .elementor-widget-button to reach
   specificity 0,3,2 — beats Elementor's generated rules.
   The transform and box-shadow properties are also unaffected
   by any Elementor-generated background rules.
   ============================================================ */

/* Transition — directly on the <a> Elementor renders */
body .elementor-widget-button a.elementor-button {
  transition: filter           0.25s ease,
              transform        0.25s ease,
              box-shadow       0.25s ease,
              background-color 0.25s ease,
              border-color     0.25s ease !important;
}

/* ── Universal hover (0,3,2) — fires on EVERY Elementor button ── */
body .elementor-widget-button a.elementor-button:hover {
  filter:     brightness(0.85) !important;
  transform:  translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}

/* ── Branded overrides — precise colour transitions ──────────── */

/* Primary — navy fill → deep navy */
.ecxp-btn-primary a.elementor-button:hover,
a.elementor-button.ecxp-btn-primary:hover {
  filter:           none !important;
  background-color: var(--ecxp-deep-navy) !important;
  border-color:     var(--ecxp-deep-navy) !important;
  box-shadow:       0 8px 24px rgba(11, 31, 84, 0.35) !important;
}

/* Secondary — gold fill → dark gold */
.ecxp-btn-secondary a.elementor-button:hover,
a.elementor-button.ecxp-btn-secondary:hover {
  filter:           none !important;
  background-color: var(--ecxp-gold-dark) !important;
  border-color:     var(--ecxp-gold-dark) !important;
  box-shadow:       0 8px 24px rgba(198, 164, 81, 0.40) !important;
}

/* Outline — transparent/gold-border → gold fill */
.ecxp-btn-outline a.elementor-button:hover,
a.elementor-button.ecxp-btn-outline:hover {
  filter:           none !important;
  background-color: var(--ecxp-gold) !important;
  border-color:     var(--ecxp-gold) !important;
  color:            #ffffff !important;
  box-shadow:       0 8px 24px rgba(198, 164, 81, 0.40) !important;
}

/* Outline White — white border on dark bg → subtle white wash */
.ecxp-btn-outline-white a.elementor-button:hover,
a.elementor-button.ecxp-btn-outline-white:hover {
  filter:           none !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color:     #ffffff !important;
  box-shadow:       0 8px 24px rgba(255, 255, 255, 0.12) !important;
}


/* ============================================================
   PARTNER LOGOS — greyscale to colour on hover
   ============================================================ */

.ecxp-partner-logo img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ecxp-partner-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.ecxp-timeline-dot {
  width: 24px;
  height: 24px;
  background-color: var(--ecxp-gold);
  border-radius: 50%;
  border: 3px solid var(--ecxp-white);
  box-shadow: 0 0 0 2px var(--ecxp-gold);
  position: relative;
  flex-shrink: 0;
}

.ecxp-timeline-line {
  height: 2px;
  background-color: var(--ecxp-border);
  flex: 1;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.ecxp-bg-navy      { background-color: var(--ecxp-navy); }
.ecxp-bg-deep      { background-color: var(--ecxp-deep-navy); }
.ecxp-bg-light     { background-color: var(--ecxp-light-bg); }
.ecxp-bg-white     { background-color: var(--ecxp-white); }
.ecxp-text-gold    { color: var(--ecxp-gold); }
.ecxp-text-navy    { color: var(--ecxp-navy); }
.ecxp-text-white   { color: var(--ecxp-white); }
.ecxp-text-muted   { color: var(--ecxp-text-2); }
.ecxp-section-pad  { padding: var(--sp-lg) 0; }
.ecxp-section-pad-xl { padding: var(--sp-xl) 0; }


/* ============================================================
   LAYOUT QA FIXES — Homepage
   ============================================================ */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Elementor page wrapper */
.elementor {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ─── SECTION VERTICAL PADDING — Responsive ─── */

/* Tablet */
@media (max-width: 1024px) {
  .e-con-full {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* Hero keeps taller padding */
  .e-con-full:first-child {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .e-con-full {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .e-con-full:first-child {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

/* ─── CARD & GRID OVERFLOW PROTECTION ─── */

/* Stat cards, pillar cards, event cards, membership cards */
.e-con-boxed .e-con-boxed,
.e-con-full .e-con-full .e-con {
  min-width: 0;
  box-sizing: border-box;
}

/* Flex-wrap card grids — ensure cards don't overflow on tablet */
@media (max-width: 1024px) {
  .e-con[style*=&quot;flex-wrap: wrap&quot;],
  .e-con[style*=&quot;flex-wrap:wrap&quot;] {
    flex-wrap: wrap !important;
  }
}

/* ─── MOBILE COLUMN STACKING ─── */
/* NOTE: Elementor 4.x wraps all container children in .e-con-inner.
   The path from section to columns is:
   .e-con-full > .e-con-boxed > .e-con-inner > .e-con (column) */
@media (max-width: 767px) {
  /* Stack side-by-side columns vertically (Hero, Who We Are, Magazine) */
  .e-con-full > .e-con-boxed > .e-con-inner > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* ============================================================
   CARD GRID RESPONSIVE SYSTEM
   ecxp-card-grid / ecxp-grid-N classes are injected via
   ecxp-homepage-builder.php into Elementor container settings.
   They control predictable column wrapping at every breakpoint.

   IMPORTANT — Elementor 4.x container DOM structure:
     .ecxp-card-grid            ← the container element
       └── .e-con-inner         ← Elementor's flex wrapper (the actual flex container)
            ├── .e-con (card)
            └── .e-con (card)
   All child selectors must go through .e-con-inner.
   ============================================================ */

/* Base: all card grid children — prevent overflow */
.ecxp-card-grid > .e-con-inner > .e-con {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* ─── 3-COLUMN GRIDS ─── */
/* §04 Mission (3 cards) | §05 Pillars (6 cards, 3×2) */
/* §06 Journey (5 cards, 3+2) | §07 Events (5 cards, 3+2) | §12 CTA (3 stats) */
/* NOTE: calc uses 19px (not 16px) to accommodate gap values 24–28px.
   Derivation: 2 × max_gap / 3 = 2 × 28 / 3 = 18.67 → round up to 19.
   For gap=24 containers this leaves ≈9px unused at row end (imperceptible). */
.ecxp-card-grid.ecxp-grid-3 > .e-con-inner > .e-con {
  flex-basis: calc(33.333% - 19px) !important;
  max-width:  calc(33.333% - 19px) !important;
}

/* ─── 4-COLUMN GRIDS ─── */
/* §02 Stats (4 items) | §10 Partners logo rows */
.ecxp-card-grid.ecxp-grid-4 > .e-con-inner > .e-con {
  flex-basis: calc(25% - 18px) !important;
  max-width:  calc(25% - 18px) !important;
}
/* also e-con-full containers (no .e-con-inner wrapper) */
.ecxp-card-grid.ecxp-grid-4 > .e-con {
  flex-basis: calc(25% - 18px) !important;
  max-width:  calc(25% - 18px) !important;
}

/* ─── 5-COLUMN GRIDS ─── */
/* §09 Membership tier cards (5 items) */
.ecxp-card-grid.ecxp-grid-5 > .e-con-inner > .e-con {
  flex-basis: calc(20% - 16px) !important;
  max-width:  calc(20% - 16px) !important;
}

/* ─── TABLET (≤1024px) ─── */
@media (max-width: 1024px) {

  /* 3-col → 2-col */
  .ecxp-card-grid.ecxp-grid-3 > .e-con-inner > .e-con {
    flex-basis: calc(50% - 12px) !important;
    max-width:  calc(50% - 12px) !important;
  }

  /* 4-col → 2-col (stats, logo grids) */
  .ecxp-card-grid.ecxp-grid-4 > .e-con-inner > .e-con {
    flex-basis: calc(50% - 12px) !important;
    max-width:  calc(50% - 12px) !important;
  }
  .ecxp-card-grid.ecxp-grid-4 > .e-con {
    flex-basis: calc(50% - 12px) !important;
    max-width:  calc(50% - 12px) !important;
  }

  /* 5-col → 3-col (membership tiers) */
  .ecxp-card-grid.ecxp-grid-5 > .e-con-inner > .e-con {
    flex-basis: calc(33.333% - 14px) !important;
    max-width:  calc(33.333% - 14px) !important;
  }
}

/* ─── MOBILE (≤767px) — all grids collapse to 1-col ─── */
@media (max-width: 767px) {
  .ecxp-card-grid > .e-con-inner > .e-con {
    flex-basis: 100% !important;
    max-width:  100% !important;
    width:      100% !important;
  }
  .ecxp-card-grid > .e-con {
    flex-basis: 100% !important;
    max-width:  100% !important;
    width:      100% !important;
  }
}


/* ============================================================
   ICON WIDGET COLOUR FIX
   Root cause: ecxp_icon() sets 'color' => '#C6A451' but Elementor's
   icon widget registers the colour control as 'primary_color'. The
   wrong key is silently ignored, leaving icons at the theme default
   navy (#0B1F54) — invisible on any dark background.
   Fix: force all Elementor icon widgets to the brand gold.
   Covers Font Awesome <i> tags, inline <svg>, and <svg> <path> fills.
   ============================================================ */

.elementor-widget-icon .elementor-icon i,
.elementor-widget-icon .elementor-icon svg {
  color: var(--ecxp-gold) !important;
  fill:  var(--ecxp-gold) !important;
}

.elementor-widget-icon .elementor-icon svg path {
  fill: var(--ecxp-gold) !important;
}


/* ============================================================
   MAGAZINE COVER — FILL GREY FRAME
   The grey frame container has padding zeroed via PHP (ecxp-magazine-cover-fill.php).
   These rules make the <img> cover the full frame area with no gaps.
   ============================================================ */

.ecxp-magazine-cover img {
  width:       100% !important;
  height:      460px;
  object-fit:  cover !important;
  display:     block;
}

.ecxp-magazine-cover .elementor-widget-container {
  overflow: hidden;
}


/* ============================================================
   TWO-COLUMN LAYOUT FIX
   Root cause: ecxp_col() sets width:50% on each column. Two 50%
   columns plus a 60px gap exceed the parent's 100% width, causing
   flex-wrap to kick in and stack the columns vertically on desktop.
   Fix: disable wrapping on ecxp-two-col so columns stay side by
   side, and allow them to flex-shrink to absorb the gap space.
   Mobile re-enables wrapping so columns still stack at ≤767px.
   ============================================================ */

/* Desktop: keep columns side by side */
.ecxp-two-col > .e-con-inner {
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

/* Let each column shrink slightly to absorb the gap */
.ecxp-two-col > .e-con-inner > .e-con {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

/* Mobile (≤767px): restore stacking */
@media (max-width: 767px) {
  .ecxp-two-col > .e-con-inner {
    flex-wrap: wrap !important;
  }
  .ecxp-two-col > .e-con-inner > .e-con {
    flex-basis: 100% !important;
    max-width:  100% !important;
    width:      100% !important;
  }
}