/* ---------- Footer: mobile-first (stacked) ---------- */
.footer .footer-middle .footer-menu ul#menu-footer-menu,
.footer .footer-middle .footer-menu ul#menu-footer-menu.nav {
  display: flex;
  flex-direction: column; /* mobil: bir-bir aşağı */
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hər bir əsas menyu elementi mobil üçün tam genişlikdə olsun */
.footer .footer-middle .footer-menu ul#menu-footer-menu > li {
  width: 100%;
  box-sizing: border-box;
}

/* Sub-menu içindəkilər sırayla görünsün */
.footer .footer-middle .footer-menu ul#menu-footer-menu .sub-menu {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.footer .footer-middle .footer-menu ul#menu-footer-menu .sub-menu li {
  margin: 0.25rem 0;
}

/* Linklər blok kimi, toxunmaq/klik üçün geniş sahə olsun */
.footer .footer-middle .footer-menu ul#menu-footer-menu > li > a {
  display: block;
  padding: 0;
  cursor: default; /* əgər lazım olsa dəyişdirin */
}

/* ---------- Tablet və böyük ekranlar: yan-yana sütunlar ---------- */
/* 768px-dən yuxarıda yan-yana göstər (tablet / orta ekran və böyük) */
@media (min-width: 768px) {
  .footer .footer-middle .footer-menu ul#menu-footer-menu,
  .footer .footer-middle .footer-menu ul#menu-footer-menu.nav {
    flex-direction: row; /* yan-yana */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* 5 sütunlu layout; element sayı fərqli olsa özünü düzəldəcək */
  .footer .footer-middle .footer-menu ul#menu-footer-menu > li {
    flex: 1 1 20%; /* 5 elementi bərabər bölür */
    max-width: 20%;
    padding: 0 0.5rem; /* sütunlar arasında boşluq */
  }
}

/* Əgər istəsəniz böyük ekran üçün daha geniş aralıq */
@media (min-width: 1200px) {
  .footer .footer-middle .footer-menu ul#menu-footer-menu > li {
    padding: 0 1rem;
  }
}

/* Bootstrap və ya mövzunun .nav qaydaları ilə konflikt olarsa */
/* uncomment edin və lazım gəldikdə !important əlavə edin */
/*
.footer .footer-middle .footer-menu ul#menu-footer-menu.nav {
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width:768px) {
  .footer .footer-middle .footer-menu ul#menu-footer-menu.nav {
    flex-direction: row !important;
  }
}
*/
