/*
 * Mountain Diary — the bottom of the slide menu on phones (Site\Header\MobileMenu, with
 * mobile-menu.js). The header's log-in and join buttons, or its messages and notifications, give
 * way to the items that the script adds at the bottom of the menu, with their icons; the language
 * item that language-switcher.js puts there is indented. Printed after the theme's styles.
 */
@media (width <= 768px) {
    /* A visitor: no log-in or join in the header bar */
    body:not(.logged-in) .buddypress-icons-wrapper .bp-icon-wrap {
        display: none !important;
    }

    /* A member: no messages or notifications in the header bar */
    body.logged-in .buddypress-icons-wrapper .bp-msg,
    body.logged-in .buddypress-icons-wrapper .user-notifications {
        display: none !important;
    }

    /* The bottom section lines up with the primary menu */
    .md-mobile-bottom-section.menu {
        padding-top: 0 !important;
    }

    .md-mobile-bottom-section .menu-item > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center;
    }

    /* The icons of the bottom section */
    .md-mobile-bottom-section .menu-item a .fa {
        margin-right: 10px;
        width: 18px;
        text-align: center;
        font-size: 15px;
        opacity: 0.7;
    }

    /* The languages under the language item */
    .md-mobile-bottom-section .md-mobile-lang-submenu {
        list-style: none;
        padding: 0 0 0 35px !important;
        margin: 0 !important;
    }

    .md-mobile-bottom-section .md-mobile-lang-submenu li a {
        padding: 8px 7px;
        font-size: 14px;
    }
}