/* ============================================================
   هدر دسکتاپ — README §۹ «Desktop feed — 1280»
   ------------------------------------------------------------
   «هدر چسبان: لوگو، منوی ۶تایی (آیتم فعال خط زیرین ۲px طلایی دارد)،
    جست‌وجوی ۱۹۰px، ذخیره‌شده‌ها، دکمه‌ی پرِ ورود.»

   ساختار هدر از کاستومایزر فلت‌سام می‌آید؛ اینجا فقط رنگ/تایپ/فاصله به
   دیزاین‌سیستم برمی‌گردد و عنصرهای افزوده (includes/desktop-header.php)
   استایل می‌شوند. آیتم‌های منو دست‌نخورده‌اند.

   آیکن ذخیره‌شده‌ها فعلاً ساخته نشده — صفحه‌اش هنوز وجود ندارد.

   نقطه‌شکست ۱۰۲۴ (README §Responsive) — زیر آن هدر موبایل فلت‌سام و شیت
   منوی موبایل (README §۸) کار می‌کنند و عنصرهای افزوده مخفی‌اند.
   ============================================================ */

/* عنصرهای افزوده فقط دسکتاپ‌اند — هدر موبایل فلت‌سام هم بلوک HTML را
   رندر می‌کند، پس بدون این، دکمه‌ی ورود زیر ۱۰۲۴px هم می‌آمد */
/* سلکتور به‌اندازه‌ی `.nav > li` فلت‌سام مشخص است، وگرنه display:inline-block
   آن برنده می‌شود و آیتم‌ها روی موبایل هم دیده می‌شوند */
#masthead .nav > li.skh-hdr-li {
    display: none;
}

@media (min-width: 1024px) {

    /* ── قاب هدر ──────────────────────────────────────────── */
    /* عرض و پدینگ هم‌تراز با بدنه‌ی فید دسکتاپ (۱۲۸۰ + --page-pad) */
    #masthead .header-inner {
        max-width: 1280px;
        padding-inline: var(--page-pad, 44px);
        /* ارتفاع روی همین ردیف فلکس می‌نشیند نه روی .header-main؛
           آنجا بلاک است و فضای اضافه به‌جای دورِ ردیف، زیرش می‌افتاد */
        min-height: 70px;
    }

    /* ارتفاع ردیف از کاستومایزر ۹۱px می‌آید (و در حالت چسبیده ۷۰px با
       !important). پروتوتایپ README §۹ ردیف را `padding:16px 44px` می‌بندد
       و بلندترین فرزندش لوگو نیست، دکمه‌ی ورود است (۹+متن+۹ ≈ ۳۸px) —
       یعنی ۱۶+۳۸+۱۶ ≈ ۷۰ (ارتفاع را .header-inner بالاتر می‌گیرد).
       height:auto می‌شود تا ردیف خودش قد بکشد، نه اینکه قدِ ثابت بخورد. */
    #masthead.header-main,
    .stuck #masthead.header-main {
        height: auto !important;
        border-bottom: 1px solid var(--divider);
    }

    /* README §۹ لوگو ۲۶px — در حالت چسبیده کاستومایزر ۷۰px می‌گذارد */
    #masthead #logo img,
    .stuck #masthead #logo img {
        max-height: 26px !important;
        width: auto;
    }

    /* عنصرهای ردیف وسط‌چین می‌شوند؛ وگرنه دکمه‌ی ورود و فیلد جست‌وجو
       بالای ردیف می‌چسبند و فضای خالی همه زیرشان جمع می‌شود */
    #masthead .nav {
        align-items: center;
    }

    /* ── آیتم‌های منو ─────────────────────────────────────── */
    /* README §۹: ۱۴.۵px/۶۰۰، غیرفعال text-500، فعال ink + خط طلایی.
       nav-uppercase و رنگ‌های پیش‌فرض فلت‌سام اینجا خنثی می‌شوند. */
    #masthead .header-nav-main.nav > li > a.nav-top-link {
        font-size: 14.5px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-2) !important;   /* dark-mode.css رنگ لینک را !important می‌گذارد */
        position: relative;              /* لنگر خط زیرین آیتم فعال */
        transition: color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
    }

    /* فلت‌سام خودش به هر آیتم ۷px مارجین می‌دهد؛ روی مارجین ما سوار می‌شد
       و فاصله‌ها را از README دور می‌کرد (و روی ۱۰۲۴ ردیف را می‌شکست) */
    #masthead .nav > li {
        margin: 0;
    }

    #masthead .header-nav-main.nav > li + li {
        margin-inline-start: 30px;
    }

    #masthead .header-nav-main.nav > li > a.nav-top-link:hover {
        color: var(--gold-link) !important;
        /* هاور زردِ قدیمیِ style.css روی این منو دیگر جایی ندارد */
        background: none;
    }

    /* آیتم فعال — خط زیرین ۲px طلایی، دقیقاً زیر متن نه ته سلول */
    #masthead .header-nav-main.nav > li.active > a.nav-top-link,
    #masthead .header-nav-main.nav > li.current-menu-item > a.nav-top-link {
        color: var(--text-1) !important;
    }

    #masthead .header-nav-main.nav > li.active > a.nav-top-link::after,
    #masthead .header-nav-main.nav > li.current-menu-item > a.nav-top-link::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 6px;                     /* ۴px زیر خط متن، مثل padding-bottom پروتوتایپ */
        height: 2px;
        background: var(--coral);
        border-radius: 2px;
    }

    /* خط زیرین متحرک خود فلت‌سام با خط طلایی دوتا می‌شد */
    #masthead .header-nav-main.nav > li > a.nav-top-link::before {
        display: none;
    }

    /* ── جست‌وجوی ۱۹۰px ───────────────────────────────────── */
    /* آیکن ذره‌بین خود فلت‌سام جایش را به فیلد می‌دهد (لایت‌باکسش می‌ماند) */
    #masthead .header-search.header-search-lightbox {
        display: none;
    }

    #masthead .nav > li.skh-hdr-search-li,
    #masthead .nav > li.skh-hdr-login-li {
        display: flex;
        align-items: center;
    }

    #masthead .nav > li.skh-hdr-search-li > a.skh-hdr-search {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 190px;
        padding: 8px 12px;
        border-radius: 10px;
        background: var(--surface-2);
        color: var(--text-3) !important;   /* dark-mode.css رنگ لینک را !important می‌گذارد */
        font-size: 13px;
        line-height: 1.4;
        text-decoration: none;
        transition: background-color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
    }

    #masthead .nav > li.skh-hdr-search-li > a.skh-hdr-search:hover {
        background: var(--hover-surface);
        color: var(--text-2) !important;   /* dark-mode.css رنگ لینک را !important می‌گذارد */
    }

    .skh-hdr-search svg {
        flex: none;
    }

    .skh-hdr-search-label {
        white-space: nowrap;
    }

    /* ── دکمه‌ی ورود ─────────────────────────────────────── */
    /* سلکتور از داخل #masthead می‌آید چون رنگ لینک‌های ناوِ فلت‌سام
       (.header-nav li > a) وگرنه روی رنگ متن دکمه می‌نشیند */
    #masthead .nav > li.skh-hdr-login-li > a.skh-hdr-login {
        display: inline-flex;
        align-items: center;
        padding: 9px 18px;
        border-radius: 10px;
        background: var(--ink);
        /* !important چون dark-mode.css رنگ لینک‌ها را با !important می‌گذارد */
        color: var(--ink-text) !important;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.4;
        text-decoration: none;
        transition:
            background-color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1)),
            transform var(--dur-press, 80ms) var(--ease, cubic-bezier(.2,.6,.2,1));
    }

    #masthead .nav > li.skh-hdr-login-li > a.skh-hdr-login:hover {
        background: var(--hover-ink);
        /* !important چون dark-mode.css رنگ لینک‌ها را با !important می‌گذارد */
        color: var(--ink-text) !important;
    }

    #masthead .nav > li.skh-hdr-login-li > a.skh-hdr-login:active {
        transform: scale(var(--press-scale, .985));
    }

    /* فاصله‌ی عنصرهای ردیف چپ (RTL) از هم */
    #masthead .nav-right > li + li {
        margin-inline-start: 16px;
    }
}

/* ── دسکتاپ باریک ────────────────────────────────────────
   فاصله‌های README برای ۱۲۸۰ حساب شده‌اند؛ روی ۱۰۲۴ منوی سایت
   (که برچسب‌های بلندتری از پروتوتایپ دارد) به خط دوم می‌شکست.
   یک پله فشرده‌تر می‌شود تا ردیف تک‌خطی بماند. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    #masthead .header-inner {
        padding-inline: 24px;
    }

    #masthead .header-nav-main.nav > li + li {
        margin-inline-start: 14px;
    }

    #masthead .nav-right > li + li {
        margin-inline-start: 10px;
    }

    #masthead .nav > li.skh-hdr-search-li > a.skh-hdr-search {
        width: 150px;
    }
}