/* ============================
   Rivers of Hope — style.css
   Clean, final stylesheet
   ============================ */

/* Root colors + base */
:root{
  --green: #2e8b57;
  --green-dark: #23664a;
  --white: #ffffff;
  --muted: #6b7280;
  --text: #1f2937;
  --container: 1150px;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;color:var(--text);background:#f7faf8;line-height:1.5;scroll-behavior:smooth}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}



/* HEADER */
.site-header{position:fixed;top:0;left:0;width:100%;background:var(--green-dark);color:var(--white);z-index:1200;box-shadow:0 6px 30px rgba(0,0,0,0.12)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;object-fit:cover;border-radius:8px}
.brand-text h1{font-size:18px;color:var(--white);margin:0}
.brand-text small{display:block;color:rgba(255,255,255,0.9);font-size:12px}

/* NAV */
.main-nav{margin-left:auto}
.nav-links{display:flex;gap:18px;list-style:none;align-items:center;margin:0;padding:0}
.nav-links a{color:var(--white);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:6px}
.nav-links a:hover{background:rgba(255,255,255,0.06)}
.nav-donate{background:rgba(255,255,255,0.08);padding:8px 12px}
.hamburger{display:none;background:transparent;border:0;color:var(--white);font-size:20px;cursor:pointer}

/* Add top spacing so content not under header */
main{padding-top:88px}

/* HERO */
.hero{position:relative;min-height:66vh;background-image:url('hero.jpg');background-size:cover;background-position:center;display:flex;align-items:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,62,27,0.72), rgba(4,62,27,0.6));z-index:0}
.hero-inner{position:relative;z-index:2;display:flex;gap:24px;align-items:center;justify-content:space-between;width:100%;max-width:var(--container);margin:0 auto;padding:40px 20px}
.hero-left{flex:1;color:var(--white)}
.hero-left h2{font-size:34px;line-height:1.05;margin-bottom:12px;text-shadow:0 8px 30px rgba(0,0,0,0.65)}
.hero-lead{color:rgba(255,255,255,0.95);margin-bottom:18px;font-size:1.05rem;text-shadow:0 6px 18px rgba(0,0,0,0.55)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:28px;font-weight:700;text-decoration:none;cursor:pointer;border:0}
.btn-primary{background:linear-gradient(90deg,var(--green),#3db07a);color:var(--white)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.18)}
.hero-card{width:320px;background:var(--white);color:var(--text);padding:18px;border-radius:12px;box-shadow:0 12px 36px rgba(2,6,23,0.08)}

/* SECTION general */
.section{padding:56px 0}
.section h2{text-align:center;color:var(--green-dark);margin-bottom:28px}

/* CAUSES (4) */
.causes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center;padding:0 12px}
.cause-box{background:var(--white);padding:18px;border-radius:12px;width:100%;max-width:520px;box-shadow:0 8px 30px rgba(2,6,23,0.04);text-align:left}
.cause-box img{width:100%;height:180px;object-fit:cover;border-radius:8px;margin-bottom:12px}
.cause-box h3{color:var(--green-dark);margin-bottom:8px}

/* CAROUSEL base (used by gallery & testimonial) */
.carousel{overflow:hidden;position:relative;margin:8px 0}
.carousel .carousel-track{display:flex;gap:16px;align-items:center;will-change:transform}
.carousel.paused .carousel-track{animation-play-state:paused}

/* GALLERY (seamless) */
/* GALLERY (seamless carousel) */
.carousel-gallery {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-gallery .carousel-track {
  display: flex;
  width: calc(260px * 24 + 20px * 24);
  animation: galleryScroll 60s linear infinite;
}

.carousel-gallery:hover .carousel-track {
  animation-play-state: paused; /* pause on hover */
}

.carousel-gallery .carousel-item {
  flex: 0 0 auto;
  margin-right: 20px;
}

.carousel-gallery .carousel-item img {
  width: 260px;
  height: 170px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.carousel-gallery .carousel-item img:hover {
  transform: scale(1.05); /* small zoom effect */
}

/* Keyframes for smooth, infinite scroll */
@keyframes galleryScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* BLOG (6 posts: 3x2 desktop) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 12px}
.post{background:var(--white);border-radius:12px;padding:12px;box-shadow:0 8px 30px rgba(2,6,23,0.04)}
.post img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.post h3{color:var(--green-dark);margin-bottom:6px}
.read-more{display:inline-block;color:var(--green-dark);font-weight:700;margin-top:8px}

/* TESTIMONIALS (seamless) */
.carousel-testimonials .carousel-item{flex:0 0 auto;width:320px}
.carousel-testimonials .testimonial{background:var(--white);padding:18px;border-radius:12px;box-shadow:0 8px 28px rgba(2,6,23,0.06);display:flex;flex-direction:column;gap:12px}
.carousel-testimonials .carousel-track{animation:testimonialScroll 30s linear infinite}
@keyframes testimonialScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* FORM & DONATE (light green background; white cards) */
.form-donate-section{background:#f4fff7}
.form-donate-section .container{padding:40px 20px}
.form-donate-grid{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap;padding:12px}
.white-card{background:var(--white);padding:20px;border-radius:12px;box-shadow:0 12px 36px rgba(2,6,23,0.06);width:100%;max-width:540px}
.donate-card{max-width:420px}
.white-card h3{color:var(--green-dark);margin-bottom:12px}
.white-card label{display:block;font-weight:700;margin:8px 0 6px}
.white-card input,.white-card textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #e6eef2;font-size:1rem}
.muted{color:var(--muted);font-size:0.9rem;margin-top:10px;display:block}

/* FOOTER */
.site-footer{background:var(--green-dark);color:var(--white);padding:36px 0 16px;margin-top:24px}
.footer-grid{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap;padding:0 20px}
.footer-col{min-width:200px}
.footer-col h4{margin-bottom:12px}
.footer-col a{color:var(--white);text-decoration:none}
.socials a{color:var(--white);margin-right:12px;font-size:18px}
.footer-bottom{background:rgba(0,0,0,0.06);padding:12px 0;margin-top:20px;text-align:center;color:#fff}

/* RESPONSIVE */
@media (max-width: 1100px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .carousel-gallery .carousel-item{width:220px}
  .carousel-gallery .carousel-item img{height:150px}
}

@media (max-width: 800px){
  .nav-links{display:none;position:absolute;top:72px;right:12px;background:var(--green-dark);padding:12px;border-radius:8px;flex-direction:column;width:220px}
  .nav-links.open{display:flex}
  .hamburger{display:block}
  .header-inner{padding:10px 14px}
  main{padding-top:88px}
  .hero-inner{flex-direction:column;align-items:center;text-align:center;padding:20px}
  .hero-card{width:100%;max-width:520px;margin-top:18px}
  .causes-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .carousel-gallery .carousel-item{width:200px}
  .carousel-testimonials .carousel-item{width:260px}
  .form-donate-grid{flex-direction:column;align-items:center}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel-gallery .carousel-track,
  .carousel-testimonials .carousel-track { animation: none !important; }
}

/* small helper */
a{transition:all .12s ease}

/* ===== RESPONSIVE NAVIGATION (Hamburger Menu) ===== */
@media (max-width: 768px) {
  /* Hide normal nav and style the toggle */
  .nav-links {
    display: none;
    flex-direction: column;
    background: #ffffff;
    position: absolute;
    top: 70px;
    right: 5%;
    width: 220px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
  }

  /* When active, menu slides down smoothly */
  .nav-links.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* Style each link in mobile mode */
  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

  .nav-links a {
    color: #0b6623;
    font-weight: 600;
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: #0b6623cc;
  }

  /* Hamburger icon itself */
  .hamburger {
    font-size: 1.8rem;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    transition: transform 0.3s ease;
  }

  /* Rotate slightly when active */
  .hamburger.active {
    transform: rotate(90deg);
  }

  /* Adjust hero text sizes for smaller screens */
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  /* Stack section content vertically for mobile */
  .causes-container,
  .blog-container,
  .testimonial-slider {
    flex-direction: column;
    align-items: center;
  }
}

/* =========================
   HAMBURGER & MOBILE NAV
========================= */

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/* MOBILE VIEW */
@media (max-width: 768px) {
  .hamburger {
    display: block;
    color: #ffffff;
    z-index: 1500;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #0b3d2e;
    flex-direction: column;
    padding: 20px;
  }

  .nav-links.active {
    display: flex;
  }
}

/* DESKTOP */
@media (min-width: 769px) {
  .nav-links {
    display: flex;
    position: static;
  }

  .hamburger {
    display: none;
  }
}