/* 
 * Ask Alex - Mobile Navigation
 * تنسيقات التنقل للأجهزة المحمولة
 */

/* إضافة زر القائمة للأجهزة المحمولة */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 1001;
}

/* تعديلات التنقل للأجهزة المحمولة */
@media (max-width: 768px) {
    /* إظهار زر القائمة */
    .mobile-menu-btn {
        display: block;
    }

    /* تنسيق قائمة التنقل للأجهزة المحمولة */
    header .container {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* إخفاء التنقل الافتراضي */
    nav {
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    /* عند تفعيل القائمة */
    nav.mobile-active {
        max-height: 300px;
    }

    /* تعديل شكل القائمة */
    nav ul {
        flex-direction: column;
        padding: 10px 0;
    }

    nav ul li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 10px;
        width: 100%;
    }

    /* تنسيق أزرار اللغة للأجهزة المحمولة */
    .language-switcher {
        margin-right: 10px;
    }

    /* شريط اللوجو للأجهزة المحمولة */
    header .logo h1 {
        font-size: 1.5rem;
    }

    /* تعديلات قسم الهيرو للأجهزة المحمولة */
    .hero-section {
        margin-top: 60px; /* لمنع تداخل المحتوى مع الهيدر الثابت */
    }
}

/* تحسينات إضافية للهواتف الصغيرة */
@media (max-width: 480px) {
    /* شريط التنقل أصغر */
    header {
        padding: 10px 0;
    }

    /* تقليل حجم أزرار اللغة */
    .language-switcher button {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}