/* =====================================================================
   Ihsabha — Homepage v2 (redesigned 19 August 2026)
   Scope: loaded ONLY by /index.html and /ar/index.html — no other page on
   the site references this file, and this file does not modify a single
   selector from assets/css/style.css. It only adds new "ihs-*" prefixed
   classes for the new homepage layout. Calculator pages, their engines,
   and assets/js/*.js are untouched by this redesign.
   Reuses design tokens already defined in style.css (:root and
   [data-theme="dark"]) so the new sections automatically follow the
   site's existing light/dark theme and RTL support — no color or
   direction is hardcoded here beyond a couple of fixed brand accents.
   ===================================================================== */

.ihs-section{padding:68px 20px;}
.ihs-section.is-tight{padding-top:0;}
.ihs-container{max-width:1180px;margin:0 auto;}
.ihs-section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
.ihs-section-head.is-left{text-align:start;margin:0 0 32px;}
.ihs-eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--health-bg);color:var(--brand);
  font-weight:700;font-size:14px;letter-spacing:.02em;padding:6px 14px;border-radius:999px;margin-bottom:16px;}
.ihs-section-head h2{font-size:32px;margin:0 0 10px;}
.ihs-section-head p{color:var(--muted);font-size:17.5px;font-weight:500;margin:0;line-height:1.6;}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
/* overflow was previously hidden here too, but that clipped the search-suggestions dropdown
   (.ihs-search-results), which must extend below the hero to show its full result list. The
   decorative blobs are already self-clipped by .ihs-hero-decor below, so this section no longer
   needs its own overflow:hidden — fixed 20 August 2026. */
.ihs-hero{position:relative;padding:64px 20px 20px;}
.ihs-hero-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ihs-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.16;}
.ihs-blob.b1{width:420px;height:420px;background:var(--brand);top:-160px;inset-inline-start:-120px;}
.ihs-blob.b2{width:340px;height:340px;background:var(--accent);top:40px;inset-inline-end:-140px;opacity:.14;}
[data-theme="dark"] .ihs-blob{opacity:.22;filter:blur(80px);}

.ihs-hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ihs-hero-text{max-width:720px;display:flex;flex-direction:column;align-items:center;}
.ihs-hero h1{font-size:clamp(30px,5vw,48px);line-height:1.16;margin:2px 0 16px;}
.ihs-hero-lead{font-size:19px;color:var(--muted);font-weight:500;line-height:1.65;max-width:600px;margin:0 0 30px;}

.ihs-hero-search{width:100%;max-width:600px;position:relative;}
.ihs-hero-search .search-box{width:100%;margin:0;padding:18px 22px 18px 52px;border-radius:18px;border:2px solid var(--line);
  font-size:18px;font-weight:500;background:var(--surface);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.07);
  transition:border-color .15s,box-shadow .15s;}
html[dir="rtl"] .ihs-hero-search .search-box{padding:18px 52px 18px 22px;}
.ihs-hero-search .search-box:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent), 0 10px 28px rgba(0,0,0,.07);}
.ihs-hero-search-icon{position:absolute;inset-inline-start:20px;top:50%;transform:translateY(-50%);z-index:2;
  width:20px;height:20px;color:var(--muted2);pointer-events:none;}
.ihs-hero-search-icon svg{width:100%;height:100%;display:block;}

.ihs-trending{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center;max-width:640px;}
.ihs-trending-label{font-size:14.5px;font-weight:700;color:var(--muted2);}
.ihs-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px 6px 8px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
html[dir="rtl"] .ihs-chip{padding:6px 8px 6px 14px;}
.ihs-chip img{width:20px;height:20px;border-radius:50%;object-fit:contain;flex:none;}
.ihs-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.1);border-color:var(--brand);}

.ihs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:680px;width:100%;margin:36px auto 0;}
.ihs-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 6px;text-align:center;}
.ihs-stat-num{display:block;font-family:'Sora','Tajawal',sans-serif;font-size:24px;font-weight:800;color:var(--ink);}
.ihs-stat-label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px;}
@media(max-width:640px){.ihs-stats{grid-template-columns:repeat(2,1fr);}}

.ihs-hero-visual{display:none;}
@media(min-width:960px){
  .ihs-hero-inner{flex-direction:row;text-align:start;align-items:center;gap:48px;}
  .ihs-hero-text{align-items:flex-start;}
  html[dir="rtl"] .ihs-hero-text{align-items:flex-end;}
  .ihs-hero-lead{margin-inline:0;}
  .ihs-hero-visual{display:block;flex:0 0 340px;max-width:340px;position:relative;}
  /* Static by default (fixed in place, no continuous motion) — only pops up gently on
     hover/focus, then settles back down. Updated 20 Aug 2026 at the user's request
     (previously animated continuously; now stays still until the visitor's mouse is
     actually over it). */
  .ihs-hero-visual img{width:100%;height:auto;display:block;transform-origin:center bottom;
    transform:scale(1);filter:drop-shadow(0 20px 34px rgba(0,0,0,.14));
    transition:transform .35s ease,filter .35s ease;}
  .ihs-hero-visual:hover img,.ihs-hero-visual:focus-within img{
    transform:scale(1.06);filter:drop-shadow(0 30px 46px rgba(0,0,0,.18));}
}
@media(prefers-reduced-motion:reduce){
  .ihs-hero-visual img{transition:none;}
}

/* ---------------------------------------------------------------------
   Feature / trust strip
   --------------------------------------------------------------------- */
.ihs-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:860px){.ihs-features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.ihs-features{grid-template-columns:1fr;}}
.ihs-feature{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:start;}
.ihs-feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:14px;background:var(--health-bg);}
.ihs-feature h3{font-size:17px;margin:0 0 6px;color:var(--ink);}
.ihs-feature p{font-size:14.5px;color:var(--muted);margin:0;font-weight:500;line-height:1.6;}

/* ---------------------------------------------------------------------
   Popular calculators
   --------------------------------------------------------------------- */
.ihs-popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.ihs-popular-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;}
.ihs-popular-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08);border-color:var(--brand);}
.ihs-popular-icon{width:46px;height:46px;border-radius:12px;flex:none;background:var(--health-bg);
  display:flex;align-items:center;justify-content:center;}
.ihs-popular-icon img{width:26px;height:26px;object-fit:contain;}
.ihs-popular-text h3{font-size:16px;margin:0 0 3px;color:var(--ink);}
.ihs-popular-text p{font-size:13px;color:var(--muted);margin:0;font-weight:500;}

/* ---------------------------------------------------------------------
   Categories grid v2
   --------------------------------------------------------------------- */
/* Five tidy columns on desktop (was 4, at the user's request) — deterministic column
   counts at each breakpoint rather than auto-fill, so the grid always reads as full,
   even rows instead of an unpredictable last-row wrap. Cards/icons/type scaled down to
   match the narrower column. */
.ihs-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:560px){.ihs-cat-grid{grid-template-columns:repeat(3,1fr);gap:14px;}}
@media(min-width:860px){.ihs-cat-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1180px){.ihs-cat-grid{grid-template-columns:repeat(5,1fr);}}
.ihs-cat-card{--cc:var(--brand);--cc-bg:var(--health-bg);display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;}
.ihs-cat-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.10);}
.ihs-cat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  background:var(--cc-bg);
  background:linear-gradient(150deg,color-mix(in srgb, var(--cc) 30%, var(--cc-bg)) 0%, var(--cc-bg) 100%);
  border:1px solid color-mix(in srgb, var(--cc) 35%, transparent);}
.ihs-cat-icon img{width:25px;height:25px;object-fit:contain;}
.ihs-cat-card h3{font-size:15.5px;margin:0 0 4px;color:var(--ink);line-height:1.3;}
.ihs-cat-card p{font-size:12.5px;color:var(--muted);margin:0 0 12px;font-weight:500;line-height:1.5;min-height:32px;}
.ihs-cat-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;}
.ihs-cat-count{font-weight:700;color:var(--cc);background:var(--cc-bg);padding:3px 9px;border-radius:999px;}
.ihs-cat-arrow{color:var(--muted2);font-size:16px;line-height:1;transition:transform .18s,color .18s;}
.ihs-cat-card:hover .ihs-cat-arrow{color:var(--cc);transform:translateX(4px);}
html[dir="rtl"] .ihs-cat-card:hover .ihs-cat-arrow{transform:translateX(-4px);}

/* ---------------------------------------------------------------------
   Islamic spotlight banner
   --------------------------------------------------------------------- */
.ihs-spotlight{background:linear-gradient(135deg,var(--islamic-bg) 0%,var(--surface) 65%);border:1px solid var(--line);
  border-radius:24px;padding:40px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
.ihs-spotlight-icon{width:88px;height:88px;flex:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));}
.ihs-spotlight-text{flex:1;min-width:260px;}
.ihs-spotlight h2{font-size:25px;margin:0 0 10px;color:var(--ink);}
.ihs-spotlight p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.7;margin:0 0 20px;max-width:640px;}

.ihs-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:12px;font-size:15.5px;text-decoration:none;transition:transform .15s,box-shadow .15s,opacity .15s;}
.ihs-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.16);}
.ihs-btn.is-islamic{background:var(--islamic);}
.ihs-btn.is-light{background:#fff;color:var(--brand);}

/* ---------------------------------------------------------------------
   Why Ihsabha
   --------------------------------------------------------------------- */
.ihs-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:860px){.ihs-value-grid{grid-template-columns:1fr;}}
.ihs-value-card{text-align:start;}
.ihs-value-num{font-family:'Sora','Tajawal',sans-serif;font-size:14px;font-weight:800;color:var(--brand);margin-bottom:10px;letter-spacing:.03em;}
.ihs-value-card h3{font-size:19px;margin:0 0 8px;color:var(--ink);}
.ihs-value-card p{font-size:15.5px;color:var(--muted);font-weight:500;line-height:1.7;margin:0;}

/* ---------------------------------------------------------------------
   SEO intro copy wrapper
   --------------------------------------------------------------------- */
.ihs-intro{max-width:900px;margin:0 auto;line-height:1.85;}
.ihs-intro h2{font-size:26px;margin-bottom:14px;}
.ihs-intro p{color:var(--muted);font-size:16.5px;font-weight:500;}
.ihs-intro a{color:var(--brand);font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--brand) 35%, transparent);}

/* ---------------------------------------------------------------------
   FAQ accordion (native <details>/<summary> — works with zero JS)
   --------------------------------------------------------------------- */
.ihs-faq-list{max-width:760px;margin:0 auto;}
.ihs-faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--surface);overflow:hidden;}
.ihs-faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:16.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px;}
.ihs-faq-item summary::-webkit-details-marker{display:none;}
.ihs-faq-item summary::marker{content:"";}
.ihs-faq-plus{flex:none;font-size:22px;font-weight:400;color:var(--muted2);transition:transform .2s ease;line-height:1;}
.ihs-faq-item[open] .ihs-faq-plus{transform:rotate(45deg);color:var(--brand);}
.ihs-faq-item .ihs-faq-a{padding:0 22px 18px;color:var(--muted);font-size:15.5px;line-height:1.7;font-weight:500;}
.ihs-faq-more{text-align:center;margin-top:22px;}
.ihs-faq-more a{color:var(--brand);font-weight:700;text-decoration:none;font-size:15.5px;}
.ihs-faq-more a:hover{text-decoration:underline;}

/* ---------------------------------------------------------------------
   Final CTA
   --------------------------------------------------------------------- */
.ihs-cta{background:linear-gradient(135deg,var(--brand) 0%,#0B7A70 100%);border-radius:24px;padding:52px 32px;text-align:center;color:#fff;}
.ihs-cta h2{color:#fff;font-size:28px;margin:0 0 10px;}
.ihs-cta p{color:rgba(255,255,255,.88);font-size:16.5px;margin:0 0 24px;font-weight:500;}

/* ---------------------------------------------------------------------
   Scroll-reveal (progressive enhancement — see inline script).
   No-JS and reduced-motion visitors simply see the final state.
   --------------------------------------------------------------------- */
/* Visible by default (no-JS, JS-error, and crawler-safe). Only once the homepage script
   confirms it is running does it add "ihs-pre" (hidden) to each element right before
   observing it, then removes "ihs-pre" (with is-visible) when it scrolls into view or a
   safety-net timeout elapses — so content can never get stuck invisible. */
.ihs-reveal{opacity:1;transform:none;}
.ihs-reveal.ihs-pre{opacity:0;transform:translateY(18px);}
.ihs-reveal.is-visible{opacity:1;transform:translateY(0);}
.ihs-reveal.ihs-pre,.ihs-reveal.is-visible{transition:opacity .55s ease,transform .55s ease;}
@media(prefers-reduced-motion:reduce){
  .ihs-reveal.ihs-pre{opacity:1;transform:none;transition:none;}
  .ihs-cat-card,.ihs-popular-card,.ihs-chip,.ihs-btn{transition:none;}
}

@media(max-width:600px){
  .ihs-section{padding:48px 16px;}
  .ihs-spotlight{padding:28px 22px;}
  .ihs-cta{padding:40px 22px;}
}