/*
 * PMI CTA Engage — cta.css v1.0.0
 *
 * Measurements from reference screenshot:
 *
 * SECTION
 *   bg:              #ffffff (pure white)
 *   padding:         80px top / 80px bottom
 *
 * HEADING (centered)
 *   "Engage with Uganda's Project Management Authority"
 *   font-size:       37px
 *   font-weight:     800
 *   color:           #0d1f3c (same very dark navy as Partnerships heading)
 *   text-align:      center
 *   margin-bottom:   40px
 *   letter-spacing:  -0.02em
 *
 * 3 EQUAL BUTTONS (side-by-side, centred)
 *   "Become a Member" | "Partner With Us" | "Explore Certifications"
 *   bg:              #0f2d58 (deep navy)
 *   color:           #ffffff
 *   width:           ~265px each (equal, fixed)
 *   height:          ~72px
 *   font-size:       15px
 *   font-weight:     600
 *   border-radius:   4px
 *   border:          none
 *   gap:             16px
 *   hover:           #1a4a82 (slightly lighter navy)
 */

/* ── Scope & reset ─────────────────────────────────────────────────────────── */
.pmicta-section,
.pmicta-section *,
.pmicta-section *::before,
.pmicta-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_cta_engage .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmicta-section),
.e-con:has(.pmicta-section) {
  padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
}

/* ── Section wrapper ────────────────────────────────────────────────────────── */
.pmicta-section {
  background-color: #ffffff;
  padding-top:    80px;
  padding-bottom: 80px;
  width:          100%;
  display:        block;
}

/* ── Inner container ─────────────────────────────────────────────────────────── */
.pmicta-inner {
  width:      100%;
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 32px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   HEADING — centered, dark navy, very heavy
   Same colour as Partnerships heading (#0d1f3c).
══════════════════════════════════════════════════════════════════ */
.pmicta-heading {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      37px;
  font-weight:    800;
  line-height:    1.10;
  letter-spacing: -0.02em;
  color:          #0d1f3c;
  text-align:     center;
  margin-bottom:  40px;
  /* WP guard */
  text-transform: none;
  border:  none;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTON ROW — 3 equal navy buttons, centred
   Each button is a fixed width (~265px) and 72px tall.
   Gap between: 16px.
══════════════════════════════════════════════════════════════════ */
.pmicta-buttons {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  flex-wrap:       wrap;
}

.pmicta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;

  /* Fixed equal size matching screenshot */
  width:           265px;
  height:          72px;
  padding:         0 20px;

  background:      #0f2d58;   /* deep PMI navy — measured */
  border:          none;
  border-radius:   4px;

  color:           #ffffff;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       15px;
  font-weight:     600;
  letter-spacing:  0.01em;
  line-height:     1.25;
  text-align:      center;
  text-decoration: none;
  white-space:     normal;    /* allow wrapping on small widths */
  cursor:          pointer;

  transition:
    background-color 0.18s ease,
    transform        0.15s ease,
    box-shadow       0.18s ease;
}

.pmicta-btn:hover {
  background-color: #1a4a82;  /* slightly lighter navy on hover */
  transform:        translateY(-2px);
  box-shadow:       0 6px 20px rgba(15, 45, 88, 0.35);
}

.pmicta-btn:active {
  transform:        translateY(0);
  box-shadow:       none;
}

.pmicta-btn:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */

/* ≤ 1100px */
@media (max-width: 1100px) {
  .pmicta-inner   { padding: 0 24px; }
  .pmicta-heading { font-size: 31px; margin-bottom: 36px; }
  .pmicta-section { padding-top: 68px; padding-bottom: 68px; }
}

/* ≤ 900px — buttons shrink slightly */
@media (max-width: 900px) {
  .pmicta-heading { font-size: 26px; }
  .pmicta-btn     { width: 220px; height: 64px; font-size: 14px; }
  .pmicta-section { padding-top: 56px; padding-bottom: 56px; }
}

/* ≤ 700px — 1 column button stack */
@media (max-width: 700px) {
  .pmicta-inner   { padding: 0 20px; }
  .pmicta-section { padding-top: 48px; padding-bottom: 48px; }
  .pmicta-heading { font-size: 22px; margin-bottom: 28px; }
  .pmicta-buttons { flex-direction: column; align-items: center; gap: 12px; }
  .pmicta-btn     { width: 100%; max-width: 320px; height: 60px; }
}

/* ≤ 420px */
@media (max-width: 420px) {
  .pmicta-inner   { padding: 0 16px; }
  .pmicta-heading { font-size: 20px; }
  .pmicta-btn     { font-size: 13.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pmicta-btn { transition: none; transform: none !important; }
}