/* The supplied logo file carries a lot of transparent padding around the
   lockup (content box 4740x1105 inside 5551x2422), so at its natural ratio
   the image reserves roughly twice the height it visibly needs. Giving the
   element the lockup's own ratio and letting the image cover it trims that
   padding at display time, which keeps the header compact without the file
   itself being touched. The `a img` selector outranks post-766.css, which
   loads later and caps the logo at 120px. */
.xb-header__logo a img {
    width: 290px;
    max-width: none;
    aspect-ratio: 4.29;
    object-fit: cover;
}

.xb-logo-mobile a img {
    width: 250px;
    max-width: 100%;
    aspect-ratio: 4.29;
    object-fit: cover;
}

/* The compact mobile header bar is only ~44px tall. */
@media (max-width: 991.98px) {
    .xb-header__logo a img {
        width: 150px;
    }
}

/* Header row: the theme lets this flex row wrap, which drops the Contact Us
   button onto a line of its own as soon as the menu runs out of room. */
.xb-header__wrap .ul_li_between {
    flex-wrap: nowrap;
}

.xb-header__wrap .xb-header__logo,
.xb-header__wrap .xb-header__right {
    flex-shrink: 0;
}

/* The theme reserves 80px beside the logo, sized for the old 120px mark. */
.xb-header__wrap .xb-header__logo {
    padding-right: 16px;
}

.xb-header__wrap .xb-header__right .xb-btn {
    white-space: nowrap;
}

/* The menu list wrapped too, dropping the AR/EN switcher to its own line. */
.xb-header__wrap #main-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Tighter gaps buy back the room the row needs to stay on one line once the
   logo is at its full size. */
.xb-header__wrap #main-nav > li {
    margin-right: 26px;
}

.xb-header__wrap .xb-header__btn.ml-70 {
    margin-left: 24px;
}

/* Below this the desktop menu cannot fit on one line at any spacing, so hand
   over to the theme's burger menu instead of wrapping. */
@media (max-width: 1365.98px) {
    .xb-header__wrap .main-menu.navbar-collapse {
        display: none !important;
    }

    .xb-header__wrap .header-bar.d-lg-none {
        display: block !important;
    }

    /* The burger menu already carries its own Contact Us entry, so the
       standalone button folds away with the rest of the navigation. */
    .xb-header__wrap .xb-header__right {
        display: none !important;
    }
}

/* Keep the Saudi number on one line on every screen. */
.elementor-element-71582ab .elementor-icon-box-description {
    white-space: nowrap;
}

/* ------------------------------------------------- language switcher */
/* Replaces the GTranslate widget: two plain links, one per language
   version of the current page. Sits inside the menu as its own item. */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: ltr;
}

/* The theme gives every menu link 33px of vertical padding, and that is what
   sets the row height. The switcher is a div rather than a link, so it kept
   its own 24px height and rode at the top of the row instead of sitting on
   the same line as the menu text. Centring it inside its own list item lines
   it up at whatever height the header happens to be, so nothing here depends
   on that 33px. The menu ids are needed to outrank the theme's own rules. */
#main-nav > li:has(> .lang-switch),
#mobile-main-nav > li:has(> .lang-switch),
.xb-header__wrap .xb-menu-primary > li:has(> .lang-switch) {
    display: flex;
    align-items: center;
}

/* The theme styles its menu links through #main-nav / #mobile-main-nav, so
   every plain class here loses on specificity and the link falls back to
   display:block, which stacks the flag above its label. Forcing the few
   properties that matter is simpler than chasing both menu ids plus the
   sticky header's clone of them. */
.lang-switch__item {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.lang-switch__item:hover,
.lang-switch__item.is-active {
    opacity: 1;
}

.lang-switch__item.is-active {
    font-weight: 700;
}

.lang-switch__item img {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.lang-switch__item span {
    font-size: 15px;
    line-height: 1;
}