/* Kitso Lesedi — Elementor Widgets stylesheet
   Mobile-first throughout: base rules target phones, larger screens are
   added back in via min-width media queries. Every hardcoded colour here
   is the FALLBACK — matching Elementor Style-tab control overrides win. */

/* Defensive full-width overrides — some themes constrain .entry-content /
   .site-content / #content even when a page uses Elementor's "Full Width"
   template, which squeezes Elementor sections into a narrow column with
   empty space beside them instead of spanning the viewport. Scoped to
   body.elementor-page (a class Elementor itself adds) so this can never
   affect regular blog/post pages built without Elementor. If a page is
   STILL narrow after this, the real constraint is a selector this list
   doesn't cover — open DevTools, inspect the empty space, and find what
   class is actually setting the max-width, then add it below. */
body.elementor-page .entry-content,
body.elementor-page .site-content,
body.elementor-page #content,
body.elementor-page .content-area,
body.elementor-page main.site-main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:root{
  --kls-green:#7CC68D;
  --kls-green-deep:#4F9B63;
  --kls-yellow:#F9D900;
  --kls-orange:#F4A000;
  --kls-soft-green:#B4D69E;
  --kls-soft-green-tint:#EEF6EA;
  --kls-charcoal:#2C2C2C;
  --kls-white:#FFFFFF;
  --kls-radius:18px;
  --kls-shadow:0 10px 30px rgba(44,44,44,0.10);
  --kls-shadow-hover:0 16px 36px rgba(44,44,44,0.16);
}

.kls-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* Universal guard against the flex/grid overflow bug found in this
   version's images: browsers default flex/grid ITEMS to min-width:auto,
   meaning they refuse to shrink below their content's intrinsic size —
   for an unconstrained <img>, that intrinsic size can be thousands of
   pixels, blowing the whole layout sideways. Overriding min-width to 0
   on every element this plugin renders removes that failure mode
   everywhere at once, not just in the two spots it was actually seen. */
[class^="kls-"], [class*=" kls-"] { min-width: 0; }
img{ max-width:100%; height:auto; }

.kls-center{ text-align:center; }
.kls-kicker{ color:var(--kls-green-deep); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12.5px; margin-bottom:8px; }
.kls-section-head{ text-align:center; max-width:600px; margin:0 auto 34px; }
.kls-section-head h2{ font-size:clamp(24px,4vw,30px); margin:0 0 8px; }
.kls-section-head p{ color:#666; font-size:15px; line-height:1.6; }
.kls-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--kls-soft-green-tint); color:var(--kls-green-deep); border:1px solid var(--kls-soft-green); font-weight:600; font-size:12.5px; padding:6px 13px; border-radius:999px; }
.kls-badge::before{ content:"●"; color:var(--kls-yellow); font-size:9px; }

img{ max-width:100%; display:block; }
a{ -webkit-tap-highlight-color: transparent; }

/* ===================== HERO SLIDESHOW ===================== */
.kls-hero{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(480px, 92svh, 780px);
  display:flex; align-items:flex-end;
  color:#fff;
}
.kls-hero-slides{ position:absolute; inset:0; z-index:0; }
.kls-hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
  animation:kls-kenburns 12s ease-in-out infinite alternate;
}
.kls-hero-slide.is-active{ opacity:1; z-index:1; }
@keyframes kls-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.kls-hero-overlay{
  position:absolute; inset:0; z-index:2; opacity:0.64;
  background:linear-gradient(180deg, rgba(44,44,44,0.42) 0%, rgba(44,44,44,0.62) 55%, rgba(44,44,44,0.90) 100%);
}
.kls-hero-content{ position:relative; z-index:3; padding:0 20px 76px; width:100%; }
.kls-hero .kls-badge-hero{ background:rgba(249,217,0,0.16); color:var(--kls-yellow); border-color:rgba(249,217,0,0.4); margin-bottom:18px; }
.kls-hero h1{
  font-size:clamp(32px, 8vw, 64px); line-height:1.08; margin:0 0 16px; font-weight:700;
  max-width:16ch; text-wrap:balance;
}
.kls-hero .sub{ font-size:clamp(15px,2.4vw,18px); max-width:46ch; line-height:1.6; margin:0 0 26px; opacity:0.95; }
.kls-hero-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--kls-yellow); color:var(--kls-charcoal); font-weight:700; text-decoration:none;
  padding:15px 28px; border-radius:999px; font-size:15.5px; min-height:48px;
  box-shadow:0 10px 26px rgba(249,217,0,0.35); transition:transform .18s ease, box-shadow .18s ease;
}
.kls-hero-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(249,217,0,0.45); }
.kls-hero-dots{ position:absolute; z-index:3; right:24px; bottom:26px; display:flex; gap:8px; }
.kls-hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; }
.kls-hero-dot.is-active{ background:var(--kls-yellow); width:22px; border-radius:5px; transition:width .25s ease; }
.kls-hero-scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  width:22px; height:34px; border:2px solid rgba(255,255,255,0.6); border-radius:14px;
  display:none;
}
.kls-hero-scroll-cue::after{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff; animation:kls-cue 1.8s infinite;
}
@keyframes kls-cue{ 0%{ opacity:1; top:6px; } 100%{ opacity:0; top:18px; } }

@media(min-width:600px){
  .kls-hero-content{ padding-bottom:92px; }
  .kls-hero-scroll-cue{ display:block; }
}
@media(min-width:900px){
  .kls-hero-content{ padding-left:60px; padding-bottom:110px; }
}
@media (prefers-reduced-motion: reduce){
  .kls-hero-slide{ animation:none; }
  .kls-hero-scroll-cue::after{ animation:none; }
}

/* ===================== SKILLS TICKER ===================== */
.kls-ticker-band{ background:var(--kls-yellow); overflow:hidden; padding:12px 0; }
.kls-ticker-track{ display:flex; width:max-content; animation-name:kls-scroll-left; animation-timing-function:linear; animation-iteration-count:infinite; }
.kls-ticker-item{ font-weight:700; color:var(--kls-charcoal); font-size:14px; white-space:nowrap; padding:0 22px; display:inline-flex; align-items:center; gap:22px; }
.kls-ticker-dot{ font-size:8px; opacity:.5; }
@keyframes kls-scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================== OBJECTIVE LIST ===================== */
.kls-objective-list{ padding:56px 0; }
.kls-obj-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.kls-obj-item{ display:flex; align-items:center; gap:14px; background:var(--kls-soft-green-tint); border-radius:14px; padding:16px 18px; }
.kls-obj-icon{ flex:none; width:40px; height:40px; border-radius:10px; background:var(--kls-green); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:inherit; }
.kls-obj-label{ font-weight:600; font-size:15px; }
@media(min-width:640px){ .kls-obj-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .kls-obj-grid{ grid-template-columns:repeat(4,1fr); } }

/* ===================== ABOUT TEASER ===================== */
.kls-about-teaser{ padding:60px 0; }
.kls-about-teaser-inner{ max-width:640px; text-align:center; margin:0 auto; }
.kls-about-teaser h2{ font-size:clamp(24px,4vw,32px); margin:0 0 14px; }
.kls-about-teaser .kls-body{ font-size:15.5px; line-height:1.7; color:#555; margin:0 0 22px; }
.kls-link-cta{ display:inline-block; border-bottom:2px solid; padding-bottom:3px; font-weight:700; text-decoration:none; color:var(--kls-green-deep); }

/* ===================== STAT BLOCK ===================== */
.kls-stat-block{ background:var(--kls-green-deep); padding:44px 0; }
.kls-stat-grid{ display:grid; grid-template-columns:1fr; gap:26px; text-align:center; }
.kls-stat-value{ font-size:clamp(28px,6vw,38px); font-weight:700; color:#fff; }
.kls-stat-label{ font-size:13.5px; color:var(--kls-soft-green); margin-top:4px; }
@media(min-width:640px){ .kls-stat-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===================== STORY SPOTLIGHT ===================== */
.kls-story-spotlight{ padding:60px 0; }
.kls-story-inner{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; max-width:820px; margin:0 auto; }
.kls-story-photo{ aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--kls-soft-green); max-width:260px; margin:0 auto; }
.kls-story-photo img{ width:100%; height:100%; object-fit:cover; }
.kls-quote-mark{ font-family:Georgia,serif; font-size:60px; color:var(--kls-green); line-height:.6; margin-bottom:6px; }
.kls-quote{ font-size:18px; line-height:1.6; font-weight:500; margin:0 0 14px; }
.kls-name{ font-weight:700; color:var(--kls-green-deep); }
.kls-role{ font-size:13.5px; color:#777; }
@media(min-width:720px){ .kls-story-inner{ grid-template-columns:220px 1fr; text-align:left; } .kls-story-photo{ margin:0; } }

/* ===================== PARTNERS PILLS ===================== */
.kls-partners-pills{ padding:44px 0; background:var(--kls-soft-green-tint); }
.kls-pill-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:16px; max-width:900px; margin-left:auto; margin-right:auto; }
.kls-pill-item{ background:#fff; border-radius:999px; padding:10px 24px; font-size:13.5px; font-weight:600; box-shadow:var(--kls-shadow); display:inline-flex; align-items:center; justify-content:center; min-height:56px; box-sizing:border-box; }
.kls-pill-item.has-logo{ padding:10px 26px; }
.kls-pill-item img{ height:30px; width:auto; max-width:150px; object-fit:contain; display:block; }
@media(min-width:900px){ .kls-pill-item img{ height:34px; max-width:170px; } .kls-pill-item{ padding:12px 30px; min-height:64px; } }

/* ===================== CTA BANNER ===================== */
.kls-cta-wrap{ padding:50px 0 70px; }
.kls-cta-banner{ background:var(--kls-green-deep); border-radius:24px; padding:44px 26px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.kls-cta-banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(249,217,0,0.22), transparent 45%); }
.kls-cta-banner h2{ position:relative; font-size:clamp(22px,4.5vw,28px); margin:0 0 18px; }
.kls-cta-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; background:var(--kls-yellow); color:var(--kls-charcoal); font-weight:700; text-decoration:none; padding:14px 26px; border-radius:999px; font-size:15px; min-height:46px; transition:transform .15s ease; }
.kls-cta-btn:hover{ transform:translateY(-2px); }

/* ===================== PAGE HEADER (full-bleed banner hero) ===================== */
.kls-page-header{ position:relative; overflow:hidden; isolation:isolate; min-height:clamp(280px, 42vw, 440px); display:flex; align-items:flex-end; color:#fff; }
.kls-page-header-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.kls-page-header-overlay{ position:absolute; inset:0; z-index:1; opacity:0.6; background:linear-gradient(180deg, rgba(44,44,44,0.35) 0%, rgba(44,44,44,0.55) 55%, rgba(44,44,44,0.85) 100%); }
.kls-page-header-inner{ position:relative; z-index:2; padding:28px 0 44px; min-width:0; max-width:720px; }
.kls-page-header .kls-badge{ background:rgba(249,217,0,0.16); color:var(--kls-yellow); border-color:rgba(249,217,0,0.4); margin-bottom:16px; }
.kls-page-header h1{ font-size:clamp(30px,6vw,46px); line-height:1.12; margin:0 0 14px; max-width:16ch; }
.kls-page-header .sub{ max-width:52ch; color:#F2F2F2; font-size:clamp(15px,2vw,17px); line-height:1.6; margin:0; }
@media(min-width:640px){ .kls-page-header-inner{ padding-bottom:56px; } }

/* ===================== VISION & MISSION ===================== */
.kls-vm-section{ padding:44px 0; }
.kls-vm-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.kls-vm-card{ border-radius:22px; padding:32px 26px; color:#fff; position:relative; overflow:hidden; }
.kls-vm-card.vision{ background:linear-gradient(135deg, var(--kls-green-deep), var(--kls-green)); }
.kls-vm-card.mission{ background:linear-gradient(135deg, var(--kls-charcoal), #454545); }
.kls-vm-tag{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-bottom:12px; }
.kls-vm-card h3{ font-size:clamp(20px,3.4vw,24px); line-height:1.3; margin:0 0 14px; font-weight:600; }
.kls-vm-card p{ font-size:14.5px; line-height:1.65; opacity:.92; margin:0; }
.kls-vm-quote{ position:absolute; right:20px; top:6px; font-size:70px; font-family:Georgia,serif; opacity:.14; }
@media(min-width:760px){ .kls-vm-grid{ grid-template-columns:1fr 1fr; } }

/* ===================== STEP SEQUENCE (wired signature motif) ===================== */
.kls-step-sequence{ padding:56px 0; }
.kls-wire-track{ position:relative; }
.kls-wire-grid{ display:grid; grid-template-columns:1fr; gap:22px; position:relative; z-index:1; }
.kls-step-node{ text-align:left; }
.kls-step-marker{
  width:60px; height:60px; border-radius:15px; background:#fff; border:2px solid var(--kls-green);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:19px;
  color:var(--kls-green-deep); margin-bottom:14px; position:relative; box-shadow:var(--kls-shadow);
}
.kls-step-marker::after{ content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:var(--kls-yellow); }
.kls-step-node h3{ font-size:16.5px; margin:0 0 6px; }
.kls-step-node p{ font-size:13.5px; color:#666; line-height:1.55; margin:0; }
@media(min-width:640px){ .kls-wire-count-4{ grid-template-columns:repeat(2,1fr); } .kls-wire-count-5{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){
  .kls-wire-count-4{ grid-template-columns:repeat(4,1fr); }
  .kls-wire-count-5{ grid-template-columns:repeat(5,1fr); }
  .kls-wire-track::before{
    content:""; position:absolute; top:29px; left:6%; right:6%; height:2px;
    background-image:linear-gradient(to right, var(--kls-green) 0 8px, transparent 8px 16px);
    background-size:16px 2px; background-repeat:repeat-x; z-index:0;
  }
}

/* ===================== CONTENT BLOCK ===================== */
.kls-content-block{ padding:50px 0; overflow-x:hidden; }
.kls-cb-inner{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.kls-cb-inner > *{ min-width:0; max-width:100%; }
.kls-cb-inner.has-image.image-left{ flex-direction:column-reverse; }
.kls-cb-image{ width:100%; }
.kls-cb-image img{ display:block; width:100%; border-radius:20px; aspect-ratio:4/3; object-fit:cover; }
.kls-cb-text h2{ font-size:clamp(22px,4vw,28px); margin:0 0 14px; }
.kls-cb-body{ font-size:15px; line-height:1.75; color:#4a4a4a; }
.kls-cb-body p{ margin:0 0 14px; }
@media(min-width:820px){
  .kls-cb-inner.has-image{ flex-direction:row; align-items:center; }
  .kls-cb-inner.has-image.image-left{ flex-direction:row; }
  .kls-cb-inner.has-image .kls-cb-image{ flex:1 1 0; min-width:0; }
  .kls-cb-inner.has-image .kls-cb-text{ flex:1 1 0; min-width:0; }
}

/* ===================== WISHLIST CAROUSEL ===================== */
.kls-wishlist-section{ padding:56px 0 10px; }
.kls-wishlist-section h2{ font-size:clamp(20px,3.6vw,26px); margin:6px 0 0; }
.kls-wishlist-band{ background:#fff; border-top:1.5px solid var(--kls-charcoal); border-bottom:1.5px solid var(--kls-charcoal); overflow:hidden; padding:26px 0; margin-top:22px; }
.kls-wishlist-track{ display:flex; width:max-content; animation-name:kls-scroll-left; animation-timing-function:linear; animation-iteration-count:infinite; }
.kls-wishlist-track img{ height:60px; width:auto; margin:0 34px; }

/* ===================== SPONSOR LOGOS ===================== */
.kls-sponsors-section{ padding:50px 0 60px; }
.kls-sponsor-grid{ display:grid; grid-template-columns:1fr; gap:16px; max-width:760px; margin:0 auto; }
.kls-sponsor-card{ background:#fff; border:2px solid var(--kls-charcoal); border-radius:16px; height:120px; display:flex; align-items:center; justify-content:center; padding:18px; transition:transform .18s ease, box-shadow .18s ease; }
.kls-sponsor-card:hover{ transform:translateY(-5px); box-shadow:7px 7px 0 var(--kls-charcoal); }
.kls-sponsor-card img{ max-height:60px; max-width:100%; object-fit:contain; }
@media(min-width:640px){ .kls-sponsor-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===================== FUNDER HIGHLIGHT ===================== */
.kls-funder-highlight{ padding:54px 0; }
.kls-funder-inner{ text-align:center; max-width:520px; margin:0 auto; }
.kls-funder-logo{ max-width:280px; margin:0 auto 20px; }
.kls-funder-highlight h2{ font-size:clamp(20px,3.6vw,26px); margin:0 0 12px; }
.kls-funder-highlight p{ font-size:14.5px; line-height:1.65; color:#555; }

/* ===================== FUNDING INFO (bank details + email request) ===================== */
.kls-funding-info{ padding:50px 0; max-width:520px; text-align:center; }
.kls-funding-info h2{ font-size:clamp(20px,3.6vw,26px); margin:6px 0 22px; }
.kls-funding-card{ background:#fff; border-radius:18px; padding:26px 28px; box-shadow:var(--kls-shadow); text-align:left; margin-bottom:22px; }
.kls-funding-card dl{ margin:0; }
.kls-funding-card dt{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--kls-green-deep); margin-top:12px; }
.kls-funding-card dt:first-child{ margin-top:0; }
.kls-funding-card dd{ margin:2px 0 0; font-size:15px; color:var(--kls-charcoal); }
.kls-funding-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--kls-yellow); color:var(--kls-charcoal); font-weight:700; text-decoration:none; padding:14px 28px; border-radius:999px; font-size:15px; transition:transform .15s ease; }
.kls-funding-btn:hover{ transform:translateY(-2px); }

/* ===================== EXPLORE GRID (Home teaser cards) ===================== */
.kls-explore-grid{ padding:56px 0; }
.kls-explore-track{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:10px; }
.kls-explore-card{
  position:relative; display:block; min-height:220px; border-radius:20px; overflow:hidden;
  background-size:cover; background-position:center; text-decoration:none; box-shadow:var(--kls-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.kls-explore-card:hover{ transform:translateY(-4px); box-shadow:var(--kls-shadow-hover); }
.kls-explore-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(44,44,44,0.15) 0%, rgba(44,44,44,0.8) 100%); }
.kls-explore-text{ position:absolute; left:0; right:0; bottom:0; padding:22px; color:#fff; }
.kls-explore-card h3{ font-size:19px; margin:0 0 4px; }
.kls-explore-card p{ font-size:13.5px; color:#F2F2F2; margin:0; opacity:.9; }
.kls-explore-arrow{ display:inline-block; margin-top:10px; font-weight:700; color:var(--kls-yellow); }
@media(min-width:640px){ .kls-explore-track{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .kls-explore-track{ grid-template-columns:repeat(4,1fr); } .kls-explore-card{ min-height:280px; } }

/* ===================== PROGRAMS GRID ===================== */
.kls-programs-section{ padding:56px 0; background:var(--kls-soft-green-tint); }
.kls-prog-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.kls-prog-card{ background:#fff; border-radius:var(--kls-radius); overflow:hidden; box-shadow:var(--kls-shadow); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; position:relative; }
.kls-prog-card:hover{ transform:translateY(-5px); box-shadow:var(--kls-shadow-hover); }
.kls-prog-img{ aspect-ratio:4/5; overflow:hidden; background:var(--kls-soft-green); }
.kls-prog-img img{ width:100%; height:100%; object-fit:cover; }
.kls-prog-missing{ height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; border:2px dashed #c9c9c9; color:#999; font-size:12.5px; text-align:center; }
.kls-prog-missing span{ font-size:26px; }
.kls-prog-body{ padding:16px; flex:1; display:flex; flex-direction:column; }
.kls-prog-card h3{ font-size:15.5px; margin:0 0 6px; line-height:1.3; }
.kls-prog-card p{ font-size:13px; color:#666; line-height:1.5; margin:0; flex:1; }
.kls-pill{ align-self:flex-start; margin-top:12px; font-size:11.5px; font-weight:700; background:var(--kls-yellow); color:var(--kls-charcoal); padding:5px 10px; border-radius:999px; }
.kls-prog-card-link{ position:absolute; inset:0; z-index:2; }
@media(min-width:640px){ .kls-prog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .kls-prog-grid{ grid-template-columns:repeat(5,1fr); } }

/* Accessibility: visible keyboard focus everywhere */
a:focus-visible, button:focus-visible{ outline:3px solid var(--kls-orange); outline-offset:2px; }