.main-navigation a:hover {
	color: #5F4C8C;
}



/* 
 * Kastline Header:  Put Menu Nav Below Logos and center it
 * Added the 2025.08.12 
*/

.site-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Keeps logo left-aligned */
}

.site-logo {
    margin-bottom: 20px !important; /* Space between logo and nav */
}

#site-navigation {
    width: 100% !important; /* Ensures nav takes full width */
    text-align: center !important; /* Centers nav content */
}

.main-menu {
    display: flex !important;
    justify-content: center !important; /* Centers nav items horizontally */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important; /* Centers the ul element */
	align-items: center !important;
}

.main-menu li {
    margin: 0 10px !important; /* Adds spacing between nav items */
}




/* Styling the Eshop menu item as a CTA button
 * 
 * Added the 2025.08.13 */

/* Targeting the Eshop menu item specifically */
#menu-primary-1 .menu-item-536 a {
    /* Core button styling */
    background-color: #FF8B1D;
		color: #000000;
    padding: 12px 24px;
    border-radius: 8px; /* Rounded corners for modern look */
    border: 1px solid black; /* Border for hover effect */
    display: inline-block; /* Ensure proper button behavior */
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Hover effects */
#menu-primary-1 .menu-item-536 a:hover {
    background-color: #E67A17; /* Slightly darker shade for hover */
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
    border-color: #FFFFFF; /* White border for visual pop */
}

/* Focus and active states for accessibility */
#menu-primary-1 .menu-item-536 a:focus {
    outline: 3px solid #005FCC; /* Accessible focus outline */
    outline-offset: 2px;
}

#menu-primary-1 .menu-item-536 a:active {
    transform: translateY(0); /* Reset lift on click */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Reduced shadow on click */
}

/* Ensure accessibility (WCAG 2.1 compliance) */
#menu-primary-1 .menu-item-536 a {
    /* Contrast ratio meets WCAG Level AA (4.5:1 for normal text) */
    color: #FFFFFF; /* High contrast with #FF8B1D background */
}

/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
    #menu-primary-1 .menu-item-536 a {
        padding: 10px 20px;
        font-size: 14px; /* Slightly smaller font for mobile */
    }
}