/* ============================================================
   منوی موبایل — README §۸ «Mobile menu (dark)»
   ------------------------------------------------------------
   شیت تمام‌صفحه‌ی تیره. طراحی فقط نسخه‌ی تیره دارد، پس این شیت در
   هر دو پوسته تیره می‌ماند.

   چرا رنگ‌ها اینجا خام‌اند و از var(--paper)/var(--white) نمی‌آیند:
   توکن‌های پایه در دارک‌مود روی body ری‌مپ می‌شوند (style.css)، پس
   var(--paper) در پوسته‌ی تیره خودش #0B0F0D می‌شود و در روشن #FAF8F4 —
   یعنی به‌دردِ سطحی که باید همیشه تیره بماند نمی‌خورد. مقادیر همان
   نگاشت تیره‌ی README §Color هستند و اینجا در یک متغیر محلی جمع شده‌اند.
   ============================================================ */
.smenu {
    --smenu-bg:#0B0F0D;                      /* زمینه‌ی اپ در تیره */
    --smenu-text:#FAF8F4;                    /* متن اصلی */
    --smenu-text-2:rgba(250,248,244,.62);    /* متن ثانویه */
    --smenu-text-3:rgba(250,248,244,.45);
    --smenu-hairline:rgba(250,248,244,.1);   /* خط مو — طبق پروتوتایپ */
    --smenu-quiet:rgba(250,248,244,.06);     /* سطح آرام (ردیف کلید پوسته) */
    --smenu-gold:#D4A24C;
    --smenu-gold-fill:rgba(212,162,76,.14);  /* پرکننده‌ی ردیف فعال */

    position: fixed;
    inset: 0;
    z-index: 10050;                          /* بالای باتم‌نو (۹۹۹۹) */
    display: flex;
    justify-content: flex-start;
}

.smenu[hidden] {
    display: none;
}

/* پس‌زمینه‌ی پشت شیت — شیت تمام‌صفحه است و عملاً پوشیده می‌ماند،
   ولی برای بستن با لمسِ بیرون و برای گذارِ بازشدن لازم است */
.smenu-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(8,12,10,.6);
    opacity: 0;
    transition: opacity var(--dur-sheet, 220ms) var(--ease, cubic-bezier(.2,.6,.2,1));
}

.smenu.is-open .smenu-scrim {
    opacity: 1;
}

/* ── شیت ───────────────────────────────────────────────── */
.smenu-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;                        /* روی تبلت پهن نشود */
    display: flex;
    flex-direction: column;
    background: var(--smenu-bg);
    color: var(--smenu-text);
    overflow: hidden;

    /* README §Interactions: «۲۲۰ms برای بالا آمدن شیت، بدون بانس» */
    transform: translateY(12px);
    opacity: 0;
    transition:
        transform var(--dur-sheet, 220ms) var(--ease, cubic-bezier(.2,.6,.2,1)),
        opacity   var(--dur-sheet, 220ms) var(--ease, cubic-bezier(.2,.6,.2,1));
}

.smenu.is-open .smenu-sheet {
    transform: none;
    opacity: 1;
}

/* شیت فقط برای اعلام دیالوگ به صفحه‌خوان فوکوس می‌گیرد، خودش کنترل نیست */
.smenu-sheet:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .smenu-scrim,
    .smenu-sheet {
        transition: none;
    }
}

/* ── هدر شیت ───────────────────────────────────────────── */
.smenu-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    /* ۸px بالا در پروتوتایپ زیر نوار وضعیت گوشی بود؛ اینجا جای آن
       safe-area می‌نشیند تا زیر نوچ/نوار وضعیت مرورگر نرود */
    padding: 8px var(--page-pad, 18px) 18px;
    padding-top: calc(8px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--smenu-hairline);
}

.smenu-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
}

.smenu-logo-text {
    font-size: 16px;
    font-weight: 800;
}

.smenu-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;                             /* هدف لمسی ۴۴px (README §۱۳) */
    height: 44px;
    margin-inline-start: -11px;              /* تا آیکن بصری با لبه هم‌تراز بماند */
    padding: 0;
    border: 0;
    background: none;
    color: var(--smenu-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.smenu-close:active {
    transform: scale(var(--press-scale, .985));
}

/* ── ردیف‌ها ───────────────────────────────────────────── */
.smenu-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px var(--page-pad, 18px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.smenu-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 12px;
    border-radius: 14px;
    color: var(--smenu-text);
    text-decoration: none;
    transition:
        background-color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1)),
        color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
    -webkit-tap-highlight-color: transparent;
}

.smenu-row:hover,
.smenu-row:focus-visible {
    background: var(--smenu-quiet);
    color: var(--smenu-text);
}

.smenu-row:active {
    transform: scale(var(--press-scale, .985));
    transition-duration: var(--dur-press, 80ms);
}

/* ردیف فعال — README §۸: پرکننده‌ی rgba(212,162,76,.14) و متن طلایی */
.smenu-row.active {
    background: var(--smenu-gold-fill);
    color: var(--smenu-gold);
}

.smenu-row.active .smenu-row-label {
    font-weight: 700;
}

.smenu-icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.smenu-row-label {
    font-size: 15px;
    line-height: 1.4;                        /* ارتفاع ردیف ~۴۹px، مطابق پروتوتایپ */
}

.smenu-divider {
    display: block;
    height: 1px;
    margin: 12px 0;
    background: var(--smenu-hairline);
}

/* ── پاورقی ────────────────────────────────────────────── */
.smenu-foot {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 var(--page-pad, 18px) 26px;
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

/* کلید پوسته — همان دکمه‌ی سراسری [data-shahkar-theme-toggle]،
   با ظاهر ردیفِ سوییچ‌دار طراحی */
.smenu-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: var(--smenu-quiet);
    color: var(--smenu-text);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.smenu-theme:active {
    transform: scale(var(--press-scale, .985));
}

.smenu-theme-label {
    font-size: 13px;
}

.smenu-theme-track {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;             /* RTL: خاموش سمت راست */
    width: 42px;
    height: 24px;
    padding: 3px;
    border-radius: var(--r-pill, 99px);
    background: var(--smenu-gold);
    transition: background-color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
}

.smenu-theme-knob {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill, 99px);
    background: var(--smenu-bg);
    transition: transform var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
}

/* پوسته‌ی روشن: ریل خاموش می‌شود و دستگیره به سمت دیگر می‌رود.
   شیت خودش تیره می‌ماند، فقط وضعیت کلید عوض می‌شود. */
html[data-theme="light"] .smenu-theme-track {
    background: rgba(250,248,244,.22);
}

html[data-theme="light"] .smenu-theme-knob {
    transform: translateX(-18px);            /* RTL: روشن → سمت چپ ریل */
}

@media (prefers-color-scheme: light) {
    html:not([data-theme]) .smenu-theme-track { background: rgba(250,248,244,.22); }
    html:not([data-theme]) .smenu-theme-knob  { transform: translateX(-18px); }
}

.smenu-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(250,248,244,.55);
    font-size: 12px;
}

.smenu-social {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-color, 160ms) var(--ease, cubic-bezier(.2,.6,.2,1));
}

.smenu-social:hover,
.smenu-social:focus-visible {
    color: var(--smenu-gold);
}

.smenu-social-dot {
    color: var(--smenu-text-3);
}

/* وقتی شیت باز است، پس‌زمینه اسکرول نشود */
body.smenu-open {
    overflow: hidden;
}

/* ============================================================
   دسکتاپ — README §Responsive: تنها بریک‌پوینت ۱۰۲۴؛ بالای آن
   هدر دسکتاپ ناوبری را دارد و این شیت اصلاً باز نمی‌شود.
   ============================================================ */
@media (min-width: 1024px) {
    .smenu {
        display: none;
    }
}