/* =====================================================================
   Chameleon Consultancy and Training — brand styling
   Juiced Media, Jun 2026
   Palette: lime #dade43 · black #000 · grey #575757 · teal #1d7363 · white
   ===================================================================== */
:root{
  --c-lime:#dade43;
  --c-lime-dark:#c2c63a;
  --c-black:#000000;
  --c-grey:#575757;
  --c-teal:#1d7363;
  --c-teal-dark:#155a4d;
}

/* ---- Buttons ---- */
/* Primary = lime + black text (matches logo pill) */
.sppb-btn-primary,.btn-primary{
  background-color:var(--c-lime) !important;
  border-color:var(--c-lime) !important;
  color:var(--c-black) !important;
  font-weight:600;
}
.sppb-btn-primary:hover,.sppb-btn-primary:focus,.sppb-btn-primary:active,
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--c-lime-dark) !important;
  border-color:var(--c-lime-dark) !important;
  color:var(--c-black) !important;
}
/* Secondary = teal + white text */
.sppb-btn-default,.sppb-btn-secondary{
  background-color:var(--c-teal) !important;
  border-color:var(--c-teal) !important;
  color:#fff !important;
  font-weight:600;
}
.sppb-btn-default:hover,.sppb-btn-default:focus,.sppb-btn-secondary:hover{
  background-color:var(--c-teal-dark) !important;
  border-color:var(--c-teal-dark) !important;
  color:#fff !important;
}

/* ---- Content links = teal ---- */
#sp-component a:not(.sppb-btn){color:var(--c-teal);}
#sp-component a:not(.sppb-btn):hover{color:var(--c-teal-dark);}

/* ---- Heading accent: lime underline on section H2s ---- */
#sp-component h2.sppb-addon-title{
  padding-bottom:.35em;
  border-bottom:3px solid var(--c-lime);
  display:inline-block;
}

/* ---- Brand accent panels (applied via column class_name) ----
   The cloned columns carry background:#f7f6f6, so colour the inner
   .sppb-column itself (overriding the grey) — not the outer wrapper. */
.sppb-band-lime > .sppb-column,
.sppb-band-lime .sppb-column-addons{
  background:var(--c-lime) !important;
  border-radius:8px;
}
.sppb-band-lime .sppb-column, .sppb-band-lime .sppb-column *{ color:var(--c-black) !important; }

.sppb-band-teal > .sppb-column,
.sppb-band-teal .sppb-column-addons{
  background:var(--c-teal) !important;
  border-radius:8px;
}
.sppb-band-teal .sppb-column,
.sppb-band-teal .sppb-column h1, .sppb-band-teal .sppb-column h2,
.sppb-band-teal .sppb-column h3, .sppb-band-teal .sppb-column p{ color:#fff !important; }
.sppb-band-teal h2.sppb-addon-title{ border-bottom-color:#fff !important; }
/* keep the lime primary button readable inside the teal panel */
.sppb-band-teal .sppb-btn-primary{ color:var(--c-black) !important; }
/* secondary button on teal = white outline (teal-on-teal would be invisible) */
.sppb-band-teal .sppb-btn-default{
  background:transparent !important;
  border-color:#fff !important;
  color:#fff !important;
}
.sppb-band-teal .sppb-btn-default:hover{
  background:#fff !important;
  border-color:#fff !important;
  color:var(--c-teal) !important;
}

/* =====================================================================
   Redesign theme (Figma-inspired) — Jun 2026
   Cream sections + lime bands, bold non-italic headings, pill buttons,
   eyebrow labels, soft cards, icon badges, stat counters.
   ===================================================================== */
:root{ --c-cream:#FBF8F1; }

/* Page background = cream */
#sp-main-body, .body-innerwrapper{ background:var(--c-cream); }

/* Bold, non-italic headings; drop the old lime underline (theme uses eyebrow labels) */
#sp-component .sppb-addon-title{ font-style:normal !important; font-weight:800 !important; }
#sp-component h2.sppb-addon-title{ border-bottom:none !important; padding-bottom:0 !important; display:block; }

/* Pill buttons + arrow */
.sppb-btn{ border-radius:50px !important; padding:12px 26px !important; font-weight:700; }
.sppb-btn-primary::after{ content:" \2197"; font-weight:700; }

/* Eyebrow label (teal, uppercase) */
.eyebrow{ display:block; color:var(--c-teal); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-bottom:.4rem; }

/* Soft white card (apply class to a column) */
.sppb-card-soft .sppb-column-addons{ background:#fff !important; border-radius:18px !important; box-shadow:0 12px 30px rgba(0,0,0,.06); padding:30px !important; }

/* Lime icon badge (inline element in text) */
.icon-badge{ display:inline-flex; width:52px; height:52px; border-radius:14px; background:var(--c-lime); align-items:center; justify-content:center; font-size:24px; margin-bottom:14px; }

/* Stat counters */
.stat-num{ font-size:2.8rem; font-weight:800; color:var(--c-black); line-height:1; }
.stat-label{ color:var(--c-grey); font-size:.95rem; }

/* Rounded images */
#sp-component .sppb-addon-single-image img, .img-rounded img{ border-radius:20px; }
.img-rounded video{ border-radius:20px; width:100%; }

/* Primary button on a lime band = teal (softer + on-brand; lime-on-lime vanishes, black reads too stark) */
.sppb-band-lime .sppb-btn-primary{
  background:var(--c-teal) !important; border-color:var(--c-teal) !important; color:#fff !important;
}
.sppb-band-lime .sppb-btn-primary:hover{ background:var(--c-teal-dark) !important; border-color:var(--c-teal-dark) !important; color:#fff !important; }
/* Secondary button on a lime band = white fill / teal text */
.sppb-band-lime .sppb-btn-default{
  background:#fff !important; border-color:#fff !important; color:var(--c-teal) !important;
}
.sppb-band-lime .sppb-btn-default:hover{ background:transparent !important; border-color:#fff !important; color:#fff !important; }

/* ---- Native icon addon styled as a lime badge inside cards ---- */
.sppb-card-soft .sppb-icon{ text-align:left; }
.sppb-card-soft .sppb-icon-inner{
  display:inline-flex !important; width:58px; height:58px; border-radius:16px;
  align-items:center; justify-content:center; margin-bottom:10px !important;
}

/* ---- Service cards: one container, wrapped rows centred, equal height ---- */
.sppb-row:has(.svc-card){ display:flex !important; flex-wrap:wrap !important;
  justify-content:center !important; align-items:stretch !important; row-gap:24px; }
/* SPPB declares .sppb-row five times, incl. display:table — without forcing flex here,
   justify-content is inert and a wrapped remainder row (3+2, 3+1) sits left-aligned.
   Not visible on the homepage because its 6 cards wrap 3+3 with no remainder. */
.svc-card{ display:flex; }
.svc-card .sppb-column{ display:flex; flex-direction:column; width:100%; }
.svc-card .sppb-column-addons{ display:flex; flex-direction:column; flex:1 1 auto; }
/* pin the "Read more" button to the bottom of every card, flush across the row */
.svc-card .addon-root-text-block{ display:flex; flex-direction:column; flex:1 1 auto; }
.svc-card .addon-root-text-block .clearfix{ display:flex; flex-direction:column; flex:1 1 auto; }
.svc-card .addon-root-text-block .sppb-addon-text-block{ display:flex; flex-direction:column; flex:1 1 auto; }
.svc-card .addon-root-text-block .sppb-addon-content{ display:flex; flex-direction:column; flex:1 1 auto; }
.svc-card .addon-root-text-block .sppb-addon-content p:has(.sppb-btn){ margin-top:auto; margin-bottom:0; }

/* ---- Standardise section spacing — generous breathing room between blocks ---- */
#sp-component .sppb-section{ padding-top:56px !important; padding-bottom:56px !important; }
#sp-component .sppb-column{ padding-top:16px !important; padding-bottom:16px !important; }
/* bands + hero get even more breathing room */
#sp-component .sppb-section:has(.sppb-band-lime),
#sp-component .sppb-section:has(.sppb-band-teal){ padding-top:72px !important; padding-bottom:72px !important; }
/* heading-only sections hug the content that follows (top padding still generous) */
#sp-component .sppb-section:has(.sppb-sec-head){ padding-bottom:0 !important; }
#sp-component .sppb-sec-head{ padding-bottom:0 !important; }
#sp-component .sppb-sec-head .sppb-column-addons{ padding-bottom:0 !important; }
#sp-component .sppb-sec-head .sppb-column{ padding-bottom:0 !important; }
/* space between a section heading and the content row that follows it */
#sp-component .sppb-section:has(.sppb-sec-head) + .sppb-section{ padding-top:28px !important; }
/* trim the oversized default top padding SPPB puts on each addon */
#sp-component .sppb-addon-wrapper > .clearfix{ padding-top:10px !important; }

/* ---- Tighten section-heading → content gap (inline h2 has a big default margin) ---- */
#sp-component .sppb-addon-text h2.sppb-addon-title,
#sp-component .sppb-addon-text h2{ margin:0 0 .2em !important; }

/* ---- Main menu hover/active = brand dark teal (template preset default is blue) ----
   Dropdown-parent items (Services/Courses/Resources) render as <span>, not <a> — need both. */
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span,
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent > li.active:hover > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
#modal-menu .sp-megamenu-parent > li:hover > a,
#modal-menu .sp-megamenu-parent > li:hover > span,
#modal-menu .sp-megamenu-parent > li.active > a,
#modal-menu .sp-megamenu-parent > li.active > span{
  color:var(--c-teal-dark) !important;
}
#sp-component .sppb-addon-text .eyebrow{ margin-bottom:.3rem; }

/* ---- Top bar: dark green with white text/icons ---- */
#sp-topbar, .sp-top-bar{ background-color:#1d7363 !important; }
#sp-topbar, #sp-topbar a, #sp-topbar i, #sp-topbar span, #sp-topbar .sppb-icon-inner{ color:#ffffff !important; }
#sp-topbar a:hover{ color:var(--c-lime) !important; }

/* ---- Footer: dark green with white/light text ---- */
#sp-footer{ background-color:#15564a !important; }
#sp-footer, #sp-footer p, #sp-footer h1, #sp-footer h2, #sp-footer h3, #sp-footer .sp-module-title{ color:#ffffff !important; }
#sp-footer a{ color:#cfe8e1 !important; }
#sp-footer a:hover{ color:var(--c-lime) !important; }
#sp-footer .sppb-icon-inner, #sp-footer i{ color:#ffffff !important; }

/* ---- Footer: ISBL logo + social icons column (right side, top row) ---- */
.footer-isbl-col{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-isbl-logo{ max-width:130px; }
.footer-isbl-logo img{ width:100%; height:auto; }
.footer-isbl-col .sppb-addon-icons-group{ margin-top:20px; width:100%; }
.footer-isbl-col .sppb-icons-group-list{ white-space:nowrap; margin-left:0 !important; }
.footer-isbl-col .sppb-icons-group-list li:first-child{ margin-left:0 !important; }

/* ---- Band eyebrow colours ---- */
.sppb-band-lime .eyebrow{ color:#155a4d; }   /* dark teal on lime */
.sppb-band-teal .eyebrow{ color:var(--c-lime); }  /* lime on teal */

/* ---- Blog feed → soft-card system (match services cards) ----
   NB: column class_name "blog-cards" renders as .sppb-blog-cards (SPPB prefixes first word). */
/* equal-height cards + gutters */
.sppb-blog-cards .sppb-row{ display:flex; flex-wrap:wrap; row-gap:28px; }
.sppb-blog-cards .sppb-addon-article-layout{ display:flex; padding-left:14px; padding-right:14px; }
.sppb-blog-cards .sppb-addon-article{
  background:#fff; border-radius:16px; overflow:hidden; width:100%;
  display:flex; flex-direction:column;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sppb-blog-cards .sppb-addon-article:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.10); }
/* image */
.sppb-blog-cards .sppb-article-img-wrap{ display:block; height:200px; background:var(--c-lime); overflow:hidden; }
.sppb-blog-cards .sppb-article-img-wrap img{ width:100% !important; height:200px !important; object-fit:cover; }
/* body */
.sppb-blog-cards .sppb-article-info-wrap{ padding:24px !important; display:flex; flex-direction:column; flex:1 1 auto; }
.sppb-blog-cards .sppb-article-meta:empty{ display:none; }
.sppb-blog-cards .sppb-article-info-wrap h3{ font-weight:800; font-size:1.12rem; line-height:1.35; margin:0 0 10px; }
#sp-component .sppb-blog-cards .sppb-article-info-wrap h3 a{ color:var(--c-black) !important; }
#sp-component .sppb-blog-cards .sppb-article-info-wrap h3 a:hover{ color:var(--c-teal) !important; }
.sppb-blog-cards .sppb-article-introtext{ color:var(--c-grey); font-size:.95rem; line-height:1.6; margin-bottom:18px; }
/* read more → teal, pushed to card foot for even alignment */
.sppb-blog-cards .sppb-readmore{
  margin-top:auto; align-self:flex-start;
  color:var(--c-teal) !important; font-weight:700; text-decoration:none;
}
.sppb-blog-cards .sppb-readmore::after{ content:" \2192"; }
.sppb-blog-cards .sppb-readmore:hover{ color:var(--c-teal-dark) !important; }

/* ---- Testimonials (Dynamic Content collection card) ---- */
.testimonial-quote-icon{ margin-bottom:6px; }
.testimonial-quote-icon .sppb-icon-inner{ color:var(--c-lime); font-size:26px; display:inline-flex; }
.sppb-dynamic-content-text.testimonial-quote-text{ color:var(--c-black); font-size:1rem; line-height:1.6; font-style:italic; margin:0 0 18px; }
.sppb-dynamic-content-text.testimonial-author{ font-weight:800; margin:0 0 2px; font-style:normal; }
.sppb-dynamic-content-text.testimonial-role, .sppb-dynamic-content-text.testimonial-org{ color:var(--c-grey); font-size:.9rem; }
.sppb-dynamic-content-text.testimonial-org::before{ content:",\00a0"; }
/* role + organisation are two separate addons (block wrappers) — force them onto one line */
.sppb-dynamic-content-collection__item .addon-root-dynamic-content-text:has(.testimonial-role),
.sppb-dynamic-content-collection__item .addon-root-dynamic-content-text:has(.testimonial-org){ display:inline-block; }
.sppb-dynamic-content-collection__item .addon-root-dynamic-content-text:has(.testimonial-role) .clearfix,
.sppb-dynamic-content-collection__item .addon-root-dynamic-content-text:has(.testimonial-org) .clearfix{ display:inline; }

/* ---- Q-001 global fixes: com_content blog polish ---- */
/* category blog: card treatment for article tiles */
.com-content-category-blog .article{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06); padding:0 0 22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.com-content-category-blog .article:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.10); }
.com-content-category-blog .article-intro-image{ float:none !important; margin:0 0 16px; }
.com-content-category-blog .article-intro-image img{ width:100%; height:200px; object-fit:cover; border-radius:0; }
.com-content-category-blog .article-body{ padding:0 22px; }
.com-content-category-blog .article-header h2 a{ color:var(--c-black) !important; font-weight:800; }
.com-content-category-blog .article-header h2 a:hover{ color:var(--c-teal) !important; }
/* single article view: breathing room above the title */
.com-content-article, .item-page{ padding-top:40px; }
.com-content-article .article-intro-image img, .item-page img{ border-radius:16px; max-width:100%; height:auto; }

/* ---- Testimonials page: outcome badge (removed from homepage cards, kept here) ---- */
.sppb-testimonials-page .sppb-dynamic-content-text.testimonial-outcome{ display:block; margin-top:12px; color:var(--c-teal); font-weight:800; font-size:1.3rem; font-style:normal; }

/* ---- Hero balance: cap tall portrait media so the row isn't dominated by it ----
   The income-gen hero pairs a ~795px portrait photo with a ~305px text column,
   leaving ~490px of dead space. Cap the media and centre the row so the two
   columns read as a pair. object-position keeps the face in frame when cropped.
   Column class_name "img-rounded hero-media" -> .sppb-img-rounded .hero-media
   (SPPB prefixes the FIRST word only). */
.hero-media img{
  max-height:520px; width:100%; object-fit:cover; object-position:center 22%;
}
.sppb-row:has(.hero-media){ align-items:center !important; }

/* ---- Article readability: constrain the measure ----
   Blog articles inherited the full container width, giving ~135 characters per
   line against an optimal 50-75. The body sits in an UNCLASSED div inside
   .article-details, so target the element children rather than named classes —
   otherwise the header constrains and the body doesn't, and they misalign.
   Featured image keeps the wider frame; text is centred within it. */
.article-details{ max-width:980px; margin-left:auto; margin-right:auto; }
.article-details > div{ max-width:760px; margin-left:auto; margin-right:auto; }
.article-details .article-full-image{ float:none !important; width:100%; max-width:100%; margin:0 0 32px; }
.article-details .article-full-image img{ width:100%; border-radius:20px; }

/* Q-025: the Videos hub's four item titles were <h5> inside text_blocks, which made the
   page skip h1 -> h5. They are now <h2> so the heading order is correct, but Bootstrap
   renders h2 at ~2rem against h5's 1.25rem — this holds the previous visual size, so the
   heading fix is not also a design change. The hub rebuild is Wave 2. */
.sppb-addon-text-block h2.vid-item-title {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}