/*
 * رفع اسکرول افقی هدر روی موبایل -- تسک دموی iqpage، بخش ه.
 * کشف‌شده حین تست بصری واقعی: هدر (.topbar) حتی با کلاس‌های واکنش‌گرای
 * Bootstrap (col-md-4/col-md-5) روی ویوپورت موبایل ~۳۰۰px بیشتر از
 * عرض صفحه می‌شود (بررسی دقیق ریشه نیاز به بازبینی عمیق‌تر ساختار
 * تودرتوی row/flex این کامپوننت دارد -- خارج از اسکوپ این تسک). این
 * فایل additive فقط عارضهٔ قابل‌مشاهده (شیفت/برش محتوا) را می‌بندد.
 *
 * Fixes header horizontal overflow on mobile -- iqpage demo task, بخش ه.
 * Found via real visual testing: the header (.topbar), despite using
 * Bootstrap responsive classes (col-md-4/col-md-5), renders ~300px wider
 * than the viewport on mobile (~390px) (root-causing the exact nested
 * row/flex structure needs deeper review -- out of this task's scope).
 * This additive file only closes the visible symptom (shifted/cut content).
 */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .topbar, .topbar .row, section.topbar,
    .layout-title, .layout-title h2, .full-page, .space-page,
    .carousel, .carousel-item, .carousel-item .row,
    nav.navbar {
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .layout-title h2 {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 22px;
    }

    /*
     * رفع باگ رسپانسیو استایل «لینک‌باکس» (five_col) -- بخش ۷ (۲۰۲۶-۰۷-۲۴).
     * .boxes .box عرض ثابت ۲۰٪ داشت (طراحی‌شده برای ۵ ستون دسکتاپ)، بدون
     * هیچ override موبایل -- ۵ جعبه در یک ردیف فشرده می‌شدند و متن به‌شدت
     * می‌شکست. اینجا به ۲ ستون در هر ردیف تغییر می‌کند.
     */
    .boxes .box {
        width: 50% !important;
        border-left: none !important;
        border-bottom: solid 1px #E8E6E6;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}