/* ===========================================================
   استایل ویجت اسکرول محتوا وردپرس یار
   =========================================================== */

.wpy-scroll-box {
    /* عرض/ارتفاع/سرریز اول از روی متغیرهای CSS که خودِ PHP (تابع render)
       مستقیم و بدون تأخیر روی همین المنت inline کرده می‌خونیم؛ اگر به هر
       دلیلی این متغیر وجود نداشت (مثلاً کش قدیمی HTML)، مقدار عددی بعد از
       کاما به‌عنوان fallback امن استفاده میشه. نتیجه: از همون فریم اول
       رندر، بدون نیاز به لود شدن هیچ CSS خارجی دیگه‌ای، باکس ابعاد نهایی
       خودش رو داره و هیچ‌وقت جمع/باز (Layout Shift) نمیشه. */
    width: var(--wpy-box-width, 100%);
    height: var(--wpy-box-height, 300px);
    overflow-y: var(--wpy-box-overflow, auto);
    overflow-x: hidden;
    contain: layout paint;

    direction: rtl;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 12px;
    line-height: 1.9;
    font-family: inherit;
    scrollbar-width: thin;
}

.wpy-scroll-box::-webkit-scrollbar {
    width: 8px;
}

.wpy-scroll-box::-webkit-scrollbar-track {
    background: transparent;
}

.wpy-scroll-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.wpy-scroll-box > *:first-child {
    margin-top: 0;
}

.wpy-scroll-box > *:last-child {
    margin-bottom: 0;
}

.wpy-scroll-box h1,
.wpy-scroll-box h2,
.wpy-scroll-box h3,
.wpy-scroll-box h4,
.wpy-scroll-box h5,
.wpy-scroll-box h6 {
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

.wpy-scroll-box p {
    margin: 0 0 1em 0;
}

.wpy-scroll-box ul,
.wpy-scroll-box ol {
    margin: 0 0 1em 0;
    padding-inline-start: 24px;
}

.wpy-scroll-box a {
    color: inherit;
    text-decoration: underline;
}

.wpy-scroll-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* اگر مرورگرها attribute های width/height خودِ عکس رو داشته باشن (که وردپرس
   موقع افزودن از کتابخونه رسانه به‌صورت خودکار اضافه می‌کنه)، خودشون
   نسبت تصویر رو حفظ و فضا رو از قبل رزرو می‌کنن و نیازی به این قانون نیست.
   این قانون فقط یک fallback برای عکس‌هایی‌ست که این attribute رو ندارن
   (مثلاً با چسباندن مستقیم کد HTML خارجی) تا حداقل یک نسبت معقول
   از قبل در نظر گرفته بشه و جابجایی شدید رخ نده. */
.wpy-scroll-box img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}