/* =================================================================
   HEADER/MENU ISOLATION STYLES (FINAL DEFINITIVE FIX)
   ================================================================= */

/* 1. Base Structure (Desktop/Global) */
.site-header { 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    background-color: var(--light-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
}
.navbar .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.8rem 1rem; 
}
.navbar .logo img { height: 80px; }

/* 2. Desktop Navigation */
.nav-menu { 
    display: flex; 
    list-style: none; 
    position: static; 
    padding: 0; 
    margin: 0;
}
.nav-menu li a { 
    padding: 0 1.2rem; 
    text-decoration: none; 
    color: var(--dark-color); 
    font-weight: bold; 
    position: relative; 
}

/* 3. Mobile Toggle Button (Hidden on Desktop) */
.mobile-nav-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 1.8rem; 
    color: var(--dark-color); 
    cursor: pointer; 
    z-index: 1002;
}

/* =================================================================
   MEGAMENU COLUMN & HOVER STYLES (Desktop Specific)
   ================================================================= */

.nav-menu .nav-item-dropdown {
    position: relative;
}
/* Sub-menu (Mega Menu) container styling */
.nav-menu .mega-menu {
    display: none; /* Hidden by default */
    position: absolute;
    width: 600px; 
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--light-color);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); 
    border-radius: 0 0 8px 8px; 
    padding: 1.5rem;
    z-index: 999; 
    border-top: 3px solid var(--primary-color);
}

/* CRITICAL FIX: Restore Desktop Hover */
.nav-menu .nav-item-dropdown:hover .mega-menu {
    display: block; 
}

/* Menu Content - Two Columns, with SCROLLBAR */
.mega-menu-content {
    max-height: 400px; 
    overflow-y: auto; 
    column-count: 2; 
    column-gap: 30px; 
    display: block; 
    padding: 0 10px 0 0;
    list-style: none;
}

.mega-menu-column {
    display: inline-block; 
    width: 100%; 
    margin-bottom: 1.5rem;
    padding: 0;
    break-inside: avoid;
}

.mega-menu-column h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.mega-menu-column ul {
    list-style: none;
    padding: 0;
}
/* Style for individual links in the mega menu */
.mega-menu-column ul li a {
    display: block; 
    padding: 8px 10px; 
    margin: 2px 0; 
    text-decoration: none;
    color: var(--text-color);
    font-weight: normal;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
/* CRITICAL FIX: Grey color bar on hover */
.mega-menu-column ul li a:hover {
    background-color: #f0f0f0; 
    color: var(--dark-color);
    padding-left: 15px; 
}

/* --- HIDE SIMPLIFIED MOBILE MENU ON DESKTOP --- */
.nav-menu .mobile-sub-menu {
    display: none !important;
}

/* =================================================================
   CUSTOM SCROLLBAR STYLING
   ================================================================= */
.mega-menu-content::-webkit-scrollbar-track { background-color: #f1f1f1; border-radius: 10px; }
.mega-menu-content::-webkit-scrollbar-thumb { background-color: var(--primary-blue); border-radius: 10px; border: 3px solid #f1f1f1; }
.mega-menu-content::-webkit-scrollbar { width: 10px; height: 10px; }
.mega-menu-content::-webkit-scrollbar-thumb:hover { background-color: var(--dark-color); }
.mega-menu-content { padding-right: 15px; }


/* =================================================================
   MOBILE RESPONSIVENESS OVERRIDE (BELOW 992px)
   ================================================================= */

@media (max-width: 991px) {
    /* FIX 1: Header Position - Force STATIC */
    .site-header { 
        position: static !important; 
        top: auto !important; 
    }

    /* FIX 2: HIDE ALL DESKTOP NAV ELEMENTS AND SHOW TOGGLE */
    .nav-menu { 
        display: none !important; /* Hides desktop nav by default */
    }
    .nav-right {
        display: none !important;
    }
    .mobile-nav-toggle { 
        display: block !important; /* Shows the burger icon */
    }
    
    /* CRITICAL FIX 3: Pure CSS Toggle Styling */
    /* Selects the nav-menu (sibling) after the checked input */
    #menu-toggle-input:checked ~ #navbar-menu {
        display: flex !important; 
        flex-direction: column !important;
        width: 100%;
        
        position: absolute !important;
        top: 80px !important; 
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important; 
        
        background-color: var(--light-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
    }
    
    /* Toggling the Icon (Pure CSS) */
    #menu-toggle-input:checked ~ .mobile-nav-toggle i.fa-bars {
        display: none !important;
    }
    .mobile-nav-toggle i.fa-times {
        display: none; 
    }
    #menu-toggle-input:checked ~ .mobile-nav-toggle i.fa-times {
        display: block !important;
    }
    
    /* Styling for the list items */
    .nav-menu.mobile-nav-active li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }
    
    /* CRITICAL FIX 4: Make Simple Mobile Sub-Menu Links Visible */
    .nav-menu .mobile-sub-menu {
        display: block !important; /* Show the nested links */
        width: 100%;
        text-align: center;
        padding: 0 0 10px 0 !important;
        margin-top: 0;
        background-color: var(--background-light); 
        border-top: 1px dashed var(--border-color);
    }
    
    .nav-menu .mobile-sub-menu li a {
        padding: 0.5rem 0; 
        font-weight: 400; 
        color: var(--text-color);
    }
    
    /* Hide the complex mega menu completely */
    .nav-menu .mega-menu {
        display: none !important;
    }
}