/* Lightweight mobile stylesheet for VishvaKalpa
   Purpose: override heavy desktop visuals with simpler, touch-friendly styles
   This file is loaded only on small viewports via a <link media="(max-width:767px)">
*/
:root{
  --bg: #000000;
  --text: #e9edf6;
  --muted: #a6b0c1;
  --container: 100%;
}

html,body{ height:100%; }
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Reduce heavy background images and animations for battery/network savings */
body, .hero, .marquee-section, .mmic, .happenings { background-image: none !important; background: linear-gradient(180deg,#0d1320,#0b111f) !important; }
.hero{ min-height: 56vh !important; padding-top: 12px !important; }
.hero .intro{ padding: 16px !important; }

/* Larger touch targets */
.nav-inner{ height:56px !important; }
.nav-links{ display:none !important; }
.burger{ display:inline-flex !important; }
.mobile-menu{ width: min(92vw, 360px) !important; }

/* Simplify hero text sizes to fit phones */
.hero h1{ font-size: 28px !important; line-height:1.12 !important; }
.hero .eyebrow{ font-size: 11px !important; }
.hero .cta{ padding: 12px 18px !important; font-size: 15px !important; }

/* Collapse complex card grids to single column */
.mmic-grid, .story-cards, .clubs-grid, .donate-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }

/* Make scroll lists easier to swipe */
.scroll{ -webkit-overflow-scrolling: touch; padding-bottom: 20px !important; }

/* Reduce or disable animations */
*{ animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }

/* Improve legibility */
.container{ padding-inline: 14px !important; }
body, p, li, a, button{ font-size: 16px !important; }

/* Make CTA and FAB more prominent */
.fab-join{ right: 14px !important; bottom: 14px !important; padding: 14px 18px !important; font-size: 15px !important; }

/* Hide heavy decorative elements but keep community snapshots visible */
.orb, .join-overlay, .coc-doodle, .guides-doodle { display: none !important; }

/* Ensure community polaroid snapshots remain visible and touch-friendly on mobile */
.polaroid { display: block !important; position: relative !important; width: 92% !important; margin: 0 auto !important; transform: none !important; }
.polaroid img { height: auto !important; max-height: 56vh !important; }

/* Lightweight images: make them full width and defer large background images */
img{ width:100% !important; height:auto !important; object-fit:cover !important; }

/* Ensure menu backdrop is full height on mobile browsers with address bar */
.menu-backdrop{ height:100dvh; }

/* Provide fast-loading fallback for fonts: prefer system fonts */
body{ font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }

/* Small helpers for input sizes */
input, textarea, .modal-card{ font-size:16px !important; }

/* Keep page width constrained to viewport to avoid zooming */
/* Logo and button overrides for mobile */
.brand .logo { width: 40px !important; height: 40px !important; filter: drop-shadow(0 0 6px rgba(255,122,24,.45)) !important; }

/* Make primary glass buttons and donate button larger for touch */
.glass-btn, .donate-btn { padding: 12px 18px !important; font-size: 16px !important; border-radius: 12px !important; }
.drawer-cta { padding: 14px 16px !important; font-size: 15px !important; }

/* Ensure clickable nav actions are roomy */
.nav-actions .glass-btn, .nav-actions .donate-btn { min-height: 44px !important; }

/* End of mobile.css */

/* Mobile navbar: increase backdrop blur and opacity so it's not fully transparent */
@media (max-width: 767px) {
  .nav {
    background: rgb(7, 11, 20) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgb(16, 0, 0) !important;
  }

  /* Make drawer background denser to match the navbar uwu */
  .mobile-menu {
    background: #0b0e16 !important;
  }

  /*  darker backdrop behind the menu for clarity */
  .menu-backdrop {
    background: rgb(0, 0, 0) !important;
  }
}