/* أنماط خاصة بصفحة التفاصيل */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
/* fonts.css - ملف تعريف الخطوط المحلية */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'IBM Plex Sans Arabic', sans-serif;

}


        * {
             font-family: 'IBM Plex Sans Arabic', sans-serif;
        }
        


        .faqs-hero {
            background: #F7FDF9;
            padding: 60px 80px 80px;
        }

        .faqs-hero h1 {
            
            font-size: 48px;
            font-weight: 600;
            line-height: 60px;
            letter-spacing: -0.96px;
            color: #161616;
            margin-bottom: 16px;
        }

        .faqs-hero p {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: #161616;
            max-width: 600px;
        }



          /* ─── BREADCRUMB ──────────────────────────────────── */
        .breadcrumb {
            background: #F7FDF9;
            display: flex; align-items: center; gap: 8px;
            padding: 40px 100px 80px;
            font-size: 13px; color: var(--text-muted);
        }
        .breadcrumb a { color: var(--brand-mid); text-decoration: none; font-weight: 600; }
        .breadcrumb a:hover { text-decoration: underline; }
        .breadcrumb-sep { font-size: 11px; color: var(--text-muted); }
        /* ======================================== */
        /* تحسينات للموبايل - متجاوب */
        /* ======================================== */
        @media (max-width: 768px) {
            .article-hero {
                width: calc(100% - 20px);
                height: 35px;
                border-radius: 0 0 15px 15px;
            }
            
            .article-hero .container {
                padding: 0 20px;
            }
            
            .breadcrumb-riyadh .breadcrumb,
            .breadcrumb-riyadh .breadcrumb-item a,
            .breadcrumb-riyadh .breadcrumb-item.active,
            .breadcrumb-riyadh .breadcrumb-item + .breadcrumb-item::before {
                font-size: 11px;
            }
            
            .hero-title {
                font-size: 1.7rem;
            }
            
            .article-title {
                font-size: 1.7rem;
            }
            
            .article-card {
                padding: 1.5rem;
            }
            
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            .article-actions {
                flex-direction: column;
                align-items: stretch;
            }
            
            .share-buttons {
                width: 100%;
                justify-content: center;
            }
            
            .article-image {
                max-height: 300px;
                margin-bottom: 1.5rem;
            }
            
            .article-body,
            .article-body p {
                font-size: 1.1rem;
                line-height: 1.7;
            }
            
            .btn-back {
                width: 100%;
                justify-content: center;
                padding: 15px;
            }
            
            .related-title {
                font-size: 1rem;
                min-height: 50px;
            }
        }
        
        @media (max-width: 480px) {
            .article-hero {
                width: calc(100% - 10px);
                height: 35px;
                border-radius: 0 0 12px 12px;
            }
            
            .article-hero .container {
                padding: 0 15px;
            }
            
            .breadcrumb-riyadh .breadcrumb,
            .breadcrumb-riyadh .breadcrumb-item a,
            .breadcrumb-riyadh .breadcrumb-item.active,
            .breadcrumb-riyadh .breadcrumb-item + .breadcrumb-item::before {
                font-size: 10px;
            }
            
            .breadcrumb-riyadh .breadcrumb-item + .breadcrumb-item::before {
                padding: 0 4px;
            }
        }
        
        @media (min-width: 1400px) {
            .article-hero {
                width: calc(100% - 60px);
                max-width: 1300px;
                height: 38px;
            }
        }