/**
 * Header / footer built in "بناء الهيدر والفوتر": three places per row (right, middle, left), sticky header.
 * The elements keep the theme's own classes and styles (main.css).
 *
 * @package Medora
 */

/* the sides (right / left) are as wide as what is in them, side by side; the middle takes the rest */
.mb-lb-zones {
    display: flex;
    align-items: center;
    gap: 16px 24px;
}

.mb-lb-zone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 20px;
    min-width: 0;
}

.mb-lb-zone--start { flex: 0 0 auto; justify-content: flex-start; }
.mb-lb-zone--center { flex: 1 1 auto; justify-content: center; }
.mb-lb-zone--end { flex: 0 0 auto; justify-content: flex-end; }

/* a row whose middle place is empty: its sides go to the two ends */
.mb-lb-zones:has(> .mb-lb-zone--center:empty) {
    justify-content: space-between;
}

.mb-lb-zones:has(> .mb-lb-zone--center:empty) > .mb-lb-zone--center {
    display: none;
}

/* narrower screens: a side with many things may go on two lines instead of pushing the page */
@media (min-width: 992px) and (max-width: 1199px) {
    .mb-lb-zone--start,
    .mb-lb-zone--end { flex: 0 1 auto; flex-wrap: wrap; }
}

/* mega menu: the wide panel opens right under its own row, as wide as the page container (like the theme's header) */
body.rc-dd-mega .mb-lb-header .mb-lb-zones {
    position: relative;
}

body.rc-dd-mega .mb-lb-header .mb-lb-zone,
body.rc-dd-mega .mb-lb-header .mb-lb-el--menu {
    position: static;
}

.mb-lb-el {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mb-lb-el--menu {
    flex: 0 1 auto;
}

.mb-lb-header .header-main-bar .mb-lb-zones {
    min-height: 80px;
}

.mb-lb-header .header-sub-bar .mb-lb-zones,
.mb-lb-header .header-top-bar .mb-lb-zones {
    min-height: 44px;
}

/* header button and text */
.mb-hbtn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff !important;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.mb-hbtn:hover {
    filter: brightness(0.95);
}

.mb-htext {
    font-size: 14px;
    line-height: 1.6;
}

.mb-htext p {
    margin: 0;
}

/* "always visible": the theme's header is fixed and hides while scrolling down; this keeps it shown */
.site-header.mb-lb-sticky.header-hidden {
    transform: none !important;
}

/* the page starts right under the built header, whatever its height (the theme's offset is made for its own header) */
html body.mb-lb-on .medora-breadcrumbs,
html body.mb-lb-on .main-content-area,
html body.mb-lb-on .medora-woocommerce-wrapper-page {
    margin-top: var(--mb-lb-h, 220px) !important;
}

html body.mb-lb-on .medora-breadcrumbs + .container .main-content-area,
html body.mb-lb-on .medora-breadcrumbs + .main-content-area,
html body.mb-lb-on .medora-breadcrumbs + main,
html body.mb-lb-on .medora-breadcrumbs + .medora-woocommerce-wrapper-page {
    margin-top: 0 !important;
}

/* footer */
.mb-lb-footer .footer-widget-column > .mb-lb-fel + .mb-lb-fel {
    margin-top: 22px;
}

@media (max-width: 991px) {
    /* the main bar like the theme's own header: logo, then the icons in one line, the menu button at the end */
    .mb-lb-row--main .mb-lb-zones,
    .mb-lb-row--bottom .mb-lb-zones {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mb-lb-row--main .mb-lb-zone--start { flex: 1 1 auto; }
    .mb-lb-row--main .mb-lb-zone--center { order: 3; flex: 0 0 auto; }
    .mb-lb-row--main .mb-lb-zone--end { flex: 0 0 auto; }

    .mb-lb-row--main .mb-lb-zone,
    .mb-lb-row--bottom .mb-lb-zone {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .mb-lb-row--bottom .mb-lb-zone--start { flex: 1 1 auto; min-width: 0; }
    .mb-lb-row--bottom .mb-lb-zone:empty { display: none; }
}

@media (max-width: 1024px) {
    /* phones and tablets: the top and bottom bars keep only what fits, like the theme's own header */
    .mb-lb-header .mb-lb-row--top .mb-lb-el--email,
    .mb-lb-header .mb-lb-row--top .mb-lb-el--location,
    .mb-lb-header .mb-lb-el--call {
        display: none;
    }

    .mb-lb-zones {
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .mb-lb-header .mb-lb-el--search {
        display: none;
    }

    .mb-lb-header .header-main-bar .mb-lb-zones {
        min-height: 64px;
    }

    .mb-lb-footer .footer-grid {
        --footer-cols: minmax(0, 1fr) !important;
    }
}