/* ==========================================================================
   فتوکده — بازطراحی بنیادی صفحه اول (نسخه دسکتاپ)

   این فایل جدا از استایل اصلی سایت است و:
   ۱) فقط زمانی بارگذاری می‌شود که کاربر در «صفحه اول» سایت باشد
      (به‌وسیله‌ی شرط is_front_page در functions.php)
   ۲) تمام قوانین آن داخل یک مدیا کوئری برای دسکتاپ (عرض ≥ 1200px) قرار
      دارند تا هیچ تغییری در نسخه موبایل/تبلت ایجاد نشود.
   ۳) هیچ‌کدام از فایل‌های php ویجت‌ها، اسلایدر و ... دستکاری نشده و فقط
      همان کلاس‌های html موجود، بازطراحی شده‌اند. بنابراین برای اعمال آن
      کافیست این فایل در تم آپلود و طبق راهنما فراخوانی شود.
   ========================================================================== */

@media (min-width: 1200px) {

  /* ---------------------------------------------------------------------
     ۱) متغیرهای طراحی مخصوص صفحه اول
     --------------------------------------------------------------------- */
  body {
    --home-radius-box: 20px;
    --home-radius-img-lg: 18px;
    --home-radius-img-sm: 14px;
    --home-border: #edf0f3;
    --home-title-color: #171a1f;
    --home-text-color: #3c4149;
    --home-bg: #f2f4f7;
    --home-shadow: 0 2px 6px rgba(20, 30, 45, .04), 0 16px 32px -16px rgba(20, 30, 45, .12);
    --home-shadow-hover: 0 6px 16px rgba(20, 30, 45, .06), 0 26px 46px -18px rgba(20, 30, 45, .18);
  }

  body.bg-main {
    background: var(--home-bg);
  }

  .container {
    max-width: 1272px;
  }

  /* فاصله‌ی کلی‌تر و مرتب‌تر بین بخش‌های صفحه اول */
  main#main-content > .container {
    gap: 30px !important;
  }

  /* ---------------------------------------------------------------------
     ۲) هدر — فقط در صفحه اول ظریف‌تر و سبک‌تر می‌شود
     --------------------------------------------------------------------- */
  #header {
    border-bottom: 1px solid var(--home-border);
  }

  #header .white-shadow {
    box-shadow: none !important;
    padding-bottom: 18px !important;
  }

  .sub-header {
    background: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 100px;
    padding: 6px 22px !important;
  }

  .nav-item a {
    position: relative;
    padding: 8px 2px;
    font-weight: 500;
  }

  .nav-item a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    border-radius: 2px;
    background: var(--i8-light-primary);
    transition: width .25s ease;
  }

  .nav-item a:hover::after,
  .nav-item a.active::after {
    width: 100%;
  }

  .dark-mode-switch,
  a[aria-label="search button"] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f7f9;
    transition: background .2s ease, transform .2s ease;
  }

  .dark-mode-switch:hover,
  a[aria-label="search button"]:hover {
    background: #eaf5fb;
    transform: translateY(-2px);
  }

  /* ---------------------------------------------------------------------
     ۳) کارت‌های محتوا (.box) — پایه‌ی طراحی جدید تمام باکس‌های صفحه اول
     (اسلایدر، هنر و چهره‌ها، آشپزی، خانه‌داری، شما هم بخوانید و ...)
     --------------------------------------------------------------------- */
  .box {
    background: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius-box);
    box-shadow: var(--home-shadow);
    padding: 26px;
    transition: box-shadow .35s ease;
  }

  .box:hover {
    box-shadow: var(--home-shadow-hover);
  }

  /* عنوان هر بخش (هنر و چهره‌ها / آشپزی / حیوانات و ...) */
  .title-icon {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 22px !important;
    border-bottom: 1px solid var(--home-border);
  }

  .title-icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--i8-light-primary);
  }

  .text-title {
    display: flex;
    align-items: center;
    color: var(--home-title-color) !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
  }

  .text-title svg {
    background: #f1f5f8;
    border-radius: 10px;
    padding: 6px;
    box-sizing: content-box;
  }

  .text-title i.bi {
    background: #f1f5f8;
    border-radius: 10px;
    padding: 6px;
    font-size: 16px;
    display: inline-flex;
  }

  .text-title img {
    border-radius: 10px;
  }

  /* ---------------------------------------------------------------------
     ۴) تصاویر — گردی یکدست + بزرگ‌نمایی ملایم هنگام هاور
     (به‌جای تیره‌شدن ناگهانی تصویر قبلی)
     --------------------------------------------------------------------- */
  .box a:has(> img.hover) {
    display: block;
    overflow: hidden;
    border-radius: var(--home-radius-img-sm);
  }

  .box a:has(> img.hover.rounded-15) {
    border-radius: var(--home-radius-img-lg);
  }

  .box img.hover {
    border-radius: var(--home-radius-img-sm) !important;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
  }

  .box img.hover.rounded-15 {
    border-radius: var(--home-radius-img-lg) !important;
  }

  .box a:hover > img.hover {
    transform: scale(1.07);
    filter: none;
  }

  /* تصویر بزرگ هیرو کمی تیره‌تر می‌شود تا نوشته روی آن خواناتر بماند */
  .main-slider .big-post a:hover > img.hover,
  .main-slider .small-post a:hover > img.hover {
    filter: brightness(.9);
  }

  .card-img-overlay {
    border-radius: 0 0 var(--home-radius-img-lg) var(--home-radius-img-lg);
    padding: 1.5rem 1.2rem 1.2rem;
  }

  .card-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    font-weight: 700;
  }

  .main-img-tag {
    border-radius: 50px !important;
    padding: 5px 16px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    letter-spacing: .2px;
  }

  /* ---------------------------------------------------------------------
     ۵) اسلایدر اصلی — کمی سبک‌تر و بدون قاب اضافه
     --------------------------------------------------------------------- */
  .main-slider.box {
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 !important;
  }

  .main-slider .item,
  .main-slider .bigger-img {
    transition: transform .25s ease;
  }

  /* ---------------------------------------------------------------------
     ۶) ردیف‌های خبر کوچک (mini-article) — جداکننده‌ی ظریف بین ردیف‌ها
     --------------------------------------------------------------------- */
  .mini-article.d-flex {
    padding-bottom: 12px;
    margin-bottom: 12px !important;
    border-bottom: 1px dashed var(--home-border);
  }

  .row.mini-article > div:last-child,
  .mini-article.d-flex:last-child {
    border-bottom: none;
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }

  .mini-article a.f15,
  .mini-article a.text-normal {
    font-weight: 500;
    color: var(--home-text-color);
    transition: color .2s ease;
  }

  .mini-article a.f15:hover,
  .mini-article a.text-normal:hover {
    color: var(--i8-light-primary);
  }

  /* خبر شاخص داخل باکس‌های دوستونه (مثل هنر و چهره‌ها) */
  .news-card a.h-fs-7,
  .news-card a.text-grey {
    font-weight: 700;
    font-size: 17px;
    color: var(--home-title-color);
    transition: color .2s ease;
  }

  .news-card a.h-fs-7:hover {
    color: var(--i8-light-primary);
  }

  /* سایدبار چسبان «شما هم بخوانید» */
  .i8-sticky .box {
    padding: 24px 22px;
  }

  /* ---------------------------------------------------------------------
     ۷) هماهنگی با حالت شب (Dark Mode) فقط در صفحه اول
     --------------------------------------------------------------------- */
  body.dark-mode,
  html.dark-mode {
    background: #14171f !important;
  }

  body.dark-mode .box,
  html.dark-mode .box {
    background: var(--i8-dark-fg-color) !important;
    border-color: #2a3040;
  }

  body.dark-mode .main-slider.box,
  html.dark-mode .main-slider.box {
    background: transparent !important;
  }

  body.dark-mode .title-icon,
  html.dark-mode .title-icon,
  body.dark-mode .mini-article.d-flex,
  html.dark-mode .mini-article.d-flex {
    border-bottom-color: #262c3a;
  }

  body.dark-mode .text-title,
  html.dark-mode .text-title {
    color: #f2f2f2 !important;
  }

  body.dark-mode .text-title svg,
  html.dark-mode .text-title svg,
  body.dark-mode .text-title i.bi,
  html.dark-mode .text-title i.bi {
    background: #232838;
  }

  body.dark-mode .sub-header,
  html.dark-mode .sub-header {
    background: var(--i8-dark-fg-color);
    border-color: #2a3040;
  }

  body.dark-mode .mini-article a.f15,
  html.dark-mode .mini-article a.f15,
  body.dark-mode .mini-article a.text-normal,
  html.dark-mode .mini-article a.text-normal {
    color: #d7d7d7;
  }

}