/* =====================================================================
   s24-theme.css — تم پایه سایت (الگو: saat24.news)
   ---------------------------------------------------------------------
   قواعد این فایل:
   - فقط متغیر در :root تعریف می‌شود؛ هیچ استایل عمومی روی body ،html،
     * ،a یا img وجود ندارد.
   - همه متغیرها با پیشوند اختصاصی --s24- شروع می‌شوند.
   - هر باکس در فایل CSS خودش از همین متغیرها استفاده می‌کند.
   - نقطه شکست موبایل در کل پروژه: 800px
     (متغیر CSS داخل media query قابل استفاده نیست، پس این عدد را
     در فایل هر باکس هم به همین صورت ثابت بنویسید.)
   ===================================================================== */

/* فونت وزیرمتن — در صورت هاست محلی فونت، این خط را حذف و @font-face خودتان را جایگزین کنید */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap");

:root {
  /* ---------------- رنگ‌ها (برگرفته از saat24.news) ---------------- */
  --s24-color-primary:      #d00000;              /* قرمز برند — خط تاکید، لینک‌های ویژه */
  --s24-color-primary-dark: #a80000;              /* حالت hover قرمز */
  --s24-color-text:         #212529;              /* متن اصلی (rgb(33,37,41)) */
  --s24-color-text-muted:   #6c757d;              /* متن فرعی: تاریخ، سرویس، زیرنویس */
  --s24-color-heading:      #000000;              /* تیتر خبر و لینک تیتر (مشکی) */
  --s24-color-bg:           #e5e5e5;              /* پس‌زمینه کلی صفحه */
  --s24-color-surface:      #ffffff;              /* پس‌زمینه باکس‌ها */
  --s24-color-border:       #dee2e6;              /* خطوط جداکننده */

  /* ---------------- فونت ---------------- */
  --s24-font-family: "Vazirmatn RD", "Vazirmatn", Tahoma, Arial, sans-serif;

  /* ---------------- سایز تیترها و متن (دسکتاپ) ---------------- */
  --s24-fs-h1:      28px;   /* تیتر صفحه خبر */
  --s24-fs-h2:      22px;   /* تیتر بخش‌ها */
  --s24-fs-h3:      18px;   /* تیتر کارت خبر (مطابق باکس saat24) */
  --s24-fs-h4:      16px;   /* تیتر کارت کوچک */
  --s24-fs-body:    16px;   /* متن بدنه */
  --s24-fs-summary: 12.8px; /* خلاصه خبر (مطابق saat24) */
  --s24-fs-small:   12px;   /* تاریخ، سرویس، برچسب */

  /* ---------------- ارتفاع خط ---------------- */
  --s24-lh-heading: 1.2;    /* تیترها (21.6px برای فونت 18px) */
  --s24-lh-body:    1.5;    /* متن بدنه (24px برای فونت 16px) */
  --s24-lh-summary: 1.5;    /* خلاصه (19.2px برای فونت 12.8px) */

  /* ---------------- وزن فونت ---------------- */
  --s24-fw-normal: 400;
  --s24-fw-medium: 500;
  --s24-fw-bold:   700;

  /* ---------------- فاصله‌ها ---------------- */
  --s24-sp-1: 4px;
  --s24-sp-2: 8px;
  --s24-sp-3: 12px;
  --s24-sp-4: 16px;
  --s24-sp-5: 24px;
  --s24-sp-6: 32px;
  --s24-sp-7: 48px;

  --s24-box-gap: 6px;       /* فاصله عمودی فشرده بین باکس‌ها در چیدمان CMS */

  /* ---------------- عرض کلی سایت ---------------- */
  --s24-site-width:   1320px; /* حداکثر عرض کانتینر */
  --s24-site-gutter:  16px;   /* حاشیه کناری در نمایشگر باریک */
  --s24-content-width: 758px; /* عرض ستون محتوای اصلی (مطابق باکس‌های saat24) */

  /* ---------------- سایر ---------------- */
  --s24-radius:      4px;
  --s24-line-accent-w: 58px;  /* عرض خط قرمز امضای باکس‌ها */
  --s24-line-accent-h: 2px;   /* ضخامت خط قرمز */
}

/* ---------------- رفتار موبایل (تا 800px) ----------------
   فقط مقدار متغیرها عوض می‌شود؛ هیچ سلکتور عمومی وجود ندارد. */
@media (max-width: 800px) {
  :root {
    --s24-fs-h1: 22px;
    --s24-fs-h2: 20px;
    --s24-fs-h3: 18px;

    --s24-sp-6: 24px;
    --s24-sp-7: 32px;

    --s24-site-gutter: 12px;
  }
}