/* ===============================================
   GLOBAL SUBMENU CONTRAST & HAD BRANDING
   Ensures consistent, high-contrast submenu styling across all pages
   =============================================== */

/* HAD Color Variables for Consistency */
:root {
    --had-primary-blue: #1E5F99;
    --had-blue-dark: #1A5485;
    --had-primary-orange: #FF6600;
    --had-orange-hover: #E55A00;
}

/* ===================================
   SUBMENU CONTAINER STYLING
   =================================== */

/* Force HAD brand styling on all submenu containers with maximum specificity */
html body .vl-header-area5 .vl-main-menu ul li .sub-menu,
html body .vl-main-menu ul li .sub-menu,
html body .has-dropdown .sub-menu,
html body .dropdown-menu,
html body nav ul li .sub-menu {
    /* High-contrast background - HAD blue gradient for brand consistency */
    background: linear-gradient(135deg, var(--had-primary-blue) 0%, var(--had-blue-dark) 100%) !important;
    
    /* Orange border for HAD brand accent */
    border: 2px solid var(--had-primary-orange) !important;
    border-radius: 8px !important;
    
    /* Enhanced shadows for definition and depth */
    box-shadow: 
        0 8px 24px rgba(30, 95, 153, 0.3), 
        0 0 0 1px rgba(255, 102, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15) !important;
    
    /* Consistent spacing and sizing */
    padding: 8px 0 !important;
    margin-top: 12px !important;
    min-width: 280px !important;
    
    /* Modern blur effect for premium look */
    backdrop-filter: blur(10px) !important;
    
    /* Ensure proper positioning */
    position: absolute !important;
    z-index: 999 !important;
    
    /* Hide by default for animation */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(0.95) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Show submenu on hover */
html body .vl-main-menu ul li:hover > .sub-menu,
html body .has-dropdown:hover .sub-menu,
html body nav ul li:hover .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* ===================================
   SUBMENU ITEMS STYLING
   =================================== */

/* High contrast submenu items - white text on blue background */
html body .vl-main-menu ul li .sub-menu li a,
html body .has-dropdown .sub-menu li a,
html body .sub-menu li a,
html body .dropdown-menu .dropdown-item,
html body nav ul li .sub-menu li a {
    /* High contrast text */
    color: #FFFFFF !important;
    background: transparent !important;
    
    /* Consistent spacing */
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    
    /* Clean layout */
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
    
    /* Block display for full-width clickable area */
    display: block !important;
    text-align: left !important;
    text-decoration: none !important;
    
    /* Override any existing color classes */
    --vtc-text-pera-1: #FFFFFF !important;
    --vtc-text-pera-2: #FFFFFF !important;
    --ztc-text-text-2: #FFFFFF !important;
}

/* Remove border from last submenu item */
html body .sub-menu li:last-child a,
html body .dropdown-menu .dropdown-item:last-child {
    border-bottom: none !important;
}

/* ===================================
   SUBMENU HOVER & ACTIVE STATES
   =================================== */

/* Orange hover effect for clear interaction feedback */
html body .vl-main-menu ul li .sub-menu li a:hover,
html body .has-dropdown .sub-menu li a:hover,
html body .sub-menu li a:hover,
html body .dropdown-menu .dropdown-item:hover {
    /* Maintain white text on orange background */
    color: #FFFFFF !important;
    background: var(--had-primary-orange) !important;
    
    /* Subtle slide animation */
    padding-left: 28px !important;
    border-radius: 6px !important;
    margin: 0 8px !important;
    border-bottom: none !important;
    transform: translateX(5px) !important;
    
    /* Enhanced shadow on hover */
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3) !important;
}

/* Active submenu item styling */
html body .sub-menu li a.active,
html body .dropdown-menu .dropdown-item.active {
    color: #FFFFFF !important;
    background: var(--had-primary-orange) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    margin: 0 8px !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3) !important;
}

/* ===================================
   VISUAL ENHANCEMENTS
   =================================== */

/* HAD orange accent bar at top of submenu for brand recognition */
html body .vl-main-menu ul li .sub-menu::after,
html body .dropdown-menu::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    width: 100% !important;
    background: linear-gradient(90deg, var(--had-primary-orange) 0%, #FF8533 100%) !important;
    border-radius: 8px 8px 0 0 !important;
    z-index: 10 !important;
}

/* Submenu arrow pointer for visual connection to parent */
html body .vl-main-menu ul li .sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    left: 20px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid var(--had-primary-orange) !important;
    z-index: 11 !important;
}

/* ===================================
   MAIN MENU ITEMS (for consistency)
   =================================== */

/* Ensure main menu items also use proper HAD colors */
.vl-main-menu ul li a,
.navbar-nav .nav-link {
    color: var(--had-primary-blue) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Main menu hover state */
.vl-main-menu ul li a:hover,
.navbar-nav .nav-link:hover {
    color: var(--had-primary-orange) !important;
    background-color: rgba(255, 102, 0, 0.05) !important;
    border-radius: 4px !important;
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Focus states for keyboard navigation */
html body .sub-menu li a:focus,
html body .dropdown-menu .dropdown-item:focus {
    outline: 3px solid var(--had-primary-orange) !important;
    outline-offset: -3px !important;
    background: rgba(255, 102, 0, 0.3) !important;
    color: #FFFFFF !important;
}

/* Main menu focus states */
.vl-main-menu ul li a:focus,
.navbar-nav .nav-link:focus {
    outline: 2px solid var(--had-primary-orange) !important;
    outline-offset: 2px !important;
    background: rgba(255, 102, 0, 0.1) !important;
    border-radius: 4px !important;
}

/* ===================================
   MOBILE RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 991px) {
    /* Mobile submenu adjustments */
    html body .vl-offcanvas .vl-main-menu ul li .sub-menu {
        background: rgba(30, 95, 153, 0.95) !important;
        border: 1px solid var(--had-primary-orange) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(5px) !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
    }
    
    html body .vl-offcanvas .vl-main-menu ul li .sub-menu::after,
    html body .vl-offcanvas .vl-main-menu ul li .sub-menu::before {
        display: none !important;
    }
}

/* ===================================
   OVERRIDE CONFLICTING STYLES
   =================================== */

/* Force override any gray text classes in navigation */
html body .vl-main-menu .gray1,
html body .vl-main-menu .gray2,
html body .vl-main-menu [class*="gray"],
html body .sub-menu .gray1,
html body .sub-menu .gray2,
html body .sub-menu [class*="gray"] {
    color: #FFFFFF !important;
}

/* Override template variables */
html body .vl-main-menu .sub-menu,
html body .has-dropdown .sub-menu,
html body .dropdown-menu {
    --vtc-bg-white1: var(--had-primary-blue) !important;
    --vtc-bg-white2: var(--had-primary-blue) !important;
    --vtc-bg-white3: var(--had-primary-blue) !important;
    --vtc-text-title-1: #FFFFFF !important;
    --vtc-text-title-2: #FFFFFF !important;
}

/* Nuclear option - force all submenu text to white */
html body .vl-main-menu .sub-menu a,
html body .vl-main-menu .sub-menu a *,
html body .has-dropdown .sub-menu a,
html body .has-dropdown .sub-menu a *,
html body .dropdown-menu a,
html body .dropdown-menu a * {
    color: #FFFFFF !important;
}

/* ===================================
   HIGH CONTRAST MODE SUPPORT
   =================================== */

@media (prefers-contrast: high) {
    html body .sub-menu li a:hover,
    html body .dropdown-menu .dropdown-item:hover {
        border: 2px solid #FFFFFF !important;
    }
    
    html body .vl-main-menu ul li .sub-menu {
        border: 3px solid var(--had-primary-orange) !important;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    html body .sub-menu,
    html body .dropdown-menu {
        background: #FFFFFF !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        box-shadow: none !important;
    }
    
    html body .sub-menu li a,
    html body .dropdown-menu .dropdown-item {
        color: #000000 !important;
    }
}