/* ===============================================
   COMPREHENSIVE CONTRAST & MENU STANDARDIZATION
   Fixes hero button contrast and standardizes menu colors
   =============================================== */

/* ===================================
   HERO BUTTON CONTRAST FIXES
   =================================== */

/* Fix the second hero button (theme-btn6) contrast issues */
.hero5 .theme-btn6 {
    /* Strong white background for excellent contrast */
    background: #FFFFFF !important;
    color: var(--had-primary-blue) !important;
    border: 2px solid #FFFFFF !important;
    
    /* Enhanced shadow for better definition against background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    
    /* Ensure text is bold and readable */
    font-weight: 700 !important;
    text-shadow: none !important;
    
    /* Consistent sizing with primary button */
    padding: 14px 28px !important;
    font-size: 16px !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
    
    /* Ensure button is clearly visible */
    position: relative !important;
    z-index: 5 !important;
}

.hero5 .theme-btn6:hover {
    /* Orange background on hover for clear feedback */
    background: var(--had-primary-orange) !important;
    color: #FFFFFF !important;
    border-color: var(--had-primary-orange) !important;
    
    /* Enhanced shadow on hover */
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4) !important;
    
    /* Subtle lift effect */
    transform: translateY(-2px) !important;
}

/* Ensure the first hero button maintains proper contrast */
.hero5 .theme-btn7 {
    background: var(--had-primary-orange) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--had-primary-orange) !important;
    
    /* Enhanced shadow for consistency */
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
    
    /* Ensure text is bold and readable */
    font-weight: 700 !important;
    text-shadow: none !important;
    
    /* Consistent sizing */
    padding: 14px 28px !important;
    font-size: 16px !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
}

.hero5 .theme-btn7:hover {
    /* Darker orange on hover */
    background: #E55A00 !important;
    color: #FFFFFF !important;
    border-color: #E55A00 !important;
    
    /* Enhanced shadow on hover */
    box-shadow: 0 6px 20px rgba(229, 90, 0, 0.4) !important;
    
    /* Subtle lift effect */
    transform: translateY(-2px) !important;
}

/* ===================================
   MENU & SUBMENU COLOR STANDARDIZATION
   =================================== */

/* Main navigation menu items - standardized with HAD blue */
.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 - standardized with HAD orange */
.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;
}

/* Active menu item - HAD orange */
.vl-main-menu ul li a.active,
.vl-main-menu ul li.current-menu-item > a,
.navbar-nav .nav-link.active {
    color: var(--had-primary-orange) !important;
    font-weight: 600 !important;
    background-color: rgba(255, 102, 0, 0.08) !important;
    border-radius: 4px !important;
}

/* Dropdown/submenu container styling */
.vl-main-menu ul li .sub-menu,
.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #e8e9ea !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    min-width: 280px !important;
}

/* Submenu items - same navy blue as main menu for consistency */
.vl-main-menu ul li .sub-menu li a,
.dropdown-menu .dropdown-item,
.vl-main-menu .sub-menu a,
.has-dropdown .sub-menu li a {
    color: var(--had-primary-blue) !important;
    background: transparent !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: left !important;
    border-bottom: none !important;
}

/* More specific override for any gray text in submenus */
.vl-main-menu ul li .sub-menu li a.gray1,
.vl-main-menu ul li .sub-menu li a[class*="gray"],
.dropdown-menu .dropdown-item.gray1,
.dropdown-menu .dropdown-item[class*="gray"] {
    color: var(--had-primary-blue) !important;
}

/* Submenu hover state - same orange as main menu */
.vl-main-menu ul li .sub-menu li a:hover,
.dropdown-menu .dropdown-item:hover {
    color: var(--had-primary-orange) !important;
    background: rgba(255, 102, 0, 0.08) !important;
    padding-left: 24px !important;
    border-radius: 4px !important;
    margin: 0 8px !important;
}

/* Active submenu item - consistent with main menu */
.vl-main-menu ul li .sub-menu li a.active,
.vl-main-menu ul li .sub-menu li.current-menu-item > a,
.dropdown-menu .dropdown-item.active {
    color: var(--had-primary-orange) !important;
    background: rgba(255, 102, 0, 0.12) !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    margin: 0 8px !important;
}

/* ===================================
   MOBILE MENU STANDARDIZATION
   =================================== */

/* Mobile menu background - HAD brand gradient */
.vl-offcanvas {
    background: linear-gradient(135deg, var(--had-primary-blue), var(--had-blue-dark)) !important;
}

/* Mobile menu items - white text on blue background */
.vl-offcanvas .vl-main-menu ul li a {
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    background: transparent !important;
}

/* Mobile menu hover - orange highlight */
.vl-offcanvas .vl-main-menu ul li a:hover {
    color: var(--had-primary-orange) !important;
    background: rgba(255, 102, 0, 0.15) !important;
}

/* Mobile submenu - darker background for hierarchy */
.vl-offcanvas .vl-main-menu ul li .sub-menu {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.vl-offcanvas .vl-main-menu ul li .sub-menu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding-left: 40px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.vl-offcanvas .vl-main-menu ul li .sub-menu li a:hover {
    color: var(--had-primary-orange) !important;
    background: rgba(255, 102, 0, 0.2) !important;
}

/* ===================================
   HEADER STYLING IMPROVEMENTS
   =================================== */

/* Header background - clean white with subtle shadow */
.vl-header-area5 .header5-bg,
.vl-header-area5 {
    background: #FFFFFF !important;
    border-bottom: 1px solid #e8e9ea !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Sticky header with enhanced shadow */
.vl-header-area5.sticky {
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Contact button in header - HAD orange */
.vl-header-area5 .contact-btn,
.vl-header-area5 .theme-btn {
    background: var(--had-primary-orange) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--had-primary-orange) !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(255, 102, 0, 0.2) !important;
}

.vl-header-area5 .contact-btn:hover,
.vl-header-area5 .theme-btn:hover {
    background: #E55A00 !important;
    color: #FFFFFF !important;
    border-color: #E55A00 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(229, 90, 0, 0.3) !important;
}

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

/* Focus states for keyboard navigation */
.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;
}

.vl-main-menu ul li .sub-menu li a:focus,
.dropdown-menu .dropdown-item:focus {
    outline: 2px solid var(--had-primary-orange) !important;
    outline-offset: -2px !important;
    background: rgba(255, 102, 0, 0.12) !important;
    border-radius: 4px !important;
}

/* Hero button focus states */
.hero5 .theme-btn6:focus {
    outline: 3px solid var(--had-primary-orange) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.3) !important;
}

.hero5 .theme-btn7:focus {
    outline: 3px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

/* ===================================
   RESPONSIVE IMPROVEMENTS
   =================================== */

@media (max-width: 991px) {
    /* Hide desktop menu, show mobile toggle */
    .vl-main-menu {
        display: none !important;
    }
    
    /* Mobile menu toggle button */
    .navbar-toggler {
        border: none !important;
        color: var(--had-primary-blue) !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 2px rgba(30, 95, 153, 0.3) !important;
    }
}

@media (max-width: 768px) {
    /* Adjust hero buttons for mobile */
    .hero5 .theme-btn6,
    .hero5 .theme-btn7 {
        padding: 12px 24px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Stack buttons vertically on mobile */
    .hero5 .buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .hero5 .theme-btn6 {
        margin-left: 0 !important;
    }
}

@media (min-width: 992px) {
    /* Desktop menu spacing */
    .vl-main-menu ul li {
        margin: 0 4px !important;
    }
    
    .vl-main-menu ul li:last-child {
        margin-right: 0 !important;
    }
    
    /* Submenu positioning and animations */
    .vl-main-menu ul li .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all 0.3s ease !important;
    }
    
    .vl-main-menu ul li:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* ===================================
   FINAL OVERRIDES FOR CONSISTENCY
   =================================== */

/* Ensure all text and arrows inherit proper colors */
.hero5 .theme-btn6 .text,
.hero5 .theme-btn7 .text {
    color: inherit !important;
    opacity: 1 !important;
}

.hero5 .theme-btn6 .arrow1 i,
.hero5 .theme-btn6 .arrow2 i,
.hero5 .theme-btn7 .arrow1 i,
.hero5 .theme-btn7 .arrow2 i {
    color: inherit !important;
}

/* Remove any conflicting styles */
.hero5 .buttons::before,
.hero5 .buttons::after {
    display: none !important;
}

/* Ensure buttons are always visible and clickable */
.hero5 .theme-btn6,
.hero5 .theme-btn7 {
    position: relative !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero5 .theme-btn6 {
        border: 3px solid #000000 !important;
    }
    
    .hero5 .theme-btn7 {
        border: 3px solid #FFFFFF !important;
    }
    
    .vl-main-menu ul li a,
    .navbar-nav .nav-link {
        border: 1px solid transparent !important;
    }
    
    .vl-main-menu ul li a:hover,
    .vl-main-menu ul li a:focus,
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        border-color: var(--had-primary-orange) !important;
    }
}

/* Print styles */
@media print {
    .hero5 .theme-btn6,
    .hero5 .theme-btn7 {
        background: transparent !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
}

/* ===================================
   FINAL CRITICAL OVERRIDES
   =================================== */

/* Force submenu colors to HAD navy blue - highest specificity */
body .vl-main-menu ul li .sub-menu li a,
body .has-dropdown .sub-menu li a,
body .dropdown-menu .dropdown-item,
body .sub-menu a {
    color: var(--had-primary-blue) !important;
    font-weight: 500 !important;
}

/* Override any gray text classes in navigation */
body .vl-main-menu .gray1,
body .vl-main-menu .gray2,
body .vl-main-menu [class*="gray"],
body .sub-menu .gray1,
body .sub-menu .gray2,
body .sub-menu [class*="gray"] {
    color: var(--had-primary-blue) !important;
}

/* Critical override for CSS variables in navigation */
.vl-main-menu ul li .sub-menu li a {
    --vtc-text-pera-1: var(--had-primary-blue) !important;
    --vtc-text-pera-2: var(--had-primary-blue) !important;
    --ztc-text-text-2: var(--had-primary-blue) !important;
}

/* Nuclear option - force all navigation text to HAD blue */
.vl-main-menu .sub-menu a,
.vl-main-menu .sub-menu a *,
.has-dropdown .sub-menu a,
.has-dropdown .sub-menu a * {
    color: var(--had-primary-blue) !important;
}