/**
 * دليل التحكم في أبعاد الشعار - Logo Controls Guide
 * @package Lahzat_News
 * @version 2.1
 */

/*
==============================================
📐 دليل التحكم في أبعاد الشعار 
==============================================

تم تطوير نظام متكامل للتحكم في أبعاد الشعار:

✅ تحكم كامل في الارتفاع والعرض
✅ معاينة مباشرة في لوحة التحكم
✅ إعدادات منفصلة للموبايل
✅ متغيرات CSS ديناميكية
✅ إزالة التكرار من الإعدادات

*/

/* 🎛️ متغيرات التحكم الافتراضية */
:root {
    /* أبعاد الشعار للديسكتوب */
    --logo-height: 60px;
    --logo-width: auto; /* أو قيمة محددة بالبكسل */
    
    /* أبعاد الشعار للموبايل */
    --mobile-logo-height: 45px;
    --mobile-logo-width: auto;
    
    /* ارتفاع الهيدر */
    --header-height: 70px;
    --mobile-header-height: 60px;
}

/* 🖼️ تطبيق المتغيرات على الشعار */
.site-logo img,
.custom-logo-link img {
    height: var(--logo-height) !important;
    max-height: var(--logo-height) !important;
    width: var(--logo-width) !important;
    object-fit: contain !important;
    display: block !important;
    transition: none !important;
    transform: none !important;
}

/* 📱 إعدادات الموبايل */
@media (max-width: 768px) {
    .site-logo img,
    .custom-logo-link img {
        height: var(--mobile-logo-height) !important;
        max-height: var(--mobile-logo-height) !important;
        width: var(--mobile-logo-width) !important;
    }
}

/* 🎯 تثبيت الشعار عند التمرير */
.site-logo:hover img,
.custom-logo-link:hover img,
.site-header.is-sticky .site-logo img {
    height: var(--logo-height) !important;
    max-height: var(--logo-height) !important;
    width: var(--logo-width) !important;
    transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
}

/*
==============================================
📋 كيفية الاستخدام
==============================================

1. انتقل إلى: لوحة التحكم > إعدادات القالب > الهيدر
2. ستجد قسم "🖼️ تحكم أبعاد الشعار"
3. استخدم شريط التمرير لتغيير الارتفاع (40-100px)
4. استخدم شريط التمرير لتغيير العرض (0=تلقائي، 1-300px)
5. شاهد المعاينة المباشرة للتغييرات
6. اضبط إعدادات الموبايل بشكل منفصل
7. احفظ الإعدادات

==============================================
💡 نصائح مهمة
==============================================

• العرض "0" يعني تلقائي (يحافظ على نسبة العرض للارتفاع)
• العرض المحدد يجبر الشعار على عرض ثابت
• إعدادات الموبايل منفصلة للحصول على أفضل تجربة
• المعاينة المباشرة تساعد في الضبط الدقيق

==============================================
⚙️ للمطورين
==============================================

المتغيرات يتم توليدها تلقائياً في functions.php:

--logo-height: {$logo_height}px;
--logo-width: {$logo_width}px | auto;
--mobile-logo-height: {$mobile_logo_height}px;
--mobile-logo-width: {$mobile_logo_width}px | auto;

==============================================
*/