/* =========================================
   ACME MEGA MENU - Responsive Styles
   ========================================= */

/* =========================================
   TABLET & BELOW (max-width: 991px)
   ========================================= */
@media (max-width: 991px) {

    /* --- Mobile Toggle Button --- */
    .acme-mega-nav .mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        z-index: 1001;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .acme-mega-nav .hamburger-line {
        width: 100%;
        height: 2px;
        background-color: var(--acme-text-dark);
        transition: all var(--acme-transition-speed) ease;
        display: block;
    }

    .acme-mega-nav .mobile-toggle.active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .acme-mega-nav .mobile-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .acme-mega-nav .mobile-toggle.active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* --- Nav Panel (Full screen slide down) --- */
    .acme-mega-nav .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--acme-bg-white);
        height: calc(100vh - 100%);
        max-height: 70vh;
        overflow-y: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--acme-transition-speed) ease;
        box-shadow: var(--acme-shadow-large);
        -webkit-overflow-scrolling: touch;
    }

    .acme-mega-nav .site-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* --- Nav List --- */
    .acme-mega-nav .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .acme-mega-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--acme-bg-gray);
    }

    .acme-mega-nav .nav-link {
        padding: 16px 0;
        font-size: 18px;
    }

    .acme-mega-nav .nav-link::after {
        display: none;
    }

    /* --- Mega Menu Parent Link (Accordion Toggle) --- */
    .acme-mega-nav .has-mega-menu > .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .acme-mega-nav .has-mega-menu > .nav-link::after {
        content: '+';
        font-size: 22px;
        color: var(--acme-primary-red);
        width: auto;
        height: auto;
        position: static;
        background: none;
    }

    .acme-mega-nav .has-mega-menu.open > .nav-link::after {
        content: '-';
    }

    /* --- Mega Menu (Accordion Panel) --- */
    .acme-mega-nav .mega-menu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        border: none;
        border-radius: 0;
    }

    .acme-mega-nav .has-mega-menu:hover > .mega-menu {
        display: none;
    }

    .acme-mega-nav .has-mega-menu.open .mega-menu {
        display: block;
    }

    /* --- Mega Menu Inner --- */
    .acme-mega-nav .mega-menu-inner {
        flex-direction: column;
        padding: 10px 0 20px 12px;
        gap: 20px;
    }

    /* --- Sidebar Tabs (Horizontal Scroll) --- */
    .acme-mega-nav .mega-sidebar {
        width: 100%;
        border-right: none;
        padding-right: 0;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .acme-mega-nav .mega-sidebar::-webkit-scrollbar {
        display: none;
    }

    .acme-mega-nav .mega-tab {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 14px;
    }

    /* --- Content Area --- */
    .acme-mega-nav .mega-content {
        width: 100%;
    }

    .acme-mega-nav .pane-layout {
        flex-direction: column;
    }

    /* --- Service Grid (Single Column) --- */
    .acme-mega-nav .service-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* --- Image Preview (Hidden on Mobile) --- */
    .acme-mega-nav .mega-image-preview {
        display: none;
    }
}

/* =========================================
   MOBILE SMALL (max-width: 480px)
   ========================================= */
@media (max-width: 480px) {
    .acme-mega-nav .mega-menu-inner {
        padding: 8px 0 12px 8px;
    }

    .acme-mega-nav .mega-tab {
        padding: 8px 12px;
        font-size: 13px;
    }

    .acme-mega-nav .service-grid a {
        padding: 10px 12px;
        font-size: 14px;
    }

    .acme-mega-nav .nav-link {
        font-size: 16px;
    }
}

/* =========================================
   DESKTOP HOVER FIX
   Ensure dropdown stays open when mouse moves into it
   ========================================= */
@media (min-width: 992px) {
    .acme-mega-nav .mega-menu {
        pointer-events: none;
    }

    .acme-mega-nav .has-mega-menu:hover > .mega-menu,
    .acme-mega-nav .has-mega-menu > .mega-menu:hover {
        pointer-events: auto;
    }

    /* Keep dropdown open when hovering from nav-link into mega-menu */
    .acme-mega-nav .has-mega-menu > .mega-menu {
        margin-top: -1px;
        padding-top: 1px;
    }
}