/*
Theme Name: Best Pathways for Growth
Theme URI: https://bestpathways.com
Description: Custom child theme for Best Pathways for Growth, based on Hello Elementor. Brand structure and typography — colours fully controlled via Elementor widget settings.
Author: Best Pathways for Growth
Template: hello-elementor
Version: 4.0.0
Text Domain: bpfg
*/

/* ============================================================
   BEST PATHWAYS FOR GROWTH — v4.0
   ============================================================
   PHILOSOPHY: This stylesheet handles STRUCTURE only
   (backgrounds, borders, padding, layout, typography).
   ALL TEXT COLOURS are controlled by the user via Elementor's
   widget Style tab. Nothing in this stylesheet uses !important
   on any text colour. You have full control.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bpfg-purple: #3D2B7A;
  --bpfg-orange: #F07B24;
  --bpfg-white:  #FFFFFF;
  --bpfg-cream:  #FDF8F3;
}

/* ============================================================
   TYPOGRAPHY — Montserrat everywhere, no forced colours
   ============================================================ */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-description,
p, li, span, div, a, input, textarea, button {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}

/* ============================================================
   SECTION BACKGROUNDS — structure only
   ============================================================ */
.bpfg-hero-bg {
  background: var(--bpfg-purple);
  position: relative;
  overflow: hidden;
}
.bpfg-hero-bg::before {
  content: '';
  position: absolute;
  top: -200px; right: -150px;
  width: 600px; height: 600px;
  background: var(--bpfg-orange);
  opacity: 0.12;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bpfg-hero-bg::after {
  content: '';
  position: absolute;
  bottom: -200px; left: -150px;
  width: 500px; height: 500px;
  background: var(--bpfg-orange);
  opacity: 0.08;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bpfg-hero-bg > .elementor-container { position: relative; z-index: 1; }

.bpfg-deep-purple-bg {
  background: var(--bpfg-purple);
}

.bpfg-cta-bg {
  background: var(--bpfg-orange);
  position: relative;
  overflow: hidden;
}
.bpfg-cta-bg::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: var(--bpfg-white);
  opacity: 0.1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bpfg-cta-bg > .elementor-container { position: relative; z-index: 1; }

.bpfg-cream-bg { background-color: var(--bpfg-cream); }

/* ============================================================
   IMAGE STYLES (structure only)
   ============================================================ */
.bpfg-hero-photo img,
.bpfg-arch-photo img {
  border-radius: 220px 220px 30px 30px;
  border: 6px solid var(--bpfg-orange);
  box-shadow: 0 20px 50px rgba(61, 43, 122, 0.4);
  max-width: 380px;
}
.bpfg-arch-photo img {
  border-radius: 220px 30px 220px 30px;
  max-width: 420px;
}
.bpfg-rounded-img img {
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(61, 43, 122, 0.15);
}
.bpfg-img-thumb img {
  height: 200px;
  object-fit: cover;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
}
.bpfg-badge-img {
  background: var(--bpfg-white);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(61, 43, 122, 0.1);
  margin-bottom: 24px;
}
.bpfg-badge-img img { max-width: 240px; }

/* ============================================================
   CARD BACKGROUNDS (no text colours — all user-controlled)
   ============================================================ */
.bpfg-card > .elementor-element-populated {
  background: var(--bpfg-white);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 8px 24px rgba(61, 43, 122, 0.1);
  border-top: 5px solid var(--bpfg-orange);
  transition: all 0.3s ease;
}
.bpfg-card-purple > .elementor-element-populated {
  background: var(--bpfg-white);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 8px 24px rgba(61, 43, 122, 0.1);
  border-top: 5px solid var(--bpfg-purple);
  transition: all 0.3s ease;
}
.bpfg-card > .elementor-element-populated:hover,
.bpfg-card-purple > .elementor-element-populated:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(61, 43, 122, 0.2);
}

.bpfg-card-purple-solid > .elementor-element-populated {
  background: var(--bpfg-purple);
  border-radius: 16px;
  padding: 36px 32px;
}

.bpfg-test-card > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 40px;
  border-radius: 16px;
  border-left: 5px solid var(--bpfg-orange);
  box-shadow: 0 5px 20px rgba(61, 43, 122, 0.1);
}
.bpfg-test-card-purple > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 40px;
  border-radius: 16px;
  border-left: 5px solid var(--bpfg-purple);
  box-shadow: 0 5px 20px rgba(61, 43, 122, 0.1);
}

.bpfg-glass-card > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bpfg-pillar-card > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.1);
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bpfg-cred-card .elementor-icon-box-wrapper {
  background: var(--bpfg-white);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid var(--bpfg-orange);
  margin-bottom: 14px;
}
.bpfg-cred-card-purple .elementor-icon-box-wrapper {
  background: var(--bpfg-white);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid var(--bpfg-purple);
  margin-bottom: 14px;
}

.bpfg-why-card > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 32px 22px;
  border-radius: 14px;
  border-bottom: 4px solid var(--bpfg-orange);
  transition: all 0.3s ease;
}
.bpfg-why-card-purple > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 32px 22px;
  border-radius: 14px;
  border-bottom: 4px solid var(--bpfg-purple);
  transition: all 0.3s ease;
}
.bpfg-why-card > .elementor-element-populated:hover,
.bpfg-why-card-purple > .elementor-element-populated:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(61, 43, 122, 0.15);
}

.bpfg-process-card > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.1);
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bpfg-form-card > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 48px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(61, 43, 122, 0.15);
  border-top: 6px solid var(--bpfg-orange);
}

.bpfg-method-card .elementor-icon-box-wrapper {
  background: var(--bpfg-white);
  padding: 36px 32px;
  border-radius: 16px;
  border-top: 5px solid var(--bpfg-orange);
  box-shadow: 0 8px 24px rgba(61, 43, 122, 0.1);
}
.bpfg-method-card-purple .elementor-icon-box-wrapper {
  background: var(--bpfg-white);
  padding: 36px 32px;
  border-radius: 16px;
  border-top: 5px solid var(--bpfg-purple);
  box-shadow: 0 8px 24px rgba(61, 43, 122, 0.1);
}
.bpfg-method-card .elementor-icon,
.bpfg-method-card-purple .elementor-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bpfg-info-block .elementor-icon-box-wrapper {
  background: var(--bpfg-cream);
  padding: 32px;
  border-radius: 16px;
  border-left: 5px solid var(--bpfg-orange);
  margin-bottom: 16px;
}
.bpfg-info-block-purple .elementor-icon-box-wrapper {
  background: var(--bpfg-cream);
  padding: 32px;
  border-radius: 16px;
  border-left: 5px solid var(--bpfg-purple);
  margin-bottom: 16px;
}

.bpfg-download-card .elementor-icon-box-wrapper {
  background: var(--bpfg-purple);
  padding: 32px;
  border-radius: 16px;
}

.bpfg-disc-card > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px;
  border-radius: 20px;
}

.bpfg-faq-item > .elementor-element-populated {
  background: var(--bpfg-cream);
  border-radius: 14px;
  padding: 24px 28px;
  border-left: 5px solid var(--bpfg-orange);
  margin-bottom: 16px;
}
.bpfg-faq-item-purple > .elementor-element-populated {
  background: var(--bpfg-cream);
  border-radius: 14px;
  padding: 24px 28px;
  border-left: 5px solid var(--bpfg-purple);
  margin-bottom: 16px;
}

.bpfg-client-pill > .elementor-element-populated {
  background: var(--bpfg-cream);
  padding: 24px 20px;
  border-radius: 10px;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}
.bpfg-client-pill > .elementor-element-populated:hover {
  background: var(--bpfg-white);
  border-bottom-color: var(--bpfg-orange);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(61, 43, 122, 0.15);
}

/* ============================================================
   PROGRAMME PAGE BADGES & QUICK FACTS
   ============================================================ */
.bpfg-badge-orange .elementor-heading-title {
  background: var(--bpfg-orange);
  padding: 8px 22px;
  border-radius: 30px;
  display: inline-block;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.bpfg-badge-purple .elementor-heading-title {
  background: var(--bpfg-purple);
  padding: 8px 22px;
  border-radius: 30px;
  display: inline-block;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.bpfg-qf-card > .elementor-element-populated {
  background: var(--bpfg-cream);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 3px solid var(--bpfg-orange);
}
.bpfg-qf-card-purple > .elementor-element-populated {
  background: var(--bpfg-white);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 3px solid var(--bpfg-purple);
}

.bpfg-audience-pill {
  display: inline-block;
  background: var(--bpfg-cream);
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid var(--bpfg-orange);
}
.bpfg-audience-pill-purple {
  display: inline-block;
  background: var(--bpfg-cream);
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid var(--bpfg-purple);
}

.bpfg-cat-tag .elementor-heading-title {
  background: var(--bpfg-orange);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
}
.bpfg-cat-tag-purple .elementor-heading-title {
  background: var(--bpfg-purple);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
}

.bpfg-tag-pill {
  display: inline-block;
  background: var(--bpfg-white);
  padding: 8px 18px;
  border-radius: 30px;
  border: 2px solid var(--bpfg-orange);
  margin: 0 6px 8px 0;
}
.bpfg-tz-pill {
  display: inline-block;
  background: var(--bpfg-white);
  padding: 10px 24px;
  border-radius: 30px;
  border: 2px solid var(--bpfg-orange);
}

.bpfg-center { text-align: center; }

/* ============================================================
   BUTTONS — backgrounds and borders, NO forced text colours
   You control text colour through Elementor button widget Style tab
   ============================================================ */

/* Reset wrapper to prevent double borders */
.elementor-widget-button > .elementor-widget-container {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Primary button — orange fill */
.bpfg-btn-primary .elementor-button {
  background: var(--bpfg-orange);
  padding: 16px 30px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 0;
  transition: all 0.3s ease;
}
.bpfg-btn-primary .elementor-button:hover {
  background: var(--bpfg-purple);
  transform: translateY(-2px);
}

/* Purple solid button */
.bpfg-btn-purple .elementor-button {
  background: var(--bpfg-purple);
  padding: 16px 30px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 0;
  transition: all 0.3s ease;
}
.bpfg-btn-purple .elementor-button:hover {
  background: var(--bpfg-orange);
  transform: translateY(-2px);
}

/* White button (used on orange or purple backgrounds) */
.bpfg-btn-white .elementor-button {
  background: var(--bpfg-white);
  padding: 16px 30px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 0;
  transition: all 0.3s ease;
}
.bpfg-btn-white .elementor-button:hover {
  background: var(--bpfg-purple);
  transform: translateY(-2px);
}

/* Outline white — single border */
.bpfg-btn-outline-white .elementor-button {
  background: transparent;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid var(--bpfg-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.bpfg-btn-outline-white .elementor-button:hover {
  background: var(--bpfg-white);
}
/* On purple background, outline button uses orange border */
.bpfg-hero-bg .bpfg-btn-outline-white .elementor-button,
.bpfg-deep-purple-bg .bpfg-btn-outline-white .elementor-button {
  border-color: var(--bpfg-orange);
}
.bpfg-hero-bg .bpfg-btn-outline-white .elementor-button:hover,
.bpfg-deep-purple-bg .bpfg-btn-outline-white .elementor-button:hover {
  background: var(--bpfg-orange);
}

/* Outline purple — single border */
.bpfg-btn-purple-outline .elementor-button {
  background: transparent;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid var(--bpfg-purple);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.bpfg-btn-purple-outline .elementor-button:hover {
  background: var(--bpfg-purple);
}

/* ============================================================
   WPFORMS — structural styling only
   ============================================================ */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  background: var(--bpfg-cream);
  border: 2px solid var(--bpfg-cream);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  transition: all 0.2s;
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
  border-color: var(--bpfg-orange);
  background: var(--bpfg-white);
  outline: none;
}
.wpforms-container .wpforms-form label.wpforms-field-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wpforms-container .wpforms-form button[type="submit"] {
  background: var(--bpfg-orange);
  padding: 16px 38px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}
.wpforms-container .wpforms-form button[type="submit"]:hover {
  background: var(--bpfg-purple);
  transform: translateY(-2px);
}

/* ============================================================
   QUOTE BLOCKS (structural)
   ============================================================ */
.bpfg-quote-block .elementor-widget-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-left: 4px solid var(--bpfg-orange);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.bpfg-pullquote .elementor-widget-container {
  background: var(--bpfg-cream);
  border-left: 5px solid var(--bpfg-orange);
  padding: 24px 28px;
  font-style: italic;
  border-radius: 0 12px 12px 0;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 767px) {
  .bpfg-hero-photo img,
  .bpfg-arch-photo img {
    max-width: 280px;
  }
  .bpfg-form-card > .elementor-element-populated {
    padding: 32px 24px;
  }
}