/* TORCommunity mobile navigation: local, dependency-free off-canvas UI. */
.tor-mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .tor-mobile-menu,
    .tor-mobile-menu * {
        box-sizing: border-box;
    }

    .tor-mobile-menu {
        display: block;
    }

    .tor-mobile-trigger {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-size: 24px;
        height: 42px;
        justify-content: center;
        left: 4px;
        margin: 0;
        min-width: 42px;
        padding: 0;
        position: fixed;
        text-shadow: none;
        top: 4px;
        width: 42px;
        z-index: 1080;
    }

    body.body-overlay-dark .tor-mobile-trigger {
        top: 4px;
    }

    body.body-overlay-light .tor-mobile-trigger {
        background: transparent;
        color: #fff;
    }

    #rt-top .customgr-header {
        padding-left: 50px;
    }

    .tor-mobile-trigger-icon {
        line-height: 1;
        margin: 0;
    }

    .tor-mobile-trigger:focus,
    .tor-mobile-close:focus,
    .tor-mobile-submenu-toggle:focus,
    .tor-mobile-link:focus {
        outline: 3px solid #f5b942;
        outline-offset: -3px;
    }

    .tor-mobile-backdrop {
        background: rgba(0, 0, 0, 0.62);
        border: 0;
        bottom: 0;
        cursor: pointer;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity 180ms ease;
        width: 100%;
        z-index: 1090;
    }

    .tor-mobile-drawer {
        background: #242424;
        bottom: 0;
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55);
        color: #eee;
        left: 0;
        max-width: 360px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: none;
        position: fixed;
        top: 0;
        transform: translate3d(-100%, 0, 0);
        transition: transform 220ms ease;
        visibility: hidden;
        width: 86vw;
        z-index: 1100;
        -webkit-overflow-scrolling: touch;
    }

    .tor-mobile-menu.is-open .tor-mobile-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .tor-mobile-menu.is-open .tor-mobile-drawer {
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    .tor-mobile-header {
        align-items: center;
        background: #1a1a1a;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: space-between;
        min-height: 58px;
        padding: 0 8px 0 18px;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .tor-mobile-header h2 {
        color: #d4d4d4;
        font-size: 18px;
        line-height: 1.25;
        margin: 0;
        padding: 0;
    }

    .tor-mobile-close,
    .tor-mobile-submenu-toggle {
        align-items: center;
        background: transparent;
        border: 0;
        color: #eee;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 46px;
        height: 46px;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    .tor-mobile-nav,
    .tor-mobile-list,
    .tor-mobile-item {
        margin: 0;
        max-width: 100%;
        padding: 0;
        width: 100%;
    }

    .tor-mobile-list {
        list-style: none;
    }

    .tor-mobile-submenu {
        background: rgba(0, 0, 0, 0.12);
    }

    .tor-mobile-submenu[hidden],
    .tor-mobile-backdrop[hidden] {
        display: none !important;
    }

    .tor-mobile-item-row {
        align-items: stretch;
        background: #353535;
        border-bottom: 1px solid #000;
        display: flex;
        min-height: 46px;
        width: 100%;
    }

    .tor-mobile-item-row:hover,
    .tor-mobile-item.current > .tor-mobile-item-row,
    .tor-mobile-item.active > .tor-mobile-item-row {
        background: #2a2a2a;
    }

    .tor-mobile-link {
        align-items: center;
        color: #eee;
        display: flex;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.35;
        min-height: 46px;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: 11px 12px 11px calc(14px + (var(--tor-menu-depth, 0) * 14px));
        text-decoration: none;
        white-space: normal;
        word-break: normal;
    }

    .tor-mobile-link:hover,
    .tor-mobile-link:active {
        color: #fff;
        text-decoration: none;
    }

    .tor-mobile-heading {
        cursor: default;
        font-weight: 600;
    }

    .tor-mobile-list[data-depth="1"] .tor-mobile-link { --tor-menu-depth: 1; }
    .tor-mobile-list[data-depth="2"] .tor-mobile-link { --tor-menu-depth: 2; }
    .tor-mobile-list[data-depth="3"] .tor-mobile-link { --tor-menu-depth: 3; }
    .tor-mobile-list[data-depth="4"] .tor-mobile-link { --tor-menu-depth: 4; }
    .tor-mobile-list[data-depth="5"] .tor-mobile-link { --tor-menu-depth: 5; }

    .tor-mobile-submenu-toggle {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .tor-mobile-submenu-icon {
        transition: transform 160ms ease;
    }

    .tor-mobile-submenu-toggle[aria-expanded="true"] .tor-mobile-submenu-icon {
        transform: rotate(180deg);
    }

    .tor-mobile-home-icon,
    .tor-mobile-menu-image {
        flex: 0 0 auto;
        margin-right: 9px;
        max-height: 24px;
        max-width: 24px;
    }

    body.tor-mobile-menu-open {
        overflow: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tor-mobile-backdrop,
    .tor-mobile-drawer,
    .tor-mobile-submenu-icon {
        transition: none !important;
    }
}