/* =========================
   Theme: Blue + White (NGO)
   ========================= */
:root{
  /* palette */
  --blue-900:#0A3D62;   /* headings, header bg on scroll */
  --blue-700:#0A66C2;   /* brand primary */
  --blue-600:#1E6FDB;   /* primary hover */
  --blue-100:#E8F3FF;   /* sky section bg */
  --blue-050:#F5F9FF;   /* subtle page bg */
  --accent-600:#0F5EC2; /* link focus/outline */
  --text-900:#1F2937;   /* main text */
  --text-700:#374151;   /* secondary text */
  --text-inverse:#ffffff;
  --border:#E5E7EB;

  /* layout */
  --max:1100px;
  --pad:16px;
  --radius:14px;
  --shadow:0 8px 24px rgba(10,102,194,.08);
  --shadow-sm:0 4px 12px rgba(10,61,98,.10);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--blue-050); color:var(--text-900);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; border-radius:10px}
a{color:var(--blue-700); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent-600); outline-offset:2px}

/* layout helpers */
.container{max-width:var(--max); margin:0 auto; padding:28px var(--pad)}
.section{padding:48px 0}
.section.sky{background:var(--blue-100)}
.section.white{background:#fff}
.section .container{padding-top:0; padding-bottom:0}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.82); border-bottom:1px solid rgba(229,231,235,.6);
}
.nav{max-width:var(--max); margin:0 auto; padding:12px var(--pad);
  display:flex; gap:14px; align-items:center}
.brand{margin-right:auto; font-weight:800; letter-spacing:.2px; color:var(--blue-900)}
.nav a{color:var(--text-700)}
.nav a.btn-primary{color:var(--text-inverse)}

/* hero */
.hero{
  padding:64px var(--pad); border-radius:22px;
  background:linear-gradient(135deg, #FFFFFF 0%, #F7FAFF 40%, #E8F3FF 100%);
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.hero h1{font-size: clamp(28px, 4vw, 42px); line-height:1.15; margin:0 0 12px}
.hero p{font-size: clamp(16px, 2.2vw, 18px); color:var(--text-700); margin:0 0 20px}
.actions{display:flex; gap:12px; flex-wrap:wrap}

/* cards + grids */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm)
}
.card h3{margin:0 0 8px}
.stats{display:flex; gap:24px; list-style:none; padding:0; margin:0}
.stats li{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-sm)}
.stats strong{font-size:20px; color:var(--blue-900); display:block}

/* buttons */
.btn,.btn-outline,.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--blue-700); color:var(--text-inverse)}
.btn-primary:hover{background:var(--blue-600); transform:translateY(-1px)}
.btn-outline{border-color:var(--blue-700); color:var(--blue-700); background:transparent}
.btn-outline:hover{background:#fff; transform:translateY(-1px)}

/* footer */
.footer{max-width:var(--max); margin:0 auto; padding:24px var(--pad); color:var(--text-700)}
.footer a{color:inherit}

/* typography rhythm */
h1,h2,h3{line-height:1.2}
h2{font-size: clamp(22px, 3vw, 30px); margin:0 0 12px}

.form-label{display:block; font-weight:600; margin:12px 0 6px}
.form-input,.form-textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; font:inherit;
}
.form-input:focus,.form-textarea:focus{outline:3px solid var(--accent-600); outline-offset:2px}

.site-header {
  border-bottom: 1px solid #eee;
}



/* */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  height: 36px;   /* control header height */
  width: auto;
  display: block;
}

.brand-text {
  font-weight: 600;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}


.site-header .brand-logo {
  height: 36px !important;
  width: auto !important;
  max-height: 36px !important;
  max-width: 160px !important;
  border-radius: 0 !important;
}