/**
 * Fix dropdown container to properly wrap expanded content
 * Ensures background and borders extend to match content width
 */

/* Ensure dropdown container expands with content */
.sp-dropdown {
    width: max-content !important;
    min-width: 220px !important;
    max-width: 450px !important;
    position: absolute !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important; /* Allow content to determine size */
}

/* Inner wrapper should expand to content */
.sp-dropdown .sp-dropdown-inner {
    width: 100% !important;
    min-width: max-content !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Items container matches content width */
.sp-dropdown .sp-dropdown-items,
.sp-dropdown > ul {
    width: 100% !important;
    min-width: max-content !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* List items expand to content */
.sp-dropdown li,
.sp-dropdown-items > li {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Links determine the width */
.sp-dropdown a,
.sp-dropdown-items a {
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    padding: 12px 25px 12px 20px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #333 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #eee !important;
}

/* Remove bottom border from last item */
.sp-dropdown li:last-child a {
    border-bottom: none !important;
}

/* Hover states */
.sp-dropdown a:hover {
    background: #f5f5f5 !important;
}

/* Fix specific dropdown containers */
.sp-dropdown.sp-dropdown-main {
    width: max-content !important;
    min-width: 250px !important;
}

/* Ensure proper width calculation for all dropdowns */
.sp-megamenu-wrapper .sp-dropdown {
    width: max-content !important;
    min-width: fit-content !important;
    max-width: 450px !important;
}

/* Force recalculation of width */
.sp-dropdown {
    display: none;
    position: absolute !important;
}

.sp-megamenu-parent > li:hover > .sp-dropdown {
    display: block !important;
}

/* Ensure dropdown doesn't get cut off on right edge */
.sp-megamenu-parent > li:last-child > .sp-dropdown,
.sp-megamenu-parent > li:nth-last-child(2) > .sp-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* Override any conflicting width styles */
.sp-dropdown[style*="width"] {
    width: max-content !important;
}

/* Ensure all elements use same box model */
.sp-dropdown,
.sp-dropdown * {
    box-sizing: border-box !important;
}

/* Alternative approach using min-width on links */
.sp-dropdown a {
    min-width: max-content !important;
}

/* Specific fix for Solutions dropdown */
.sp-megamenu-parent li a:contains("Solutions") + .sp-dropdown {
    min-width: 350px !important;
}

/* Debug - ensure dropdown has solid background throughout */
.sp-dropdown {
    background-color: #ffffff !important;
    background-clip: padding-box !important;
}

/* Ensure dropdown stays together as one unit */
.sp-dropdown {
    contain: layout !important;
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    .sp-dropdown {
        width: -moz-max-content !important;
    }
    
    .sp-dropdown a {
        width: -moz-max-content !important;
    }
}

/* Fix for Safari */
@supports (-webkit-appearance: none) {
    .sp-dropdown {
        width: -webkit-max-content !important;
    }
    
    .sp-dropdown a {
        width: -webkit-max-content !important;
    }
}