/* ============================================================
   footer.css — تذييل الصفحة

   المحتويات:
   1. Footer Container — الحاوية الرئيسية
   2. Footer Grid — الشبكة الأربعة أعمدة
   3. Footer Brand — العمود الأول (الشعار والوصف)
   4. Social Links — أيقونات السوشيال ميديا
   5. Footer Columns — الأعمدة الثلاثة الأخرى
   6. Footer Bottom — الشريط السفلي
   7. Responsive — الجوال
============================================================ */


/* ============================================================
   1. Footer Container — الحاوية الرئيسية
============================================================ */
#main-footer {
  background:  var(--section-dark-mid);
  border-top:  0.5px solid var(--border-gold);
  padding:     var(--space-xl) 48px var(--space-md);
  position:    relative;
  overflow:    hidden;
}

/* خط ذهبي-أخضر في الأعلى */
#main-footer::before {
  content:    '';
  position:   absolute;
  top:        0;
  right:      0;
  left:       0;
  height:     2px;
  background: linear-gradient(
    to left,
    transparent,
    var(--color-gold),
    var(--color-green),
    var(--color-gold),
    transparent
  );
  opacity: 0.5;
}

/* ضوء خفي في الخلفية */
#main-footer::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           50%;
  transform:      translateX(-50%);
  width:          800px;
  height:         300px;
  background:     radial-gradient(
    ellipse at bottom,
    rgba(26, 92, 58, 0.05),
    transparent 70%
  );
  pointer-events: none;
}


/* ============================================================
   2. Footer Grid — أربعة أعمدة
   العمود الأول (الشعار) أعرض من الباقي
============================================================ */
.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--space-xl);
  margin-bottom:         var(--space-xl);
  position:              relative;
  z-index:               1;
}


/* ============================================================
   3. Footer Brand — العمود الأول
============================================================ */
.footer-brand {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* الشعار */
.footer-logo {
  height:        max-content;   /* تصغير من 64px إلى 48px */
  width:         auto;
  margin-bottom: var(--space-sm);
  transition:    opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 0.85;
}

/* الوصف */
.footer-brand p {
  font-size:     var(--fs-sm);
  color:         var(--text-on-dark-muted);
  line-height:   1.8;
  max-width:     260px;
  font-weight:   300;
  margin-bottom: var(--space-md);
}


/* ============================================================
   4. Social Links — أيقونات السوشيال ميديا
============================================================ */
.footer-socials {
  display:     flex;
  gap:         8px;
  align-items: center;
}

.footer-socials a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;

  color:      var(--text-on-dark-muted);
  border:     0.5px solid var(--border-gold);
  font-size:  13px;
  font-weight: 700;

  transition: color 0.3s ease,
              border-color 0.3s ease,
              background 0.3s ease,
              transform 0.2s ease;
}

.footer-socials a:hover {
  color:        var(--color-gold);
  border-color: var(--color-gold);
  background:   rgba(201, 168, 76, 0.08);
  transform:    translateY(-3px);
}

.footer-socials a:active {
  transform: translateY(0);
}


/* ============================================================
   5. Footer Columns — الأعمدة الثلاثة
============================================================ */
.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            0;
  position:       relative;
  z-index:        1;
}

/* عنوان العمود */
.footer-col h4 {
  font-family:    var(--font-arabic);
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-md);

  /* خط سفلي قصير */
  padding-bottom: 10px;
  border-bottom:  0.5px solid var(--border-gold);
}

/* قائمة الروابط */
.footer-col ul {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  list-style:     none;
}

/* رابط واحد */
.footer-col ul li a {
  display:     block;
  font-size:   var(--fs-sm);
  color:       var(--text-on-dark-muted);
  font-weight: 300;
  line-height: 1.4;
  transition:  color 0.25s ease, padding-right 0.25s ease;

  /* موضع نسبي للسهم */
  position:   relative;
  padding-right: 0;
}

/* سهم صغير يظهر عند التحويم */
.footer-col ul li a::before {
  content:    '←';    /* RTL: سهم لليسار */
  position:   absolute;
  right:      0;
  opacity:    0;
  color:      var(--color-gold);
  font-size:  11px;
  transition: opacity 0.25s ease, right 0.25s ease;
}

.footer-col ul li a:hover {
  color:        var(--color-gold);
  padding-right: 18px;   /* يفسح مجال للسهم */
}

.footer-col ul li a:hover::before {
  opacity: 1;
  right:   0;
}

/* روابط التواصل (أيقونة + نص) */
.footer-col ul li a[href^="tel"],
.footer-col ul li a[href^="mailto"],
.footer-col ul li a[href^="https://wa"] {
  direction: ltr;        /* الأرقام والروابط من اليسار */
  text-align: right;     /* لكن محاذاة للنص من اليمين */
}


/* ============================================================
   6. Footer Bottom — الشريط السفلي
============================================================ */
.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-sm);

  padding-top:  var(--space-md);
  border-top:   0.5px solid var(--border-gold);
  position:     relative;
  z-index:      1;
}

/* النصوص */
.footer-bottom span {
  font-size:   var(--fs-xs);
  color:       rgba(255,255,255,0.35);
  line-height: 1.5;
}

/* الروابط */
.footer-bottom a {
  color:      rgba(255,255,255,0.35);
  transition: color 0.25s ease;
}

.footer-bottom a:hover {
  color: var(--color-gold);
}

/* اللغات في الوسط */
.footer-langs {
  letter-spacing: 2px;
  font-weight:    500;
  color:          rgba(201, 168, 76, 0.35) !important;
}


/* ============================================================
   7. Responsive — الجوال
============================================================ */
@media (max-width: 1024px) {

  /* من 4 أعمدة إلى 2 */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-lg);
  }

  /* الشعار يأخذ عرض الشاشة كاملاً */
  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    max-width: 100%;
  }
}

@media (max-width: 600px) {

  #main-footer {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  /* عمود واحد */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  .footer-brand {
    grid-column: 1;
    align-items: center;
    text-align:  center;
  }

  .footer-brand p {
    text-align: center;
    max-width:  100%;
  }

  .footer-socials {
    justify-content: center;
  }

  /* الشريط السفلي: عمود واحد */
  .footer-bottom {
    flex-direction: column;
    text-align:     center;
    gap:            8px;
  }
}