/* General styling for the navigation menu container */
nav.menu {
    text-align: center; 
    min-height: 50px; 
    padding: 0; /* Ensure no unnecessary padding */
}

/* Styling for menu items */
nav.menu .menu-item {
    display: inline-block; 
    margin: 20px 30px 0 0; 
    font-weight: 500; /* Consistent font-weight */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth hover and focus transitions */
    vertical-align: middle; /* Ensure all items align at the same level */
}

/* Ensure consistent vertical alignment for the first item */
nav.menu .menu-item:first-child {
    margin-left: 20px; /* Add some left margin for the first item */
}

/* Adjust spacing and appearance for images within menu items */
nav.menu .menu-item img {
    margin-right: 5px; /* Spacing between image and text */
    vertical-align: middle; /* Align image vertically with the text */
    transition: none;
}

/* Styling for normal menu links */
nav.menu .menu-item a {
    display: flex;
    align-items: center; /* Align image and text in the same row */
    justify-content: center; /* Ensure both text and image are centered */
    text-decoration: none; /* Remove underlines from links */
    color: #63748B; /* Default color for menu links */
    font-weight: 500; /* Consistent font-weight for links */
    outline: none; /* Remove the default browser outline on focus */
    border: none; /* Ensure no borders appear */
    transition: color 0.3s ease; /* Smooth transition for link colors */
}

/* Remove focus outline for accessibility while maintaining keyboard usability */
nav.menu .menu-item a:focus {
    outline: none;
    box-shadow: none; /* Remove box-shadow for focus */
}

/* Use focus-visible for better accessibility (if supported by the browser) */
nav.menu .menu-item a:focus-visible {
    outline: none; /* Remove outline for keyboard navigation */
}

/* Optional custom style for focus-visible (keyboard navigation only) */
nav.menu .menu-item a:focus-visible {
    color: #0766FF; /* Highlight link on focus */
    text-decoration: underline; /* Add underline for better focus indication */
}

/* Styling for active (highlighted) menu items */
nav.menu .menu-item.active a {
    color: #0766FF; /* Active link color */
}

nav.menu .menu-item.active img {
    filter: invert(14%) sepia(93%) saturate(6694%) hue-rotate(208deg) brightness(94%) contrast(109%);
    transition: none;
}