/**
 * تحسين الخطوط للأجهزة المحمولة - مصنع إيليا
 * Mobile Typography Optimization - Elea Factory
 * تم تصميمه بحب واحترافية لتجربة قراءة مثالية على الهواتف
 */

/* ===== متغيرات أحجام الخطوط المحسنة للموبايل ===== */
:root {
    /* أحجام الخطوط الأساسية للموبايل */
    --mobile-font-xs: 0.7rem;      /* 11.2px */
    --mobile-font-sm: 0.8rem;      /* 12.8px */
    --mobile-font-base: 0.875rem;  /* 14px */
    --mobile-font-md: 0.95rem;     /* 15.2px */
    --mobile-font-lg: 1rem;        /* 16px */
    --mobile-font-xl: 1.1rem;      /* 17.6px */
    --mobile-font-2xl: 1.25rem;    /* 20px */
    --mobile-font-3xl: 1.5rem;     /* 24px */
    --mobile-font-4xl: 1.75rem;    /* 28px */
    --mobile-font-5xl: 2rem;       /* 32px */
}

/* ===== تحسينات للشاشات الصغيرة جداً (أقل من 375px) ===== */
@media (max-width: 374.98px) {
    :root {
        --mobile-font-xs: 0.65rem;     /* 10.4px */
        --mobile-font-sm: 0.75rem;     /* 12px */
        --mobile-font-base: 0.8rem;    /* 12.8px */
        --mobile-font-md: 0.875rem;    /* 14px */
        --mobile-font-lg: 0.95rem;     /* 15.2px */
        --mobile-font-xl: 1rem;        /* 16px */
        --mobile-font-2xl: 1.15rem;    /* 18.4px */
        --mobile-font-3xl: 1.35rem;    /* 21.6px */
        --mobile-font-4xl: 1.6rem;     /* 25.6px */
        --mobile-font-5xl: 1.85rem;    /* 29.6px */
    }
    
    html {
        font-size: 14px; /* تقليل الحجم الأساسي */
    }
}

/* ===== الهواتف الصغيرة (375px - 575px) ===== */
@media (min-width: 375px) and (max-width: 575.98px) {
    html {
        font-size: 15px;
    }
    
    /* العناوين الرئيسية */
    h1 {
        font-size: var(--mobile-font-4xl) !important;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }
    
    h2 {
        font-size: var(--mobile-font-3xl) !important;
        line-height: 1.35;
        margin-bottom: 0.7rem;
    }
    
    h3 {
        font-size: var(--mobile-font-2xl) !important;
        line-height: 1.4;
        margin-bottom: 0.65rem;
    }
    
    h4 {
        font-size: var(--mobile-font-xl) !important;
        line-height: 1.45;
        margin-bottom: 0.6rem;
    }
    
    h5 {
        font-size: var(--mobile-font-lg) !important;
        line-height: 1.5;
        margin-bottom: 0.55rem;
    }
    
    h6 {
        font-size: var(--mobile-font-md) !important;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
    
    /* النصوص العادية */
    p, .modern-text {
        font-size: var(--mobile-font-base) !important;
        line-height: 1.65;
        margin-bottom: 0.85rem;
    }
    
    /* الأزرار */
    .btn, .btn-primary, .modern-btn, button {
        font-size: var(--mobile-font-base) !important;
        padding: 0.65rem 1.1rem !important;
    }
    
    /* القوائم */
    .nav-link, .modern-nav-link {
        font-size: var(--mobile-font-base) !important;
        padding: 0.6rem 0.9rem !important;
    }
    
    /* البطاقات */
    .card-title, .premium-card-title {
        font-size: var(--mobile-font-xl) !important;
        line-height: 1.4;
    }
    
    .card-text, .premium-card-description {
        font-size: var(--mobile-font-sm) !important;
        line-height: 1.6;
    }
    
    /* العناوين الكبيرة (Hero) */
    .modern-hero-title, .modern-title, .premium-portfolio-title {
        font-size: var(--mobile-font-5xl) !important;
        line-height: 1.25;
    }
    
    .modern-hero-subtitle, .modern-subtitle, .premium-portfolio-subtitle {
        font-size: var(--mobile-font-xl) !important;
        line-height: 1.5;
    }
    
    /* الإحصائيات */
    .modern-stat-number {
        font-size: var(--mobile-font-4xl) !important;
    }
    
    .modern-stat-label {
        font-size: var(--mobile-font-base) !important;
    }
    
    /* شريط التنقل */
    .navbar-brand {
        font-size: var(--mobile-font-2xl) !important;
    }
    
    /* النماذج */
    input, textarea, select, .form-control {
        font-size: var(--mobile-font-base) !important;
        padding: 0.65rem 0.85rem !important;
    }
    
    label {
        font-size: var(--mobile-font-sm) !important;
        margin-bottom: 0.4rem;
    }

    /* الأيقونات */
    i, .fa, .fas, .far {
        font-size: inherit;
    }

    /* الروابط */
    a {
        font-size: inherit;
    }

    /* القوائم */
    ul li, ol li {
        font-size: var(--mobile-font-base) !important;
        line-height: 1.6;
        margin-bottom: 0.4rem;
    }

    /* الجداول */
    table {
        font-size: var(--mobile-font-sm) !important;
    }

    th {
        font-size: var(--mobile-font-sm) !important;
        padding: 0.5rem !important;
    }

    td {
        font-size: var(--mobile-font-xs) !important;
        padding: 0.45rem !important;
    }
}

/* ===== الهواتف المتوسطة (576px - 767px) ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
    html {
        font-size: 15.5px;
    }

    h1 {
        font-size: 2rem !important;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.65rem !important;
        line-height: 1.35;
    }

    h3 {
        font-size: 1.35rem !important;
        line-height: 1.4;
    }

    h4 {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }

    p, .modern-text {
        font-size: 0.9rem !important;
        line-height: 1.65;
    }

    .btn, .btn-primary, .modern-btn {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.2rem !important;
    }

    .modern-hero-title, .modern-title {
        font-size: 2.25rem !important;
        line-height: 1.25;
    }

    .modern-hero-subtitle, .modern-subtitle {
        font-size: 1.2rem !important;
        line-height: 1.5;
    }
}

/* ===== الأجهزة اللوحية الصغيرة (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2.25rem !important;
    }

    h2 {
        font-size: 1.85rem !important;
    }

    h3 {
        font-size: 1.55rem !important;
    }

    p, .modern-text {
        font-size: 0.95rem !important;
        line-height: 1.65;
    }

    .btn, .btn-primary, .modern-btn {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.3rem !important;
    }
}

/* ===== تحسينات خاصة بالقراءة ===== */
@media (max-width: 767.98px) {
    /* تحسين المسافات بين الأسطر للقراءة الأفضل */
    body {
        line-height: 1.65;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* منع تكبير النص التلقائي في iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
        font-size: 16px !important; /* منع التكبير التلقائي */
    }

    /* تحسين وضوح النص */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* تحسين التباعد للنصوص الطويلة */
    article p,
    .content p,
    .description {
        margin-bottom: 1rem;
        word-spacing: 0.05em;
        letter-spacing: 0.01em;
    }

    /* تحسين العناوين في البطاقات */
    .card h1, .card h2, .card h3,
    .card h4, .card h5, .card h6 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* تحسين النصوص في القوائم المنسدلة */
    .dropdown-item {
        font-size: var(--mobile-font-base) !important;
        padding: 0.6rem 1rem !important;
    }

    /* تحسين النصوص في التنبيهات */
    .alert {
        font-size: var(--mobile-font-sm) !important;
        padding: 0.75rem 1rem !important;
    }

    /* تحسين النصوص في الشارات */
    .badge {
        font-size: var(--mobile-font-xs) !important;
        padding: 0.35rem 0.6rem !important;
    }
}

/* ===== تحسينات للشاشات عالية الدقة ===== */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 767.98px),
       (min-resolution: 192dpi) and (max-width: 767.98px) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* ===== تحسينات للوضع الأفقي على الهواتف ===== */
@media (max-width: 767.98px) and (orientation: landscape) {
    h1 {
        font-size: 1.65rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }

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

    .modern-hero-title {
        font-size: 1.85rem !important;
    }

    .modern-hero-subtitle {
        font-size: 1rem !important;
    }
}