/* === Main Menu Styling === */
.main-navigation ul li a {
    color: #000; /* Default menu text */
    background-color: transparent; /* Default background */
    text-transform: capitalize; /* Main menu: capitalize first letter of each word */
    padding: 12px 20px;
    display: block;
    transition: all 0.3s ease;
}

/* Main menu hover */
.main-navigation ul li a:hover {
    background-color: red; /* Hover background */
    color: #fff; /* Hover text */
}

/* === Submenu Styling === */
.main-navigation ul li ul {
    font-size: 13px; /* Smaller font */
    background-color: #fff; /* Default submenu background */
    padding: 5px 0;
    position: absolute;
    display: none;
    z-index: 9999;
    min-width: 200px; /* Minimum width */
    width: auto;       /* Adjust to content */
    white-space: normal; /* Allow wrapping */
}

/* Show submenu on hover */
.main-navigation ul li:hover > ul {
    display: block;
}

/* Submenu items */
.main-navigation ul li ul li a {
    color: #000; /* Default text color */
    background-color: #fff;
    padding: 8px 15px;
    white-space: normal; /* Wrap long text */
    line-height: 1.5; /* Better readability */
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    text-transform: none; /* JS will handle first-word capitalization */
}

/* Submenu hover */
.main-navigation ul li ul li a:hover {
    background-color: red; /* Hover background */
    color: #fff; /* Hover text color */
}

/* Ensure submenu is positioned correctly */
.main-navigation li {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-navigation ul li ul {
        position: relative;
        width: 100%;
    }
}