/* =========================================================
   app.css – لایه‌ی اختصاصی اپلیکیشن
   - بدون رنگ پس‌زمینه‌ی کلی برای صفحه
   - تعریف توکن‌های سایز، radius، سایه و فاصله
   - utilityهای مختص اپ که روی theme.css سوار می‌شوند
========================================================= */

/* توکن‌های طراحی (Design Tokens) */
:root {
    /* شعاع گوشه‌ها */
    --app-radius-sm: 8px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;
    --app-radius-pill: 999px;

    /* سایزهای radius توسعه‌پذیر (برای صحنه‌ها/کارت‌های خاص) */
    --app-radius-xl: 24px;

    /* سایه‌ها */
    --app-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.10);
    --app-shadow-md:   0 12px 30px rgba(15, 23, 42, 0.18);
    --app-shadow-lg:   0 18px 45px rgba(15, 23, 42, 0.22);

    /* سایه‌های تعاملی (hover) */
    --app-shadow-hover-primary: 0 8px 20px rgba(37, 99, 235, 0.35);
    --app-shadow-hover-dark:    0 8px 20px rgba(15, 23, 42, 0.35);

    /* اندازه فونت‌های پایه مخصوص اپ (روی theme.css سوار می‌شود) */
    --app-font-size-xs: 13px;
    --app-font-size-sm: 14px;
    --app-font-size-md: 16px;
    --app-font-size-lg: 18px;
    --app-font-size-xl: 22px;
    --app-font-size-2xl: 28px;

    /* فاصله‌های استاندارد مخصوص اپ */
    --app-space-xs: 4px;
    --app-space-sm: 8px;
    --app-space-md: 16px;
    --app-space-lg: 24px;
    --app-space-xl: 32px;
    --app-space-2xl: 40px;

    /* عرض‌های استاندارد */
    --app-container-narrow-max: 720px;
    --app-welcome-card-max: 640px;

    /* رنگ‌ها (اگر theme.css رنگ‌ها را توکن نمی‌دهد، اینجا استانداردش کن) */
    --app-color-surface: #ffffff;
    --app-color-text-muted: #4b5563;
    --app-color-text-on-dark: #f9fafb;

    /* دکمه‌ها (به جای عدد خام در کلاس‌ها) */
    --app-btn-font-weight: 600;

    --app-btn-pad-y: 12px;
    --app-btn-pad-x: 28px;

    --app-btn-sm-pad-y: 8px;
    --app-btn-sm-pad-x: 20px;

    --app-btn-lg-pad-y: 14px;
    --app-btn-lg-pad-x: 32px;

    /* Motion / interaction */
    --app-hover-raise-y: -1px;

    /* Scene: (قبلاً Sky) – کنترل‌پذیر و یک‌دست */
    --app-scene-radius: var(--app-radius-xl);

    /*
       تصویر پیش‌فرض صحنه:
       - اگر ست نشود، همان sky اولیه است
       - برای هر صحنه، فقط این متغیر override می‌شود
       - هنوز برای صفحات قدیمی می‌تواند استفاده شود
    */
    /* مسیر نسبی تا هنگام collectstatic نسخهٔ هش‌دار آن تولید شود (کش طولانی). */
    --scene-bg-image: url("../image/sky/sky_gate_1_169.895a748dafce.webp");

    /*
       متغیرهای جدید برای layout جدید:
       - desktop / mobile توسط inline style روی .scene-wrapper
         از context (scene_bg, scene_bg_mobile) مقداردهی می‌شوند.
       - اگر صفحه‌ای هنوز مقدار ندهد، این‌ها به fallback بالا برمی‌گردند.
    */
    --scene-bg-image-desktop: var(--scene-bg-image);
    --scene-bg-image-mobile:  var(--scene-bg-image);

    /*
       متغیر فعلی مورد استفاده به‌صورت عمومی:
       - الان blur به‌طور کامل حذف شده،
       - ولی این متغیر را برای استفاده احتمالی در آینده نگه می‌داریم.
    */
    --scene-bg-image-current: var(--scene-bg-image-desktop);
}


/* فونت مخصوص اپلیکیشن ۷ فقط روی main محتوا، نه کل body */
html[dir=rtl] main#content.app7_release {
  font-family: "Vazirmatn", "BNazanin", "Vazir", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #4d3a2d;
}



/* =========================================
   SCENE – تنظیمات نهایی مخصوص لایه صحنه (قبلاً SKY)
   - حذف کامل blur
   - استفاده از دو تصویر پس‌زمینه (desktop + mobile)
     از طریق inline style روی .scene-wrapper
========================================= */

.scene-wrapper {
    position: relative;
    background: none;
    overflow: hidden;
    border-radius: var(--app-scene-radius);
}
/* لایه تصویر اصلی بدون کراپ */
.scene-wrapper .scene-photo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--app-scene-radius);
}

/* تصویر دسکتاپ */
.scene-wrapper .scene-photo img.scene-photo-desktop {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--app-scene-radius);
    object-fit: cover; /* مهم: کلِ کانتینر را می‌پوشاند، مثل موبایل.
                           قبلاً contain بود که برای عکس‌های بلند (tall) فقط یک
                           نوارِ باریکِ عمودی می‌ساخت. cover عکس را می‌بُرد تا کلِ
                           کانتینر را پر کند. */
}

/* تصویر موبایل */
.scene-wrapper .scene-photo img.scene-photo-mobile {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: var(--app-scene-radius);
    object-fit: cover; /* مهم: روی موبایل بهتر است cover باشد */
}

/* ★ کاشیِ تکرارشونده پس‌زمینه (وظیفه دومِ page_00) —
   برای صفحاتی که ارتفاعِ محتوایشان متغیر است (مثل timeline طولانی page_00).
   به‌جای یک تصویرِ یکپارچه با object-fit که با افزایشِ ارتفاع اعوجاج/برش
   می‌خورد، یک کاغذِ ابروبادِ بدونِ درز را با background-repeat تکرار می‌کنیم.
   background-size: 512px باعث می‌شود کاشی همیشه اندازه ثابتی داشته باشد و
   هم روی دسکتاپ و هم موبایل بدون کشیدگی نمایش داده شود. */
.scene-wrapper .scene-photo.scene-photo-tile {
    background-repeat: repeat;
    background-position: top center;
    background-size: 512px 512px;
    background-color: #e4ecf5;  /* رنگِ پایه کاغذ ابروباد (پشتِ کاشی) */
}
/* روی موبایل، کاشی کمی بزرگ‌تر تا ابرها واضح‌تر دیده شوند. */
@media (max-width: 768px) {
    .scene-wrapper .scene-photo.scene-photo-tile {
        background-size: 420px 420px;
    }
}

/* محتوای داخلی */
.scene-wrapper .scene-inner {
    position: relative;
    z-index: 3;
    min-height: calc(100vh - var(--menu-height, 80px));
    width: 100%;
}

/* container-limit */
.scene-wrapper .container-limit {
    position: relative;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* =========================================
   MOBILE (<=768px)
========================================= */
@media (max-width: 768px) {
  .scene-wrapper .scene-photo img.scene-photo-desktop {
      display: none;
  }

  .scene-wrapper .scene-photo img.scene-photo-mobile {
      display: block;
  }

  /* ★ فاصله بین صحنه (کانتینر عکس) و لوگوی بالای سایت در موبایل.
     عکس با object-fit: cover کل .scene-wrapper را پر می‌کند و چون منوی بالای
     سایت (navbar) در موبایل position: absolute و دارای لوگوی scale‌شده است،
     بدون این فاصله، کانتینر عکس می‌رفت داخل لوگو. این margin-top اضافی،
     .scene-wrapper (و عکسِ داخلش) را کمی پایین می‌آورد تا بین کانتینر و لوگو
     همیشه فاصله امنی باشد. */
  main#content.app7_release .scene-wrapper.scene-base {
      margin-top: 14px;
  }

  /* صحنه تمام ارتفاع viewport زیر منو را بگیرد */
  .scene-wrapper .scene-inner {
      min-height: calc(100vh - var(--menu-height, 80px));
  }

  /* تصویر موبایل تقریباً تمام ارتفاع همان صحنه را پوشش دهد */
  .scene-wrapper .scene-photo {
      top: 0;
      bottom: 0;       /* قبلاً 12% بود → باعث کوتاه شدن قاب می‌شد */
  }

  .scene-wrapper .app-btn-secondary {
      color: rgba(17, 24, 39, 0.96) !important;
      border-color: rgba(17, 24, 39, 0.35) !important;
  }
}