/* Keep the navigation menu on top */
header.wp-block-template-part {
    position: relative !important;
    z-index: 99999 !important;
}

.wp-block-navigation__responsive-container .submenu-open > .wp-block-navigation__submenu-container {
    display: block !important;
}

@media (max-width: 768px) {
    /* Hide the submenus by default on mobile */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        display: none !important;
    }

    .wp-block-navigation__responsive-container .has-child > a:after,
    .wp-block-navigation__responsive-container .wp-block-navigation-item.has-child > a:after {
        content: " ▼";
        font-size: 0.8em;
        display: inline-block;
        margin-left: 4px;
        vertical-align: middle;
    }

    .wp-block-navigation__responsive-container .submenu-open > a:after {
        transform: rotate(180deg);
        color: var(--web2vi-color);
    }

    /* Add padding to mobile navigation menu */
    .wp-block-navigation__responsive-container-content {
        padding: 1rem !important;
    }
}


@media (min-width: 768px) {
    .wp-block-navigation__responsive-container .has-child > a:after,
    .wp-block-navigation__responsive-container .wp-block-navigation-item.has-child > a:after {
        content: '';
        display: none;
    }
}

/* Change submenu background color */
.wp-block-navigation__submenu-container {
    background-color: var(--web2vi-dark-gray-color) !important;
}

/* Change main menu buttons color */
.wp-block-navigation .wp-block-navigation-item__content:hover {
    text-decoration: none !important;
    background-color: transparent !important;
    color: var(--web2vi-color) !important;
}

/* Change sub menus items buttons color and background color */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    text-decoration: none !important;
    color: white !important;
    background-color: var(--web2vi-color) !important;
}

/* Remove outline/border on navigation buttons when clicked */
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation button:focus,
.wp-block-navigation button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}