/*
═══════════════════════════════════════════════════════════════════
  ملف الإعدادات المخصصة - وجدان استوديو
  Custom Settings File - Wejdan Studio
═══════════════════════════════════════════════════════════════════

  📝 كيف تستخدم هذا الملف:
  ────────────────────────
  1. عدّل القيم هنا فقط
  2. احفظ الملف
  3. حدّث الصفحة (Refresh)
  4. شاهد التغييرات مباشرة!

  ⚠️ ملاحظة مهمة:
  ────────────────────────
  - لا تحذف الأسطر، فقط غيّر القيم
  - احتفظ بنسخة احتياطية قبل التعديل
  - الأحجام بوحدة rem (1rem = 16px تقريباً)
  
═══════════════════════════════════════════════════════════════════
*/

:root {
    
    /* ═══════════════════════════════════════════════════════════
       🎨 الألوان الرئيسية
       Main Colors
    ═══════════════════════════════════════════════════════════ */
    
    --primary-color: #eae5dd;           /* لون الخلفية الأساسي (بيج) */
    --accent-color: #8B7355;            /* لون التمييز (بني) */
    --button-color: #c9a86a;            /* لون الأزرار (ذهبي/بيج) */
    --button-hover-color: #b8935a;      /* لون الأزرار عند المرور عليها */
    --text-dark: #2c2c2c;               /* لون النص الداكن */
    --text-light: #ffffff;              /* لون النص الفاتح (أبيض) */
    
    
    /* ═══════════════════════════════════════════════════════════
       📏 أحجام الخطوط - الصفحة الرئيسية
       Font Sizes - Home Page
    ═══════════════════════════════════════════════════════════ */
    
    /* قسم Hero (الصورة الكبيرة في الأعلى) */
    --hero-title-size: 2.5rem;          /* عنوان Hero: "وجدان استوديو" */
    --hero-text-size: 1.0rem;           /* نص Hero: "نحن نؤمن..." */
    
    /* عناوين الأقسام الرئيسية */
    --section-title-size: 1rem;         /* "مرحباً بكم"، "خدماتنا"، "باقاتنا" */
    
    /* نصوص الأقسام */
    --section-text-size: 0.8rem;        /* النص تحت "مرحباً بكم" */
    
    /* بطاقات الخدمات والباقات */
    --card-title-size: 0.8rem;          /* عناوين البطاقات */
    --card-text-size: 0.8rem;           /* نصوص البطاقات */
    
    /* النص العادي */
    --normal-text-size: 0.8rem;         /* النص العادي في الموقع */
    
    /* أزرار */
    --button-text-size: 0.8rem;         /* نص الأزرار */
    
    
    /* ═══════════════════════════════════════════════════════════
       📱 أحجام الخطوط - الموبايل
       Font Sizes - Mobile
    ═══════════════════════════════════════════════════════════ */
    
    --hero-title-mobile: 1rem;          /* عنوان Hero في الموبايل */
    --hero-text-mobile: 0.8rem;         /* نص Hero في الموبايل */
    --section-title-mobile: 1.0rem;     /* عناوين الأقسام في الموبايل */
    
    
    /* ═══════════════════════════════════════════════════════════
       🖼️ أحجام اللوجو
       Logo Sizes
    ═══════════════════════════════════════════════════════════ */
    
    --logo-height: 50px;                /* ارتفاع اللوجو في الكمبيوتر */
    --logo-height-mobile: 50px;         /* ارتفاع اللوجو في الموبايل */
    
    
    /* ═══════════════════════════════════════════════════════════
       📐 المسافات والأبعاد
       Spacing & Dimensions
    ═══════════════════════════════════════════════════════════ */
    
    --navbar-padding: 1rem 2rem;        /* مسافة داخلية للقائمة العلوية */
    --container-padding: 2rem;          /* مسافة داخلية للحاويات */
    --card-padding: 2rem;               /* مسافة داخلية للبطاقات */
    
    --section-margin: 3rem;             /* المسافة بين الأقسام */
    --card-gap: 3rem;                   /* المسافة بين البطاقات */
    
    
    /* ═══════════════════════════════════════════════════════════
       🎭 التأثيرات والظلال
       Effects & Shadows
    ═══════════════════════════════════════════════════════════ */
    
    --card-border-radius: 20px;         /* استدارة زوايا البطاقات */
    --button-border-radius: 50px;       /* استدارة زوايا الأزرار */
    
    --card-shadow: 0 8px 20px rgba(0,0,0,0.08);         /* ظل البطاقات */
    --card-hover-shadow: 0 15px 35px rgba(0,0,0,0.15);  /* ظل البطاقات عند المرور */
    
    
    /* ═══════════════════════════════════════════════════════════
       🖼️ الصور
       Images
    ═══════════════════════════════════════════════════════════ */
    
    --hero-height: 70vh;                /* ارتفاع صورة Hero */
    --package-image-height: 280px;      /* ارتفاع صور الباقات */
    --card-image-height: 250px;         /* ارتفاع صور البطاقات */
    
}


/* ═══════════════════════════════════════════════════════════════
   تطبيق الإعدادات على الموقع
   Applying Settings to Website
   
   ⚠️ لا تعدل هذا القسم - فقط عدّل القيم في الأعلى
   Don't edit this section - only edit values above
═══════════════════════════════════════════════════════════════ */

/* تطبيق الألوان */
body {
    color: var(--text-dark);
}

.navbar {
    background: rgba(234, 229, 221, 0.95);
    padding: var(--navbar-padding);
}

.btn {
    background: var(--button-color);
    color: var(--text-light);
    font-size: var(--button-text-size);
    border-radius: var(--button-border-radius);
}

.btn:hover {
    background: var(--button-hover-color);
}

/* تطبيق أحجام الخطوط */
.hero-content h1 {
    font-size: var(--hero-title-size);
}

.hero-content p {
    font-size: var(--hero-text-size);
}

.container h2 {
    font-size: var(--section-title-size);
}

.container > p {
    font-size: var(--section-text-size);
}

.card h3,
.package-content h3 {
    font-size: var(--card-title-size);
    color: var(--accent-color);
}

.card p,
.package-content p {
    font-size: var(--card-text-size);
}

/* تطبيق أحجام اللوجو */
.logo img {
    height: var(--logo-height);
}

/* تطبيق المسافات */
.container {
    padding: var(--container-padding);
    margin-bottom: var(--section-margin);
}

.card,
.package-content {
    padding: var(--card-padding);
}

.packages-grid {
    gap: var(--card-gap);
}

/* تطبيق التأثيرات */
.package-card {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}

.package-card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* تطبيق أحجام الصور */
.hero {
    height: var(--hero-height);
}

.package-image {
    height: var(--package-image-height);
}

.card img {
    height: var(--card-image-height);
}

/* تطبيق إعدادات الموبايل */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: var(--hero-title-mobile);
    }
    
    .hero-content p {
        font-size: var(--hero-text-mobile);
    }
    
    .container h2 {
        font-size: var(--section-title-mobile);
    }
    
    .logo img {
        height: var(--logo-height-mobile);
    }
}



/* Footer and Contact Section */
.footer {
    font-size: 0.95rem;
}

.footer p {
    font-size: 0.9rem;
}

.container p[style*="font-size: 1.2rem"] {
    font-size: 1rem !important;
}

/* Center align cards on mobile */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .packages-grid {
        text-align: center;
    }
    
    .card,
    .package-card {
        margin: 0 auto;
    }
}