/* ---------- Base mobile improvements ---------- */
img { max-width: 100%; height: auto; }

/* ---------- Navbar mobile refinements ---------- */
@media (max-width: 900px) {
  header nav, header .nav-links, .demo-btn { display: none; }
  .hamburger { display: flex; }
  .nav { padding: 12px 16px; }
  .logo { font-size: 19px; }
}

/* ---------- Section spacing ---------- */
@media (max-width: 768px) {
  section { padding: 40px 16px; }
  .container { width: 94%; }
}

@media (max-width: 600px) {
  section { padding: 30px 14px; }
  .container { width: 96%; }
}

/* ---------- Headings ---------- */
@media (max-width: 600px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.1rem !important; }
}

/* ---------- Buttons full width on small screens ---------- */
@media (max-width: 600px) {
  .cta-primary, .cta-secondary, .btn-primary, .btn-secondary,
  .cta-btn, .btn-outline, .impact-cta-btn {
    width: 100%;
    text-align: center;
    display: block;
  }
  .hero-actions, .hero-buttons, .preview-actions { flex-direction: column; }
}

/* ---------- Footer improvements ---------- */
@media (max-width: 900px) {
  .footer-container { grid-template-columns: 1fr; gap: 30px; }
  .footer-links-group { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 550px) {
  .footer-links-group { grid-template-columns: 1fr; }
}

/* ---------- Card grids ---------- */
@media (max-width: 900px) {
  .why-grid, .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .program-grid { grid-template-columns: 1fr; }
}

@media (max-width: 550px) {
  .why-grid, .impact-grid { grid-template-columns: 1fr; }
}

/* ---------- Common grid stacks ---------- */
@media (max-width: 900px) {
  .light-grid, .dark-grid, .approach-container, .bulletin-container,
  .preview-card, .contact-content, .hero-content {
    grid-template-columns: 1fr;
  }
  .footer-container { flex-direction: column; }
}

/* ---------- Text alignment on mobile ---------- */
@media (max-width: 900px) {
  .light-text, .dark-text, .hero-left, .hero-text { text-align: center; }
  .light-text p, .dark-text p, .hero-left p { margin-inline: auto; }
  .hero-actions, .hero-buttons { justify-content: center; }
}

/* ---------- Hide floating elements that could interfere with mobile ---------- */
@media (max-width: 600px) {
  .rain-emojis span, .floating span { font-size: 14px; opacity: 0.25; }
}