/*~~~~~~~~~~~~~~~~~~~~ CUSTOM LRGG CSS ~~~~~~~~~~~~~~~~~~~~*/
body::before {
  content: "CUSTOM CSS LOADED";
  display: block;
  background: red;
  color: white;
  padding: 1rem;
  text-align: center;
}

/*~~~~~ Drupal user utility menu ~~~~~*/
header .utility-menu ul {
  display: flex !important;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

header .utility-menu li {
  display: inline !important;
}

header .utility-menu a {
  display: inline-block !important;
  padding: 0 0.5rem;
  text-decoration: none;
}

/*~~~~~ MAIN NAVIGATION ~~~~~*/
@media (min-width: 992px) {
  ul.navbar-nav {
    flex-direction: row !important;
  }  
  #main-navbar {
    justify-content: end !important;
  }
  
  /*~~~~~~~~~~ Constrains the width of a dropdown ~~~~~~~~~~*/
.dropdown-menu {
width: max-content;
    max-width: min(90vw, 320px); /* Responsive max */
    white-space: normal;
    word-break: break-word;
}

.dropdown-menu .dropdown-item {
  white-space: normal;
}
}

/*~~~~~~~~~~ Dropdown Nav ~~~~~~~~~*/
@media (max-width: 991.98px) {
  .dropdown-menu.collapse.show {
    display: block;
    position: static !important;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 1rem;
  }

  .dropdown-menu .dropdown-item {
    padding-left: 1.5rem; /* Indent child items slightly */
  }
}