/* MOBILE SEO FIXES & MODERN DESIGN ENHANCEMENTS */

/* Prevent horizontal overflow causing mobile layout shift */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Ensure all media fits within the viewport */
img, video, iframe, object, embed {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent text from overflowing safely */
p, h1, h2, h3, h4, h5, h6, a, span, li {
    overflow-wrap: break-word; /* Safer than word-break on images */
}

/* Base tap target sizes for mobile */
@media (max-width: 768px) {
    /* Touch targets should be at least 44x44px for accessibility and SEO */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Padding fallback if buttons are text only */
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    /* Ensure proper font sizing for standard text blocks without breaking menus */
    p {
        font-size: 16px;
    }
    
    /* Give touch targets space */
    .menu-item, .nav-item {
        margin-bottom: 8px;
    }
    
    /* ======== FULL WIDTH LAYOUT ======== */
    /* Remove the boxed layout margins on mobile to utilize all empty screen space */
    body, html {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .nicdark_site, .nd_options_container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Make header modern with a subtle drop shadow, without overlapping content */
    .nd_options_display_block_responsive {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important; /* Changed from sticky to not overlap the slider */
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        z-index: 99999 !important;
        border-bottom: 1px solid #eaeaea !important;
    }
    
    /* Hide pointless spacer divs, but show logo 'a' and hamburger 'div' */
    .nd_options_display_block_responsive > div:not(.nd_options_section:has(img)) {
        display: none !important;
    }

    /* Force the hamburger icon container to hug the extreme right */
    .nd_options_display_block_responsive > .nd_options_section:has(img) {
        margin-left: auto !important;
        text-align: right !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    /* Reset float and Enlarge Logo explicitly */
    .nd_options_display_block_responsive img.nd_options_float_left {
        float: none !important;
        margin: 0 !important;
        width: auto !important;
        height: 48px !important; /* Larger prominent logo */
        max-width: 250px !important;
        object-fit: contain !important;
    }
    
    /* Fine-tune Hamburger Icon size */
    .nd_options_display_block_responsive .nd_options_open_navigation_2_sidebar_content img {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Eliminate extra sections heights if they still appear */
    .nd_options_section.nd_options_height_20,
    .nd_options_section.nd_options_height_10 {
        display: none !important;
    }
    
    /* ======== ENLARGE REV SLIDER & IMAGES ======== */
    /* Let slider photos expand freely */
    rs-module, rs-module-wrap, .rev_slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ======== OFF-CANVAS MOBILE MENU TYPOGRAPHY & ALIGNMENT ======== */
    .nd_options_navigation_2_sidebar_content ul.menu {
        padding: 80px 20px 30px 20px !important; /* Huge top padding to guarantee Accueil is visible under the close button and smartphone notches */
        margin: 0 !important;
        list-style: none !important;
    }

    /* Fix the Menu Close Button so it doesn't get blocked */
    img.nd_options_close_navigation_2_sidebar_content {
        z-index: 999999 !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 44px !important; /* Accessible touch target */
        min-height: 44px !important;
        padding: 6px !important;
        cursor: pointer !important;
        display: block !important;
        pointer-events: auto !important; /* Ensure it captures clicks */
    }
    
    .nd_options_navigation_2_sidebar_content ul.menu li {
        margin: 0 0 15px 0 !important;
        text-align: left !important;
    }
    
    /* Override the generic centered flexbox for these specific menu links */
    .nd_options_navigation_2_sidebar_content a {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-transform: capitalize !important; /* Force first letter to uppercase */
        display: flex !important;
        justify-content: flex-start !important; /* Left align explicitly */
        align-items: center !important;
        padding: 8px 0 !important;
        line-height: 1.3 !important;
    }
    
    .nd_options_navigation_2_sidebar_content ul.sub-menu {
        padding-left: 20px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        border-left: 2px solid rgba(255, 255, 255, 0.4) !important;
    }
    
    /* Sub-menu items sizing */
    .nd_options_navigation_2_sidebar_content ul.sub-menu a {
        font-size: 18px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 5px 0 !important;
    }

    /* Remove standard underline that shows up */
    .nd_options_navigation_2_sidebar_content a:hover, 
    .nd_options_navigation_2_sidebar_content a:active {
        text-decoration: none !important;
        opacity: 0.8;
    }
}