/* ============================================================
   Falah Academy — shared polish layer
   Loaded after each page's inline <style>. Handles:
   1. Mobile/tablet responsiveness (the pages use inline styles,
      so overrides here use !important on purpose)
   2. Scroll-reveal animation (paired with assets/site.js)
   3. Small interaction polish (card lift, focus rings)
   ============================================================ */

html{scroll-behavior:smooth}
img{max-width:100%}

/* Focus visibility for keyboard users */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #F7941D;outline-offset:2px;border-radius:8px}

/* Gentle lift on small cards (matches the inline card shadow used site-wide) */
div[style*="box-shadow:0 4px 16px"]{transition:transform .25s ease,box-shadow .25s ease}
div[style*="box-shadow:0 4px 16px"]:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(20,60,35,.14)}

/* Scroll reveal — .rvl is added by site.js only when JS + motion are OK */
.rvl{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rvl.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Nav hamburger (hidden on desktop; the ≤980px block below
   turns it on and collapses .hdr nav into its dropdown) ---------- */
.nav-toggle{display:none;border:none;cursor:pointer;align-items:center;justify-content:center;background:#E9F3EB;color:#166B38;width:42px;height:42px;border-radius:999px;margin-left:auto;transition:background .15s,color .15s}
.nav-toggle:hover{background:#D8EBDC}
.nav-toggle[aria-expanded="true"]{background:#1B7A40;color:#fff}
.nav-toggle .bars{display:flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle .bars span{display:block;height:2px;border-radius:2px;background:currentColor}

/* ---------- Tablet (≤980px) ---------- */
@media(max-width:980px){
  .hdr{position:relative}
  .hdr nav{display:none!important;position:absolute;top:calc(100% + 12px);right:24px;flex-direction:column;align-items:stretch;min-width:220px;width:auto;background:#fff;border-radius:20px;box-shadow:0 14px 38px rgba(20,60,35,.20);padding:10px;z-index:60}
  .hdr nav.nav-open{display:flex!important}
  .hdr nav .nav-link{border-radius:12px;padding:12px 14px}
  .nav-toggle{display:flex}

  .rg2{grid-template-columns:1fr!important}
  .rg3{grid-template-columns:1fr 1fr!important}
  .rg4{grid-template-columns:1fr 1fr!important}
  .fgrid{grid-template-columns:1fr 1fr!important}
}

/* ---------- Phone (≤640px) ---------- */
@media(max-width:640px){
  h1{font-size:clamp(34px,9.5vw,44px)!important}
  h2{font-size:clamp(25px,7vw,31px)!important}

  .topbar{font-size:13px!important;padding:8px 14px!important}
  .hdr{gap:10px}
  .hdr img{width:42px!important;height:42px!important}
  .hdr>a>span>span:first-child{font:600 17px 'Fredoka',sans-serif!important}
  .hdr>a>span>span:last-child{font-size:9px!important}
  .hdr .cta-pill{font-size:13px;padding:8px 12px}

  .rg2,.rg3,.rg4,.fgrid,.fldg,.field-grid{grid-template-columns:1fr!important}

  .hero-visual{height:320px!important;margin-top:8px}

  /* Programs daily-rhythm timeline: tighter time column */
  .tl{grid-template-columns:52px 20px 1fr!important;gap:0 12px!important}
  .tl>div:nth-child(3n+1){font-size:16px!important;padding-top:16px!important}

  /* Big rounded section corners feel oversized on small screens */
  section[style*="border-radius:60px"],footer[style*="border-radius:60px"]{border-radius:36px 36px 0 0!important}
}