.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================================
   [NGO NAME] — BLOG PAGE ELEMENTOR STYLESHEET
   Paste this into: Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS).
   Pairs with blog-elementor-template.json.

   NOTE: Shares design tokens and several component classes (page-hero,
   card, buttons, cta-final, container, tabs, no-pad-top/bottom) with the
   Home, Footer, About, Programs, Our Impact, Campaigns and Events
   stylesheets already built for this site — identical rules where they
   overlap, so all files can be pasted into the same Custom CSS box with
   zero conflicts.

   IMPORTANT — SEARCH + CATEGORY FILTER: the toolbar above the article
   grid is an Elementor HTML widget with an inline <script>. It combines
   category filtering AND live title search, both re-querying
   .blog-card elements fresh on every click/keystroke rather than once
   at load — the same tested pattern used on the Programs and Campaigns
   pages, needed because the toolbar sits above the grid in the document.
   The search only matches against each card's visible title text; it is
   NOT a real backend search.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --green-900:#0B3B2E;
  --green-800:#0E4A38;
  --green-700:#146247;
  --green-600:#1B7A56;

  --orange-600:#D06B24;
  --orange-500:#E8792B;
  --orange-400:#F0954F;

  --ink:#20242A;
  --ink-soft:#565E66;
  --ink-faint:#8A9198;
  --line:#E7E5DE;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-pill:999px;

  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
}

body{overflow-x:hidden;}

/* =========================================================================
   1. GLOBAL TYPE
   ========================================================================= */
.elementor-heading-title{
  font-family:var(--font-display)!important;
  font-weight:700!important;
  color:var(--ink);
  line-height:1.15!important;
  letter-spacing:-.01em;
}
h1.elementor-heading-title{font-size:clamp(30px,4.4vw,46px)!important;}
h2.elementor-heading-title{font-size:clamp(26px,3.2vw,34px)!important;}
h3.elementor-heading-title{font-size:18.5px!important;}
.elementor-widget-text-editor{font-family:var(--font-body);color:var(--ink-soft);font-size:16px;line-height:1.6;}
.elementor-widget-text-editor p{margin:0 0 1em;}
.elementor-widget-text-editor p:last-child{margin-bottom:0;}

.cta-final .elementor-heading-title{color:#fff!important;}
.cta-final .elementor-widget-text-editor{color:rgba(255,255,255,.8);}

.elementor-section{padding-top:96px;padding-bottom:96px;}
.elementor-section.elementor-inner-section{padding-top:0;padding-bottom:0;}
@media (max-width:900px){.elementor-section{padding-top:56px;padding-bottom:56px;}}

/* =========================================================================
   2. LAYOUT / UTILITIES
   ========================================================================= */
.container{max-width:1200px;margin:0 auto!important;padding:0 24px;float:none;}
.container-narrow{max-width:820px;margin:0 auto!important;padding:0 24px;float:none;}
.section-tight{padding-top:40px!important;padding-bottom:8px!important;}
.no-pad-bottom{padding-bottom:0!important;}
.no-pad-top{padding-top:0!important;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green-600);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange-500);display:inline-block;}
.page-hero .eyebrow{color:var(--orange-400);}

.section-head-center{text-align:center;}
.section-head-center .elementor-heading-title{justify-content:center;display:flex;}

/* =========================================================================
   3. PAGE HERO
   ========================================================================= */
.page-hero{
  background:linear-gradient(135deg,var(--green-900),var(--green-700))!important;
  padding-top:70px!important;padding-bottom:60px!important;
}
.page-hero .breadcrumb{font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,.65);margin-bottom:18px;}
.page-hero .breadcrumb a{color:rgba(255,255,255,.65);}
.page-hero .breadcrumb a:hover{color:#fff;}
.page-hero .elementor-heading-title{color:#fff!important;}
.page-hero-lead{color:rgba(234,243,238,.82)!important;font-size:17px!important;max-width:620px;margin-top:14px!important;}

/* =========================================================================
   4. TOOLBAR (category tabs + live search)
   ========================================================================= */
.toolbar-wrap{}
.blog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.tabs{display:flex;gap:10px;flex-wrap:wrap;}
.tab-btn{
  border:1.5px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  padding:10px 20px;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--ink-soft);cursor:pointer;transition:.15s ease;
}
.tab-btn.active,.tab-btn:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.blog-search{min-width:240px;}
.blog-search input{
  width:100%;padding:11px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:14px;color:var(--ink);
}
.blog-search input:focus{outline:none;border-color:var(--green-600);}
@media (max-width:700px){.blog-toolbar{flex-direction:column;align-items:stretch;}.blog-search{min-width:0;}}

/* cat-education / cat-healthcare / cat-csr / cat-events / cat-announcements
   carry no visual styling of their own — they're markers read by the
   toolbar script above to show/hide each card. Left empty intentionally. */
.cat-education,.cat-healthcare,.cat-csr,.cat-events,.cat-announcements{}

/* =========================================================================
   5. FEATURED ARTICLE
   ========================================================================= */
.featured-article{
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff;
}
.featured-article-card.elementor-column > .elementor-widget-wrap{padding:0;}
.featured-article .elementor-column:first-child .elementor-widget-wrap{padding:0;}
.featured-article .elementor-column:last-child .elementor-widget-wrap{padding:36px;justify-content:center;display:flex;flex-direction:column;gap:12px;}
.featured-article-card .card-photo .elementor-widget-container img{
  width:100%;height:100%;min-height:280px;object-fit:cover;display:block;
}
.featured-article-card h2.elementor-heading-title{font-size:26px!important;}
.more .elementor-button{background:transparent!important;border:none!important;padding:0!important;color:var(--green-700)!important;font-size:14px!important;box-shadow:none!important;}
.more .elementor-button:hover{color:var(--orange-500)!important;transform:none!important;}

/* =========================================================================
   6. BLOG CARDS
   ========================================================================= */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;height:100%;}
.card > .elementor-widget-wrap{padding:0 22px 22px;}
.card-photo{margin-bottom:0;}
.card-photo .elementor-widget-container img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;}
.blog-card{border-top:3px solid var(--ink-faint);transition:box-shadow .2s ease,transform .2s ease;}
.blog-card:hover{box-shadow:0 12px 30px -10px rgba(11,59,46,.18);transform:translateY(-3px);}
.blog-meta{
  display:flex;gap:14px;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);margin-top:18px;
}
.card .elementor-heading-title{margin-top:6px;}

/* =========================================================================
   7. PAGINATION
   ========================================================================= */
.pagination{display:flex;justify-content:center;gap:10px;margin-top:44px;}
.page-btn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-soft);cursor:pointer;
}
.page-btn.active{background:var(--green-700);color:#fff;border-color:var(--green-700);}

/* =========================================================================
   8. BUTTONS
   ========================================================================= */
.btn .elementor-button{
  font-family:var(--font-display)!important;font-weight:700!important;
  border-radius:var(--radius-pill)!important;padding:15px 28px!important;
  border:1.5px solid transparent!important;
  transition:transform .15s ease,background .15s ease,color .15s ease!important;
}
.btn .elementor-button:hover{transform:translateY(-2px);}
.btn-lg .elementor-button{padding:18px 36px!important;font-size:16px!important;}

.btn-primary .elementor-button{background:var(--orange-500)!important;color:#fff!important;box-shadow:0 10px 24px -8px rgba(232,121,43,.55);}
.btn-primary .elementor-button:hover{background:var(--orange-600)!important;}

.btn-outline-light .elementor-button{background:transparent!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important;}
.btn-outline-light .elementor-button:hover{background:#fff!important;color:var(--green-800)!important;}

.final-cta-actions .elementor-container{justify-content:center;gap:16px;}

/* =========================================================================
   9. FINAL CTA
   ========================================================================= */
.cta-final{background:var(--green-900)!important;text-align:center;}
.cta-final .elementor-widget-text-editor{max-width:560px;margin:0 auto;}

/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .featured-article .elementor-container{flex-direction:column;}
  .featured-article-card.elementor-column{width:100%!important;}
  .featured-article-card .card-photo .elementor-widget-container img{min-height:220px;}
}/* End custom CSS */