/* أساسي - يجعل الفوتر sticky عند المحتوى القصير، ويتحرك مع المحتوى الطويل */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* محتوى الصفحات - اضمن أن هذا يغلف كل شيء بين الهيدر والفوتر */
main, .content-wrap {
  flex: 1 0 auto; /* يملأ المساحة المتبقية */
}

/* الفوتر يبقى داخل التدفق الطبيعي */
footer#fh5co-footer {
  position: relative; /* مهم: لا تجعله absolute أو fixed */
  flex-shrink: 0;
  z-index: 2;
}

/* overlay داخل الفوتر يغطي بصرياً لكن لا يغير ارتفاع الفوتر */
footer#fh5co-footer .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  pointer-events: none;
}

/* الحاوية داخل الفوتر فوق الـ overlay */
footer#fh5co-footer .container {
  position: relative;
  z-index: 3;
}