/* ============================================
   🎨 هوية جُملة – لوحة الألوان الرسمية
============================================ */
:root {
  --j-green:        #59a52c;   /* أخضر جملة الأساسي */
  --j-green-dark:   #437d21;   /* أخضر غامق */
  --j-green-strong: #04a118;   /* أخضر قوي */
  --j-green-light:  #f6faf4;   /* خلفية ناعمة */
  --j-green-soft:   #ecf5e7;   /* خلفية ثانوية */
  --text-main:      #1c2317;
  --text-light:     #e3f0dd;
  --text-muted:     #6c7a64;
}

/* ============================================
   🟢 خلفية المتجر – أفضل خيار لمتاجر الأطفال
   (لون ناعم يحافظ على وضوح المنتجات)
============================================ */
body {
  background: var(--j-green-light) !important;
  color: var(--text-main);
  font-family: 'Tajawal', sans-serif !important;
}

/* ============================================
   🟦 الهيدر – أبيض احترافي مع هوية خضراء
============================================ */
.site-header,
header.site-header,
.header {
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.site-header nav a,
.header-nav a {
  color: var(--j-green-dark) !important;
  font-weight: 600 !important;
}

/* خط أخضر تحت الرابط عند المرور */
.site-header nav a:hover,
.header-nav a:hover {
  color: var(--j-green-strong) !important;
}

.site-header nav a::after,
.header-nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--j-green);
  transition: width 0.2s ease-in-out;
}

.site-header nav a:hover::after,
.header-nav a:hover::after {
  width: 100%;
}

/* ============================================
   🟩 الفوتر – أخضر غامق فاخر (هوية جُملة)
============================================ */
.site-footer,
footer {
  background: #111f10 !important; /* أخضر شديد الغمق يميل للأسود */
  color: var(--text-light) !important;
  padding-top: 2.2rem !important;
  padding-bottom: 2rem !important;
}

/* روابط الفوتر */
.site-footer a,
footer a {
  color: #ddffcf !important;
  font-weight: 500 !important;
}

.site-footer a:hover,
footer a:hover {
  color: #ffffff !important;
}

/* خط علوي للفوتر السفلي */
.site-footer .footer-bottom,
footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  margin-top: 1rem;
  padding-top: 0.8rem;
  color: #c7d9c4 !important;
  font-size: 0.9rem;
}

/* ============================================
   🧱 صناديق المحتوى فوق الخلفية
============================================ */
.section,
.home-widget {
  background: transparent !important;
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}

/* عناوين السكشن */
.section-title,
.widget-title,
h2.section-title {
  font-weight: 700 !important;
  color: var(--j-green-dark) !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.2rem !important;
  position: relative;
}

/* خط تحت العنوان */
.section-title::after,
.widget-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--j-green);
  border-radius: 999px;
}