/* ========================================
   Base menu
   ======================================== */

.menu {
    margin: 0;
    padding: 0;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    margin: 0;
    padding: 0;
}

.menu a {
    text-decoration: none;
}

.menu-icon {
    width: 25px;
    height: 25px;
}

/* ========================================
   Menu layout
   ======================================== */

.menu-horizontal > ul {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.menu-vertical > ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ========================================
   Dropdown
   ======================================== */

.menu-dropdown li > ul {
    min-width: max-content;
}

.menu-dropdown li > ul a,
.menu-dropdown li > ul button {
    display: block;
}


/* ========================================
   Bottom submenu
   ======================================== */

.menu-dropdown.menu-submenu-bottom li > ul {
    position: static;
}

.menu.menu-dropdown.menu-submenu-right > ul > li {
    position: relative;
}

/*
 * Nested submenus open to the right.
 */
.menu-dropdown.menu-submenu-right li {
    position: relative;
}

.menu-dropdown.menu-submenu-right > ul > li > ul li > ul {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
}

/* ========================================
   Mobile menu
   ======================================== */

.menu-toggle {
    display: none;
}

@media (max-width: 767px) {

    .menu-toggle {
        display: block;
    }

    .menu-toggle[aria-expanded="false"] + .menu {
        display: none;
    }

    .menu-toggle[aria-expanded="true"] + .menu {
        display: block;
    }

    .menu > ul {
        display: flex;
        flex-direction: column;
    }

    .menu-dropdown li > ul {
        position: static;
    }

    .menu-dropdown.menu-submenu-right > ul > li > ul li > ul {
        position: static;
        top: auto;
        left: auto;
    }
}