/* nav-responsive.css — mobile (<992px) Services-menu accordion.
   Loaded LAST so it overrides style.css / responsive.css / rtl.css.
   Desktop (>=992px) is untouched: all rules live inside max-width:991.98px.

   Why: the header collapse, hamburger, and page layout already work on mobile.
   The one broken piece is the Services mega-dropdown — it is absolute +
   :hover/:focus-within driven (desktop), so on touch it renders an empty gap.
   Below we turn it (and its 3 nested submenus) into a tap-driven accordion. */

@media (max-width: 991.98px) {
    /* Services dropdown + nested submenus: absolute hover menu -> static accordion.
       !important beats the theme's :hover/:focus-within opacity rules and any
       Bootstrap .show, so .open is the single source of open/closed truth. */
    .services-dropdown,
    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding-left: 12px;
        background: transparent;
        opacity: 1 !important;
        visibility: visible !important;
        display: none !important;   /* collapsed by default */
    }
    .nav-item.dropdown.open > .services-dropdown,
    .dropdown-submenu.open  > .dropdown-menu {
        display: block !important;  /* .open (set by nav-responsive.js) reveals it */
    }

    /* the collapsed white panel overrides dropdown text to white — force it dark
       so the Services items are readable (icons keep their accent colour) */
    .services-dropdown .dropdown-item,
    .services-dropdown .dropdown-item span { color: #1a1a2e !important; }
    /* icons get the same white override — restore the accent colour */
    .services-dropdown .dropdown-item i { color: var(--primery) !important; }

    /* caret indicator (Bootstrap's .dropdown-toggle::after) rotates when open */
    .dropdown-toggle::after { transition: transform .2s ease; }
    .nav-item.dropdown.open > .dropdown-toggle::after,
    .dropdown-submenu.open  > .dropdown-toggle::after { transform: rotate(180deg); }
}