/*
Theme Name: Cmens Impact Microfinance
Theme URI: https://example.com/cmens-impact
Author: Cmens Impact
Author URI: https://example.com
Description: A clean, fast WordPress theme for Cmens Impact Microfinance (Green • Gold • Black). Built to coordinate with custom plugins for services, training, advisory, and loan features.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: cmens-impact
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: microfinance, business, responsive, accessibility-ready, custom-colors
*/

/* -----------------------------
   Brand tokens & base settings
--------------------------------*/
:root{
  --ci-green: #16a34a;   /* primary brand green */
  --ci-gold:  #d4af37;   /* brand gold */
  --ci-black: #000000;   /* brand black */
  --ci-text:  #111827;   /* dark gray text */
  --ci-muted: #6b7280;   /* subdued text */
  --ci-bg:    #ffffff;   /* page background */
  --ci-maxw:  1200px;    /* content width */
  --ci-radius: 16px;
  --ci-gap: 1.25rem;
  --ci-shadow: 0 8px 24px rgba(0,0,0,.08);
}

html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;
  font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ci-text);
  background:var(--ci-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto}
a{color:var(--ci-green);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}

/* Containers */
.container{
  width:100%;
  max-width:var(--ci-maxw);
  margin:0 auto;
  padding:0 1rem;
}

/* Utility */
.btn{
  display:inline-block;
  padding:.75rem 1.25rem;
  border-radius:9999px;
  font-weight:600;
  border:2px solid transparent;
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ci-green);color:#fff}
.btn-outline{background:transparent;border-color:var(--ci-green);color:var(--ci-green)}
.btn-gold{background:var(--ci-gold);color:#000}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid #eef0f2;
}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand__logo{width:44px;height:auto}
.brand__name{font-weight:800;letter-spacing:.2px}
.brand__tag{font-size:.875rem;color:var(--ci-muted)}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{font-weight:600;color:var(--ci-black)}
.nav .cta{margin-left:.5rem}

/* Hero (front page) */
.hero{
  background:linear-gradient(180deg, rgba(22,163,74,.08), rgba(212,175,55,.06));
  padding:4rem 0;
}
.hero h1{font-size:clamp(2rem,3.6vw,3rem);margin:.25rem 0 .5rem}
.hero p{max-width:56ch;color:#374151}
.hero .actions{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* Section blocks */
.section{padding:3rem 0}
.section h2{font-size:clamp(1.5rem,2.6vw,2.25rem);margin:0 0 1rem}
.cards{display:grid;gap:var(--ci-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:#fff;border:1px solid #eef0f2;border-radius:var(--ci-radius);
  padding:1.25rem;box-shadow:var(--ci-shadow);
}
.card h3{margin:.25rem 0 .5rem}
.card p{margin:0}

/* Footer */
.site-footer{
  background:#0b0b0b;color:#d1d5db;margin-top:2rem;padding:2.5rem 0 2rem;
  border-top:4px solid var(--ci-gold);
}
.site-footer a{color:#d1d5db}
.footer-top{display:grid;gap:var(--ci-gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer-bottom{margin-top:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:9999px;background:rgba(212,175,55,.18);color:#fff}

/* Accessibility helpers */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--ci-gold);outline-offset:2px}