/* ════════════════════════════════════════
   Responsive Typography - Cairo Font
   ════════════════════════════════════════ */

/* ═══ لابتوب صغير ═══ */
@media (max-width: 1200px) {
    :root {
        --text-5xl: 3.25rem;   /* 52px */
        --text-4xl: 2.5rem;    /* 40px */
        --text-3xl: 2rem;      /* 32px */
    }
}

/* ═══ تابلت ═══ */
@media (max-width: 992px) {
    :root {
        --text-5xl: 2.75rem;   /* 44px */
        --text-4xl: 2.25rem;   /* 36px */
        --text-3xl: 1.875rem;  /* 30px */
        --text-2xl: 1.625rem;  /* 26px */
    }

    .hero-title    { font-size: var(--text-4xl); }
    .hero-subtitle { font-size: var(--text-lg); }
    .welcome-name  { font-size: var(--text-2xl); }
    
    .navbar-collapse {
        background-color: var(--bg-card);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 10px;
    }
}

/* ═══ موبايل ═══ */
@media (max-width: 768px) {
    html { font-size: 15px; }

    :root {
        --text-5xl: 2.25rem;   /* 36px */
        --text-4xl: 1.875rem;  /* 30px */
        --text-3xl: 1.625rem;  /* 26px */
        --text-2xl: 1.375rem;  /* 22px */
        --text-xl:  1.25rem;   /* 20px */
    }

    .hero-title     { font-size: var(--text-3xl); }
    .hero-subtitle  { font-size: var(--text-base); }
    .page-title     { font-size: var(--text-xl); }
    .section-title  { font-size: var(--text-lg); }
    .stat-card-number { font-size: var(--text-3xl); }
    .welcome-name   { font-size: var(--text-2xl); }
    .home-section-title { font-size: var(--text-2xl); }
    .btn            { font-size: var(--text-sm); padding: 0.65rem 1.5rem; }
    .btn-lg         { font-size: var(--text-base); }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin: 0 0 1rem 0 !important;
    }
    
    .counter-box {
        margin-bottom: 2rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 20px;
    }
}

/* ═══ موبايل صغير ═══ */
@media (max-width: 576px) {
    html { font-size: 14px; }

    :root {
        --text-5xl: 2rem;      /* 32px */
        --text-4xl: 1.75rem;   /* 28px */
        --text-3xl: 1.5rem;    /* 24px */
    }

    .hero-title    { font-size: var(--text-3xl); line-height: 1.3; }
    .hero-subtitle { font-size: var(--text-sm); }
    .quran-verse   { font-size: var(--text-base); }
    .navbar-brand  { font-size: var(--text-lg) !important; }
    
    .auth-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .auth-buttons .btn {
        width: 100%;
        margin: 5px 0 !important;
    }
}

/* ═══ موبايل صغير جداً ═══ */
@media (max-width: 380px) {
    html { font-size: 13px; }
}