/* Mobile menu styles */
.aa-navigation--mobile {
    display: none;
    background: #fff;
    padding: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Show mobile navigation only when the hamburger toggles 'js-nav-open' */
html.js-nav-open .aa-navigation--mobile,
body.js-nav-open .aa-navigation--mobile {
    display: block;
}

/* Prevent background scroll when menu is open */
html.js-nav-open,
body.js-nav-open {
    overflow: hidden;
}

/* Desktop Dropdown Menu Styles */
@media (min-width: 992px) {
    /* Ensure the parent item is positioned relatively for absolute positioning of the dropdown */
    .hs-menu-wrapper > ul > li.hs-item-has-dropdown {
        position: relative;
    }

    /* Hide the dropdown menu by default */
    .hs-menu-wrapper > ul > li.hs-item-has-dropdown > .hs-menu-children-wrapper {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        min-width: 220px;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
        border-radius: 4px;
        list-style: none;
        margin: 0;
    }

    /* Show the dropdown menu on hover */
    .hs-menu-wrapper > ul > li.hs-item-has-dropdown:hover > .hs-menu-children-wrapper,
    .hs-menu-wrapper > ul > li.hs-item-has-dropdown > .hs-menu-children-wrapper:hover {
        display: block;
    }

    /* Dropdown item styling */
    .hs-menu-wrapper > ul > li.hs-item-has-dropdown > .hs-menu-children-wrapper > li {
        display: block;
        margin: 0;
    }

    .hs-menu-wrapper > ul > li.hs-item-has-dropdown > .hs-menu-children-wrapper > li > a {
        display: block;
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.2s ease, color 0.2s ease;
        white-space: nowrap;
    }

    .hs-menu-wrapper > ul > li.hs-item-has-dropdown > .hs-menu-children-wrapper > li > a:hover {
        background-color: #f5f5f5;
        color: #8B0000; /* Match primary color */
    }
}