/* ═══════════════════════════════════════════
   BASKETS OF BLESSINGS — RESPONSIVE FIX
   Injected via Netlify snippet before </head>
   Handles ALL mobile responsive behavior
   Built by IECAN (iecan.ai)
   ═══════════════════════════════════════════ */

/* ─── iOS FIXES ─── */
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;}
input,select,textarea{font-size:16px!important;} /* Prevents iOS auto-zoom */
@supports(height:100dvh){.hero{min-height:100dvh;}}

/* ─── SAFE AREA FOR NOTCHED PHONES ─── */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}

/* ─── NAV — PATTERN 2: CLIENT TOGGLE (≤900px) ─── */
@media(max-width:900px){
  .nav-links{
    display:none!important;
    flex-direction:column;
    position:fixed;
    top:78px;
    left:0;right:0;
    background:rgba(250,246,240,0.98);
    backdrop-filter:blur(20px);
    padding:20px 24px;
    gap:4px;
    border-bottom:1px solid rgba(107,76,59,0.12);
    box-shadow:0 16px 40px rgba(74,51,40,0.1);
    max-height:80vh;
    overflow-y:auto;
    z-index:999;
  }
  .nav-links.open{display:flex!important;}
  .nav-links>a,.nav-has-mega>button{
    width:100%;
    padding:16px 24px!important;
    font-size:17px!important;
    text-align:left;
    min-height:44px;
    display:block;
    border-bottom:1px solid rgba(107,76,59,0.06);
  }
  .hamburger{display:flex!important;min-height:44px;min-width:44px;align-items:center;justify-content:center;}
  .nav-inner{padding:0 24px!important;}
  .nav-name{font-size:1.4rem!important;}
  .nav-logo-wrap{height:44px!important;width:44px!important;}
  
  /* Mega menu on mobile — click toggle, not hover */
  .mega-menu{
    position:static!important;
    transform:none!important;
    width:100%!important;
    background:var(--warm,#f3ece0)!important;
    border-radius:8px!important;
    padding:20px!important;
    margin-top:8px;
    box-shadow:none!important;
    display:none!important;
  }
  .nav-has-mega:hover .mega-menu{display:none!important;}
  .nav-has-mega .mega-menu.mega-open{display:block!important;}
  .mega-menu{grid-template-columns:1fr!important;}
  .mega-col-title{color:var(--sage,#6a8e68)!important;}
  .mega-link{color:var(--dim,#7a6e62)!important;padding:10px 0!important;min-height:44px;display:flex;align-items:center;}
  .mega-link:hover{color:var(--brown3,#4a3328)!important;}
}

/* ─── VIDEO HERO — HIDDEN ON MOBILE ─── */
@media(max-width:768px){
  .hero-video{display:none!important;}
  .hero-overlay{
    background:linear-gradient(135deg,
      rgba(250,246,240,0.96) 0%,
      rgba(243,236,224,0.85) 40%,
      rgba(237,229,213,0.95) 100%)!important;
  }
}

/* ─── PARALLAX DISABLED ON MOBILE ─── */
@media(max-width:768px){
  *{background-attachment:scroll!important;}
}

/* ─── VIDEO BREAK DIVIDERS — SHORTER ON MOBILE ─── */
@media(max-width:768px){
  .video-break{height:280px!important;}
  .video-break-quote{font-size:1.2rem!important;padding:20px!important;}
}
@media(max-width:480px){
  .video-break{height:220px!important;}
}

/* ─── HERO MOBILE ─── */
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr!important;gap:32px!important;padding:80px 20px 50px!important;}
  .hero h1{font-size:2.2rem!important;}
  .hero-sub{font-size:1.05rem!important;}
  .hero-verse{font-size:1.1rem!important;padding-left:16px!important;}
  .hero-eyebrow{font-size:12px!important;}
  .hero-card{padding:32px 24px!important;}
  .hero-card-stat{font-size:3rem!important;}
  .hero-card-note{font-size:15px!important;}
  .btn-primary,.btn-secondary,.btn-donate,.btn-donate-lg{
    width:100%!important;
    text-align:center!important;
    padding:18px 28px!important;
    font-size:15px!important;
    min-height:48px;
  }
  .hero-btns{flex-direction:column!important;gap:12px!important;}
}

/* ─── SECTIONS MOBILE ─── */
@media(max-width:768px){
  .section{padding:60px 20px!important;}
  .sh{font-size:1.7rem!important;}
  .ss{font-size:1rem!important;}
  .mission{padding:50px 20px!important;}
  .mission h2{font-size:1.7rem!important;}
  .mission p{font-size:1rem!important;}
}

/* ─── GRIDS — ALL STACK ON MOBILE ─── */
@media(max-width:768px){
  .card-grid{grid-template-columns:1fr!important;}
  .pillars{grid-template-columns:1fr!important;}
  .about-grid{grid-template-columns:1fr!important;gap:32px!important;}
  .footer-inner{grid-template-columns:1fr!important;gap:24px!important;}
  .hub-grid{grid-template-columns:1fr!important;}
  .related-grid{grid-template-columns:1fr!important;}
  .form-row{grid-template-columns:1fr!important;gap:10px!important;}
}

/* ─── CARD MOBILE ─── */
@media(max-width:768px){
  .card-img{height:220px!important;}
  .card-body{padding:22px 20px!important;}
  .card-name{font-size:1.35rem!important;}
  .card-desc{font-size:15px!important;}
}

/* ─── PILLAR MOBILE ─── */
@media(max-width:768px){
  .pillar{padding:32px 20px!important;}
  .pillar-num{font-size:3rem!important;}
  .pillar-title{font-size:1.25rem!important;}
  .pillar-desc{font-size:15px!important;}
}

/* ─── ABOUT IMAGE MOBILE ─── */
@media(max-width:768px){
  .about-img img{min-height:300px!important;}
  .about-verse{font-size:1.05rem!important;padding:20px 18px!important;}
}

/* ─── ARTICLE PAGES MOBILE ─── */
@media(max-width:768px){
  .article-hero{padding:80px 20px 44px!important;}
  .article-hero h1{font-size:1.9rem!important;}
  .article-answer{font-size:1rem!important;padding:16px 18px!important;}
  .article-body{padding:36px 20px 50px!important;}
  .article-body h2{font-size:1.5rem!important;margin:32px 0 14px!important;}
  .article-body h3{font-size:1.2rem!important;}
  .article-body p,.article-body ul,.article-body ol{font-size:1rem!important;}
  
  /* Stat callouts */
  .stat-callout{padding:20px 18px!important;margin:20px 0!important;}
  .stat-num{font-size:2.2rem!important;}
  .stat-text{font-size:14px!important;}
  
  /* Verse blocks */
  .verse-block{font-size:1.05rem!important;padding:20px 18px!important;margin:20px 0!important;}
  
  /* Tables */
  .comp-table{font-size:13px!important;}
  .comp-table th,.comp-table td{padding:10px 10px!important;}
  
  /* FAQ */
  .faq-item{padding:18px 0!important;}
  .faq-item h3{font-size:1.15rem!important;}
  .faq-item p{font-size:15px!important;}
  
  /* Related cards */
  .related-card{padding:20px 18px!important;}
  .related-card h4{font-size:1.1rem!important;}
  
  /* Hub cards */
  .hub-card{padding:24px 20px!important;}
  .hub-card h3{font-size:1.2rem!important;}
}

/* ─── CTA SECTION MOBILE ─── */
@media(max-width:768px){
  .cta{padding:60px 20px!important;}
  .cta h2{font-size:1.8rem!important;}
  .cta p{font-size:1rem!important;}
  .article-cta{padding:50px 20px!important;}
  .article-cta h2{font-size:1.6rem!important;}
  .article-cta p{font-size:1rem!important;}
  .article-cta .btn-primary{width:100%!important;text-align:center!important;padding:18px 28px!important;}
  .cta-form-wrap{padding:24px 18px!important;}
}

/* ─── FOOTER MOBILE ─── */
@media(max-width:768px){
  footer{padding:32px 20px 20px!important;}
  .footer-brand{font-size:1.5rem!important;}
  .footer-tagline{font-size:15px!important;}
}

/* ─── SMALL MOBILE (≤480px) ─── */
@media(max-width:480px){
  .hero h1{font-size:1.9rem!important;}
  .hero-inner{padding:70px 16px 40px!important;}
  .section{padding:48px 16px!important;}
  .article-hero{padding:70px 16px 36px!important;}
  .article-body{padding:28px 16px 40px!important;}
  .nav-name{font-size:1.2rem!important;}
}