/* =========================================================
   PROPERTY SEARCH HEADER
   ========================================================= */

.search-header {
    width: 100%;
    height: 80px;

    padding: 0 50px;

    display: flex;
    align-items: center;

    position: sticky;
    top: 0;

    z-index: 10000;

    background: #fff;

    border-bottom: 1px solid rgba(0,0,0,.06);

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   LEFT LOGO
   ========================================================= */

.search-header-left {
    width: 46px;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.search-header-left .site-logo {
    display: flex;
    align-items: center;

    width: 46px;
    height: 46px;
}

.search-header-left .site-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   CENTER TOOLBAR
   ========================================================= */

.search-header-center {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 50px;
}


/* =========================================================
   RIGHT MENU
   ========================================================= */

.search-header-right {
    width: 46px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-shrink: 0;
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

.search-header-right .menu-toggle {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #111;
    color: #fff;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}

.search-header-right .menu-toggle:hover {
    background: #292929;
}

.search-header-right .menu-toggle:active {
    transform: scale(.96);
}

.search-header-right .menu-toggle .material-symbols-outlined {
    font-size: 22px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1250px) {

    .search-header {
        padding: 0 50px;
    }

    .search-header-center {
        padding: 0 10px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .search-header {
        height: 82px;
        padding: 0 25px;
    }

    .search-header-center {
        display: none;
    }

}


/* =========================================================
   SEARCH PAGE — MOBILE HEADER FIX
   Applies ONLY to the MLS/search page.
   ========================================================= */

@media (max-width: 900px) {

    body.search-page .search-header {
        display: flex !important;

        width: 100%;
        height: 64px;

        padding: 0 25px;

        position: sticky;
        top: 0;

        z-index: 10000;

        background: #fff;

        box-sizing: border-box;
    }

    body.search-page .search-header-left {
        display: flex !important;

        width: auto;
        flex: 1;

        align-items: center;
    }

    body.search-page .search-header-left .site-logo {
        display: flex !important;

        width: 42px;
        height: 42px;
    }

    body.search-page .search-header-center {
        display: none !important;
    }

    body.search-page .search-header-right {
        display: flex !important;

        width: auto;

        align-items: center;
        justify-content: flex-end;
    }

    body.search-page .search-header-right .menu-toggle {
        display: flex !important;

        width: 32px !important;
        height: 32px !important;

        align-items: center;
        justify-content: center;

        padding: 0 !important;

        color: #171717 !important;
    }

    body.search-page .search-header-right
    .menu-toggle .material-symbols-outlined {
        display: block !important;

        font-size: 25px !important;
        line-height: 1;
    }

}


/* =========================================================
   MLS SEARCH PAGE — HIDE HEADER ON MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body.search-page > .search-header {
        display: none !important;
    }

    body.search-page > .mobile-menu-overlay {
        display: none;
    }

}

