/* ---------------------------------------------------------
  Refactored Language Dropdown Styles for Bootstrap 5
--------------------------------------------------------- */

/* Navbar Dropdown Menus */
.navbar .dropdown-menu {
  min-width: 250px; /* Increased width to accommodate longer language names */
}

/* Make the dropdown scrollable on all screens if content exceeds max height */
.scrollable-dropdown {
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto;
}

/* Flag Icon Styling */
.flag-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 2px;
}

/* Language image in navbar */
.language-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 2px;
}

/* Language text in navbar dropdown - match other nav items */
.language-text {
  font-size: 12px;
}

/* Flag image in dropdown items */
.flag-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 2px;
  margin-right: 8px;
}

/* Optional: Enhance dropdown item appearance */
.dropdown-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #e0e0e0; /* Darken background on hover */
  color: #4b4949; /* Darken text color on hover */
}

/* Optional: Adjust focus styles for accessibility */
.dropdown-item:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(92, 93, 97, 0.25); /* Bootstrap-like focus shadow */
}

/* Services Dropdown Styling */
.services-li a {
  /* Font Properties */
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.8125rem; /* Equivalent to 13px */
  font-weight: 400; /* Standardized font weight */

  /* Text and Background */
  color: #5c5d61;
  background-color: #f8f8f8;

  /* Borders */
  border: 1px solid #4b4949;
  border-radius: 0.4375rem; /* Equivalent to 7px */

  /* Text Alignment */
  text-align: left;

  /* Additional Styling */
  padding: 0.5rem 1rem; /* Adjust padding as needed */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */

  /* Cursor */
  cursor: pointer;

  /* Remove default Bootstrap link styles if conflicting */
  /* Uncomment if necessary */
  /* border: none; */
  /* background: none; */
}

.services-li a:hover {
  background-color: #e0e0e0; /* Darken background on hover */
  color: #4b4949; /* Darken text color on hover */
}

.services-li a:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(92, 93, 97, 0.25); /* Bootstrap-like focus shadow */
}

/* Optional: Increase dropdown menu width for languages and services if needed */
.navbar .dropdown-menu-end.lang-dropdown,
.navbar .dropdown-menu-end.services-dropdown {
  min-width: 250px; /* Adjust as needed */
}

/* Optional: Adjust padding and margins for navbar items */
.navbar-nav .nav-item {
  /* Fine-tune spacing here if necessary */
}

/* Ensure the dropdown is wide enough to fit longer language names */
.dropdown-menu.lang-dropdown {
  min-width: 250px; /* Base minimum width */
}

/* Allow the dropdown to expand based on content */
.dropdown-menu.lang-dropdown .dropdown-item {
  white-space: nowrap; /* Prevent text from wrapping */
}

/* Optional: Adjust padding for better readability */
.dropdown-menu.lang-dropdown .dropdown-item {
  padding: 16px 16px;
}

/* Make the dropdown scrollable on small screens */
@media (max-width: 576px) { /* Bootstrap's sm breakpoint */
  .scrollable-dropdown {
      max-height: 300px; /* Adjust as needed */
      overflow-y: auto;
  }
}