/* =========================================
   MAIN MENU SPACING FIX (Maximum Reduction)
   ========================================= */
/* Remove almost all horizontal space between main menu items */
.wp-block-navigation, .elementor-nav-menu {
    gap: 0px !important;
}

.wp-block-navigation .wp-block-navigation-item, .elementor-nav-menu--main .elementor-item {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Ensure the main link tags don't have excessive padding */
.wp-block-navigation-item__content,
.wp-block-navigation-item a,
.elementor-nav-menu--main .elementor-item {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* =========================================
   SUBMENU SPACING & WIDTH FIX
   ========================================= */
/* Override WordPress core padding and width for submenus */
.wp-block-navigation__submenu-container, .elementor-nav-menu--dropdown {
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
    white-space: normal !important; /* Allow long titles to wrap */
}

.wp-block-navigation__submenu-container .wp-block-navigation-item, .elementor-nav-menu--dropdown .elementor-sub-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Target the actual link/content inside the submenu */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container a,
.elementor-nav-menu--dropdown a.elementor-sub-item {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
    font-size: 13px !important; /* Reduce font size for better fit */
    white-space: normal !important; /* Force wrapping on long items */
    word-wrap: break-word !important;
}

/* Remove default ul margin/padding if any */
ul.wp-block-navigation__submenu-container, ul.elementor-nav-menu--dropdown {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================
   MOBILE MENU STYLES ( <= 768px )
   ========================================= */
@media (max-width: 768px) {
    /* Make text dark so it's visible on the light mobile background */
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
    .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
    .wp-block-navigation__submenu-container a,
    .elementor-nav-menu--dropdown a.elementor-sub-item {
        color: #333333 !important;
    }
    
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .wp-block-navigation__submenu-container .wp-block-navigation-item__label:hover,
    .wp-block-navigation__submenu-container a:hover,
    .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        color: #000000 !important;
    }

    .wp-block-navigation__submenu-container, .elementor-nav-menu--dropdown {
        min-width: 200px !important;
        max-width: 220px !important;
    }
}

/* =========================================
   DESKTOP MENU STYLES ( > 768px )
   ========================================= */
@media (min-width: 769px) {
    /* Ensure dark background for dropdown and white text */
    .wp-block-navigation__submenu-container, .elementor-nav-menu--dropdown {
        background-color: #333333 !important;
    }

    /* 3-Column Grid ONLY for Product & Services Submenu */
    li.product-services-menu > .wp-block-navigation__submenu-container,
    li.product-services-menu > ul.elementor-nav-menu--dropdown {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        min-width: 700px !important;
        max-width: 900px !important;
        padding: 10px !important;
        gap: 5px !important;
    }

    /* Single column for other submenus (like About Us) */
    li:not(.product-services-menu) > .wp-block-navigation__submenu-container,
    li:not(.product-services-menu) > ul.elementor-nav-menu--dropdown {
        display: block !important;
        min-width: 200px !important;
        max-width: 250px !important;
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
    .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
    .wp-block-navigation__submenu-container a,
    .elementor-nav-menu--dropdown a.elementor-sub-item {
        color: #ffffff !important;
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .wp-block-navigation__submenu-container .wp-block-navigation-item__label:hover,
    .wp-block-navigation__submenu-container a:hover,
    .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        color: #cccccc !important;
        background-color: rgba(255,255,255,0.1) !important;
    }
}