/*-------------------------------------------------------------
- Projects (Sterling) - Mobile Facet Menu + Buttons
-
- This is intentionally modular so it can be moved between sites
- without dragging along the Projects list/single styles.
-------------------------------------------------------------*/

/* Default: hide triggers everywhere (prevents "desktop" leakage). */
a.mobile_facet_trigger,
a.mobile_facet_bottom_button,
a.mobile_facet_side_button{
    display: none !important;
}

/* Facet menu container (only becomes visible/interactive on mobile). */
.project_facet_filter.mobile_facet_menu{
    display: block !important;
    position: absolute;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    background: #fff;
    right: -100%;
    padding-top: 65px;
    top: 0;
    width: auto !important;
    transition: right .2s ease-out, top .2s ease-out, width .2s ease-out, height .2s ease-out;
}
.project_facet_filter.mobile_facet_menu.open{ right: -20px; }
.project_facet_filter.mobile_facet_menu.closed{
    right: -100%;
    transition: right .2s ease-in, top .2s ease-out, width .2s ease-out, height .2s ease-out;
}

/* Buttons */
.mobile_facet_bottom_buttom_wrapper{
    margin: 0 0 20px;
}
a.mobile_facet_bottom_button{
    z-index: 9999999;
    padding: 6px 20px;
    color: #fff;
}
a.mobile_facet_trigger.mobile_facet_bottom_button.open{
    background: #3f77af !important;
}
a.mobile_facet_trigger.mobile_facet_bottom_button.closed{
    background: #004987 !important;
}

/* Side "Close" trigger inside the menu */
.mobile_facet_menu a.mobile_facet_trigger{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 32px;
    color: #000;
    padding: 20px 25px;
}
a.mobile_facet_side_button{
    position: absolute;
    top: 260px;
    padding: 10px;
    left: -45px;
    background: #B2482c;
    color: #fff;
    transform: rotate(270deg);
    transform-origin: left top 0;
    font-size: 20px;
}
a.mobile_facet_bottom_button:hover,
a.mobile_facet_side_button:hover{
    color: #fff;
}

/* Mobile breakpoint: show triggers + optionally hide legacy desktop filter trigger */
@media screen and (max-width: 959px) {
    a.mobile_facet_trigger,
    a.mobile_facet_bottom_button,
    a.mobile_facet_side_button{
        display: inline-block !important;
    }
    .filter_trigger{
        display: none;
    }
}