/* ============================================================
   Anix Global — asp:Menu structural overrides

   Load this AFTER css/style.css and css/responsive.css. It does NOT
   duplicate them — .nav-list, .nav-link-item, .nav-submenu,
   .nav-sub-link, .glass-nav, .btn-hire, .nav-toggler etc. are already
   fully styled there and keep working unchanged, because SiteMenu.ascx
   assigns those exact class names via its *Style-CssClass properties.

   What's here is ONLY the handful of rules that depended on the
   ".nav-item-drop" class the static HTML build put directly on the
   two <li> elements that have a dropdown (Services, Industries).
   asp:Menu has no built-in way to stamp a one-off class onto just
   some items at the same depth — StaticMenuItemStyle/DynamicMenuStyle
   etc. apply uniformly per LEVEL, not per branch — so those rules are
   rewritten below using structural selectors instead:

   - :has() to detect "this <li> contains a dropdown" (for the chevron
     and the hover/focus-within reveal). Supported in all evergreen
     browsers since 2023; on older browsers the dropdown still opens
     via the plain :hover/:focus-within rules already in style.css —
     you just lose the little chevron and its rotate animation.
   - :nth-child, since the sitemap order is fixed (About, Services,
     Industries, Approach, Contact) — used only to tell the Services
     dropdown (icon rows) apart from the Industries dropdown (2-column
     grid), which is otherwise a per-branch layout difference the
     Menu control has no per-branch hook for.
   ============================================================ */

.nav-list > li { position: relative; list-style: none; }
 
/* Chevron on whichever top-level items actually have a dropdown —
   replaces the static build's literal <i class="nav-caret"> markup,
   which asp:Menu has no equivalent per-item template for. */
.nav-list > li:has(> ul.nav-submenu)::after,
.nav-list > li:has(> div.nav-submenu)::after {
  content: "\F282";
  font-family: "bootstrap-icons" !important;
  font-size: 10px;
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
  transition: transform var(--tr-fast);
  pointer-events: none;
}
.nav-list > li:has(> div.nav-submenu)::after  { display: none;}
.nav-list > li:has(> ul.nav-submenu):hover::after,
.nav-list > li:has(> ul.nav-submenu):focus-within::after,
.nav-list > li:has(> div.nav-submenu):hover::after,
.nav-list > li:has(> div.nav-submenu):focus-within::after {
  transform: rotate(180deg);
}

/* Services dropdown = 2nd top-level <li> per Web.sitemap order:
   single column, icon + label rows (icons come from MenuItem.ImageUrl,
   set in SiteMenu.ascx.cs). */
.nav-list > li:nth-child(2) .nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}




.nav-submenu.galry {
    left: 157%;
    top: 180px;
}






/* Industries dropdown = 3rd top-level <li>: 2-column grid, plain text
   (no ImageUrl set for these items, so no icon renders). */
/*.nav-list > li:nth-child(3) .nav-submenu {
  min-width: 460px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}*/

/* asp:Menu's rendered <img> (from MenuItem.ImageUrl) needs the same
   sizing the static build gave .nav-sub-ico. */
.nav-submenu img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- Mobile (<=991.98px) ----------
   The static build's mobile version used a tap-to-expand accordion on
   a dedicated caret <i> element. asp:Menu doesn't give us that
   separate element to bind a tap handler to without extra JS
   (see js/menu-aspnet.js if you want the accordion back) — the
   simplest, zero-extra-JS option is to just show each dropdown
   already-expanded under its parent once the mobile menu is open,
   which is what this does. */
@media (max-width: 991.98px) {
  .nav-list > li:has(> ul.nav-submenu)::after,
  .nav-list > li:has(> div.nav-submenu)::after {
    display: none;
  }

  .nav-submenu {
    position: static !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none;
    border: 0;
    background: rgba(11, 139, 0, 0.05);
    margin-top: 4px;
  }

  .nav-list > li:nth-child(3) .nav-submenu {
    grid-template-columns: 1fr 1fr;
  }
}