/* =========================================================
   Date1.ir | Ornaments (جای‌خالی نقش و نگار ایرانی باستانی)
   -----------------------------------------------------------
   این فایل جدا از style.css نگه داشته شده تا اضافه/ویرایش
   نقش‌ها بدون دست‌زدن به استایل اصلی سایت انجام بشه.

   نحوه‌ی استفاده: راهنمای کامل در assets/img/ornaments/README.md

   پیش‌فرض: همه‌ی اسلات‌ها خالی و بدون ارتفاع/نامرئی هستن.
   با ست‌کردن متغیر مربوطه (url به فایل SVG/PNG خودت)، آن
   بخش به‌طور خودکار ارتفاع می‌گیره و نمایش داده میشه.
   ========================================================= */

:root {
    --ornament-header-divider: none;
    --ornament-footer-divider: none;
    --ornament-today-corner: none;
    --ornament-modal-top: none;
    --ornament-header-watermark: none;

    --ornament-opacity: 0.9;
    --ornament-watermark-opacity: 0.06;
}

/* اگه نسخه‌ی مخصوص تم تاریک داری (مثلاً همون نقش با رنگ روشن‌تر)،
   همینجا با همون نام متغیر دوباره تعریفش کن. نمونه:

   [data-theme="dark"] {
       --ornament-header-divider: url('img/ornaments/header-divider-dark.svg');
   }
*/

/* موقعیت‌دهی لازم برای اسلات‌های absolute (بدون دست‌زدن به style.css اصلی) */
.header-inner { position: relative; }
.today-card-inner { position: relative; }

/* ---------- نوار باریک زیر هدر ---------- */
.ornament-header-divider {
    width: 100%;
    height: 0; /* بعد از ست‌کردن تصویر بالا، این عدد رو به 36px تغییر بده */
    background-image: var(--ornament-header-divider);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    opacity: var(--ornament-opacity);
}

/* ---------- نوار باریک بالای فوتر ---------- */
.ornament-footer-divider {
    width: 100%;
    height: 0; /* بعد از ست‌کردن تصویر، به 28px تغییر بده */
    background-image: var(--ornament-footer-divider);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    opacity: var(--ornament-opacity);
}

/* ---------- نماد گوشه‌ی کارت «امروز» ---------- */
.ornament-today-corner {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 0;  /* بعد از ست‌کردن تصویر، به 48px تغییر بده */
    height: 0; /* بعد از ست‌کردن تصویر، به 48px تغییر بده */
    background-image: var(--ornament-today-corner);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: var(--ornament-opacity);
    pointer-events: none;
}

/* ---------- نوار بالای مودال‌ها و پاپ‌آپ‌ها ---------- */
.ornament-modal-top {
    width: 100%;
    height: 0; /* بعد از ست‌کردن تصویر، به 10px تغییر بده */
    background-image: var(--ornament-modal-top);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
    opacity: var(--ornament-opacity);
}

/* ---------- واترمارک بسیار کم‌رنگ پشت عنوان هدر ---------- */
.ornament-header-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-image: var(--ornament-header-watermark);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: var(--ornament-watermark-opacity);
    pointer-events: none;
    z-index: 0;
}

/* =========================================================
   چک‌لیست فعال‌سازی هر اسلات (چون :has() پشتیبانی محدودی داره،
   ساده‌ترین و مطمئن‌ترین راه فعال‌سازی دستیه):

   1. فایل SVG/PNG رو در assets/img/ornaments/ بذار
   2. متغیر مربوطه رو در :root بالا با url('img/ornaments/xxx.svg') پر کن
   3. در همین فایل، مقدار height مربوط به همون اسلات رو از 0
      به عدد پیشنهادی جدول README تغییر بده (مثلاً 36px برای هدر)

   مثال کامل برای نوار هدر:
   :root { --ornament-header-divider: url('img/ornaments/header-divider.svg'); }
   .ornament-header-divider { height: 36px; }
   ========================================================= */