/* Simple, responsive CSS inspired by Tailwind look used in React version
   Save as styles.css in same folder as index.html */

:root{
  --pink-600: #d6336c;
  --pink-700: #b02a58;
  --pink-50: #fff0f4;
  --bg: #f7f7f8;
  --muted: #6b7280;
  --text: #111827;
  --container: 1100px;
  --radius: 12px;
  --shadow-sm: 0 6px 18px rgba(16,24,40,0.06);
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.header{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.04); position:sticky; top:0; z-index:40}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:40px; height:40px; background:#fde7ef; color:var(--pink-700); border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700}
.site-title{font-weight:700; color:var(--text); text-decoration:none}
.tag{font-size:12px; color:var(--muted)}
.nav{display:flex; align-items:center; gap:14px}
.nav a{color:var(--muted); text-decoration:none}
.contact-btn{background:var(--pink-600); color:white; padding:8px 12px; border-radius:8px; text-decoration:none}
.lang-select{margin-left:8px; padding:6px 8px; border-radius:6px; border:1px solid #e6e6e9}

/* Mobile Nav Toggle - Hide on Desktop */
.nav-toggle {
  display: none; /* Hide by default (on desktop) */
  background: none;
  border: 1px solid #e6e6e9;
  color: var(--muted);
  font-size: 24px;
  padding: 0px 8px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 50; /* Ensure it's above other header content */
}
/* Hero */
.hero{display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center}
.hero-copy h1{font-size:48px; margin:0; line-height:1.05}
.hero-copy p{color:var(--muted); margin-top:12px; max-width:520px}
.hero-ctas{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600}
.btn.primary{background:var(--pink-600); color:white}
.btn.outline{border:2px solid var(--pink-600); color:var(--pink-600); background:white}

.hero-image-card img{width:100%; height:480px; object-fit:cover}
.caption{font-size:12px; color:var(--muted); margin-top:8px}

/* Sections */
.section{padding:32px 0}
.section-title{text-align:center; font-size:36px; margin:0}
.section-sub{text-align:center; color:var(--muted); margin-top:12px; padding:0 16px 0 16px}

/* Grid utilities */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px}
.cards .card{background:var(--pink-50); padding:16px; border-radius:12px}
.cards .card img{width:100%; height:160px; object-fit:cover; border-radius:8px}
.cards .card h3{color:var(--pink-700); margin-top:10px}
.cards .card p{color:var(--muted); margin-top:8px}

/* Donate CTA */
.donate-section .card{background:#fff}
.donate-cta{text-align:center; margin-top:20px}
.btn.big{padding:14px 22px; font-size:18px}
.donate-note{color:var(--muted); margin-top:10px}

/* Social Awareness */
.social-links {display: flex; justify-content: center; gap: 24px; margin-top: 18px;}
.social-links a img {width: 40px; height: 40px; transition: transform 0.2s ease, opacity 0.2s ease;}
.social-links a img:hover {transform: scale(1.1); opacity: 0.8;}

/* Stats */
.stats{margin-top:20px}
.stat{background:#fff; padding:18px; border-radius:12px; text-align:center; box-shadow:var(--shadow-sm)}
.stat img{width:100%; height:120px; object-fit:cover; border-radius:8px}
.stat-number{font-size:28px; font-weight:800; color:var(--pink-600); margin-top:10px}
.stat-label{color:var(--muted); margin-top:6px}

/* Partner card */
.partner-card{background:var(--pink-50); padding:20px; border-radius:12px; margin-top:18px; text-align:center}
.partner-card img{width:100%; object-fit:scale-down; border-radius:8px; margin-bottom:12px}
.partner-note{color:var(--muted); margin-top:8px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 500px; gap:24px}
.contact-image{width:100%; height:275px; object-fit:cover; border-radius:8px}
.contact-form{background:var(--pink-50); padding:18px; border-radius:12px}
.contact-form label{display:block; margin-top:12px}
.contact-form input, .contact-form textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #e6e6e9}
.contact-form button{margin-top:12px}

/* Footer */
.footer{background:#0f1724; color:#d1d5db; padding:22px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand.small{display:flex; align-items:center; gap:12px}
.logo.small{width:36px; height:36px; background:var(--pink-600); color:white; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700}
.site-title-footer{font-weight:700}
.tag.small{font-size:12px; color:#9ca3af}
.copyright{color:#9ca3af}

/* Responsive */
@media (max-width:980px){
  .hero, .contact-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .header-inner{padding-left:14px; padding-right:14px}

  /* --- NEW MOBILE NAV STYLES --- */

  /* Show the hamburger button */
  .nav-toggle {
    display: block;
  }

  /* Style the navigation as a full-screen overlay */
  .nav {
    /* Position */
    position: fixed; /* Take over the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Appearance */
    background: rgba(255, 255, 255, 0.98); /* Light background */
    backdrop-filter: blur(5px); /* iOS-style blur */

    /* Layout */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    gap: 24px; /* Space out links */

    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  /* This class will be toggled by JavaScript */
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Style the links for the mobile menu */
  .nav a {
    font-size: 20px;
    color: var(--text); /* Make them dark and easy to read */
    font-weight: 600;
  }

  .nav a.btn.primary {
    font-size: 20px; /* Match other links */
    padding: 12px 20px; /* Make button bigger */
  }

  .nav .lang-select {
    font-size: 16px;
    padding: 10px;
  }
}