/* css/NV_U34_NV_client_style.css or equivalent main menu style.css */

/* Basic Reset (if not already in a global stylesheet) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables for Dynamic Styling (Defaults, JS will override for specific mega menus) */
:root {
    /* Nav Bar Specific - JS will set these on .navbar or :root */
    --navbar-actual-height: 60px; 
    --navbar-bg-color: #000000;
    --navbar-font-family: Arial, sans-serif;
    --navbar-font-size: 16px;
    --navbar-font-color: #FFFFFF;
    --navbar-link-hover-font-color: #DDDDDD;
    --navbar-link-hover-bg-color: #555555;
    --logo-placeholder-bg: #f8f9fa; 
    --logo-placeholder-text-color: #333; 
    
    /* Mega Menu Specific - JS will set these on .mega-menu */
    --current-mega-menu-bg-color: #3A3A3A; 
    --current-mega-menu-bg-image: none; 
    --current-mega-menu-font-family: Arial, sans-serif; 
    --current-mega-menu-font-size: 16px; 
    --current-mega-menu-font-color: #E0E0E0; 
    --current-mega-menu-link-color: #82C0FF; 
    --current-mega-menu-link-hover-color: #A8D8FF; 
    --current-mega-menu-heading-color: #E0E0E0; 
    --current-mega-menu-text-color: #BDBDBD; 
    /* Separator thickness variable is still used by JS for the separator div width */
    --current-mega-menu-separator-thickness: 4px; 


    /* Variables for the Mega Menu Header Bar */
    --default-mega-header-height: auto; 
    --default-mega-header-bg-color: #4A90E2; 
    --default-mega-header-bg-image: none;
    --default-mega-header-font-family: inherit; 
    --default-mega-header-font-size: 1.5rem;
    --default-mega-header-font-color: #FFFFFF;
}

body {
    font-family: var(--navbar-font-family, Arial, sans-serif); 
    line-height: 1.6;
    background-color: #f4f4f4; 
    color: #333;
}

/* Navigation Bar Styling */
.navbar {
    background-color: var(--navbar-bg-color); 
    min-height: var(--navbar-actual-height); 
    height: var(--navbar-actual-height); 
    padding: 0 1rem; 
    display: flex;
    align-items: center; 
    position: relative; 
    z-index: 1000;
    font-family: var(--navbar-font-family); 
}

.logo-placeholder {
    color: var(--logo-placeholder-text-color); 
    background-color: var(--logo-placeholder-bg); 
    padding: 5px 15px; 
    border-radius: 4px; 
    font-weight: bold;
    font-size: 1.2em; 
    margin-right: 20px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    height: calc(var(--navbar-actual-height) - 20px); 
    flex-shrink: 0; 
}

.nav-links { 
    list-style: none;
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    padding-left: 0;
    height: 100%; 
    justify-content: flex-start; 
}

.nav-links li { margin: 0; display: flex; }

.nav-button-wrapper {
    display: flex; align-items: center; 
    height: var(--navbar-actual-height); 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    position: relative; 
}
.nav-links li:not(:first-child) .nav-button-wrapper { 
    border-left: 1px solid #444; 
}

.nav-button-wrapper:hover { 
    background-color: var(--navbar-link-hover-bg-color); 
}
.nav-button-wrapper.active-wrapper { 
    background-color: var(--navbar-link-hover-bg-color); 
}

.nav-button-wrapper a {
    color: var(--navbar-font-color); 
    font-size: var(--navbar-font-size); 
    text-decoration: none; 
    padding: 0 1rem; 
    display: flex; 
    align-items: center; 
    height: 100%; 
    border-radius: 0; 
}
.nav-button-wrapper:hover a { 
    color: var(--navbar-link-hover-font-color);
}

.nav-button-wrapper a i { 
    margin-right: 8px; 
}

.hamburger-menu {
    display: none; 
    background: none; 
    border: none; 
    color: var(--navbar-font-color); 
    font-size: 1.8rem; 
    cursor: pointer; 
    padding: 0.5rem; 
    margin-left: auto; 
    line-height: 1; 
    z-index: 1005; 
}

/* Mega Menu Styling */
.mega-menu {
    background-color: var(--current-mega-menu-bg-color); 
    background-image: var(--current-mega-menu-bg-image); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    border: 1px solid #2a2a2a; 
    border-top: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
    padding: 0;
    position: absolute; 
    top: var(--navbar-actual-height); 
    left: 0; 
    width: 100%;
    display: none; 
    z-index: 999; 
    max-height: calc(100vh - var(--navbar-actual-height) - 2px); 
    overflow-y: auto;
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px;
    font-family: var(--current-mega-menu-font-family);
    font-size: var(--current-mega-menu-font-size);
    color: var(--current-mega-menu-font-color); 
}
.mega-menu.active { 
    display: block; 
}

.mega-menu-bg-video {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    object-fit: cover; 
    z-index: -1; 
    opacity: 0.5; 
}

.mega-menu-header {
    padding: 1rem; 
    background-color: var(--current-mega-header-bg-color, var(--default-mega-header-bg-color)); 
    background-image: var(--current-mega-header-bg-image, var(--default-mega-header-bg-image));
    background-size: cover; 
    background-position: center; 
    text-align: center;
    border-bottom: 1px solid #555; 
    min-height: var(--current-mega-header-height, var(--default-mega-header-height)); 
    height: var(--current-mega-header-height, var(--default-mega-header-height)); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-sizing: border-box; 
}
.mega-menu-header h3 { 
    color: var(--current-mega-header-font-color, var(--default-mega-header-font-color)); 
    margin: 0; 
    font-family: var(--current-mega-header-font-family, var(--default-mega-header-font-family));
    font-size: var(--current-mega-header-font-size, var(--default-mega-header-font-size)); 
}

.mega-menu-content { 
    display: grid; 
    /* grid-template-columns is set by JS for desktop */
    gap: 20px; /* **FIXED: Changed to a fixed gap for consistent spacing** */
    padding: 1.5rem; 
    max-width: 90%; 
    margin: 0 auto; 
}
.mega-menu-content.five-columns { 
    /* grid-template-columns: repeat(5, 1fr); /* JS will set this */
}

.mega-menu-column {
    padding: 15px; 
    background-size: cover; 
    background-position: center;
}

.mega-menu-separator { 
    align-self: stretch; 
    /* Width and background-color set by JS inline */
}


/* Video Column Styling in Mega Menu */
.mega-menu-video-title {
    font-size: 1.1em; font-weight: bold; color: var(--current-mega-menu-heading-color);
    margin-bottom: 0.75rem; text-align: center;
}
.video-container-wrapper { margin-bottom: 1rem; }
.video-aspect-ratio-container { 
    position: relative; width: 100%; 
    background-color: #000; border-radius: 5px; overflow: hidden; 
}
.video-aspect-ratio-container.ar-17-22 { padding-bottom: calc(22 / 17 * 100%); }
.video-aspect-ratio-container.ar-16-9 { padding-bottom: calc(9 / 16 * 100%); }
.video-aspect-ratio-container video { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; 
}
.video-snippet { font-size: 0.9em; color: var(--current-mega-menu-text-color); margin-top: 0.5rem;}

/* Link List Column Styling in Mega Menu */
.mega-menu-column ul { list-style: none; padding-left: 0; }
.mega-menu-column li { margin-bottom: 1rem; }
.mega-menu-column h4 { 
    font-size: 1.1em; color: var(--current-mega-menu-heading-color); 
    margin-bottom: 0.3rem; display: flex; align-items: center; 
}
.mega-menu-column h4 i { margin-right: 8px; }
.mega-menu-column h4 a { text-decoration: none; color: inherit; transition: color 0.2s ease-in-out; }
.mega-menu-column h4 a:hover { color: var(--current-mega-menu-link-hover-color); }


.mega-menu-column p { 
    font-size: 0.9em; color: var(--current-mega-menu-text-color); 
    padding-left: 24px; 
    margin-top: 0.25rem; 
    line-height: 1.4;
    display: block; 
    opacity: 1;
    height: auto;
}
.mega-menu-column p a { 
    color: var(--current-mega-menu-link-color); text-decoration: none; 
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; 
}
.mega-menu-column p a:hover {
    color: var(--current-mega-menu-link-hover-color);
    text-decoration: underline;
}

/* Custom HTML Column Styling in Mega Menu */
.mega-menu-html-content { color: var(--current-mega-menu-text-color); }
.mega-menu-html-content a { color: var(--current-mega-menu-link-color); transition: color 0.2s ease-in-out;}
.mega-menu-html-content a:hover { color: var(--current-mega-menu-link-hover-color); text-decoration: underline;}


/* Responsive Adjustments */
@media (max-width: 768px) { 
    .nav-links { 
        display: none !important; 
        flex-direction: column; 
        width: 100%; 
        background-color: var(--navbar-bg-color); 
        position: absolute; 
        top: var(--navbar-actual-height); 
        left: 0; 
        z-index: 998; 
        border-top: 1px solid #333; 
        padding: 0; 
        margin-left: 0; 
        height: auto; 
    }
    .navbar.nav-open .nav-links { 
        display: flex; 
    } 
    .nav-links li { 
        width: 100%; 
        margin-left: 0 !important; 
    }
    .nav-button-wrapper { 
        width: 100%; 
        height: auto; 
        border-left: none !important; 
        border-right-width: 0px !important; 
        border-right-style: none !important;
    }
    .nav-links li:not(:last-child) .nav-button-wrapper { 
        border-bottom: 1px solid #333; 
        border-left-color: transparent !important; 
    }
    .nav-links li:last-child .nav-button-wrapper { 
        border-bottom: none; 
    }
    .nav-button-wrapper a { 
        width: 100%; 
        justify-content: flex-start; 
        padding: 0.9rem 1rem; 
        height: auto; 
    }
    .hamburger-menu { 
        display: block; 
    } 
    
    .mega-menu-content, 
    .mega-menu-content.five-columns { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
    }
    .mega-menu-separator {
        display: none !important; 
    }
    .mega-menu-column {
        padding: 10px !important; 
        border-left: none !important; 
        margin-bottom: 15px; 
    }
    .mega-menu-column:last-child {
        margin-bottom: 0;
    }
    .mega-menu-header h3 { 
        font-size: 1.2rem; 
    }
}