/* Mobile Dropdown Navigation Fix - Enhanced Floating Style */

/* Force parent items to be relative for positioning */
.nav-menu .menu-item-has-children {
    position: relative !important;
}

/* FIX: Stacking Context for Header against Hero & Other Sections */
/* Ensure the ENTIRE header tree is positioned and visible */
.site-header,
.header,
.header.downscrolled,
.header.upscrolled,
.nav-wrap,
#mainnav,
.nav,
#mainnav-mobi {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important;
    /* ULTRA HIGH z-index */
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    overflow: visible !important;
    /* CRITICAL for floating submenus */
}

/* Force the navbar background to black for visibility */
.nav-wrap {
    background-color: #000000 !important;
    border-bottom: 3px solid #cc0000 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    min-height: 40px !important;
}

/* Ensure the menu list is visible and flexed */
.nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    /* Center on desktop */
}

/* Default Link visibility */
.nav-menu li a {
    color: #ffffff !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    padding: 0 15px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Specific fix for sticky behavior if needed */
.header.downscrolled,
.header.upscrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

@media (max-width: 991px) {

    /* 
     * Base Menu Visibility: Restore HORIZONTAL Layout on Mobile 
     */
    .nav-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Keep horizontal */
        align-items: center !important;
        justify-content: center !important;
        /* Changed to center to pull them together */
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        overflow: visible !important;

        white-space: nowrap !important;
        float: none !important;
        padding: 0 !important;
        /* Zero padding for container */
        background-color: #cc0000 !important;
    }

    /* List Items Styling - ULTRA COMPACT MODE */
    .nav-menu>li {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        border-bottom: none !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Zero padding for LI */
        flex-shrink: 1;
        position: relative !important;
        /* Ensure absolute children anchor here */
        height: 50px !important;
        /* Unified height */
        overflow: visible !important;
    }

    /* Default Link Styling */
    .nav-menu li>a {
        padding: 0 6px !important;
        /* Slight padding for breathing room */
        display: block;
        font-size: 11px !important;
        /* Balanced compact font */
        line-height: 50px !important;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Oswald', sans-serif;
        color: #ffffff !important;
        font-weight: 700 !important;
        letter-spacing: -0.2px !important;
        /* Soft tight text */
    }

    /* Links WITH Submenu */
    .nav-menu li.menu-item-has-children>a {
        padding-right: 25px !important;
        /* Space for the floating button */
    }

    /* 
     * FLOATING OVERLAY SUBMENU 
     */
    .nav-menu .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 220px !important;
        max-width: 85vw !important;

        white-space: normal !important;
        box-sizing: border-box !important;

        /* PREMIUM CONTRAST: Deep Black + Gold/Red */
        background-color: #000000 !important;
        color: #ffffff !important;
        border: 2px solid #cc0000 !important;
        border-top: 4px solid #cc0000 !important;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 1) !important;
        z-index: 2147483647 !important;
        padding: 5px 0 !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: 0 !important;

        transition: all 0.2s ease-out !important;
        transform: translateY(0px) !important;
        overflow: visible !important;
    }

    /* Submenu Active State */
    .nav-menu .menu-item-has-children.is-open>.sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Right-aligned submenus for items near the edge */
    .nav-menu li:nth-last-child(-n+2) .sub-menu {
        left: auto !important;
        right: 0 !important;
    }

    .nav-menu .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
    }

    .nav-menu .sub-menu a {
        padding: 12px 20px !important;
        white-space: normal !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        display: block !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-transform: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .nav-menu .sub-menu li:last-child a {
        border-bottom: none !important;
    }

    .nav-menu .sub-menu a:hover {
        background-color: #cc0000 !important;
        color: #ffffff !important;
    }

    /* Toggle Button Styles - Floating Style */
    .mobile-submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 50px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #ffffff;
        font-size: 12px;
        cursor: pointer;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        padding: 0;
    }

    /* Toggle Icon State */
    .mobile-submenu-toggle:after {
        content: '\25BC';
        /* Down Arrow */
    }

    .menu-item-has-children.is-open>.mobile-submenu-toggle:after {
        content: '\25B2';
        /* Up Arrow */
    }

    /* Override navigation-red.css */
    #mainnav,
    #mainnav-mobi {
        display: block !important;
        position: relative !important;
        /* FIX: Was static, now relative for z-index */
        background-color: #cc0000 !important;
        border-bottom: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .nav-menu li a,
    .nav-menu li.current-menu-item>a,
    .nav-menu li.current_page_item>a,
    .nav-menu li a:hover {
        color: #ffffff !important;
    }

    /* Hide Hamburger */
    .btn-menu {
        display: none !important;
    }
}

/* Desktop Protection */
@media (min-width: 992px) {
    .mobile-submenu-toggle {
        display: none !important;
    }
}

/* 
 * DEFENSIVE FIX: Mobile 'Blank Page' Resolver 
 * Targets potential stuck preloaders or hidden content wrappers
 */
@media (max-width: 991px) {

    /* Kill any potential stuck preloader */
    .loader,
    .preloader,
    #preloader,
    .flat-preloader,
    .preloader-wrap,
    #preloader-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }

    /* Force the main berita wrapper and core Bootstrap containers to be visible */
    .single-berita-wrapper,
    .main-content-wrapper,
    .content-wrapper,
    article,
    .entry-content,
    .container,
    .row,
    #main-content,
    #content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Specifically target single-berita-wrapper with backgrounds */
    .single-berita-wrapper {
        min-height: 50vh !important;
        background-color: #f1f5f9 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Fix potential white-on-white text */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    div,
    span {
        text-shadow: none !important;
    }

    /* Ensure body/html are not hidden */
    body,
    html {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
}