/* Desktop header controls ------------------------------------------------- */

/* Leave room for Account and Cart on desktop. */
#top .main_menu {
    right: 150px;
}

.moonbase-header-actions {
    position: absolute;
    z-index: 1000;
    top: 50%;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(-50%);
}

.moonbase-account-link,
.moonbase-cart-button {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.moonbase-account-link {
    font-family: "Varela Round", sans-serif;
    font-size: 18px;
    font-weight: normal;
}

.moonbase-account-link:hover,
.moonbase-account-link:focus-visible {
    color: #999;
}

.moonbase-cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.moonbase-cart-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.moonbase-cart-count {
    position: absolute;
    top: -9px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/*
 * The PHP-created item exists in Enfold's original desktop menu so Enfold can
 * copy it into its burger menu. Hide the original.
 */
#avia-menu > .moonbase-mobile-menu-item {
    display: none !important;
}

.moonbase-account-link:focus-visible,
.moonbase-cart-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Tablet and mobile ------------------------------------------------------- */

@media only screen and (max-width: 989px) {
    /* Reserve the right side for the burger followed by the cart. */
    #top #header .av-logo-container .inner-container {
        position: relative;
    }

    #top #header .logo {
        width: min(300px, calc(100% - 150px));
    }

    #top #header .logo a {
        width: 100%;
        height: 100%;
    }

    #top #header .logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }

    #top #header .main_menu {
        position: absolute;
        top: 0;
        right: 78px;
        left: auto;
        height: 100%;
        margin: 0;
    }

    /* Newsletter is not part of the responsive header. */
    #top #header .main_menu .social_bookmarks {
        display: none !important;
    }

    #top #header .moonbase-header-actions {
        position: absolute;
        top: 50%;
        right: 20px;
        gap: 0;
        margin: 0;
        transform: translateY(-50%);
    }

    #top #header .moonbase-header-actions .moonbase-account-link {
        display: none !important;
    }

    #av-burger-menu-ul > .moonbase-mobile-menu-item {
        display: block !important;
    }

    #av-burger-menu-ul > .moonbase-mobile-menu-item > a {
        font-family: "Varela Round", sans-serif;
    }
}

/* Narrow mobile ---------------------------------------------------------- */

@media only screen and (max-width: 480px) {
    /* The cart is hidden so the logo and burger retain independent space. */
    #top #header .logo {
        width: min(300px, calc(100% - 90px));
    }

    #top #header .main_menu {
        right: 20px;
    }

    #top #header .moonbase-header-actions {
        display: none;
    }
}