/* ============================================================
   Rainbow Edu — Mobile & viewing-experience enhancements
   Safe, additive layer. Does not alter content or copy.
   ============================================================ */

/* 1. Never let anything cause horizontal scroll on phones */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* 2. Responsive media by default */
img, video, iframe, svg { max-width: 100%; height: auto; }
img { image-rendering: auto; }

/* 3. Smooth, comfortable reading */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* 4. Fluid headline sizing on small screens (caps only, never enlarges desktop) */
@media (max-width: 760px){
  h1 { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.3rem, 5.8vw, 1.9rem) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(1.1rem, 4.8vw, 1.5rem) !important; }
  p, li { font-size: 1rem; line-height: 1.65; }
}

/* 5. Comfortable tap targets (WCAG) for links/buttons in nav & CTAs */
@media (max-width: 760px){
  a.btn, button, .btn, .cta, nav a, .nav a {
    min-height: 44px;
  }
  a.btn, .btn, .cta, button { padding-top: .7em; padding-bottom: .7em; }
}

/* 6. Tame oversized hero heights on phones so content is reachable */
@media (max-width: 760px){
  #hero, .page-hero, .eduhero, .ig-hero, #ehero, .ehero {
    min-height: auto !important;
  }
  #hero { padding-top: 84px !important; padding-bottom: 48px !important; }
  .page-hero { padding-top: 96px !important; padding-bottom: 40px !important;
               background-attachment: scroll !important; }
}

/* 7. Kill fixed background-attachment (janky / blank on iOS) */
@media (max-width: 980px){
  [style*="background-attachment:fixed"], .hero-bg, .page-hero, .eduhero, .ig-hero {
    background-attachment: scroll !important;
  }
}

/* 8. Single-column safety net for common multi-col grids on phones */
@media (max-width: 640px){
  .grid, .cards, .row, .cols, .two-col, .three-col, .four-col,
  .svc-grid, .ff-grid, .feature-grid, .card-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 16px !important;
  }
  .flex-row, .editorial-block { flex-direction: column !important; }
}

/* 9. Tables scroll instead of breaking layout */
@media (max-width: 760px){
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 10. Prevent text from being trapped under sticky nav when jumping to anchors */
:target { scroll-margin-top: 90px; }

/* 11. Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 12. Avoid layout shift: give a soft placeholder bg while images load */
img[loading="lazy"] { background: linear-gradient(135deg,#eef2f7,#e3e9f0); }