/* Mobile-friendly overrides for Evergreen site
   Non-invasive: overrides container widths, grid stacks, footer columns, paddings, and small typographic tweaks.
   Loaded after inline page CSS so it can override where necessary.
*/

:root{--site-max:1200px}

/* Make the main container full width with comfortable padding on small screens */
@media (max-width: 960px){
  .inner{padding:0 18px;max-width:100%}
  section{padding:56px 18px}
  nav{padding:0 18px}
  .hero{min-height:48vh}
  .hero-content{padding:36px 16px 24px}
  .page-hero{padding:64px 18px}

  /* Stack grids */
  .causes-grid, .blog-grid, .stats-grid, .about-wrap, .testi-wrap, .blog-layout, .footer-main{grid-template-columns:1fr!important}
  .causes-grid, .blog-grid{gap:18px}

  /* Footer — stack columns, reduce spacing */
  .footer-main{padding:48px 18px;grid-template-columns:1fr!important}
  .footer-main .footer-col{margin-top:18px}
  .footer-bottom{flex-direction:column;gap:10px;padding:16px 18px;text-align:center}

  /* Smaller buttons / fonts to fit mobile */
  .btn-primary, .btn-outline, .btn-gold{padding:10px 14px;font-size:.88rem}
  .section-title{font-size:1.6rem}
  .section-lead{font-size:.95rem}

  /* Reduce large image heights so they fit better */
  .about-slideshow, .featured-post-img, .trusted-img{height:auto;min-height:240px}
  .featured-post-img img{min-height:220px}

  /* Make nav compact */
  nav{height:64px}
  .nav-logo-text{font-size:1rem}
  .nav-logo img{height:44px}
  .nav-links{display:none}
  .hamburger{display:flex}

  /* Footer social links and small items */
  .social-links{justify-content:center}
  .footer-brand p{font-size:.9rem}

  /* Sidebar -> move below main content on blog pages */
  .blog-layout{grid-template-columns:1fr}
}

/* Extra small screens */
@media (max-width: 480px){
  /* fluid hero headline for small screens — keep full content but sized to fit */
  .hero h1{font-size:clamp(1.4rem, 6.5vw, 2.05rem); line-height:1.04; margin-bottom:8px}
  .hero p{font-size:.95rem; max-width:92%; margin:0 auto 12px}
  .hero-content{padding:28px 14px 18vh}
  /* stack and compress hero buttons */
  .hero-btns{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:10px}
  .hero-btns .btn-primary, .hero-btns .btn-outline{width:80%;padding:10px 12px}
  /* compact stats */
  .hero-stats{display:flex;gap:8px;justify-content:center}
  .hero-stat{padding:8px 6px}
  .nav-logo img{height:40px}
  .btn-primary, .btn-outline{padding:9px 12px}
}

/* reduce the bottom gradient overlay on small screens so content appears flush at the top */
@media (max-width: 600px) {
  /* Ensure hero content sits at the top on small screens */
  .hero { align-items: flex-start !important; min-height: auto !important; }
  .hero::after { display: none !important; }
}

/* show a short mobile-only sentence under the tagline */
@media (max-width: 540px) {
  /* On small screens show only the H1 and the short mobile sentence */
  .hero-mobile-short { display: block !important; text-align:center; color: rgba(255,255,255,.95); font-size: .95rem; margin-top:8px; }
  .hero p.reveal.reveal-d2 { display: none !important; }
  .hero-btns, .hero-stats { display: none !important; }
  /* compact badge visible on mobile */
  .hero-badge { display:inline-flex !important; font-size:.68rem !important; padding:6px 12px !important; margin-bottom:12px !important; }
}

/* Tighter hero layout for very small screens to avoid overlapping the navbar */
@media (max-width: 420px) {
  /* Very small screens: keep full hero but compact */
  /* place hero content at the top on mobile and avoid bottom stacking */
  .hero { min-height: 56vh; align-items: flex-start; }
  .hero-content { position: relative; top: 14px; padding: 18px 14px 8vh; max-width: 96%; text-align: left; }
  .hero h1 { font-size: clamp(1.6rem, 6.5vw, 2.05rem); line-height: 1.04; margin: 6px 0 8px 0; max-width: 95%; }
  .hero p { display: block; }
  .hero-btns{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-bottom:8px}
  .hero-btns .btn-primary, .hero-btns .btn-outline{width:auto}
  .hero-stats{display:flex;gap:8px;justify-content:flex-start}
  .hero-badge { display: none; }
}

/* Keep navbar height fixed when scrolling (prevent visual collapse) but allow background/shadow on .scrolled */
@media (max-width: 960px) {
  nav { height: 64px !important; padding: 0 18px !important; }
  nav.scrolled { height: 64px !important; box-shadow: 0 2px 20px rgba(0,0,0,.18); }
}

/* Generic helpers */
.img-center{display:block;margin-left:auto;margin-right:auto}
.text-center{text-align:center}

/* Form inputs full width */
input, textarea, select, button{max-width:100%}

/* Keep any large responsive images from overflowing */
img{max-width:100%;height:auto}