/*
 * Robert Mobile Bottom Nav
 * Mobile-first bottom navigation for Flatsome.
 */

/* Hidden by default on desktop/tablet. */
.rmbn {
    display: none;
}

@media (max-width: 849px) {
    :root {
        --rmbn-height: 64px;
        --rmbn-bg: rgba(255, 255, 255, 0.88);
        --rmbn-text: rgba(20, 20, 20, 0.62);
        --rmbn-text-active: rgba(15, 15, 15, 1);
        --rmbn-border: rgba(0, 0, 0, 0.08);
    }

    /*
     * Leave room for the fixed bar so the final page content/footer
     * is never hidden behind it.
     */
    body.rmbn-enabled {
        padding-bottom: calc(var(--rmbn-height) + env(safe-area-inset-bottom, 0px));
    }

    .rmbn {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483000;

        background: var(--rmbn-bg);
        border-top: 1px solid var(--rmbn-border);

        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);

        padding-bottom: env(safe-area-inset-bottom, 0px);

        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.035);
    }

    .rmbn__inner {
        width: 100%;
        min-height: var(--rmbn-height);
        margin: 0 auto;
    }

    .rmbn__menu {
        list-style: none;
        display: flex;
        align-items: stretch;
        justify-content: stretch;

        margin: 0;
        padding: 0;
        width: 100%;
        min-height: var(--rmbn-height);
    }

    .rmbn__menu > li {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .rmbn__menu > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: var(--rmbn-height);

        padding: 10px 5px 8px;

        color: var(--rmbn-text);
        text-decoration: none;
        text-align: center;

        font-size: 12px;
        line-height: 1.15;
        font-weight: 500;
        letter-spacing: 0.01em;

        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;

        transition:
            color 180ms ease,
            opacity 180ms ease,
            transform 180ms ease;
    }

    .rmbn__menu > li > a:active {
        transform: scale(0.96);
    }

    .rmbn__menu > li.current-menu-item > a,
    .rmbn__menu > li.current_page_item > a,
    .rmbn__menu > li.current-menu-ancestor > a {
        color: var(--rmbn-text-active);
        font-weight: 600;
    }

    /*
     * Small active-page indicator.
     */
    .rmbn__menu > li.current-menu-item > a::after,
    .rmbn__menu > li.current_page_item > a::after,
    .rmbn__menu > li.current-menu-ancestor > a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 6px;

        width: 18px;
        height: 2px;
        border-radius: 999px;

        background: currentColor;
        transform: translateX(-50%);
        opacity: 0.9;
    }

    /*
     * Hide submenus if one is accidentally added to the mobile menu.
     * The bottom bar is intentionally one-level navigation.
     */
    .rmbn .sub-menu {
        display: none !important;
    }

    /*
     * Hide Flatsome's mobile hamburger/nav icon so there aren't two
     * competing navigation controls. Logo/header itself remains visible.
     */
    .header-main .mobile-nav .nav-icon,
    .header-main .mobile-nav > li.nav-icon,
    .header-main a[data-open="#main-menu"],
    .header-main a[data-open="#main-menu-mobile"] {
        display: none !important;
    }
}

/* Slightly roomier text on larger phones while still using mobile layout. */
@media (min-width: 480px) and (max-width: 849px) {
    .rmbn__menu > li > a {
        font-size: 13px;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .rmbn__menu > li > a {
        transition: none;
    }
}