/* ==========================================
   جلوگیری از اسکرول افقی ناخواسته
========================================== */

/**
 * منوی موبایل با translateX(100%) بیرون از لبه راست صفحه پارک می‌شود. تا وقتی
 * صفحه اسکرول افقی نداشته باشد این بی‌ضرر است، ولی اگر چیزی اسکرول افقی بسازد
 * کاربر می‌تواند به آن ناحیه برود و منوی «بسته» را ببیند — دقیقاً همان
 * به‌هم‌ریختگی که در آرشیو فروشگاه دیده می‌شد.
 *
 * چرا فقط آن صفحه: آرشیو فروشگاه تنها جایی است که ردیف‌های کشویی افقی
 * (.lf-row-track) با قابلیت کشیدن دارد. اسکرول آن ردیف‌ها می‌تواند به کل صفحه
 * سرایت کند و صفحه را به پهلو ببرد.
 *
 * ⚠️ clip به‌جای hidden، با پشتیبان:
 * overflow-x: hidden روی body باعث می‌شود position: sticky از کار بیفتد —
 * باکس خرید در صفحه محصول دقیقاً به آن وابسته است. مقدار clip همان جلوگیری را
 * انجام می‌دهد بدون اینکه sticky را بشکند. برای مرورگرهای قدیمی‌تر که clip را
 * نمی‌شناسند، hidden به‌عنوان پشتیبان اول می‌آید.
 *
 * اسکرول داخلی خود ردیف‌های کشویی دست‌نخورده می‌ماند؛ این قانون فقط روی
 * ریشه صفحه است.
 */
/**
 * ⚠️ قانون روی html هم هست، نه فقط body.
 *
 * منوی موبایل position: fixed است و عنصر fixed نسبت به «viewport» جای می‌گیرد،
 * نه نسبت به body. پس overflow روی body لزوماً مهارش نمی‌کند. گذاشتن قانون روی
 * ریشه سند این شکاف را می‌بندد.
 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/**
 * منوی بسته باید «واقعاً» نباشد، نه فقط جابه‌جا شده.
 *
 * تا امروز منو فقط با transform بیرون صفحه پارک می‌شد. عنصری که صرفاً جابه‌جا
 * شده هنوز رندر می‌شود، هنوز فضای قابل اسکرول می‌سازد و هنوز لمس‌پذیر است — پس
 * اگر به هر دلیلی صفحه به پهلو برود، منو دیده و حتی لمس می‌شود.
 *
 * visibility: hidden آن را از محاسبات و از دسترس خارج می‌کند. صفر ثانیه تأخیرش
 * عمدی است: هنگام بستن باید تا پایان انیمیشن ۳۰۰ میلی‌ثانیه‌ای قابل دیدن بماند،
 * وگرنه به‌جای سُر خوردن، ناگهان ناپدید می‌شود.
 *
 * از همان کلاسی استفاده می‌شود که جاوااسکریپت از قبل کم و زیاد می‌کند، پس هیچ
 * تغییری در منطق باز و بسته شدن لازم نیست.
 */
#mobile-menu.translate-x-full {
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, visibility 0s .3s;
}

/* استایل‌های صفحه‌بندی وردپرس (Pagination) */
.lf-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lf-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #374151;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lf-pagination .page-numbers:hover:not(.current):not(.dots) {
    border-color: var(--lf-hover);
    color: var(--lf-hover);
}

.lf-pagination .page-numbers.current {
    background-color: var(--lf-primary);
    border-color: var(--lf-primary);
    color: #ffffff;
}

.lf-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    pointer-events: none;
}
/* ==========================================
   استایل‌های محتوای داخلی مقاله (Typography)
========================================== */
.lf-post-content {
    /**
     * اندازه از متغیر خوانده می‌شود تا وقتی گزینه‌اش به صفحه تنظیمات اضافه شد،
     * بدون build دوباره تیلویند کار کند. مقدار دوم پیش‌فرض است و اگر متغیر
     * تعریف نشده باشد همان اعمال می‌شود.
     */
    font-size: var(--lf-fs-content, 1rem); /* 16px */
    line-height: 2; /* فاصله زیاد بین خطوط */
    color: #374151; /* رنگ خاکستری تیره (نه کاملا مشکی) برای جلوگیری از خستگی چشم */
}

.lf-post-content p {
    margin-bottom: 1.5rem;
}

/**
 * توضیح کوتاه پادکست.
 *
 * جدا از محتوای اصلی نگه داشته شده چون نقش متفاوتی دارد: یک خلاصه کوتاه کنار
 * پخش‌کننده است، نه متن بدنه‌ای که کاربر دقایقی می‌خواندش.
 *
 * پیش از این کلاس‌های text-sm و md:text-base روی همین بلوک بودند ولی هیچ اثری
 * نداشتند، چون بلوک کلاس lf-post-content را هم داشت و آن قانون — که در فایلی
 * بعد از تیلویند لود می‌شود — بر آن‌ها غلبه می‌کرد.
 */
.lf-podcast-excerpt {
    font-size: var(--lf-fs-podcast-excerpt, 0.875rem); /* 14px */
}

.lf-post-content h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.lf-post-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* استایل لینک‌های داخل متن */
.lf-post-content a {
    color: var(--lf-link);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.lf-post-content a:hover {
    color: var(--lf-hover);
    border-bottom-color: var(--lf-hover);
}

/* استایل لیست‌ها */
.lf-post-content ul {
    list-style-type: disc;
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.lf-post-content ol {
    list-style-type: decimal;
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.lf-post-content li {
    margin-bottom: 0.5rem;
}

/* استایل نقل‌قول‌ها (Blockquote) با رنگ برند */
.lf-post-content blockquote {
    background-color: var(--lf-primary-50);
    border-right: 4px solid var(--lf-primary);
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #4b5563;
    border-radius: 0.5rem 0 0 0.5rem;
}

.lf-post-content blockquote p:last-child {
    margin-bottom: 0;
}

/* استایل تصاویر داخل متن */
.lf-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 2rem auto;
    display: block;
}
/* ==========================================================================
   رفع تداخل قطعی فونت ایران‌یکان و Tailwind با آیکون‌های افزونه Tutor LMS
   ========================================================================== */

/* 1. اعمال اجباری فونت Tutor روی خود المان‌ها و بخش مخفی ::before (محل اصلی آیکون) */
body [class^="tutor-icon-"], 
body [class*=" tutor-icon-"],
body [class^="tutor-icon-"]::before, 
body [class*=" tutor-icon-"]::before,
body .tutor-ratings-stars span,
body .tutor-ratings-stars i,
body .tutor-ratings-stars span::before,
body .tutor-ratings-stars i::before {
    font-family: 'tutor' !important;
}

/* 2. خنثی کردن حاشیه‌های پیش‌فرض Tailwind که ظاهر افزونه را بهم می‌ریزد */
body .tutor-wrap *, 
body .tutor-wrap ::before, 
body .tutor-wrap ::after,
body .tutor-frontend *, 
body .tutor-frontend ::before, 
body .tutor-frontend ::after {
    border-style: none !important;
}

/* 3. اصلاح رنگ و فاصله ستاره‌های امتیازدهی */
body .tutor-ratings-stars {
    color: #ed9700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ==========================================
   استایل‌های اختصاصی Tutor LMS (الگوبرداری از FutureLearn - فقط ساختار)
========================================== */

/* ۱. رفع مشکل چسبیدن به بالا و پایین (معادل container mx-auto px-4 py-12 max-w-7xl) */
.tutor-container {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.tutor-dashboard.tutor-pb-80 { padding-bottom: 3rem !important; }

/* ۲. حذف تمام انحناها (گوشه‌های کاملاً تیز و مربعی مثل FutureLearn) */
.tutor-card, .tutor-card-image, .tutor-btn, .tutor-button, 
.tutor-form-control, .tutor-form-select, .tutor-badge-label, 
.tutor-progress-bar, .tutor-progress-value, 
.tutor-tabs-btn-group .tutor-tab-btn, .tutor-dashboard-header-avatar img,
.tutor-course-filter-container {
    border-radius: 0 !important;
}

/* ۳. افکت هاور کارت‌های دوره (فقط سایه ملایم، بدون دخالت در رنگ) */
.tutor-card { 
    border: 1px solid #e5e7eb !important; 
    box-shadow: none !important; 
    transition: all 0.3s ease !important; 
}
.tutor-card:hover { 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; 
}
    /* ثابت ماندن استایل دکمه در حالت پخش */
    .is-playing .lf-track-btn {
        background-color: var(--lf-primary-100) !important;
        color: var(--lf-primary) !important;
    }