/* ===== VIEWPORT-AWARE CSS SUBMENU FIX ===== */

/* 1. FORCE ALL PARENTS TO BE VISIBLE */
/* If any container is hiding overflow, the menu gets clipped regardless of its position */
body [data-elementor-type="header"],
body [data-elementor-type="header"] .elementor-section,
body [data-elementor-type="header"] .elementor-container,
body [data-elementor-type="header"] .e-con,
body [data-elementor-type="header"] .e-con-inner,
body [data-elementor-type="header"] .elementor-widget-wrap,
body [data-elementor-type="header"] .elementor-widget-nav-menu,
body [data-elementor-type="header"] .elementor-nav-menu--main,
body [data-elementor-type="header"] .elementor-nav-menu__container {
    overflow: visible !important;
}

/* 2. SUBMENU POSITIONING */
/* Use viewport units (vw) to ensure the menu never exceeds the screen width */
.elementor-nav-menu--main .menu-item-has-children > ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    
    /* 
       Magic trick: Align to the right edge of the screen using CSS.
       If the menu is 250px wide, and the screen is 100vw, 
       we force the menu to never go past the right edge of the viewport.
    */
    left: auto !important;
    right: 0 !important;
    
    /* Sizing constraints */
    min-width: 250px !important;
    width: max-content !important;
    max-width: 95vw !important; /* Safety margin */
    box-sizing: border-box !important;
}

/* Specific fix for "Nos services" item if it's near the right edge */
.elementor-nav-menu--main .menu-item-has-children:nth-last-child(-n+3) > ul.sub-menu {
    right: 0 !important;
    left: auto !important;
}

/* 3. SUBMENU ITEMS */
.elementor-nav-menu--main .sub-menu a {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ===== END VIEWPORT-AWARE CSS SUBMENU FIX ===== */