/* Mobile Responsive Fixes - Prevent Horizontal Scroll */

/* Ensure html and body don't overflow */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* Ensure all main containers are constrained - EXCEPT header */
.container:not(header .container),
.container-fluid:not(header .container-fluid) {
    overflow-x: hidden;
    max-width: 100%;
}

/* Header container should allow overflow for dropdowns */
header .container {
    overflow: visible !important;
    max-width: 100%;
}

/* Header itself should allow overflow */
header {
    overflow: visible !important;
    position: relative;
    z-index: 999;
}

/* Fix for rows that might overflow - but not in header */
.row:not(header .row) {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

header .row {
    max-width: 100%;
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
    /* Fix header background on mobile */
    #header {
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Fix banner content to not have negative margin on mobile */
    .banner-content {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
    
    /* Ensure header takes up space */
    header {
        position: relative !important;
        width: 100%;
        z-index: 9999;
        margin-bottom: 0;
    }
    
    /* Fix banner area */
    .banner-area {
        margin-top: 0 !important;
        padding-top: 20px !important;
        position: relative;
        z-index: 1;
    }
    
    /* Prevent any element from causing horizontal overflow - but exclude nav elements */
    body > *:not(header):not(.modal):not(.dropdown-menu),
    .container:not(header .container),
    .row:not(header .row),
    section,
    .post-area,
    .features-area {
        max-width: 100% !important;
    }
    
    /* Ensure header and navigation have proper overflow */
    header .container {
        overflow: visible !important;
    }
    
    header .row {
        overflow: visible !important;
    }
    
    /* Exclude navigation and dropdown elements from max-width constraints */
    nav,
    #nav-menu,
    #nav-menu-container,
    .nav-menu,
    .nav-menu *,
    .menu-has-children,
    .menu-has-children *,
    .nav-menu > li > ul,
    ul.sub-menu,
    ul.sub-menu *,
    .dropdown,
    .dropdown *,
    .dropdown-menu,
    .dropdown-menu * {
        max-width: none !important;
        overflow: visible !important;
    }
    
    /* Smart dropdown positioning for mobile - LTR */
    html:not([dir="rtl"]) .nav-menu > li > ul,
    html:not([dir="rtl"]) .menu-has-children > ul {
        position: absolute !important;
        z-index: 99999 !important;
        overflow: visible !important;
        left: 0 !important;
        right: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 40px) !important;
    }
    
    /* For items on the right side of the menu (LTR), open to the left */
    html:not([dir="rtl"]) .nav-menu > li:last-child > ul,
    html:not([dir="rtl"]) .nav-menu > li:nth-last-child(2) > ul,
    html:not([dir="rtl"]) .nav-menu > li:nth-last-child(3) > ul {
        left: auto !important;
        right: 0 !important;
    }
    
    /* Smart dropdown positioning for mobile - RTL */
    html[dir="rtl"] .nav-menu > li > ul,
    html[dir="rtl"] .menu-has-children > ul {
        position: absolute !important;
        z-index: 99999 !important;
        overflow: visible !important;
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 40px) !important;
    }
    
    /* For items on the left side of the menu (RTL), open to the right */
    html[dir="rtl"] .nav-menu > li:last-child > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(2) > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(3) > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(4) > ul {
        right: auto !important;
        left: 0 !important;
    }
    
    /* Nested dropdowns on mobile - always open below parent */
    .nav-menu ul ul {
        top: 100% !important;
        margin-top: 0 !important;
    }
    
    /* LTR nested dropdowns */
    html:not([dir="rtl"]) .nav-menu ul ul {
        left: 0 !important;
        right: auto !important;
    }
    
    /* RTL nested dropdowns */
    html[dir="rtl"] .nav-menu ul ul {
        right: 0 !important;
        left: auto !important;
    }
    
    /* Reset for specific elements that need full width */
    html, body, .container:not(header .container), .row:not(header .row) {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .banner-area {
        overflow: hidden;
        width: 100%;
    }
    
    .banner-content {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    
    /* Fix search box */
    .search-page-top,
    .banner-content form {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .banner-content input:not(.nav-menu input),
    .banner-content select,
    .banner-content .select2-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix carousel/slider that might overflow */
    .active-popular-post-carusel,
    .active-relatedjob-carusel {
        overflow: hidden;
        max-width: 100%;
    }
    
    .single-popular-post,
    .single-rated {
        max-width: calc(100vw - 30px) !important;
    }
    
    /* Fix images - but not in nav */
    section img,
    .container:not(header .container) img,
    .post-list img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix sections */
    section:not(header) {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Fix feature areas */
    .features-area,
    .popular-post-area,
    .feature-cat-area,
    .post-area,
    .callto-action-area,
    .download-area {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Fix columns on mobile */
    [class*="col-"]:not(header [class*="col-"]) {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Fix specific width elements - but not nav elements */
    .details {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix buttons and forms - but not in nav */
    section .btn,
    section button,
    section input,
    section select,
    section textarea,
    .container:not(header .container) .btn,
    .container:not(header .container) button,
    .container:not(header .container) input,
    .container:not(header .container) select,
    .container:not(header .container) textarea {
        max-width: 100%;
    }
    
    /* Ensure navigation dropdown menus work properly */
    #nav-menu-container {
        overflow: visible !important;
    }
    
    #nav-menu,
    .nav-menu {
        overflow: visible !important;
    }
    
    .nav-menu ul {
        overflow: visible !important;
        max-width: none !important;
    }
    
    .nav-menu .menu-has-children ul {
        position: absolute !important;
        z-index: 99999 !important;
        max-width: calc(100vw - 40px) !important;
        width: auto !important;
        overflow: visible !important;
    }
    
    /* Fix header */
    header .container {
        padding-left: 15px;
        padding-right: 15px;
        overflow: visible !important;
    }
    
    /* Fix footer */
    footer {
        overflow-x: hidden;
        width: 100%;
    }
    
    footer .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Tablet fixes */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        overflow-x: hidden;
    }
    
    .container:not(header .container) {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Ensure header has proper overflow */
    header,
    header .container,
    header .row {
        overflow: visible !important;
    }
    
    /* Ensure dropdowns work on tablets too */
    #nav-menu-container,
    #nav-menu,
    .nav-menu,
    .nav-menu ul {
        overflow: visible !important;
    }
    
    /* Smart dropdown positioning for tablets - LTR */
    html:not([dir="rtl"]) .nav-menu > li > ul {
        max-width: 300px !important;
    }
    
    html:not([dir="rtl"]) .nav-menu > li:last-child > ul,
    html:not([dir="rtl"]) .nav-menu > li:nth-last-child(2) > ul {
        left: auto !important;
        right: 0 !important;
    }
    
    /* Smart dropdown positioning for tablets - RTL */
    html[dir="rtl"] .nav-menu > li > ul {
        max-width: 300px !important;
    }
    
    html[dir="rtl"] .nav-menu > li:last-child > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(2) > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(3) > ul {
        right: auto !important;
        left: 0 !important;
    }
    
    /* Fix banner content on tablet too */
    .banner-content {
        margin-top: -50px !important;
        padding-top: 50px !important;
    }
}

/* Desktop - ensure header works properly */
@media (min-width: 992px) {
    header,
    header .container,
    header .row {
        overflow: visible !important;
    }
    
    #nav-menu-container,
    #nav-menu,
    .nav-menu,
    .nav-menu ul {
        overflow: visible !important;
    }
    
    /* Desktop dropdown positioning for RTL */
    html[dir="rtl"] .nav-menu > li:last-child > ul,
    html[dir="rtl"] .nav-menu > li:nth-last-child(2) > ul {
        right: auto !important;
        left: 0 !important;
    }
}