/* Keep .nav-item inline so it doesn't affect flex layout */
.nav-item {
  display: inline-flex;
  position: relative;
  align-items: center;
}

.dropdown-icon {
  font-size: 0.9rem;
}

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 12rem;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
  flex-direction: column;  
  text-align: center;
}
.submenu a:hover {
  background: rgb(91, 145, 228);
  color: #f2efeaff;
}

/* Expand the hover hit area between the parent link and the submenu so the submenu
   does not disappear when the cursor crosses a small gap. The pseudo-element is
   transparent and sits in the gap; it keeps :hover active on .nav-item. */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px; /* increase to make gap forgiving; reduce if it interferes */
  z-index: 50; /* must be less than submenu z-index so submenu clicks still work */
  /* transparent by default; pointer-events left as default so the hover is captured */
}

/* Desktop: show submenu on hover with transparent background matching mobile nav open style */
.nav-item:hover .submenu {
    display: flex;
    background: rgba(23, 45, 79, 0.5);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }