/* ═══════════════════════════════════════════════════════
   VK_TYPOGRAPHY_V1 — Typography & Theme Variables
   ═══════════════════════════════════════════════════════ */

/* CSS Variables — قابلة للتعديل من JS */
:root{
  --vk-fs-base: 17px;      /* حجم الجذر */
  --vk-fs-body: 1.15rem;   /* حجم المقالات */
  --vk-fs-para: 1.12rem;   /* حجم الفقرات */
  --vk-lh: 1.95;           /* ارتفاع السطر */
  --vk-para-gap: 1.4rem;   /* المسافة بين الفقرات */
  --vk-font-ar: 'Tajawal', system-ui, sans-serif;
  --vk-font-en: 'Inter', system-ui, sans-serif;
}

html{
  font-size: var(--vk-fs-base);
  font-family: var(--vk-font-ar);
}
[lang="en"] body,
body.lang-en,
body.lang-fr,
body.lang-es,
body.lang-pt,
body.lang-de{
  font-family: var(--vk-font-en);
}

/* ═══ المقالات التحليلية ═══ */
.ed-body{
  font-size: var(--vk-fs-body) !important;
  line-height: var(--vk-lh) !important;
  color: var(--text);
  letter-spacing: .005em;
}
.ed-body p{
  font-size: var(--vk-fs-para) !important;
  line-height: var(--vk-lh) !important;
  margin: 0 0 var(--vk-para-gap) !important;
  text-align: justify;
  text-justify: inter-word;
}
.ed-body h2{
  font-size: 1.55rem !important;
  line-height: 1.4 !important;
  font-weight: 800;
  color: var(--accent);
  margin: 2.4rem 0 1rem !important;
  padding-inline-start: .8rem !important;
  border-inline-start: 4px solid var(--accent);
}
.ed-body h3{
  font-size: 1.28rem !important;
  line-height: 1.45 !important;
  font-weight: 700;
  color: var(--text);
  margin: 1.8rem 0 .7rem !important;
}
.ed-body h4{
  font-size: 1.12rem !important;
  font-weight: 700;
  margin: 1.4rem 0 .5rem !important;
}
.ed-body ul,.ed-body ol{
  font-size: var(--vk-fs-para) !important;
  line-height: var(--vk-lh) !important;
  padding-inline-start: 1.6rem !important;
  margin: 0 0 var(--vk-para-gap) !important;
}
.ed-body li{ margin-bottom: .65rem !important; }
.ed-body strong{ font-weight: 800; color: var(--text); }
.ed-body em{ font-style: italic; color: var(--text2); }
.ed-body blockquote{
  border-inline-start: 4px solid var(--accent);
  padding: .7rem 1.2rem;
  background: rgba(34,197,94,.06);
  margin: 1.4rem 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.ed-body a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══ صفحة المقال ═══ */
.ed-wrap, .ed-article, .ed-content{
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 2rem 1.2rem 4rem !important;
}

.ed-title, .ed-h1, h1.ed-title{
  font-size: 2rem !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin-bottom: .8rem !important;
}

.ed-meta, .ed-kicker{
  font-size: .88rem !important;
  color: var(--text2) !important;
  margin-bottom: 1.2rem !important;
}

.ed-hero-img{
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 14px;
  margin: 1.4rem 0 .8rem;
  border: 1px solid var(--border);
}
.ed-img-credit{
  font-size: .78rem;
  color: var(--text3);
  text-align: center;
  margin: 0 0 1.6rem;
  font-style: italic;
}
.ed-img-credit a{ color: var(--text3); text-decoration: underline; }

.ed-style-badge{
  display: inline-block;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.3);
  padding: .3rem .85rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  margin: .4rem 0 1.1rem;
}

/* ═══ الأخبار والقوائم ═══ */
.news-title{ font-size: .95rem !important; line-height: 1.6 !important; }
.news-meta{ font-size: .78rem !important; }

.el-card-title, .el-card-name{
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  font-weight: 700;
}
.el-card-desc{
  font-size: .92rem !important;
  line-height: 1.7 !important;
  color: var(--text2);
}

/* ═══ Mobile ═══ */
@media(max-width: 600px){
  :root{ --vk-fs-base: 16px; --vk-fs-body: 1.06rem; --vk-fs-para: 1.04rem; }
  .ed-title, .ed-h1, h1.ed-title{ font-size: 1.6rem !important; }
  .ed-body h2{ font-size: 1.35rem !important; }
  .ed-body h3{ font-size: 1.15rem !important; }
}