/* Global site overrides */
/* Ensure the mobile collapsed navbar is opaque and sits above page content. */
@media (max-width: 991.98px) {
  /* Target the header navbar collapse explicitly and the shown collapse state */
  header.navbar .navbar-collapse,
  .navbar .navbar-collapse.collapse.show {
    background-color: #ffffff !important;
    padding: 12px 16px !important;
    margin: 8px -4px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    z-index: 1055 !important;
    backdrop-filter: none !important;
  }

  /* Make any dropdowns inside the collapsed navbar opaque as well */
  .navbar .navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  }
}

/* Small tweak: ensure the navbar toggler icon remains visible on light background */
.navbar-toggler-icon {
  filter: none !important;
}