/*
Theme Name: Green Oasis Landscaping
Description: قالب احترافي مخصص لشركات تنسيق الحدائق، مبني بتصميم عضوي (Organic) ومتوافق 100% مع معايير جوجل.
Version: 1.0
Author: Dollar SEO Agency
*/

/* =======================================================
   1. المتغيرات والألوان (تم فحص التباين لضمان 100% Accessibility)
   ======================================================= */
:root {
    --forest-green: #064e3b;      /* أخضر غابات داكن جداً (تباين ممتاز للنصوص والعناوين) */
    --leaf-green: #15803d;        /* أخضر حيوي للتأثيرات البصرية */
    --soil-brown: #9a3412;        /* بني طيني للأزرار ولفت الانتباه (CTA) */
    --bg-cream: #fbfbf9;          /* خلفية كريمية ناعمة جداً مريحة للعين */
    --text-slate: #334155;        /* رمادي داكن لقراءة المقالات الطويلة براحة */
    
    /* خطوط النظام الصاروخية */
    --font-arabic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =======================================================
   2. إعادة الضبط ومنع انزياح التخطيط (Zero CLS)
   ======================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-arabic);
    background-color: var(--bg-cream);
    color: var(--text-slate);
    line-height: 1.8;
    direction: rtl;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =======================================================
   3. الترويسة والتنقل (Header & Navigation)
   ======================================================= */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(6, 78, 59, 0.05);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* تحديد حجم اللوجو في الهيدر */
.site-header img,
.site-logo img, 
.custom-logo {
    max-height: 90px !important; /* يمكنك تكبير أو تصغير الرقم حسب رغبتك */
    width: auto !important;
    display: block;
}
.site-logo {
    color: var(--forest-green);
    font-size: 2rem;
    font-weight: 900;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* حل مساحات اللمس لروابط القائمة (Touch Targets 48px) */
.main-nav ul {
    display: flex;
    gap: 15px;
    list-style: none;
}

.main-nav a {
    color: var(--forest-green);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.main-nav a:hover {
    background-color: rgba(21, 128, 61, 0.05);
    color: var(--leaf-green);
}

/* =======================================================
   4. التصميم العضوي للكروت (Organic Leaf Cards)
   ======================================================= */
.organic-card {
    background-color: #ffffff;
    /* السر هنا: حواف غير متماثلة تعطي شكل ورقة الشجر */
    border-radius: 30px 4px 30px 4px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(21, 128, 61, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.organic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(6, 78, 59, 0.08);
}

.organic-card img {
    border-radius: 20px 4px 20px 4px;
    margin-bottom: 20px;
}

/* الأزرار المستوحاة من الطبيعة (CTA) */
.btn-soil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--soil-brown);
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 25px;
    min-height: 48px; /* توافق جوجل */
    border-radius: 24px 8px 24px 8px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn-soil:hover {
    background-color: #7c2d12;
    transform: scale(1.02);
}

/* =======================================================
   5. الحركات الانسيابية (إيحاء نمو النباتات)
   ======================================================= */
.grow-up {
    opacity: 0 !important;
    /* يبدأ العنصر مصغراً بنسبة 5% وأسفل قليلاً */
    transform: translateY(40px) scale(0.95) !important;
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: opacity, transform;
}

.grow-up.is-visible {
    opacity: 1 !important;
    /* ينمو لحجمه الطبيعي ويستقر في مكانه */
    transform: translateY(0) scale(1) !important;
}

/* =======================================================
   6. تجاوب الشاشات الصغيرة (Mobile Responsive)
   ======================================================= */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}