/* ===== THEME TOKENS ===== */
:root{
  --cbg-primary:#6EAF6F;
  --cbg-primary-600:#4A8C52;
  --cbg-accent:#E53935;
  --cbg-dark:#4A2C15;
  --cbg-muted:#667085;
  --cbg-bg:#f7faf9;
  --cbg-white:#fff;
  --cbg-card:#fff;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,32,22,.08);
}

/* ===== BASE (scoped) ===== */
.cbg *{ box-sizing:border-box }
.cbg{ color:var(--cbg-dark) }
.cbg .container{ max-width:1140px; margin:0 auto; padding:0 20px }
.cbg .eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--cbg-primary) }
.cbg .lead{ font-size:1.15rem; color:var(--cbg-muted) }
.cbg .btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; border:0; padding:.9rem 1.25rem; font-weight:700; text-decoration:none; transition:all .2s ease }
.cbg .btn-primary{ background:var(--cbg-primary); color:var(--cbg-white) }
.cbg .btn-primary:hover{ background:var(--cbg-primary-600) }
.cbg .btn-ghost{ background:transparent; color:var(--cbg-primary); border:2px solid var(--cbg-primary) }

.cbg .section{ position:relative; padding:60px 0 }
.cbg .hero{
  padding:100px 0 60px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--cbg-primary) 12%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cbg-bg) 0%, transparent) 0%, var(--cbg-bg) 60%, var(--cbg-white) 100%);
}
.cbg .alt{ background:var(--cbg-white) }
.cbg .grid{ display:grid; gap:24px }
.cbg .two-col{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:900px){ .cbg .two-col{ grid-template-columns:1fr } }

.cbg .card{ background:var(--cbg-card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px }

.cbg .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
@media (max-width:900px){ .cbg .kpis{ grid-template-columns:repeat(2,1fr) } }
.cbg .kpi{ background:var(--cbg-card); border-radius:14px; box-shadow:var(--shadow); padding:22px; text-align:center }
.cbg .kpi h3{ margin:0; font-size:2rem; color:var(--cbg-primary) }

.cbg .program-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
@media (max-width:1100px){ .cbg .program-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .cbg .program-grid{ grid-template-columns:1fr } }
.cbg .program{ padding:26px; border-radius:16px; background:var(--cbg-card); box-shadow:var(--shadow) }
.cbg .program h4{ margin:.25rem 0 }

.cbg .badge{
  display:inline-block; border-radius:999px;
  background:color-mix(in srgb, var(--cbg-primary) 12%, transparent);
  color:var(--cbg-primary); padding:.3rem .7rem; font-weight:600; font-size:.85rem
}

.cbg .donor-split{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px }
@media (max-width:900px){ .cbg .donor-split{ grid-template-columns:1fr } }

.cbg .progress{ height:8px; background:color-mix(in srgb, var(--cbg-bg) 70%, var(--cbg-white)); border-radius:999px; overflow:hidden }
.cbg .progress>i{ display:block; height:100%; background:var(--cbg-primary) }

.cbg .logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center; opacity:.75 }
@media (max-width:900px){ .cbg .logos{ grid-template-columns:repeat(3,1fr) } }
.cbg .logo{ background:var(--cbg-card); border-radius:12px; box-shadow:var(--shadow); height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden }

/* ===== KPIs (standalone widget) ===== */
.cbg-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
@media (max-width:900px){ .cbg-kpis{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .cbg-kpis{ grid-template-columns:1fr } }
.cbg-kpi{ background:var(--cbg-card); border-radius:14px; box-shadow:var(--shadow); padding:22px; text-align:center }
.cbg-kpi h3{ margin:0; font-size:2rem; color:var(--cbg-primary) }

/* ===== DONATE (scoped) ===== */
.cbg-donate { /* inherit tokens; can override if needed */ }
.cbg-donate .container{ max-width:1140px; margin:0 auto; padding:0 20px }

.cbg-donor-split{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px }
@media (max-width:900px){ .cbg-donor-split{ grid-template-columns:1fr } }

.cbg-card{ background:var(--cbg-card); border-radius:16px; box-shadow:var(--shadow); padding:28px }
.cbg-donate .eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--cbg-primary) }
.cbg-h3{ margin:.25rem 0 1rem }
.cbg-h4{ margin:.2rem 0 .6rem }
.cbg-donate .lead{ font-size:1.15rem; color:var(--cbg-muted) }

.cbg-btnrow{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 }
.cbg-donate .btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; border:0; padding:.9rem 1.25rem; font-weight:700; text-decoration:none }
.cbg-donate .btn-primary{ background:var(--cbg-primary); color:var(--cbg-white) }
.cbg-donate .btn-primary:hover{ background:var(--cbg-primary-600) }
.cbg-donate .btn-ghost{ background:transparent; color:var(--cbg-primary); border:2px solid var(--cbg-primary) }

.cbg-card-nested{ background:color-mix(in srgb, var(--cbg-bg) 80%, var(--cbg-white)); box-shadow:none; border-radius:14px }
.cbg-ul{ margin:.5rem 0 0; padding-left:1.2rem }
.cbg-ul li{ margin:.25rem 0 }

.cbg-mini-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px }
.cbg-mini-kpis .kpi{ background:var(--cbg-card); border-radius:14px; box-shadow:var(--shadow); padding:22px; text-align:center }
.cbg-mini-kpis .kpi h3{ margin:0; font-size:1.6rem; color:var(--cbg-primary) }

.cbg-footnote{ font-size:.95rem; color:var(--cbg-muted); margin-top:12px }

/* ===== HERO WIDGET ===== */
.cbg-hero{
  position:relative; padding:18px 0 80px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--cbg-primary) 12%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cbg-bg) 0%, transparent) 0%, var(--cbg-bg) 60%, var(--cbg-white) 100%);
}
.cbg-hero .elementor-container.two-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:center }
@media (max-width:900px){ .cbg-hero .elementor-container.two-col{ grid-template-columns:1fr } }

.cbg-hero .eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--cbg-primary) }
.cbg-hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:.5rem 0 1rem; color:var(--cbg-dark) }
.cbg-hero .lead{ font-size:1.15rem; color:var(--cbg-muted) }

.cbg-hero .btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; border:0; padding:.9rem 1.25rem; font-weight:700; text-decoration:none; transition:all .2s ease }
.cbg-hero .btn-primary{ background:var(--cbg-primary); color:var(--cbg-white) }
.cbg-hero .btn-primary:hover{ background:var(--cbg-primary-600) }
.cbg-hero .btn-ghost{ background:transparent; color:var(--cbg-primary); border:2px solid var(--cbg-primary) }

.cbg-hero .badge{ display:inline-block; border-radius:999px; background:color-mix(in srgb, var(--cbg-primary) 12%, transparent); color:var(--cbg-primary); padding:.3rem .7rem; font-weight:600; font-size:.85rem }

.cbg-hero .card{ background:var(--cbg-card); border-radius:16px; box-shadow:var(--shadow); overflow:hidden }
.cbg-hero .card strong{ display:block; font-weight:600; margin-bottom:.3rem }

.cbg-hero .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:28px }
@media (max-width:900px){ .cbg-hero .kpis{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .cbg-hero .kpis{ grid-template-columns:1fr } }

.cbg-hero .kpi{ background:var(--cbg-card); border-radius:14px; box-shadow:var(--shadow); padding:22px; text-align:center }
.cbg-hero .kpi h3{ margin:0; font-size:2rem; color:var(--cbg-primary) }

/* ===== WOW (DISABLED) ===== */
.cbg-wow{ opacity:1 !important; transform:none !important; transition:none !important; }
body.elementor-editor-active .cbg-wow{ opacity:1 !important; transform:none !important }

/* ===== Front Banner ===== */
.cbg-banner{
  position:relative; display:grid; align-items:center; padding:80px 0;
  background-size:cover; background-position:center; overflow:hidden; color:var(--cbg-white);
}
.cbg-banner__overlay{ position:absolute; inset:0; background:#000; opacity:.45 }
.cbg-banner .cbg-banner__inner{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:14px;
}
/* alignment modes */
.cbg-banner .align-left{ align-items:flex-start; text-align:left }
.cbg-banner .align-center{ align-items:center; text-align:center }
.cbg-banner .align-right{ align-items:flex-end; text-align:right }
/* Headings & subheading */
.cbg-banner h1{
  font-size:clamp(2.2rem,4.5vw,3.5rem); line-height:1.15; margin:.5rem 0 1rem;
  color:var(--cbg-white); text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.cbg-banner .lead{ font-size:1.25rem; color:var(--cbg-white); text-shadow:0 1px 4px rgba(0,0,0,.5) }
/* Buttons */
.cbg-banner .cbg-btnrow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; align-self:auto }

/* ===== Banner Buttons (scoped + z-index fix for theme hover bubble) ===== */
.cbg-banner .theme-btn.btn-style-one,
.cbg-banner .theme-btn.btn-style-two{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
  padding:.9rem 1.25rem; font-weight:700; text-decoration:none; transition:all .25s ease;
}
.cbg-banner .btn-style-one,
.cbg-banner .btn-style-two{ position:relative; overflow:hidden }
.cbg-banner .btn-style-one::before,
.cbg-banner .btn-style-two::before{ z-index:0 !important }
.cbg-banner .btn-style-one .txt,
.cbg-banner .btn-style-two .txt,
.cbg-banner .btn-style-two i{ position:relative; z-index:2 !important }
.cbg-banner .btn-style-one {
  color: #fff;
}
.cbg-banner .btn-style-two{
  background-color: rgb(228 181 107);

}
/* ===== Fancy Cards (Responsive) ===== */
.cbg-fancy{ position:relative }
.cbg-fancy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(240px, 28vw, 380px), 1fr));
  gap:clamp(12px, 2vw, 24px);
  align-items:stretch;
}
/* card base */
.cbg-fancy-card{
  background:var(--cbg-card); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; display:grid; grid-template-rows:auto 1fr;
  transition:transform .2s ease, box-shadow .2s ease; min-height:100%;
}
.cbg-fancy-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.10) }
.cbg-fancy-grid.style-outlined .cbg-fancy-card{ box-shadow:none; border:1px solid color-mix(in srgb, var(--cbg-dark) 10%, transparent) }
.cbg-fancy-grid.style-flat .cbg-fancy-card{ box-shadow:none }
/* media */
.cbg-fancy-card .media{ position:relative; aspect-ratio:16/10; background:var(--cbg-bg) }
.cbg-fancy-card .media img{ width:100%; height:100%; object-fit:cover; display:block }
.cbg-fancy-card .media i{ position:absolute; inset:auto 0 0 0; height:8px; display:block; background:var(--accent, var(--cbg-primary)) }
/* content */
.cbg-fancy-card .content{ padding:clamp(14px, 2.2vw, 20px); display:grid; gap:10px }
.cbg-fancy-card .eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:var(--cbg-primary) }
.cbg-fancy-card .icon{ font-size:20px; color:var(--cbg-primary) }
.cbg-fancy-card .title{ margin:.2rem 0; line-height:1.2; color:var(--cbg-dark); font-size:clamp(1.05rem, 1.4vw, 1.25rem) }
.cbg-fancy-card .text{ color:var(--cbg-muted); margin:0; font-size:clamp(.95rem, 1.2vw, 1rem) }
/* actions + theme button bubble fix */
.cbg-fancy-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.cbg-fancy .btn-style-one::before,
.cbg-fancy .btn-style-two::before{ z-index:0 !important }
.cbg-fancy .btn-style-one .txt,
.cbg-fancy .btn-style-two .txt,
.cbg-fancy .btn-style-two i{ position:relative; z-index:2 !important }
/* touch: no hover lift */
@media (hover:none){ .cbg-fancy-card:hover{ transform:none } }
/* ===== Story / Impact tokens ===== */
.cbg-story { position: relative; }
.cbg-story .grid.two-col { align-items: center; }

/* (Optional) order helpers if you swap inline styles later */
.cbg-story.image-left  .cbg-story__media { order: 1; }
.cbg-story.image-left  .cbg-story__text  { order: 2; }
.cbg-story.image-right .cbg-story__text  { order: 1; }
.cbg-story.image-right .cbg-story__media { order: 2; }

/* Quote block */
.cbg-quote {
  position: relative;
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  font-style: italic;
  color: var(--cbg-dark);
}
.cbg-quote::before {
  content: "“";
  position: absolute;
  left: 0; top: -2px;
  font-size: 2rem;
  line-height: 1;
  color: var(--cbg-primary);
}
.cbg-quote__author {
  font-weight: 700;
  margin: .25rem 0 1rem;
  color: var(--cbg-dark);
}

/* Figure / Image */
.cbg-figure { margin: 0; }
.cbg-figure img {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.cbg-figcaption {
  font-size: .9rem;
  color: var(--cbg-muted);
  margin-top: .5rem;
}

/* Button hover-bubble safety inside Story */
.cbg-story .btn-style-one::before,
.cbg-story .btn-style-two::before { z-index: 0 !important; }
.cbg-story .btn-style-one .txt,
.cbg-story .btn-style-two .txt,
.cbg-story .btn-style-two i { position: relative; z-index: 2 !important; }

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

/* Contact Card Background */
.cbg.section .card {
  background-color: #f4faf6;       /* soft green tint */
  border: 1px solid #d3e9db;       /* subtle green border */
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Inputs & Textareas */
.cbg.section .form-control,
.wpcf7 form .form-control {
  border: 1px solid #c8e6c9;       /* soft green border */
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  padding: 10px 14px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus State */
.cbg.section .form-control:focus,
.wpcf7 form .form-control:focus {
  border-color: #859086;           /* stronger green on focus */
  box-shadow: 0 0 0 2px rgba(129,199,132,0.2);
  outline: none;
}

/* Submit Button (optional green accent) */
.cbg.section .theme-btn.btn-style-two,
.wpcf7 form input[type="submit"].theme-btn {
  background-color: #81c784;       /* soft green */
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cbg.section .theme-btn.btn-style-two:hover,
.wpcf7 form input[type="submit"].theme-btn:hover {
  background-color: #66bb6a;       /* slightly darker on hover */
}

.contact-tagline {
  font-size: .6rem;
  color: #313431;       /* soft green to match your theme */
  font-weight: 500;
  line-height: 1.4;
}
/* Contact Card with transparent edges */
.cbg.section .card {
  background: rgba(255, 255, 255, 0.85); /* semi-transparent white */
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border: 1px solid rgba(129, 199, 132, 0.3); /* soft green with transparency */
  backdrop-filter: blur(6px); /* glassy effect */
}

/* Inputs & Textareas with transparent borders */
.cbg.section .form-control,
.wpcf7 form .form-control {
  border: 1px solid rgba(129,199,132,0.4); /* soft green border, transparent */
  border-radius: 10px;
  background-color: rgba(255,255,255,0.75); /* semi-transparent bg */
  padding: 12px 14px;
  font-size: 16px;
  color: #333;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}

/* On focus, stronger green border & subtle glow */
.cbg.section .form-control:focus,
.wpcf7 form .form-control:focus {
  border-color: rgba(76,175,80,0.8);
  box-shadow: 0 0 12px rgba(129,199,132,0.35);
  outline: none;
  background-color: rgba(255,255,255,0.9);
}


/* Default grid (desktop/tablet) */
.cbg.section .container.grid.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Ensure form controls stretch */
.cbg.section .form-control,
.wpcf7 form .form-control {
  width: 100%;
  box-sizing: border-box;
}

/* Cards default */
.cbg.section .card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(129,199,132,0.3);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
}

/* ===== Small screens ===== */
@media (max-width: 768px) {
  /* stack cards */
  .cbg.section .container.grid.two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* make cards full width */
  .cbg.section .card {
    width: 100%;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
  }

  /* inputs full width */
  .cbg.section .form-control,
  .wpcf7 form .form-control {
    width: 100% !important;
    max-width: 100%;
  }

  /* collapse 2-column form fields */
  .cbg.section .row.two > .form-group,
  .cbg.section .row .col-md-6 {
    flex: 1 1 100%;
    width: 100%;
  }

  /* button full width */
  .cbg.section .theme-btn.btn-style-two,
  .wpcf7 form input[type="submit"].theme-btn {
    width: 100%;
    text-align: center;
    display: block;
  }
}

/* ===== Very small screens ===== */
@media (max-width: 480px) {
  .cbg.section .card {
    padding: 16px;
    border-radius: 12px;
  }
}