/*
Theme Name: Twenty Twenty Child - Professional
Description: ثيم child احترافي من Twenty Twenty مع تدرجات لونية حديثة ودعم WooCommerce
Author: Saad
Template: twentytwenty
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty-child
*/

/* ===== متغيرات CSS الأساسية ===== */
:root {
  /* الألوان الأساسية */
  --main-color: #281D42;
  --second-color: #281D42;
  --mix-color: #281D42;
  --icon-color: #4C236A;
  
  /* ألوان التدرج للخلفية */
  --bg-top: rgb(232, 225, 245);
  --bg-mid: rgb(222, 217, 231);
  --bg-bottom: rgb(226, 220, 241);
  
  /* تدرج الخلفية الرئيسي */
  --gradient-bg: linear-gradient(
    to bottom,
    var(--bg-top),
    var(--bg-mid),
    var(--bg-bottom)
  );
  
  /* تدرج الهيدر */
  --gradient-header: linear-gradient(
    135deg,
    rgba(30, 20, 60, 1),
    rgba(40, 30, 70, 1),
    rgba(60, 45, 85, 1),
    rgba(74, 55, 90, 1)
  );
  
  /* ألوان إضافية */
  --text-color: #333;
  --text-light: #666;
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --dark-gray: #6c757d;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;
  --border-color: rgba(255, 255, 255, 0.2);
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  
  /* المسافات */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* خط Cairo كخط أساسي */
  --primary-font: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --secondary-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* متغيرات الانسيابية والحركة */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  --bounce-effect: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth-scroll: smooth;
  
  /* الانتقالات القديمة للتوافق */
  --transition: all 0.3s ease;
}

/* ===== إعادة تعيين الأساسيات وتحسينات الأداء والانسيابية ===== */
* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/* تحسينات الانسيابية للهواتف المحمولة */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: var(--smooth-scroll);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* تحسين اللمس للهواتف */
button,
input,
select,
textarea,
a,
.clickable {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* تحسين الحركة والانتقالات */
.smooth-transition {
  transition: all var(--transition-normal);
  will-change: transform, opacity;
}

.bounce-effect {
  transition: transform var(--transition-normal) var(--bounce-effect);
}

.bounce-effect:hover,
.bounce-effect:focus {
  transform: scale(1.05);
}

/* تحسين الأداء للرسوم المتحركة */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* تحسين التمرير للهواتف */
.smooth-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* تحسين الاستجابة للمس */
@media (hover: none) and (pointer: coarse) {
  .hover-effect:hover {
    transform: none;
  }
  
  .hover-effect:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ===== تطبيق التدرج على الخلفية العامة ===== */
body {
  background: var(--gradient-bg) !important;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-color);
  font-family: var(--primary-font);
  line-height: 1.6;
  scroll-behavior: var(--smooth-scroll);
}

/* ===== تصميم الهيدر ===== */
.site-header {
  background: var(--gradient-header) !important;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1000;
}

.site-header .header-inner {
  padding: var(--spacing-sm) 0;
}

/* شعار الموقع */
.site-title a,
.site-logo a {
  color: var(--white) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: var(--transition);
}

.site-title a:hover,
.site-logo a:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ===== قائمة التنقل ===== */
.primary-menu {
  background: transparent;
}

.primary-menu ul li a {
  color: var(--white) !important;
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 8px;
  transition: var(--transition);
  text-decoration: none;
}

.primary-menu ul li a:hover,
.primary-menu ul li a:focus {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.primary-menu ul li.current-menu-item a {
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

/* ===== المحتوى الرئيسي ===== */
.site-content {
  background: rgba(255, 255, 255, 0.9);
  margin: var(--spacing-lg) auto;
  border-radius: 15px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: var(--spacing-xl);
  max-width: 1200px;
}

/* ===== الأزرار ===== */
.wp-block-button__link,
.button,
.btn,
input[type="submit"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: var(--white) !important;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.wp-block-button__link:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  opacity: 0.95;
}

/* ===== الروابط ===== */
a {
  color: var(--main-color);
  transition: var(--transition);
}

a:hover {
  color: var(--second-color);
  text-decoration: none;
}

/* ===== العناوين ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--main-color), var(--second-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== البطاقات والعناصر ===== */
.entry,
.post,
.page {
  background: var(--white);
  border-radius: 15px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.entry:hover,
.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* ===== الفوتر ===== */
.site-footer {
  background: var(--gradient-header) !important;
  color: var(--white);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
}

.site-footer a {
  color: var(--white);
  transition: var(--transition);
}

.site-footer a:hover {
  opacity: 0.8;
}

/* ===== تحسينات الاستجابة للهواتف المحمولة ===== */

/* تحسينات عامة للهواتف */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }
    
    .container {
        padding: 0 1rem;
        max-width: 100%;
    }
    
    .site-content {
        margin: var(--spacing-sm);
        padding: var(--spacing-lg);
        border-radius: 10px;
    }
    
    /* تحسين الخطوط للهواتف */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 700;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        font-weight: 600;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        font-weight: 500;
    }
    
    p, li {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* تحسين الأزرار للهواتف */
    .button,
    button,
    input[type="submit"],
    input[type="button"] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        min-height: 48px; /* الحد الأدنى للمس المريح */
        border-radius: 8px;
        font-weight: 500;
        letter-spacing: 0.025em;
        transition: all var(--transition-fast);
    }
    
    /* تحسين النماذج للهواتف */
    input,
    textarea,
    select {
        padding: 0.875rem;
        font-size: 1rem;
        min-height: 48px;
        border-radius: 8px;
        font-family: var(--primary-font);
    }
    
    /* تحسين القوائم للهواتف */
    .menu-item {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    .primary-menu ul li a {
        padding: var(--spacing-xs);
    }
    
    /* تحسين البطاقات للهواتف */
    .card,
    .product-card {
        margin-bottom: 1rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    }
    
    .card:active,
    .product-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
}

/* تحسينات للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.375rem;
    }
    
    .button {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* تحسين التنقل للشاشات الصغيرة */
    .navigation-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--gradient-header);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: 9999;
    }
    
    .navigation-menu.active {
        transform: translateX(0);
    }
}

/* تحسينات للشاشات الكبيرة */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* تحسين التأثيرات للشاشات الكبيرة */
    .hover-effect:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
}

/* ===== تأثيرات الانتقال ===== */
* {
  transition: var(--transition-fast);
}

/* ===== تحسينات إضافية ===== */
.site {
  overflow-x: hidden;
}

/* تحسين الصور */
img {
  border-radius: 10px;
  transition: var(--transition);
}

img:hover {
  transform: scale(1.02);
}

/* تحسين النماذج */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border: 2px solid rgba(40, 29, 66, 0.2);
  border-radius: 10px;
  padding: var(--spacing-sm);
  transition: var(--transition);
  background: var(--white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(40, 29, 66, 0.1);
  outline: none;
}