/* Ensure parent item is relative for positioning */
.menu__list {
    overflow: visible !important;
    /* Allow dropdown to spill out */
}

.menu__list .menu__item {
    position: relative;
    overflow: visible !important;
}

/* Hide dropdown by default */
.menu__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    z-index: 1000;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #eee;
}

/* Show dropdown on hover */
.menu__item:hover .menu__dropdown,
.menu__item:focus-within .menu__dropdown {
    display: block;
}

/* Dropdown styling */
.menu__dropdown .menu__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
}

.menu__dropdown .menu__item:last-child {
    border-bottom: none;
}

.menu__dropdown .menu__link {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.menu__dropdown .menu__link:hover {
    background-color: #f9f9f9;
    color: #e22d30;
    /* Mainroad red accent */
}

/* Responsive: ensure dropdowns don't overflow on small screens */
@media (max-width: 768px) {
    .menu__dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 20px;
    }
}