/* Benet Mosop — public site styles (on top of Bootstrap 5) */

:root {
  --forest-50: #f2f8f2;
  --forest-100: #dcedde;
  --forest-200: #b9dbbe;
  --forest-300: #8ac394;
  --forest-600: #256b3a;
  --forest-700: #1e5530;
  --forest-800: #1a4529;
  --forest-900: #163923;
  --forest-950: #0b2013;

  --earth-50: #fbf6ee;
  --earth-100: #f3e6d0;
  --earth-300: #dcae70;
  --earth-500: #c17c30;
  --earth-600: #a26325;
  --earth-700: #814d21;

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: #334155;
  --bs-link-color: var(--forest-600);
  --bs-link-color-rgb: 37, 107, 58;
  --bs-link-hover-color: var(--forest-700);
  --bs-link-hover-color-rgb: 30, 85, 48;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: #fff; }

h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); color: #0f172a; }

/* ---- Colour utilities ---- */
.text-forest { color: var(--forest-700) !important; }
.text-earth { color: var(--earth-600) !important; }
.text-earth-light { color: var(--earth-300) !important; }
.text-earth-dark { color: var(--earth-700) !important; }
.bg-forest-50 { background: var(--forest-50) !important; }
.bg-forest-900 { background: var(--forest-900) !important; }
.bg-slate-50 { background: #f8fafc !important; }

.eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .875rem;
}

/* ---- Buttons ---- */
.btn-forest {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--forest-600);
  --bs-btn-border-color: var(--forest-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--forest-700);
  --bs-btn-hover-border-color: var(--forest-700);
  --bs-btn-active-bg: var(--forest-800);
  --bs-btn-active-border-color: var(--forest-800);
  --bs-btn-disabled-bg: var(--forest-600);
  --bs-btn-disabled-border-color: var(--forest-600);
  font-weight: 600;
}
.btn-earth {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--earth-500);
  --bs-btn-border-color: var(--earth-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--earth-600);
  --bs-btn-hover-border-color: var(--earth-600);
  --bs-btn-active-bg: var(--earth-700);
  --bs-btn-active-border-color: var(--earth-700);
  font-weight: 600;
  font-size: .875rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* ---- Header / navbar ---- */
.site-header {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
}
.site-header .navbar { padding: .75rem 0; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--forest-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
}
.brand-name { font-family: var(--font-display); font-weight: 700; color: #0f172a; font-size: 1rem; }
.brand-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--earth-600); }
.site-header .nav-link {
  font-size: .875rem;
  font-weight: 500;
  color: #334155;
  border-radius: .375rem;
  padding: .5rem .75rem !important;
  transition: color .15s, background-color .15s;
}
.site-header .nav-link:hover { color: var(--forest-600); background: var(--forest-50); }
.site-header .nav-link.active { color: var(--forest-700); background: var(--forest-50); }

/* ---- Hero sections ---- */
.home-hero, .page-hero {
  position: relative;
  overflow: hidden;
  background: var(--forest-900);
}
.home-hero { padding: 7rem 0; }
.page-hero { padding: 6rem 0; }
@media (min-width: 576px) {
  .home-hero { padding: 9rem 0; }
  .page-hero { padding: 7rem 0; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 32, 19, .9), rgba(22, 57, 35, .85), rgba(26, 69, 41, .72));
}
.hero-subtitle { color: rgba(220, 237, 222, .9); max-width: 42rem; }
.home-hero h1 { max-width: 48rem; line-height: 1.15; }
.home-hero .join-form { max-width: 28rem; }
.home-hero .join-form .form-control { border: 0; padding: .75rem 1.25rem; font-size: .875rem; }

/* ---- Section headings ---- */
.section { padding: 5rem 0; }
.section-title { font-size: calc(1.5rem + 1vw); font-weight: 700; margin-bottom: 0; }
@media (min-width: 1200px) { .section-title { font-size: 2.25rem; } }
.accent-bar { margin-top: 1rem; height: 4px; width: 64px; border-radius: 999px; background: var(--earth-500); }

/* ---- Cards ---- */
.info-card {
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: box-shadow .2s, border-color .2s;
}
.info-card.bg-light-card { background: #f8fafc; }
.hover-lift:hover { box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .08); border-color: var(--forest-200); }

.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--forest-600);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.num-badge.earth { background: var(--earth-500); width: 32px; height: 32px; }
.num-badge.sm { width: 24px; height: 24px; font-size: .75rem; }

.feature-card {
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: box-shadow .2s;
}
.feature-card:hover { box-shadow: 0 1rem 2rem rgba(15, 23, 42, .12); }
.feature-img { height: 176px; overflow: hidden; }
.feature-img img, .zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.feature-card:hover .feature-img img { transform: scale(1.05); }

.team-card {
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(248, 250, 252, .6);
  transition: box-shadow .2s;
}
.team-card:hover { box-shadow: 0 1rem 2rem rgba(15, 23, 42, .12); }
.team-photo { height: 256px; background: #e2e8f0; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }

.goals-box { background: var(--forest-50); border: 1px solid var(--forest-100); border-radius: 1rem; padding: 2rem; }

.donation-channel {
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  background: #fff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: box-shadow .2s;
}
.donation-channel:hover { box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .1); }
.donation-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--earth-100);
  color: var(--earth-600);
  font-size: 1.5rem;
}
.donation-value { font-size: 1.5rem; font-weight: 700; color: var(--forest-700); letter-spacing: .03em; }

.contact-dark { background: var(--forest-950); color: #fff; border-radius: 1rem; padding: 2rem; }
.contact-dark h3 { color: #fff; }
.contact-dark .label { color: rgba(185, 219, 190, .9); font-size: .875rem; margin-bottom: .25rem; }
.contact-dark a { color: var(--earth-300); font-weight: 500; word-break: break-all; }
.rounded-card { border: 1px solid #f1f5f9; border-radius: 1rem; padding: 2rem; }

.form-control:focus, .form-select:focus {
  border-color: var(--forest-300);
  box-shadow: 0 0 0 .25rem rgba(87, 163, 103, .25);
}
.contact-form .form-control { padding: .75rem 1rem; font-size: .875rem; border-radius: .5rem; }

/* ---- History tabs (Who We Are) ---- */
.history-tabs .nav-link {
  border-radius: 999px;
  padding: .625rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.history-tabs .nav-link:hover { border-color: var(--forest-300); }
.history-tabs .nav-link.active { background: var(--forest-600); color: #fff; border-color: var(--forest-600); }

/* ---- Vision / CTA ---- */
.vision-band { background: var(--forest-900); }
.vision-band h2 { color: var(--earth-300); }
.vision-band p { color: rgba(220, 237, 222, .9); line-height: 1.75; }
.cta-band { background: var(--earth-500); }
.cta-text { color: rgba(251, 246, 238, .9); max-width: 36rem; }

/* ---- Gallery (masonry + lightbox) ---- */
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 576px) { .masonry { column-count: 2; } }
@media (min-width: 992px) { .masonry { column-count: 3; } }
.gallery-item {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  break-inside: avoid;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}
.gallery-item:hover .caption, .gallery-item:focus-visible .caption { opacity: 1; }
#lightbox .modal-content { background: transparent; border: 0; }
#lightbox img { max-height: 80vh; object-fit: contain; border-radius: .75rem; }

/* ---- Footer ---- */
.site-footer { background: var(--forest-950); color: var(--forest-100); }
.footer-heading { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: .02em; }
.footer-muted, .site-footer a { color: rgba(185, 219, 190, .8); }
.site-footer a { text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--forest-800); color: rgba(138, 195, 148, .7); }