/*
 * Zameen blog-only tweaks to the blog's own header, to match the shared Zameen Header
 * (wp-content/mu-plugins/zameen-header). Not part of the shared plugin because only this theme has these elements.
 */

/* ---------- Blog header hamburger (existing .header_sliding_sidebar_control) ----------
 * Same size and shape as the top-nav / live zameen.com hamburger (23x18). The Font Awesome
 * glyph is swapped for the same SVG via a mask, so it keeps the blog's colour (currentColor).
 */
@media screen and (max-width: 1024px) {
    .header_sliding_sidebar_control .header_control_icon.fa-bars {
        display: inline-block;
        width: 23px;
        height: 18px;
        vertical-align: middle;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 18'%3E%3Cpath d='M0 18H22.9091V15H0V18ZM0 10.5H22.9091V7.5H0V10.5ZM0 0V3H22.9091V0H0Z'/%3E%3C/svg%3E") no-repeat center / 23px 18px;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 18'%3E%3Cpath d='M0 18H22.9091V15H0V18ZM0 10.5H22.9091V7.5H0V10.5ZM0 0V3H22.9091V0H0Z'/%3E%3C/svg%3E") no-repeat center / 23px 18px;
    }

    .header_sliding_sidebar_control .header_control_icon.fa-bars::before {
        content: none;
    }
}

/* ---------- Blog sliding menu close button (button added in footer.php) ----------
 * Same cross as the top-nav drawer (14x14, #626262), on the logo line, aligned to the menu's right edge.
 */
.site_side_container .ztn-side-close {
    position: absolute;
    top: 44px;
    right: 30px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #626262;
    line-height: 0;
    cursor: pointer;
}

.site_side_container .ztn-side-close svg {
    display: block;
}

html[dir="rtl"] .site_side_container .ztn-side-close {
    right: auto;
    left: 30px;
}