/* ==========================================================================
   استدلال — منصة تدريب مهارات الاستدلال الكمي واللفظي
   نظام التصميم الأساسي
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@500;600;700;800;900&display=swap');

:root{
  /* ألوان العلامة */
  --brand-900:#241a5e;
  --brand-800:#2f2278;
  --brand-700:#3d2b96;
  --brand-600:#4c34b8;
  --brand-500:#5b3fd6;
  --brand-400:#7c63e3;
  --brand-300:#a596ec;
  --brand-100:#eae6fb;
  --brand-50:#f5f3fd;

  /* اللون الكمي */
  --quant-700:#0a6e63;
  --quant-600:#0d8f80;
  --quant-500:#12ab98;
  --quant-400:#3fc2b0;
  --quant-100:#dcf5f0;
  --quant-50:#f0fbf9;

  /* اللون اللفظي */
  --verbal-700:#a8460a;
  --verbal-600:#c8590d;
  --verbal-500:#e2740f;
  --verbal-400:#ee9a45;
  --verbal-100:#fdead2;
  --verbal-50:#fff6ec;

  /* دلالية */
  --success-600:#0d8f5f;
  --success-100:#d8f5e6;
  --danger-600:#d1374a;
  --danger-100:#fce2e6;
  --warning-600:#c8850d;
  --warning-100:#fbecd0;

  /* محايدة */
  --ink-900:#191527;
  --ink-800:#2b2440;
  --ink-700:#41395c;
  --ink-600:#5b5279;
  --ink-500:#7b7296;
  --ink-400:#a39dbb;
  --ink-300:#cbc6dc;
  --ink-200:#e4e0f1;
  --ink-100:#f0edf9;
  --ink-50:#f9f8fd;
  --paper:#ffffff;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow-sm:0 1px 2px rgba(36,26,94,.06), 0 1px 1px rgba(36,26,94,.04);
  --shadow-md:0 8px 24px -8px rgba(36,26,94,.18);
  --shadow-lg:0 20px 45px -12px rgba(36,26,94,.28);
  --shadow-glow:0 0 0 4px rgba(91,63,214,.15);

  --font-head:'Cairo', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Cairo', sans-serif;

  --container:1180px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink-50);
  color:var(--ink-800);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  color:var(--ink-900);
  line-height:1.35;
  margin:0 0 .6em;
  font-weight:800;
}
h1{ font-size:clamp(1.9rem,4vw,3rem); }
h2{ font-size:clamp(1.5rem,3vw,2.15rem); }
h3{ font-size:clamp(1.2rem,2.4vw,1.55rem); }
p{ margin:0 0 1em; color:var(--ink-700); }
a{ color:var(--brand-600); text-decoration:none; }
ul,ol{ padding-inline-start:1.3em; color:var(--ink-700); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}

/* ==== شريط التنقل ==== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ink-200);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:900; font-size:1.25rem;
  color:var(--ink-900);
}
.brand .logo-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(145deg,var(--brand-500),var(--quant-500));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:1.05rem; flex:none;
  box-shadow:var(--shadow-sm);
}
.brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.65rem; color:var(--ink-500); }

.nav-links{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:inline-block; padding:8px 11px; border-radius:999px;
  color:var(--ink-700); font-weight:700; font-size:.87rem;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.nav-links a:hover{ background:var(--brand-100); color:var(--brand-700); }
.nav-links a.active{ background:var(--brand-600); color:#fff; }

.nav-cta{
  display:flex; align-items:center; gap:10px;
}
.sync-trigger{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--ink-200);
  background:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .15s, border-color .15s; flex:none;
}
.sync-trigger:hover{ background:var(--brand-50); border-color:var(--brand-300); }

/* ==== أزرار ==== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:800; font-size:.98rem;
  border:2px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, color .15s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ box-shadow:var(--shadow-lg); }
.btn-quant{ background:linear-gradient(135deg,var(--quant-600),var(--quant-500)); color:#fff; box-shadow:var(--shadow-md); }
.btn-verbal{ background:linear-gradient(135deg,var(--verbal-600),var(--verbal-500)); color:#fff; box-shadow:var(--shadow-md); }
.btn-outline{ background:#fff; border-color:var(--ink-200); color:var(--ink-800); }
.btn-outline:hover{ border-color:var(--brand-400); color:var(--brand-700); }
.btn-ghost{ background:transparent; color:var(--brand-700); }
.btn-ghost:hover{ background:var(--brand-100); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:1.05rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ==== شارات ==== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:999px; font-size:.78rem; font-weight:800;
  background:var(--brand-100); color:var(--brand-700);
}
.badge-quant{ background:var(--quant-100); color:var(--quant-700); }
.badge-verbal{ background:var(--verbal-100); color:var(--verbal-700); }
.badge-success{ background:var(--success-100); color:var(--success-600); }
.badge-danger{ background:var(--danger-100); color:var(--danger-600); }
.badge-warning{ background:var(--warning-100); color:var(--warning-600); }

/* ==== بطاقات ==== */
.card{
  background:var(--paper); border-radius:var(--radius-lg);
  border:1px solid var(--ink-100); box-shadow:var(--shadow-sm);
  padding:26px;
}
.card-hover{ transition:transform .2s, box-shadow .2s; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* ==== قسم عام ==== */
.section{ padding-block:64px; }
.section-tight{ padding-block:36px; }
.section-head{ text-align:center; max-width:680px; margin-inline:auto; margin-bottom:40px; }
.eyebrow{
  display:inline-block; font-weight:800; font-size:.82rem; color:var(--brand-600);
  background:var(--brand-100); padding:6px 16px; border-radius:999px; margin-bottom:14px;
}

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ==== تذييل ==== */
.site-footer{
  background:var(--ink-900); color:var(--ink-300); padding-block:48px 28px; margin-top:60px;
}
.site-footer a{ color:var(--ink-200); }
.site-footer .container{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
.footer-note{ font-size:.85rem; color:var(--ink-500); margin-top:28px; text-align:center; }

/* ==== شريط تقدّم ==== */
.progress-track{
  width:100%; height:10px; background:var(--ink-100); border-radius:999px; overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-500),var(--quant-500));
  transition:width .35s ease;
}

/* ==== عناصر مساعدة ==== */
.text-center{ text-align:center; }
.muted{ color:var(--ink-500); }
.flex{ display:flex; }
.flex-col{ flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}

/* ==== لافتة تنبيه محتوى (مفهوم/تنبيه/خطأ شائع...) ==== */
.callout{
  border-radius:var(--radius-md); padding:18px 20px; margin:20px 0;
  border-inline-start:5px solid var(--brand-500); background:var(--brand-50);
}
.callout-title{
  display:flex; align-items:center; gap:8px; font-weight:800; color:var(--brand-700);
  margin-bottom:6px; font-family:var(--font-head); font-size:.95rem;
}
.callout p:last-child{ margin-bottom:0; }
.callout-concept{ border-color:var(--brand-500); background:var(--brand-50); }
.callout-concept .callout-title{ color:var(--brand-700); }
.callout-info{ border-color:#2f7fd6; background:#eaf3fd; }
.callout-info .callout-title{ color:#215b9c; }
.callout-warning{ border-color:var(--warning-600); background:var(--warning-100); }
.callout-warning .callout-title{ color:var(--warning-600); }
.callout-error{ border-color:var(--danger-600); background:var(--danger-100); }
.callout-error .callout-title{ color:var(--danger-600); }
.callout-strategy{ border-color:var(--quant-600); background:var(--quant-50); }
.callout-strategy .callout-title{ color:var(--quant-700); }
.callout-example{ border-color:var(--verbal-600); background:var(--verbal-50); }
.callout-example .callout-title{ color:var(--verbal-700); }
.callout-check{ border-color:var(--brand-400); background:#fff; border:1px solid var(--ink-200); border-inline-start:5px solid var(--brand-400); }

/* ==== شبكة استجابة عامة ==== */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .desktop-only{ display:none !important; }
  .nav-cta{ gap:8px; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .section{ padding-block:36px; }
  .card{ padding:20px; }
}