/*
 * Zameen News tweaks to this theme's own header so it matches the shared Zameen Header
 * (wp-content/mu-plugins/zameen-header-client.php): hamburger size and the sliding-menu close button.
 */

/* ---------- Page container (desktop only) ----------
 * This theme's own header, page content and footer use .container (1170px, no padding). Give it the same box as
 * the Zameen top nav / zameen.com header so all left and right edges line up: 1200px content above 1366px,
 * 1100px from 1025-1366px, 16px side padding from 1025-1200px. Mobile (<=1024px) keeps the theme's own rules.
 * Same as the blog (alia-child/assets/css/zameen-blog-header.css). The top nav uses .ztn-container, not .container.
 */
@media screen and (min-width: 1025px) {
    body .container {
        box-sizing: border-box;
        width: 1248px;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    body .container {
        width: 1148px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    body .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- 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;
}