/* ========================================
   DIGITALABS - Mega Menu HOTFIX
   Version: 3.1 - MOBILE FIXES
   
   FIXES APPLIED:
   ✓ Mega-menu positioning (no shift right)
   ✓ Dropdown arrows smaller on mobile
   ✓ Sticky header forced
   ✓ Touch event improvements
   
   Date: 2026-02-04
   ======================================== */

/* ========================================
   FIX 1: STICKY HEADER FORCED
   ======================================== */

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/* Mobile sticky with shadow */
@media (max-width: 1024px) {
    .site-header {
        position: sticky !important;
        top: 0 !important;
        background: var(--color-white) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        height: var(--header-height-mobile);
    }
}

/* ========================================
   FIX 2: MEGA MENU - NO SHIFT ON MOBILE
   Prevent horizontal movement when opening
   ======================================== */

@media (max-width: 1024px) {
    
    .mega-menu {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mega-menu-container {
        margin: 0 !important;
        padding: var(--space-4) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent overflow causing shift */
    .has-mega-menu {
        overflow: hidden;
    }
    
    .has-mega-menu.active {
        overflow: visible;
    }
}

/* ========================================
   FIX 3: DROPDOWN ARROWS - SMALLER ON MOBILE
   ======================================== */

@media (max-width: 1024px) {
    
    .dropdown-icon {
        font-size: 12px !important;  /* Reduced from 14px */
        width: 16px !important;
        height: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Alternative if using Unicode arrows */
    .nav-link .dropdown-icon {
        transform: scale(0.8);  /* Scale down 20% */
    }
    
    /* When mega-menu is active, rotate arrow */
    .has-mega-menu.active .dropdown-icon {
        transform: rotate(180deg) scale(0.8);
    }
}

/* ========================================
   FIX 4: PREVENT LAYOUT SHIFT
   ======================================== */

@media (max-width: 1024px) {
    
    /* Main nav container - prevent shift */
    .main-nav {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Nav menu items */
    .nav-menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Nav items full width */
    .nav-item {
        width: 100% !important;
        margin: 0 0 var(--space-2) 0 !important;
    }
    
    .nav-link {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ========================================
   TOUCH IMPROVEMENTS - Better tap handling
   ======================================== */

@media (max-width: 1024px) {
    
    /* Prevent double-tap zoom */
    .nav-link,
    .mega-menu-list a,
    .lang-menu a,
    .mobile-menu-toggle {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Larger touch target for mega-menu trigger */
    .has-mega-menu > .nav-link {
        min-height: 56px !important;
        padding: var(--space-4) var(--space-5) !important;
    }
    
    /* Clear tap feedback */
    .nav-link:active,
    .mega-menu-list a:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
}

/* ========================================
   MEGA MENU EXPANSION - Smooth & No Shift
   ======================================== */

@media (max-width: 1024px) {
    
    .mega-menu {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease-in-out !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .has-mega-menu.active .mega-menu {
        max-height: 2000px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent content jump during expansion */
    .mega-menu-container {
        transform: translateZ(0); /* Force GPU acceleration */
        backface-visibility: hidden;
    }
}

/* ========================================
   PREVENT HORIZONTAL SCROLL
   ======================================== */

@media (max-width: 1024px) {
    
    body.menu-open {
        overflow-x: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    .main-nav.active {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* ========================================
   ARROW ICON - ULTRA SMALL VERSION
   ======================================== */

@media (max-width: 1024px) {
    
    /* Make arrow even smaller and less prominent */
    .dropdown-icon {
        font-size: 10px !important;
        opacity: 0.6 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .has-mega-menu.active .dropdown-icon {
        opacity: 1 !important;
        color: var(--color-primary) !important;
    }
}

/* ========================================
   DEBUG HELPERS (Remove after testing)
   ======================================== */

/* Uncomment to see boundaries during testing
@media (max-width: 1024px) {
    .mega-menu {
        border: 2px solid red !important;
    }
    
    .mega-menu-container {
        border: 2px solid blue !important;
    }
    
    .nav-menu {
        border: 2px solid green !important;
    }
}
*/