/* ============================================================
   IN ARKA — Mobile Fixes (اصلاح ساختار قالب Go.arch در موبایل)
   ============================================================
   قالب Go.arch برای دسکتاپ طراحی شده. در موبایل، پنل‌های ثابت
   (Brand Panel, Vertical Panel) به‌هم می‌ریزند و روی محتوا می‌افتند.
   این بخش، آن‌ها را در موبایل مخفی یا بازطراحی می‌کند.
   ============================================================ */

/* ==================== موبایل: کمتر از 992px ==================== */
@media (max-width: 991px) {

    /* ---------- 1. مخفی کردن پنل‌های دسکتاپ ---------- */

    .brand-panel {
        display: none !important;
    }

    .vertical-panel,
    .vertical-panel-content {
        display: none !important;
    }

    .header-phone {
        display: none !important;
    }

    /* ---------- 2. پس‌زمینه بدنه ---------- */

    html, body {
        background-color: #272727; /* ← هم‌رنگ قالب اصلی */
        overflow-x: hidden;
    }

    /* ---------- 3. هدر دسکتاپ مخفی، موبایل نمایش ---------- */

    .navbar-desctop {
        display: none !important;
    }

    .navbar-mobile {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 12px 0 !important;
        /*background-color: rgba(33, 16, 25, 0.95) !important;*/
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(208, 215, 182, 0.1);
    }

        .navbar-mobile .brand {
            display: inline-block !important;
            color: #EDEDED !important;
            font-family: 'Oswald', 'Vazirmatn', sans-serif;
            font-size: 1.2rem !important;
            font-weight: 700;
            letter-spacing: 0.1em;
            margin-inline-start: 16px;
            text-decoration: none;
        }

            .navbar-mobile .brand .text-primary {
                /*color: #D0D7B6 !important;*/
            }

    /* ---------- 4. دکمه منو موبایل ---------- */

    .navbar-toggle {
        display: block !important;
        position: absolute;
        top: 50%;
        inset-inline-end: 16px;
        transform: translateY(-50%);
        margin: 0 !important;
        padding: 8px !important;
        background: transparent !important;
        border: 0;
        cursor: pointer;
    }

        .navbar-toggle .icon-bar {
            display: block;
            width: 26px;
            height: 2px;
            background-color: #D0D7B6 !important;
            margin: 5px 0;
            border-radius: 2px;
            transition: all 0.3s;
        }

        .navbar-toggle.collapsed .icon-bar {
            background-color: #EDEDED !important;
        }

    /* ---------- 5. منوی موبایل باز شده ---------- */

    .navbar-mobile .navbar-collapse {
        background-color: #2b2b2b !important; /* ← خاکستری تیره */
        border: 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        margin-top: 12px;
    }

    .navbar-nav-mobile {
        padding: 8px 0 20px;
        margin: 0;
        list-style: none;
    }

        .navbar-nav-mobile li {
            border-top: 1px solid rgba(208, 215, 182, 0.08) !important;
        }

            .navbar-nav-mobile li a {
                display: block;
                padding: 14px 20px;
                color: #EDEDED !important;
                font-family: 'Vazirmatn', Tahoma, sans-serif;
                font-size: 0.95rem;
                letter-spacing: 0 !important;
                text-transform: none !important;
                text-decoration: none;
                transition: all 0.2s;
            }

                .navbar-nav-mobile li a:hover,
                .navbar-nav-mobile li.active > a {
                    color: #D0D7B6 !important;
                    background-color: rgba(208, 215, 182, 0.05);
                }

    /* ---------- 6. بخش احراز هویت (ورود/ثبت‌نام) در موبایل ---------- */

    .nav-auth {
        display: none !important;
    }

    /* ---------- 7. فاصله بالای صفحات داخلی ---------- */

    .page-top-spacing,
    .contact-page,
    .chat-page {
        padding-top: 90px !important;
    }

    /* ---------- 8. اسلایدر موبایل ---------- */

    .rev_slider,
    .main {
        min-height: 400px;
    }

    .slide-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .slide-subtitle {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* ---------- 9. سکشن‌ها در موبایل ---------- */

    .section {
        padding-top: 3em !important;
    }

    .section-content {
        margin-top: 3em !important;
    }

    .section-title {
        font-size: 1.5rem !important;
        letter-spacing: 0 !important;
        margin-left: 0 !important;
    }

    .fade-title-left,
    .fade-title-right {
        display: none !important;
    }

    /* ---------- 10. گرید عمومی (Bootstrap 3 → یک‌ستونه) ---------- */

    .row-base .col-base {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px;
        margin-top: 2em;
    }

    .row-services {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col-service {
        padding: 0 15px !important;
    }

    /* ---------- 11. کارت‌های دوره/طراح/پروژه ---------- */

    .project figure {
        aspect-ratio: 4 / 5;
    }

    .project figcaption {
        margin: 2em 2.2em;
    }

    .project-title {
        font-size: 1.2rem !important;
    }

    .project-category {
        letter-spacing: 0.4em !important;
    }

    /* ---------- 12. بخش تجربه (عدد ۱۲) ---------- */

    .text-parallax-content {
        font-size: 12em !important;
    }

    .experience-info {
        font-size: 1.1em !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* ---------- 13. نقشه ایران ---------- */

    .map-fullwidth__inner {
        padding: 15px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    .map-fullwidth__svg {
        min-height: 320px !important;
        max-height: 420px !important;
    }

    .map-fullwidth__legend {
        top: 10px !important;
        inset-inline-start: 10px !important;
        padding: 10px !important;
        font-size: 10px !important;
    }

    .map-fullwidth__counter {
        bottom: 10px !important;
        inset-inline-end: 10px !important;
        padding: 10px 14px !important;
    }

        .map-fullwidth__counter strong {
            font-size: 20px !important;
        }

    /* ---------- 14. فرم تماس ---------- */

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .contact-info,
    .contact-form-wrap {
        padding: 20px !important;
    }

    .contact-form__row {
        grid-template-columns: 1fr !important;
    }

    .contact-form .form-submit {
        justify-content: stretch !important;
    }

    .contact-form .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ---------- 15. فوتر ---------- */

    .footer {
        padding: 3em 0 2em !important;
        font-size: 11px !important;
    }

        .footer .brand {
            font-size: 1.8em !important;
        }

        .footer .col-base {
            margin-top: 1.5em !important;
            text-align: center !important;
        }

    /* ---------- 16. اسکرول‌بار مخفی ---------- */

    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* ---------- 17. لودر ---------- */

    .loader {
        background: #26332F !important;
    }

    /* ---------- 18. متن‌های طولانی ---------- */

    h1, .h1 {
        font-size: 2rem !important;
    }

    h2, .h2 {
        font-size: 1.5rem !important;
    }

    h3, .h3 {
        font-size: 1.2rem !important;
    }

    h4, .h4 {
        font-size: 1rem !important;
    }
}

/* ==================== تبلت: 768px تا 991px ==================== */
@media (min-width: 768px) and (max-width: 991px) {

    .navbar-mobile {
        padding: 14px 0 !important;
    }

    .slide-title {
        font-size: 38px !important;
    }

    .section-title {
        font-size: 1.8rem !important;
    }

    .map-fullwidth__svg {
        min-height: 400px !important;
    }
}

/* ==================== موبایل کوچک: کمتر از 480px ==================== */
@media (max-width: 479px) {

    .navbar-mobile .brand {
        font-size: 1rem !important;
    }

    .slide-title {
        font-size: 22px !important;
    }

    .slide-subtitle {
        font-size: 12px !important;
    }

    .page-top-spacing,
    .contact-page,
    .chat-page {
        padding-top: 80px !important;
    }

    .section {
        padding-top: 2.5em !important;
    }

    .map-fullwidth__svg {
        min-height: 280px !important;
    }

    .map-fullwidth__legend {
        position: static !important;
        margin-bottom: 12px !important;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

        .map-fullwidth__legend p {
            display: none !important;
        }
}