/* ============================================================
   DAGA Foundation — Responsive Stylesheet
   Mobile-first approach
   Breakpoints: 768px (tablet), 1024px (desktop)
   ============================================================ */

/* ── Base Mobile Styles (< 768px) ────────────────────────── */

/* Navbar */
.nav-toggle { display: flex; }
.nav-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: var(--green-dark);
  flex-direction: column;
  align-items: stretch;
  padding: 1rem;
  gap: 0.25rem;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 999;
}
.nav-menu.nav-menu--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.nav-link {
  padding: 0.75rem 1rem;
  display: block;
}
.nav-link--donate {
  text-align: center;
  margin-top: 0.25rem;
}
.nav-lang-item { margin-top: 0.5rem; }
.lang-toggle-btn { width: 100%; padding: 0.6rem; border-radius: var(--radius-sm); }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero { min-height: 85vh; }
.hero-title { font-size: 2.2rem; }
.hero-tagline { font-size: 1.1rem; }
.hero-actions { flex-direction: column; align-items: center; }
.hero-actions .btn { width: 100%; max-width: 260px; }

/* Two Column */
.two-col {
  grid-template-columns: 1fr;
  gap: 2rem;
}
.two-col__image { order: -1; }

/* Impact */
.impact-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.impact-number { font-size: 2.2rem; }

/* Activities */
.activities-grid { grid-template-columns: 1fr; gap: 1.5rem; }

/* News */
.news-grid { grid-template-columns: 1fr; }

/* Gallery */
.gallery-grid { grid-template-columns: 1fr; }

/* About MVV */
.mvv-grid { grid-template-columns: 1fr; }

/* Team */
.team-grid { grid-template-columns: repeat(2, 1fr); }

/* Donate */
.donate-methods-row { grid-template-columns: 1fr; }

/* Contact */
.contact-layout { grid-template-columns: 1fr; }

/* Footer */
.footer-container { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
.footer-bottom { flex-direction: column; text-align: center; }

/* Forms */
.form-fields { grid-template-columns: 1fr; }
.form-card { padding: 1.5rem; }

/* Section spacing */
.section { padding-block: 3rem; }
.page-hero { padding-block: 2.5rem; }
.page-hero__content h1 { font-size: 1.8rem; }

/* Transparency */
.transparency-table th,
.transparency-table td { padding: 0.75rem 0.9rem; font-size: 0.88rem; }

/* Error Page */
.error-code { font-size: 4rem; }
.error-title { font-size: 1.4rem; }

/* WhatsApp */
#whatsapp-btn { width: 50px; height: 50px; bottom: 16px; right: 16px; }
#whatsapp-btn svg { width: 24px; height: 24px; }

/* ── Tablet Styles (>= 768px) ────────────────────────────── */
@media (min-width: 768px) {
  /* Navbar — still hamburger at tablet, keep it */
  .nav-menu { top: 68px; }

  /* Hero */
  .hero-title { font-size: 3rem; }
  .hero-tagline { font-size: 1.25rem; }
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-actions .btn { width: auto; }

  /* Two column */
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .two-col__image { order: 0; }

  /* Impact */
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-number { font-size: 2.6rem; }

  /* Activities */
  .activities-grid { grid-template-columns: repeat(2, 1fr); }

  /* News */
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Team */
  .team-grid { grid-template-columns: repeat(4, 1fr); }

  /* MVV */
  .mvv-grid { grid-template-columns: repeat(2, 1fr); }

  /* Donate */
  .donate-methods-row { grid-template-columns: 1fr 1fr; }

  /* Forms */
  .form-fields { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-container { grid-template-columns: 1fr 1fr; }

  /* Section spacing */
  .section { padding-block: 4rem; }
  .page-hero { padding-block: 3.5rem; }
  .page-hero__content h1 { font-size: 2.2rem; }
}

/* ── Desktop Styles (>= 1024px) ──────────────────────────── */
@media (min-width: 1024px) {
  /* Navbar — show full horizontal menu */
  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: all;
    flex-direction: row;
    background: transparent;
    padding: 0;
    box-shadow: none;
    transition: none;
  }
  .nav-lang-item { margin-top: 0; }
  .lang-toggle-btn { width: auto; }

  /* Hero */
  .hero { min-height: 88vh; }
  .hero-title { font-size: 3.5rem; }
  .hero-tagline { font-size: 1.4rem; }

  /* Impact */
  .impact-grid { grid-template-columns: repeat(4, 1fr); }
  .impact-number { font-size: 3rem; }

  /* Activities */
  .activities-grid { grid-template-columns: repeat(3, 1fr); }

  /* News */
  .news-grid { grid-template-columns: repeat(3, 1fr); }

  /* MVV */
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer-container { grid-template-columns: 1.5fr 1fr 1.2fr; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr 1.2fr; }

  /* Section spacing */
  .section { padding-block: 5rem; }
  .page-hero { padding-block: 4rem; }
  .page-hero__content h1 { font-size: 2.4rem; }
}

/* ── Utility: Reduced Motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}