/* ============================================
   FINAL EMERGENCY FIXES - CRITICAL OVERRIDES
   ============================================ */

/* 1. Banner spacing - NESTED SELECTORS for layouts.blade.php */
@media (max-width: 991px) {
    .xslide-img .hero-content,
    .hero-slide-modern .hero-content {
        top: 45% !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 !important;
    }

    .xslide-img .hero-content .container,
    .hero-slide-modern .hero-content .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .xslide-img .hero-title,
    .hero-slide-modern .hero-title,
    .xslide-img h1.hero-title,
    .hero-slide-modern h1.hero-title,
    .xslide-img .hero-content h1,
    .hero-slide-modern .hero-content h1,
    .xslide-img .hero-content .container h1,
    .hero-slide-modern .hero-content .container h1 {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 8px !important;
    }

    .xslide-img .hero-description,
    .hero-slide-modern .hero-description,
    .xslide-img p.hero-description,
    .hero-slide-modern p.hero-description,
    .xslide-img .hero-content p,
    .hero-slide-modern .hero-content p,
    .xslide-img .hero-content .container p,
    .hero-slide-modern .hero-content .container p {
        font-size: 0.5rem !important;
        line-height: 1.1 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 8px !important;
    }

    .xslide-img .hero-buttons,
    .hero-slide-modern .hero-buttons {
        gap: 2px !important;
        padding: 0 8px !important;
        margin: 2px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .xslide-img .hero-buttons .btn,
    .hero-slide-modern .hero-buttons .btn,
    .xslide-img .hero-buttons a,
    .hero-slide-modern .hero-buttons a {
        max-width: 110px !important;
        padding: 4px 8px !important;
        font-size: 0.5rem !important;
    }

    .xslide-img .hero-buttons .btn i,
    .hero-slide-modern .hero-buttons .btn i,
    .xslide-img .hero-buttons a i,
    .hero-slide-modern .hero-buttons a i {
        font-size: 0.45rem !important;
    }
}

@media (max-width: 767px) {
    .xslide-img .hero-title,
    .hero-slide-modern .hero-title,
    .xslide-img h1.hero-title,
    .hero-slide-modern h1.hero-title,
    .xslide-img .hero-content h1,
    .hero-slide-modern .hero-content h1,
    .xslide-img .hero-content .container h1,
    .hero-slide-modern .hero-content .container h1 {
        font-size: 0.7rem !important;
        margin: 0 0 1px 0 !important;
        padding: 0 6px !important;
    }

    .xslide-img .hero-description,
    .hero-slide-modern .hero-description,
    .xslide-img p.hero-description,
    .hero-slide-modern p.hero-description,
    .xslide-img .hero-content p,
    .hero-slide-modern .hero-content p,
    .xslide-img .hero-content .container p,
    .hero-slide-modern .hero-content .container p {
        font-size: 0.45rem !important;
        margin: 0 0 1px 0 !important;
        padding: 0 6px !important;
    }

    .xslide-img .hero-buttons,
    .hero-slide-modern .hero-buttons {
        gap: 2px !important;
        padding: 0 6px !important;
    }

    .xslide-img .hero-buttons .btn,
    .hero-slide-modern .hero-buttons .btn,
    .xslide-img .hero-buttons a,
    .hero-slide-modern .hero-buttons a {
        max-width: 100px !important;
        padding: 3px 6px !important;
        font-size: 0.45rem !important;
    }
}

@media (max-width: 480px) {
    .xslide-img .hero-title,
    .hero-slide-modern .hero-title,
    .xslide-img h1.hero-title,
    .hero-slide-modern h1.hero-title,
    .xslide-img .hero-content h1,
    .hero-slide-modern .hero-content h1,
    .xslide-img .hero-content .container h1,
    .hero-slide-modern .hero-content .container h1 {
        font-size: 0.6rem !important;
        margin: 0 0 1px 0 !important;
        padding: 0 5px !important;
    }

    .xslide-img .hero-description,
    .hero-slide-modern .hero-description,
    .xslide-img p.hero-description,
    .hero-slide-modern p.hero-description,
    .xslide-img .hero-content p,
    .hero-slide-modern .hero-content p,
    .xslide-img .hero-content .container p,
    .hero-slide-modern .hero-content .container p {
        font-size: 0.4rem !important;
        margin: 0 0 1px 0 !important;
        padding: 0 5px !important;
    }

    .xslide-img .hero-buttons,
    .hero-slide-modern .hero-buttons {
        gap: 2px !important;
        padding: 0 5px !important;
    }

    .xslide-img .hero-buttons .btn,
    .hero-slide-modern .hero-buttons .btn,
    .xslide-img .hero-buttons a,
    .hero-slide-modern .hero-buttons a {
        max-width: 90px !important;
        padding: 3px 5px !important;
        font-size: 0.4rem !important;
    }

    .xslide-img .hero-buttons .btn i,
    .hero-slide-modern .hero-buttons .btn i,
    .xslide-img .hero-buttons a i,
    .hero-slide-modern .hero-buttons a i {
        font-size: 0.35rem !important;
    }
}

/* 2. EMERGENCY: Force sidebar visibility */
@media (max-width: 991px) {
    /* CRITICAL: Hide mainmenu__nav white bar from app.css */
    .mainmenu__nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* CRITICAL: Override app.css header-spacer */
    .header-spacer {
        margin-top: 0 !important;
        height: 0 !important;
        display: none !important;
        visibility: hidden !important;
    }

    /* EMERGENCY: Force menu ul to be visible and slide in */
    .menu ul,
    nav.menu > ul {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        right: -100% !important;
        transition: right 0.3s ease !important;
    }

    .menu ul.active,
    nav.menu > ul.active,
    .menu.active ul {
        right: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Make sure menu container allows fixed positioning */
    .menu {
        position: static !important;
        display: block !important;
        visibility: visible !important;
    }
}