@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10px,-16px) scale(1.03); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14px,12px) scale(1.05); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: 'DM Sans', sans-serif;
  background: #FBF3F1;
  color: #3B2226;
  overflow-x: hidden;
}

a { color: #7C2C38; }
a:hover { color: #5A1F28; }

::selection { background: #E7A6AF; color: #3B2226; }

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.16,.84,.28,1), transform 1s cubic-bezier(.16,.84,.28,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.nav-link:hover { color: #3B2226; }

.btn-donate:hover { transform: translateY(-2px); }
.btn-donate:active { transform: scale(0.96); }

.btn-cta1:hover { transform: translateY(-2px); }
.btn-cta1:active { transform: scale(0.97); }

.btn-cta2:hover { transform: translateY(-2px); background: rgba(255,255,255,0.95); }
.btn-cta2:active { transform: scale(0.97); }

.pillar-card:hover { transform: translateY(-6px); }
.activity-card:hover { transform: translateY(-6px); }
.activity-card:hover img { transform: scale(1.07); }
.testimonial-card:hover { transform: translateY(-6px); }
.help-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.1); }
.news-card:hover { transform: translateY(-5px); }
.news-card:hover img { transform: scale(1.07); }
.gallery-card:hover { transform: translateY(-5px); }
.gallery-card:hover img { transform: scale(1.08); }

.pillar-card, .activity-card, .activity-card img, .testimonial-card, .help-card, .news-card, .news-card img, .gallery-card, .gallery-card img {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}

/* ---- Mobile navigation (hamburger) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #3B2226;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-collapse { display: contents; }

/* ---- Mobile / tablet breakpoint ---- */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 28px;
    box-shadow: 0 16px 32px rgba(59,34,38,0.14);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    box-sizing: border-box;
  }
  .nav-collapse.is-open { display: flex; }
  .nav-collapse nav a {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(124,44,56,0.08);
    box-sizing: border-box;
  }
  .nav-collapse > div {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
  }

  /* grids that should collapse to a single column on mobile */
  .stack-mobile {
    grid-template-columns: 1fr !important;
  }

  /* gallery grids: keep 2 columns instead of stacking fully */
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* news cards: fixed-width image column doesn't leave room for text on narrow screens */
  .news-card {
    grid-template-columns: 1fr !important;
  }
  .news-card > div:first-child {
    aspect-ratio: 16/9 !important;
  }

  /* hero: stack text above image instead of side-by-side */
  .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-text {
    padding: 48px 24px !important;
  }
  .hero-decorative {
    display: none !important;
  }
  .hero-image-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 260px !important;
  }
}