/* =========================================================
   RG ASSOCIATES - SERVICES MEGA MENU
   Common navigation styles used on all website pages.
   ========================================================= */

@media (min-width: 993px) {
    #mainmenu > li.services-mega-parent {
        position: static;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu {
        position: absolute !important;
        top: 100%;
        left: 50% !important;
        transform: translateX(-50%);
        width: min(1120px, calc(100vw - 40px)) !important;
        height: auto !important;
        min-height: 250px;
        margin: 0 !important;
        padding: 26px 24px !important;
        display: none !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        background: #ffffff !important;
        border: 1px solid #e9e9e9;
        border-top: 3px solid #c7a53b;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 15px 35px rgba(20, 20, 20, 0.14) !important;
        visibility: hidden;
        opacity: 0;
        z-index: 9999;
        overflow: visible;
    }

    #mainmenu > li.services-mega-parent:hover ul.services-mega-menu {
        visibility: visible;
        opacity: 1;
		display: grid !important;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column {
        width: auto !important;
        min-width: 0;
        float: none !important;
        display: block !important;
        padding: 0 18px !important;
        border-right: 1px solid #eeeeee;
        text-transform: none;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column:last-child {
        border-right: none;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > a.services-mega-heading {
        display: block !important;
        width: auto !important;
        padding: 0 0 12px !important;
        margin: 0 0 8px;
        color: #1e2a3a !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 2px solid #c7a53b !important;
        text-align: left;
        font-size: 15px !important;
        line-height: 1.35;
        font-weight: 700 !important;
        text-decoration: none;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul > li {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul > li > a {
        display: block !important;
        width: 100% !important;
        padding: 7px 0 !important;
        color: #2c3e4e !important;
        background: transparent !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.35;
        font-weight: 500;
        text-decoration: none;
        transition: color .2s ease, padding-left .2s ease;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul > li > a:hover {
        color: #c7a53b !important;
        background: transparent !important;
        padding-left: 5px !important;
    }

    #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > a.services-mega-heading:hover {
        color: #c7a53b !important;
        background: transparent !important;
    }
}

/* Tablet / mobile: keep the full hierarchy accessible in the existing
   responsive menu instead of forcing a desktop mega-menu layout. */
@media (max-width: 992px) {
    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu {
        position: inherit !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        min-height: 0;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column {
        display: block !important;
        width: 100% !important;
        padding: 0 0 0 40px !important;
        border: 0 !important;
    }

    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > a.services-mega-heading {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        color: #1e2a3a !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(238,238,238,.35) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul {
        display: block !important;
        position: inherit !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul > li {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
    }

    header.header-mobile #mainmenu > li.services-mega-parent > ul.services-mega-menu > li.services-mega-column > ul > li > a {
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
        color: #1e2a3a !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(238,238,238,.18) !important;
        font-size: 14px !important;
        text-align: left !important;
    }
}