/*
 * Comprehensive Navbar and Content Overflow Fix
 * Addresses mobile menu, video ad container, and general content overflow issues
 * Author: AI Assistant
 * Date: 2025-09-15
 */

/* 1. Fix body and html overflow issues */
html, body {
    overflow-x: hidden !important;
    position: relative !important;
    max-width: 100vw !important;
}

/* 2. Fix video ad container overflow and spacing */
.video-ad-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Add proper spacing for fixed header */
    margin-top: 80px !important; /* Adjust based on header height */
    min-height: 250px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Fix vdo.ai specific containers */
#v-freejobalert,
#v-freejobalert * {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 3. Enhanced header and navbar fixes */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1000 !important;
    overflow: hidden !important;
}

.header-content {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 4. Mobile menu overflow fixes */
.mobile-menu {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 60px) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 999 !important;
    box-sizing: border-box !important;
}

.mobile-menu.active {
    transform: translateX(0) !important;
}

/* Fix mobile dropdown overflows */
.mobile-dropdown {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.mobile-nav-item {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.mobile-nav-item > a {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 5. Desktop dropdown fixes */
.dropdown {
    position: absolute !important;
    max-width: 300px !important;
    width: max-content !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: auto !important;
}

/* Ensure dropdowns don't overflow right edge */
.nav-item:nth-last-child(-n+2) .dropdown {
    left: auto !important;
    right: 0 !important;
}

/* 6. Content container fixes */
.hero,
.stats,
.features,
.how-it-works,
.testimonials,
.faq,
.cta-section,
.footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure hero section has proper spacing for fixed header */
.hero {
    margin-top: 60px !important; /* Space for fixed header */
    padding-top: 2rem !important; /* Additional padding for better spacing */
}

/* Fix content sections that might be directly after header */
body > section:first-of-type:not(.hero),
body > div:first-of-type:not(.video-ad-container) {
    margin-top: 80px !important;
    padding-top: 1rem !important;
}

/* 7. Grid and flexbox overflow fixes */
.features-grid,
.stats-grid,
.testimonials-grid,
.steps {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.feature-card,
.testimonial,
.step,
.stat {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 8. Text overflow fixes */
.section-title,
.section-subtitle,
.hero h1,
.hero p {
    max-width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 9. Button overflow fixes */
.cta-button,
.hero-cta {
    max-width: calc(100vw - 2rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 10. Responsive improvements */
@media (max-width: 1024px) {
    .nav-links {
        display: none !important;
    }

    .header-content {
        padding: 0 1rem !important;
    }

    .mobile-menu-toggle {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* Enhanced mobile fixes */
    .hero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .features,
    .how-it-works,
    .testimonials,
    .faq {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .header-content {
        padding: 0 0.5rem !important;
    }

    .video-ad-container {
        margin-top: 50px !important;
        min-height: 180px !important;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .logo span {
        font-size: 1.1rem !important;
    }

    .mobile-nav-item > a {
        font-size: 0.9rem !important;
        padding: 0.8rem 1rem !important;
    }
}

/* 11. Prevent horizontal scrolling */
* {
    max-width: 100% !important;
}

*:not(html):not(body):not(.video-ad-container):not(#v-freejobalert) {
    box-sizing: border-box !important;
}

/* 12. Fix for sticky elements that might cause overflow */
.header.scrolled {
    width: 100% !important;
    max-width: 100vw !important;
}

/* 13. Ensure proper z-index stacking */
.header {
    z-index: 1000 !important;
}

.mobile-menu {
    z-index: 999 !important;
}

.dropdown {
    z-index: 998 !important;
}

.video-ad-container {
    z-index: 1 !important;
}

/* 14. Fix any potential iframe or embedded content overflow */
iframe,
embed,
object,
video {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 15. Specific fixes for vdo.ai ad content */
[data-vdo],
[id*="vdo"],
[class*="vdo"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 16. Additional header spacing fixes for different screen sizes */
@media (min-width: 1025px) {
    /* Desktop specific fixes */
    .video-ad-container {
        margin-top: 85px !important; /* Slightly more space on desktop */
        padding-top: 10px !important;
    }

    .hero {
        margin-top: 70px !important; /* Optimal spacing for desktop header */
    }
}

@media (min-width: 1200px) {
    /* Large desktop adjustments */
    .video-ad-container {
        margin-top: 90px !important;
    }
}

/* 17. Ensure header doesn't cover any content */
.header.scrolled + * {
    margin-top: 70px !important;
}

/* 18. Fix for pages without video ad container */
body:not(:has(.video-ad-container)) .hero,
body:not(:has(.video-ad-container)) > section:first-of-type {
    margin-top: 80px !important;
    padding-top: 1rem !important;
}