:root{
  --primary:#1a5276;
  --secondary:#2e86c1;
  --accent:#e67e22;
  --light:#ecf0f1;
  --dark:#2c3e50;
  --text:#333;
}

body{font-family:'Open Sans',sans-serif;color:var(--text);line-height:1.6;background:var(--light)}

/* Dark mode overrides when html has class 'dark' */
html.dark{
  --background: #071017;
  --primary: #145a73; /* slightly tweaked for contrast */
  --secondary: #1f6f92;
  --accent: #f39c4a;
  --light: #0b1620;
  --dark: #041018;
  --text: #e6eef6;
}

html.dark body{background:var(--light);color:var(--text)}

/* Floating dark-mode toggle */
.dark-toggle{position:fixed;right:18px;bottom:18px;z-index:2000;width:44px;height:44px;border-radius:50%;border:none;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 18px rgba(2,6,23,0.35);cursor:pointer}
.dark-toggle:focus{outline:none;box-shadow:0 0 0 3px rgba(226,126,34,0.18)}

/* Header / Navigation */
header{background:var(--primary);color:white;position:sticky;top:0;z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.header-container{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo h1{margin:0;font-size:1.15rem;color:white}
.logo span{color:var(--accent)}
nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;align-items:center}
nav li{margin:0}
nav a{color:white;text-decoration:none;padding:8px 10px;border-radius:6px;transition:background 0.18s,color 0.18s}
nav a:hover,nav a:focus{background:rgba(255,255,255,0.08);color:white;outline:none}
nav a.btn{background:var(--accent);color:white;padding:8px 14px;font-weight:700}
nav a.btn:hover{filter:brightness(0.98)}

/* Generic button utility used throughout the site (hero CTAs, mission, footer, etc.) */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  background:var(--accent);
  color:white;
  transition:background 0.18s, transform 0.12s;
}
.btn:hover{filter:brightness(0.98)}
.btn[role="button"]:focus-visible{box-shadow:0 0 0 3px rgba(226,126,34,0.18);outline:none}

/* Accessible focus ring */
nav a:focus-visible{box-shadow:0 0 0 3px rgba(226,126,34,0.18);outline:none}

/* Mobile header adjustments (keep nav hidden on small screens but ensure header padding stays tight) */
@media (max-width:768px){
  .header-container{padding:10px 16px}
  nav ul{display:none}
}

/* Hero styles (moved from index.html) */
.hero{background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('/assets/images/hero.jpg');background-size:cover;background-position:center;height:80vh;display:flex;align-items:center;color:#fff;margin-top:80px}
.hero-content{max-width:700px}
.hero h2{font-size:3rem;color:#fff;margin-bottom:1.5rem}
.hero p{font-size:1.2rem;margin-bottom:2rem}
.hero-quote{font-size:1.6rem;font-style:italic;color:#fff;margin:0 0 1.25rem 0;padding:0;background:transparent;border-left:4px solid rgba(255,255,255,0.15);padding-left:1rem;line-height:1.4}
.hero-quote footer{margin-top:0.5rem;font-style:normal;font-size:0.9rem;color:rgba(255,255,255,0.85);background:transparent !important;padding:0 !important;margin:0.5rem 0 0 0 !important;display:inline-block}

/* Mobile adjustments */
@media (max-width: 768px){
  .hero{height:60vh;margin-top:70px}
  .hero h2{font-size:2.2rem}
  .hero-quote{font-size:1.15rem;padding-left:0.6rem;border-left-width:3px}
  .hero p{font-size:1rem}
}

@media (max-width: 480px){
  .hero{height:55vh;margin-top:60px}
  .hero h2{font-size:1.6rem}
  .hero-quote{font-size:1rem;padding-left:0.5rem}
  .hero p{font-size:0.95rem}
}

/* Remaining site styles moved from index.html to avoid raw code showing in head */
.mission{padding:80px 0;background-color:var(--light);text-align:center}
.mission h2{font-size:2.5rem;margin-bottom:2rem}
.mission-content{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:40px}
.mission-text{flex:1;text-align:left}
.mission-image{flex:1;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1)}
.mission-image img{width:100%;height:auto;display:block}

/* Mission Section */
.mission {
  padding: 80px 0;
  background-color: var(--light);
  text-align: center;
}

.mission h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.mission-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}

.mission-text {
  flex: 1;
  text-align: left;
}

.mission-image {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mission-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Programs Section */
.programs {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.5rem;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.section-header h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--accent);
}

.program-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.program-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

/* Dark-mode appearance for program cards: invert card background and
   make text light for readability while refining shadows */
html.dark .program-card {
  background: #0b1220;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

/* Ensure typical content inside the card inherits readable text color */
html.dark .program-card .program-content,
html.dark .program-card h3,
html.dark .program-card p,
html.dark .program-card li {
  color: var(--text);
}

/* Slightly dim images to sit better on the darker card */
html.dark .program-image img { filter: brightness(0.92); }

/* Dark-mode appearance for partner cards to match program cards */
html.dark .partner-card {
  background: #0b1220;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

html.dark .partner-card h3,
html.dark .partner-card p {
  color: var(--text);
}

/* Slightly dim partner icons/images to sit better on dark background */
html.dark .partner-icon { filter: brightness(0.95); color: var(--accent); }

.program-card:hover {
  transform: translateY(-10px);
}

.program-image {
  height: 200px;
  overflow: hidden;
}

.program-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.program-card:hover .program-image img {
  transform: scale(1.1);
}

.program-content {
  padding: 25px;
}

.program-content h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

/* Partners Section */
.partners {
  padding: 80px 0;
  background-color: var(--light);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.partner-card {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

.partner-card:hover {
  transform: translateY(-5px);
}

.partner-icon {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 20px;
}

.partner-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

/* Impact Section */
.impact {
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.stat-item {
  text-align: center;
  padding: 30px;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 10px;
}

.stat-text {
  font-weight: 600;
  color: var(--dark);
}

/* Improve contrast for stat labels in dark mode */
html.dark .stat-text {
  /* use the global readable text color in dark mode */
  color: var(--text) !important;
  font-weight: 700; /* slightly bolder for clarity */
}

/* CTA Section */
.cta {
  padding: 80px 0;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: white;
  text-align: center;
}

.cta h2 {
  color: white;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cta p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 30px;
}

.btn-light {
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  background-color: white;
  color: var(--primary);
}

.btn-light:hover {
  background-color: var(--light);
}

/* Donation CTA */
.donate {
  padding: 60px 0;
  background: linear-gradient(135deg, #e74c3c 0%, #ff9f43 100%);
  color: white;
  text-align: center;
}

.donate h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 15px;
}

.donate p {
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.95);
}

.btn-donate {
  background-color: white;
  color: #e74c3c;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.btn-donate:hover {
  background-color: #fff5f0;
}

/* Footer */
footer {
  background-color: var(--dark);
  color: white;
  padding: 60px 0 30px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--accent);
}

.footer-column p, .footer-column a {
  color: #ccc;
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
  transition: color 0.3s;
}

/* Small screens */
@media (max-width: 768px) {
  .mission-content {
    flex-direction: column;
  }

  .program-image { height: 180px; }
}

/* Styles moved from about.html to central stylesheet */
body{font-family:'Open Sans',sans-serif;color:#333;padding:40px;max-width:1000px;margin:0 auto}
h1{font-family:'Montserrat',sans-serif;color:#1a5276}
.hero{margin-top:20px}
/* Make the about image fully visible and responsive. Remove cropping and let the image scale. */
.about-image{width:100%;border-radius:8px}
.about-image img{width:100%;height:auto;display:block;object-fit:contain}
@media (max-width:600px){body{padding:20px}}
.programs{padding:80px 0}
.section-header{text-align:center;margin-bottom:50px}
.section-header h2{font-size:2.5rem;position:relative;display:inline-block;padding-bottom:15px}
.section-header h2:after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background-color:var(--accent)}
.program-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.program-card{background-color:white;border-radius:8px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s}
.program-card:hover{transform:translateY(-10px)}
.program-image{height:200px;overflow:hidden}
.program-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.program-card:hover .program-image img{transform:scale(1.1)}
.program-content{padding:25px}
.program-content h3{font-size:1.5rem;margin-bottom:15px}
.partners{padding:80px 0;background-color:var(--light)}
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:50px}
.partner-card{background-color:white;padding:30px;border-radius:8px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,0.05);transition:transform 0.3s}
.partner-card:hover{transform:translateY(-5px)}
.partner-icon{font-size:3rem;color:var(--primary);margin-bottom:20px}
.partner-card h3{font-size:1.5rem;margin-bottom:15px}
.impact{padding:80px 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-top:50px}
.stat-item{text-align:center;padding:30px}
.stat-number{font-size:3rem;font-weight:800;color:var(--accent);margin-bottom:10px}
.stat-text{font-weight:600;color:var(--dark)}
.cta{padding:80px 0;background:linear-gradient(to right,var(--primary),var(--secondary));color:white;text-align:center}
.cta h2{color:white;font-size:2.5rem;margin-bottom:20px}
.cta p{font-size:1.2rem;max-width:700px;margin:0 auto 30px}
.btn-light{background-color:white;color:var(--primary)}
.btn-light:hover{background-color:var(--light)}
.donate{padding:60px 0;background:linear-gradient(135deg,#e74c3c 0%,#ff9f43 100%);color:white;text-align:center}
.donate h2{color:white;font-size:2rem;margin-bottom:15px}
.donate p{max-width:900px;margin:0 auto 20px;font-size:1.05rem;color:rgba(255,255,255,0.95)}
.btn-donate{background-color:white;color:#e74c3c;padding:12px 28px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block}
.btn-donate:hover{background-color:#fff5f0}
footer{background-color:var(--dark);color:white;padding:60px 0 30px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}
.footer-column h3{color:white;font-size:1.5rem;margin-bottom:20px;position:relative;padding-bottom:10px}
.footer-column h3:after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background-color:var(--accent)}
.footer-column p,.footer-column a{color:#ccc;margin-bottom:10px;display:block;text-decoration:none;transition:color 0.3s}
.footer-column a:hover{color:white}
.social-links{display:flex;gap:15px;margin-top:20px}
.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:rgba(255,255,255,0.1);border-radius:50%;transition:background-color 0.3s}
.social-links a:hover{background-color:var(--accent)}
.copyright{text-align:center;padding-top:30px;border-top:1px solid rgba(255,255,255,0.1);color:#999;font-size:0.9rem}
@media (max-width:992px){.mission-content{flex-direction:column}.hero h2{font-size:2.5rem}}
@media (max-width:768px){nav ul{display:none}.hero{height:60vh}.hero h2{font-size:2rem}.section-header h2{font-size:2rem}}

/* Final override: ensure program cards invert correctly in dark mode even if base rules appear later */
html.dark .program-card{
  background: #0b1220 !important;
  color: var(--text) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.7) !important;
}
html.dark .program-card .program-content,
html.dark .program-card h3,
html.dark .program-card p,
html.dark .program-card li,
html.dark .program-card a{
  color: var(--text) !important;
}
html.dark .program-image img{filter:brightness(0.9) !important}