/* =========================================================
   AMATIS MOBILE MENU
   ========================================================= */

.amatis-mobile-menu {
    position: relative;
    display: inline-block;
    z-index: 999999;
}


/* =========================================================
   BURGER BUTTON
   ========================================================= */

.amatis-mobile-menu__toggle {
    width: 46px;
    height: 46px;

    padding: 0;
    margin: 0;

    border: 0;
    outline: none;

    background: transparent;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    appearance: none;
    -webkit-appearance: none;

    box-shadow: none;
}


/*
 * Prevent Elementor/theme button styles
 * from affecting the burger.
 */

.amatis-mobile-menu__toggle:hover,
.amatis-mobile-menu__toggle:focus,
.amatis-mobile-menu__toggle:active {
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}


/* =========================================================
   BURGER LINES
   ========================================================= */

.amatis-mobile-menu__line {
    display: block;

    width: 27px;
    height: 2px;

    background: currentColor;

    border-radius: 2px;

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}


/* =========================================================
   OPEN → X ANIMATION
   ========================================================= */

.amatis-mobile-menu.is-open
.amatis-mobile-menu__line:nth-child(1) {
    transform:
        translateY(8px)
        rotate(45deg);
}


.amatis-mobile-menu.is-open
.amatis-mobile-menu__line:nth-child(2) {
    opacity: 0;
}


.amatis-mobile-menu.is-open
.amatis-mobile-menu__line:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =========================================================
   MENU PANEL
   ========================================================= */

.amatis-mobile-menu__panel {
    position: absolute;

    top: calc(100% + 15px);
    right: 0;

    width: 360px;
    max-width: 90vw;

    background: #111111;

    border-radius: 12px;

    padding: 20px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* =========================================================
   OPEN PANEL
   ========================================================= */

.amatis-mobile-menu.is-open
.amatis-mobile-menu__panel {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   INNER
   ========================================================= */

.amatis-mobile-menu__inner {
    width: 100%;
}


/* =========================================================
   WORDPRESS MENU
   ========================================================= */

.amatis-mobile-menu__items {
    list-style: none;

    margin: 0;
    padding: 0;
}


/*
 * Every WordPress menu item.
 */

.amatis-mobile-menu__items li {
    position: relative;

    list-style: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

.amatis-mobile-menu__items a {
    display: block;

    padding: 13px 40px 13px 0;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;
    line-height: 1.5;

    transition:
        color 0.2s ease;
}


.amatis-mobile-menu__items a:hover {
    color: #cccccc;
}


/* =========================================================
   SUBMENUS
   ========================================================= */

.amatis-mobile-menu__items .sub-menu {
    display: none;

    list-style: none;

    margin: 0;

    padding:
        0
        0
        0
        15px;
}


/*
 * Open submenu.
 */

.amatis-mobile-menu__items
.menu-item.submenu-open
> .sub-menu {
    display: block;
}


/* =========================================================
   SUBMENU TOGGLE / ARROW
   ========================================================= */

.amatis-mobile-menu__submenu-toggle {
    position: absolute;

    top: 7px;
    right: 0;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    color: #ffffff;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow: none;
}


/*
 * Prevent theme button styles.
 */

.amatis-mobile-menu__submenu-toggle:hover,
.amatis-mobile-menu__submenu-toggle:focus,
.amatis-mobile-menu__submenu-toggle:active {
    background: transparent;

    border: 0;

    outline: none;

    box-shadow: none;
}


/* =========================================================
   ARROW
   ========================================================= */

.amatis-mobile-menu__submenu-toggle span {
    display: block;

    width: 8px;
    height: 8px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg);

    margin: 0 auto;

    transition:
        transform 0.2s ease;
}


/*
 * Arrow points upward when submenu
 * is open.
 */

.amatis-mobile-menu__items
.menu-item.submenu-open
> .amatis-mobile-menu__submenu-toggle
span {
    transform:
        rotate(225deg);
}


/* =========================================================
   MOBILE DEFAULT
   ========================================================= */

/*
 * The widget is intended primarily
 * for mobile/tablet.
 *
 * Desktop is hidden unless the
 * Elementor setting "Show on Desktop"
 * is enabled.
 */

@media (min-width: 1025px) {

    .amatis-mobile-menu:not(
        .amatis-mobile-menu--desktop-visible
    ) {
        display: none;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 767px) {

    .amatis-mobile-menu__panel {
        width: 320px;
        max-width: 90vw;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .amatis-mobile-menu__panel {
        width: calc(100vw - 30px);
        max-width: calc(100vw - 30px);

        right: -10px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.amatis-mobile-menu__toggle:focus-visible,
.amatis-mobile-menu__submenu-toggle:focus-visible {
    outline:
        2px solid currentColor;

    outline-offset: 3px;
}


/* =========================================================
   PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

.amatis-mobile-menu__panel,
.amatis-mobile-menu__inner {
    overflow: visible;
}