/* ============================================================
   AZTOR Automation — navigation additions
   1) "Solutions" mega menu (desktop >= 992px)
   2) Right-aligned dropdowns for Resources / Company
   3) Mobile accordion group styling (menu is cloned by main.js)
   Uses the theme's own tokens: --tg-primary-color, etc.
   ============================================================ */

@media (min-width: 992px) {

    /* anchor the mega panel to the header container, full width */
    #sticky-header .container { position: relative; }
    .navbar-wrap ul li.mega-menu { position: static; }

    .navbar-wrap ul li.mega-menu > .sub-menu {
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        min-width: 0;
        padding: 30px 34px 24px;
        border-radius: 0 0 12px 12px;
        border-top: 3px solid var(--tg-primary-color);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px 30px;
    }

    /* group columns */
    .navbar-wrap ul li.mega-menu > .sub-menu > li.mega-col {
        position: static;
        display: block;
        margin: 0;
        padding: 0;
    }
    .navbar-wrap ul li.mega-menu .mega-col > a {
        display: block;
        padding: 0 0 10px;
        margin: 0 0 12px;
        font-family: var(--tg-heading-font-family);
        font-weight: 600;
        font-size: 13.5px;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--tg-secondary-color);
        border-bottom: 1px solid #edf0f5;
        pointer-events: none;          /* group titles are labels, not links */
    }

    /* group lists are always visible inside the panel */
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu {
        position: static;
        left: auto; right: auto; top: auto;
        min-width: 0; width: auto;
        opacity: 1; visibility: visible; transform: none;
        border: 0; box-shadow: none; border-radius: 0;
        padding: 0; background: transparent;
    }
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu li a {
        position: relative;
        padding: 7px 0 7px 16px;
        font-size: 14.5px;
        white-space: nowrap;
        transition: all .25s ease-in-out;
    }
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu li a::before {
        content: "\f105";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        color: var(--tg-primary-color);
        opacity: 0;
        transition: all .25s ease-in-out;
    }
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu li a:hover { padding-left: 22px; }
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu li a:hover::before { opacity: 1; }

    /* roomier standard dropdowns (long labels: AMC, Property & FM ...) */
    .navbar-wrap ul li.menu-item-has-children:not(.mega-menu) > .sub-menu { min-width: 280px; }

    /* keep the last dropdowns inside the container edge */
    .navbar-wrap ul li.drop-right > .sub-menu {
        left: auto;
        right: 0;
        transform-origin: 100% 0;
    }
}

/* tighter fit on small desktops so the longer menu never wraps */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-wrap > ul > li { margin-left: 18px; }
    .navbar-wrap > ul > li > a { font-size: 15px; }
    .navbar-wrap ul li.mega-menu > .sub-menu { padding: 24px 24px 18px; gap: 4px 20px; }
    .navbar-wrap ul li.mega-menu .mega-col > .sub-menu li a { white-space: normal; }
}

/* ---------- mobile accordion (cloned menu) ---------- */
@media (max-width: 991.98px) {
    /* Solutions group headings inside the accordion */
    .mobile-menu .mega-sub > li.menu-item-has-children > a {
        color: var(--tg-primary-color) !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: .5px;
    }
}