/* ===================================
   MENU COLOR STANDARDIZATION
   Standardizes menu and submenu colors with good contrast
   =================================== */

/* Navigation link base styles - HAD brand blue */
.vl-main-menu ul li a {
    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 - HAD brand orange */
.vl-main-menu ul li a:hover {
    color: var(--had-primary-orange) !important;
    background-color: transparent !important;
}

/* Active menu item */
.vl-main-menu ul li a.active,
.vl-main-menu ul li.current-menu-item > a {
    color: var(--had-primary-orange) !important;
    font-weight: 600 !important;
}

/* Dropdown arrow colors */
.vl-main-menu ul li a span i {
    color: inherit !important;
    transition: transform 0.3s ease !important;
}

.vl-main-menu ul li:hover > a span i {
    transform: rotate(180deg) !important;
}

/* ===================================
   SUBMENU STANDARDIZATION
   =================================== */

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

/* Submenu items - consistent with main menu */
.vl-main-menu ul li .sub-menu li a {
    color: var(--had-primary-blue) !important;
    background: transparent !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: left !important;
}

/* Submenu hover state - HAD brand orange with subtle background */
.vl-main-menu ul li .sub-menu li a:hover {
    color: var(--had-primary-orange) !important;
    background: rgba(255, 102, 0, 0.08) !important;
    padding-left: 24px !important;
}

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

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

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

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

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

/* Mobile submenu */
.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.8) !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.15) !important;
}

/* ===================================
   HEADER BACKGROUND STANDARDIZATION
   =================================== */

/* Header background - HAD brand colors */
.vl-header-area5 .header5-bg {
    background: var(--had-white) !important;
    border-bottom: 1px solid #e8e9ea !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Sticky header styling */
.vl-header-area5.sticky {
    background: var(--had-white) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ===================================
   CONTACT BUTTON STANDARDIZATION
   =================================== */

/* Contact button in header */
.vl-header-area5 .contact-btn,
.vl-header-area5 .theme-btn {
    background: var(--had-primary-orange) !important;
    color: var(--had-white) !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;
}

.vl-header-area5 .contact-btn:hover,
.vl-header-area5 .theme-btn:hover {
    background: var(--had-orange-dark) !important;
    color: var(--had-white) !important;
    border-color: var(--had-orange-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(255, 102, 0, 0.3) !important;
}

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

/* Focus states for keyboard navigation */
.vl-main-menu ul li a:focus {
    outline: 2px solid var(--had-primary-orange) !important;
    outline-offset: 2px !important;
    background: rgba(255, 102, 0, 0.1) !important;
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .vl-main-menu ul li a {
        border: 1px solid transparent !important;
    }
    
    .vl-main-menu ul li a:hover,
    .vl-main-menu ul li a:focus {
        border-color: var(--had-primary-orange) !important;
    }
    
    .vl-main-menu ul li .sub-menu {
        border: 2px solid var(--had-primary-blue) !important;
    }
}

/* ===================================
   RESPONSIVE MENU ADJUSTMENTS
   =================================== */

@media (max-width: 991px) {
    /* Hide desktop menu, show mobile toggle */
    .vl-main-menu {
        display: none !important;
    }
}

@media (min-width: 992px) {
    /* Ensure proper spacing on desktop */
    .vl-main-menu ul li {
        margin: 0 8px !important;
    }
    
    .vl-main-menu ul li:last-child {
        margin-right: 0 !important;
    }
    
    /* Submenu positioning */
    .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;
    }
}

/* ===================================
   LOGO CONSISTENCY
   =================================== */

/* Ensure logo maintains HAD branding */
.vl-logo img.had-logo {
    max-height: 50px !important;
    width: auto !important;
    transition: all 0.3s ease !important;
}

.vl-header-area5.sticky .vl-logo img.had-logo {
    max-height: 45px !important;
}

@media (max-width: 768px) {
    .vl-logo img.had-logo {
        max-height: 40px !important;
    }
}