/* assets/css/kleo-modern-menu.css */

@media screen and (min-width: 991px) {
    /* Enhanced top menu styles - Modern, clean design */
    
    /* White background for top bar */
    .header-color.social-header {
        background-color: #ffffff !important;
    }
    
    .header-color .top-menu li > a,
    .header-color #top-social li a {
        color: #444; 
        font-weight: 500;
        font-size: 14px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        letter-spacing: -0.01em;
        padding: 0 20px;
    }

    .header-color .top-menu li > a:hover,
    .header-color #top-social li a:hover {
        color: #0073aa; /* Standard WordPress Blue */
        transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header-color .top-menu .dropdown-menu {
        border-radius: 6px;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
        padding: 6px 0;
        margin-top: 8px;
        background: #fff;
    }

    .header-color .top-menu .dropdown-menu > li > a {
        padding: 10px 18px;
        color: #444;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        letter-spacing: -0.01em;
        line-height: 1.6;
        transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: none;
    }

    .header-color .top-menu .dropdown-menu > li:first-child > a {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .header-color .top-menu .dropdown-menu > li:last-child > a {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .header-color .top-menu .dropdown-menu > li > a:hover,
    .header-color .top-menu .dropdown-menu > li > a:focus {
        color: #0073aa;
        background-color: transparent;
    }

    /* Fix hover gap issue for Top Menu */
    .header-color .top-menu li.dropdown:hover > .dropdown-menu {
        display: block; /* Force display on hover */
    }

    /* Invisible bridge to fill the 8px gap */
    .header-color .top-menu .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    /* --- Modern Main Menu Styling --- */

    /* 1. Main Header Container */
    .kleo-main-header .navbar {
        background: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Very soft, modern shadow */
        min-height: 80px; /* Taller for a premium feel */
        display: flex;
        align-items: center;
        border: none !important;
    }

    /* 2. Top-level Menu Items */
    .primary-menu > li > a {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #2d3748 !important; /* Dark slate gray */
        text-transform: none !important; /* Remove ALL CAPS */
        letter-spacing: -0.01em;
        padding: 0 20px !important; /* More horizontal breathing room */
        height: 80px; /* Match header height for vertical centering */
        line-height: 80px !important;
        transition: color 0.2s ease;
    }

    /* Hover & Active States */
    .primary-menu > li > a:hover,
    .primary-menu > li.current-menu-item > a,
    .primary-menu > li.current-menu-ancestor > a {
        color: #e5633a !important; /* Your accent color */
        background: transparent !important;
    }

    /* Optional: Add a subtle indicator for the active item */
    .primary-menu > li.current-menu-item > a {
        position: relative;
    }
    .primary-menu > li.current-menu-item > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 3px;
        background: #e5633a;
        border-radius: 3px 3px 0 0;
    }

    /* 3. Dropdown Submenus */
    .primary-menu .dropdown-menu {
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15) !important;
        padding: 12px 0 !important;
        margin-top: 0 !important; /* Connects smoothly */
        background: #ffffff !important;
        min-width: 220px; /* Slightly wider */
    }

    /* Dropdown Links */
    .primary-menu .dropdown-menu > li > a {
        padding: 10px 24px !important;
        font-size: 14px;
        font-weight: 500;
        color: #4a5568 !important;
        border-bottom: none !important;
        transition: all 0.15s ease;
    }

    .primary-menu .dropdown-menu > li > a:hover {
        background-color: #f7fafc !important; /* Very light gray hover */
        color: #e5633a !important;
        transform: translateX(4px); /* Subtle movement cue */
    }

    /* Remove Kleo's default arrows/separators if they look cluttered */
    /* .primary-menu .caret {
        display: none !important; 
    } */
}

@media screen and (max-width: 990px) {
    /* Fix hidden tabdrop blocking clicks on first menu item */
    .top-menu .tabdrop.hide:before {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: static !important;
        z-index: -1 !important;
    }
    
    .top-menu .tabdrop.hide {
        pointer-events: none !important;
    }
    
    /* Fix dropdown menus blocking clicks when hidden */
    .top-menu .dropdown-menu:not(.show):not(.open) {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}