/* Layout Fixes for Hero Section and Banner Gap Issues */

/* Fix 1: Prevent hero section from being cut off by navigation */
.luxury-hero {
    /* Add proper top margin to account for header and navigation */
    margin-top: 0 !important;
    padding-top: 80px !important;
    /* Ensure full viewport height */
    min-height: 100vh !important;
    height: auto !important;
    /* Ensure proper positioning */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix 2: Remove gap between hero and banner sections */
.luxury-offer-banner {
    /* Remove negative margin that was causing overlap */
    margin-top: 0 !important;
    /* Ensure it connects seamlessly with hero */
    position: relative !important;
    z-index: 2 !important;
}

/* Fix 3: Ensure header doesn't interfere with hero content */
.premium-header {
    position: relative !important;
    z-index: 1000 !important;
}

.premium-nav {
    position: relative !important;
    z-index: 999 !important;
    margin-bottom: 0 !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure navigation menu is visible on desktop */
@media (min-width: 769px) {
    .premium-nav {
        display: block !important;
        visibility: visible !important;
    }
    
    .nav-menu {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Fix 4: Adjust hero content positioning */
.hero-content-split {
    padding: 40px 0 60px 0 !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Fix 5: Ensure proper spacing for mobile */
@media (max-width: 768px) {
    .luxury-hero {
        min-height: 100vh !important;
        height: auto !important;
        padding-top: 70px !important;
    }
    
    .hero-content-split {
        padding: 20px 0 40px 0 !important;
    }
}

/* Fix 6: Remove any default margins that might cause gaps */
.section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Fix 7: Ensure smooth transition between sections */
.luxury-hero + .luxury-offer-banner {
    border-top: none !important;
    box-shadow: none !important;
}

/* Fix 8: Hide duplicate mobile menu button */
.mobile-toggle {
    display: none !important;
}

/* Fix 9: Ensure only the new mobile menu is visible */
@media (max-width: 768px) {
    .header-right {
        display: none !important;
    }
    
    .mobile-toggle {
        display: none !important;
    }
}

/* Fix 10: Ensure header-right is visible on desktop */
@media (min-width: 769px) {
    .header-right {
        display: block !important;
    }
}

/* Fix 8: Mobile Menu Repositioning - Move from top bar to header */
@media (max-width: 768px) {
    /* Hide mobile menu button from top bar social section */
    .premium-top-bar .mobile-menu-btn,
    .top-bar-social .mobile-menu-btn,
    .premium-top-bar #new-mobile-btn,
    .top-bar-social #new-mobile-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide any mobile menu buttons that appear in the top bar area */
    .premium-top-bar [id*="mobile"],
    .top-bar-social [id*="mobile"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide any fixed positioned mobile buttons in top area */
    [id*="mobile"][style*="position: fixed"][style*="top: 20px"],
    [id*="mobile"][style*="position: fixed"][style*="top:20px"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Specifically target the old mobile menu button by position */
    div[style*="position: fixed"][style*="top: 20px"][style*="right: 20px"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Nuclear option - hide ALL fixed positioned elements in top area */
    body > div[style*="position: fixed"][style*="top: 20px"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide any hamburger menu in top bar area */
    .premium-top-bar .hamburger-line,
    .top-bar-social .hamburger-line {
        display: none !important;
    }
    
    /* Show mobile menu button in header section instead */
    .header .mobile-toggle {
        display: flex !important;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        cursor: pointer;
        width: 30px;
        height: 30px;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background: none;
        border: none;
        padding: 5px;
    }
    
    .header .mobile-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    /* Hide header CTA on mobile to make room for menu button */
    /* Note: .header-right visibility is now controlled by the media queries above */
    
    /* Ensure header has proper positioning for mobile menu */
    .header-inner {
        position: relative !important;
    }
}

/* Fix 10: Ultimate mobile menu removal - target the exact position */
@media (max-width: 768px) {
    /* Hide any hamburger menu in top bar area */
    .premium-top-bar .hamburger-line,
    .top-bar-social .hamburger-line {
        display: none !important;
    }
    
    /* Ultimate nuclear option - hide the exact mobile menu button in top right */
    .premium-top-bar *:last-child,
    .top-bar-social *:last-child {
        display: none !important;
    }
    
    /* Target the specific mobile menu that appears after social icons */
    .top-bar-social + *,
    .premium-top-bar > div:last-child > *:last-child {
        display: none !important;
    }
    
    /* Hide any element that looks like a mobile menu in the top area */
    [style*="z-index: 999999999"],
    [style*="z-index:999999999"] {
        display: none !important;
    }
    
    /* Target elements positioned in the top-right corner */
    [style*="position: fixed"][style*="right: 20px"][style*="top: 20px"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide any div with hamburger styling in top area */
    div[style*="position: fixed"][style*="top: 20px"] div[style*="width: 20px"][style*="height: 2px"] {
        display: none !important;
    }
}