/* تنسيقُ موقع «إسلام للجميع».
 *
 * **ملفٌّ واحدٌ لأربع صفحات** (عربيّتان وإنجليزيّتان). وكان التنسيق
 * مكتوبًا داخل كل صفحة، فلمّا صار الموقع بلغتين كان سيصير أربع نسخٍ
 * من الشيء نفسه — يُعدَّل في واحدةٍ ويُنسى في ثلاث.
 *
 * **ولا حاجة إلى قواعد اتجاهٍ منفصلة:** كلُّ ما هنا مكتوبٌ بالخصائص
 * المنطقية (`margin-inline-start`, `padding-block`, `border-inline`)
 * لا بـ`left`/`right`. فالصفحةُ العربية `dir=rtl` والإنجليزية `dir=ltr`،
 * والمتصفّحُ يقلب كلَّ شيءٍ وحده.
 */

  :root{
    /* لوحة ٦٫٠ — نفس قيم `lib/core/theme/app_colors.dart` حرفًا بحرف،
       فلا يختلف لونُ الموقع عن لون التطبيق. */
    --emerald:#0B7A45; --emerald-deep:#05502D; --emerald-night:#03331C;
    --mint:#14A45B; --emerald-soft:#DCF0E3;
    --canvas:#FBF6EA; --cream:#FFFDF6; --paper:#FFFFFF;
    --hairline:#E6DCC7; --gold:#D9A441; --gold-light:#F2D08A;
    --ink:#14301D; --ink-soft:#5A6E5F;
    --radius:22px; --shadow:0 18px 44px rgba(5,80,45,.13);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
    font-size:17px; line-height:1.85; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:Amiri,serif; font-weight:700; line-height:1.35; margin:0}
  a{color:var(--emerald); text-decoration:none}
  .wrap{max-width:1080px; margin:0 auto; padding:0 22px}

  /* ——— الشريط العلوي ——— */
  header{
    position:sticky; top:0; z-index:20; backdrop-filter:blur(12px);
    background:rgba(251,246,234,.86); border-bottom:1px solid var(--hairline);
  }
  header .wrap{display:flex; align-items:center; gap:14px; height:66px}
  header img{width:38px; height:38px}
  header .name{font-family:Amiri,serif; font-weight:700; font-size:21px}
  header nav{margin-inline-start:auto; display:flex; gap:22px; font-size:15px}
  header nav a{color:var(--ink-soft)}
  header nav a:hover{color:var(--emerald)}
  @media(max-width:720px){header nav{display:none}}

  /* ——— البهو ——— */
  .hero{
    position:relative; overflow:hidden; color:#fff; text-align:center;
    background:radial-gradient(120% 90% at 50% 0%,#0B7A45 0%,#05502D 45%,#03331C 100%);
    padding:76px 0 92px;
  }
  .hero::after{
    content:""; position:absolute; inset:auto 0 -1px 0; height:70px;
    background:linear-gradient(to bottom,transparent,var(--canvas));
  }
  .hero .emblem{
    width:156px; height:156px; margin:0 auto 26px; display:block;
    filter:drop-shadow(0 14px 34px rgba(217,164,65,.32));
  }
  .hero h1{font-size:clamp(38px,7vw,60px); color:#fff}
  .hero .latin{
    font-family:Amiri,serif; font-size:clamp(19px,3vw,26px);
    color:var(--gold-light); margin:6px 0 20px; letter-spacing:.5px;
  }
  .hero p.lead{
    max-width:640px; margin:0 auto; color:#CFE7DA; font-size:clamp(16px,2.4vw,19px);
  }
  .badges{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px 0 0;
  }
  .badge{
    border:1px solid rgba(242,208,138,.34); border-radius:999px;
    padding:7px 16px; font-size:14px; color:#DCF0E3;
    background:rgba(255,255,255,.05);
  }

  /* ——— أزرار التحميل ——— */
  .downloads{
    display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:34px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:12px; border-radius:16px;
    padding:15px 26px; font-weight:600; font-size:16px; transition:.18s;
    border:1px solid transparent;
  }
  .btn svg{width:26px; height:26px; flex:none}
  .btn-primary{
    background:#fff; color:var(--emerald-deep);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
  }
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-ghost{
    background:rgba(255,255,255,.08); color:#fff;
    border-color:rgba(242,208,138,.42);
  }
  .btn-ghost:hover{background:rgba(255,255,255,.15)}
  .btn small{display:block; font-weight:400; font-size:12.5px; opacity:.72; line-height:1.4}
  .apk-note{margin-top:16px; font-size:14px; color:#A9D3BB}

  /* ——— الأقسام ——— */
  section{padding:74px 0}
  .eyebrow{
    color:var(--gold); font-size:14px; font-weight:600; letter-spacing:1px;
    text-align:center; margin-bottom:8px;
  }
  section > .wrap > h2{font-size:clamp(28px,4.4vw,38px); text-align:center; color:var(--emerald-deep)}
  section > .wrap > p.sub{
    text-align:center; color:var(--ink-soft); max-width:620px; margin:14px auto 0;
  }

  .grid{
    display:grid; gap:18px; margin-top:44px;
    grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  }
  .card{
    background:var(--paper); border:1px solid var(--hairline);
    border-radius:var(--radius); padding:26px 24px; box-shadow:0 2px 10px rgba(5,80,45,.05);
  }
  .card .ico{
    width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
    background:var(--emerald-soft); color:var(--emerald-deep); margin-bottom:14px;
  }
  .card .ico svg{width:24px; height:24px}
  .card h3{font-size:21px; color:var(--emerald-deep); margin-bottom:6px}
  .card p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.75}

  /* ——— اللقطات ——— */
  .shots{
    display:flex; gap:20px; overflow-x:auto; padding:44px 22px 20px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .shots figure{margin:0; flex:none; width:236px; scroll-snap-align:center}
  .shots img{
    width:100%; border-radius:22px; border:5px solid #fff;
    box-shadow:var(--shadow); display:block;
  }
  .shots figcaption{
    text-align:center; font-size:14.5px; color:var(--ink-soft); margin-top:12px;
  }

  /* ——— التثبيت اليدوي ——— */
  .steps{counter-reset:s; margin:36px 0 0; padding:0; list-style:none}
  .steps li{
    counter-increment:s; position:relative; padding:0 62px 0 0; margin-bottom:24px;
  }
  .steps li::before{
    content:counter(s); position:absolute; inset-inline-start:0; top:0;
    width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
    background:var(--emerald); color:#fff; font-weight:700; font-family:Amiri,serif;
    font-size:19px;
  }
  .steps b{display:block; color:var(--emerald-deep); font-size:17.5px}
  .steps span{color:var(--ink-soft); font-size:15.5px}

  .note{
    background:var(--cream); border:1px solid var(--hairline);
    border-inline-start:4px solid var(--gold);
    border-radius:14px; padding:18px 20px; margin-top:30px;
    font-size:15.5px; color:var(--ink-soft);
  }
  .note b{color:var(--ink)}

  /* ——— الخصوصية ——— */
  .privacy{background:var(--emerald-deep); color:#fff}
  .privacy h2{color:#fff}
  .privacy .sub{color:#BFDDCC}
  .privacy .grid{margin-top:38px}
  .privacy .card{
    background:rgba(255,255,255,.06); border-color:rgba(242,208,138,.22);
    box-shadow:none;
  }
  .privacy .card h3{color:var(--gold-light)}
  .privacy .card p{color:#CFE7DA}
  .privacy .card .ico{background:rgba(242,208,138,.16); color:var(--gold-light)}

  footer{
    background:var(--emerald-night); color:#8FB9A2; padding:44px 0; font-size:14.5px;
  }
  footer .wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:center}
  footer a{color:var(--gold-light)}
  footer .links{margin-inline-start:auto; display:flex; gap:20px; flex-wrap:wrap}

/* ——— مبدّلُ اللغة ———
   **رابطٌ لا زرُّ جافاسكربت.** الصفحتان مستقلّتان لكلٍّ عنوانُها، فمن
   شارك الرابطَ شارك اللغةَ معه، ومن حفظه في المفضّلة عاد إليها. وزرٌّ
   يبدّل النصَّ في المكان يعطي عنوانًا واحدًا للغتين — فلا يُشارَك ولا
   يُفهرَس ولا يعمل بلا جافاسكربت. */
.lang-switch{
  margin-inline-start:14px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border:1px solid var(--hairline); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--emerald);
  background:var(--paper); white-space:nowrap;
}
.lang-switch:hover{background:var(--emerald-soft)}
header nav + .lang-switch{margin-inline-start:14px}
@media(max-width:720px){header nav+.lang-switch{margin-inline-start:auto}}