/* Language names retain their own script font on both LTR and RTL pages.
   Keep the existing language-link specificity so country CSS remains overridable. */
@font-face {
    font-family: "droid";
    src: url(/assets/fonts/droid/DroidKufi-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "droid";
    src: url(/assets/fonts/droid/DroidKufi-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.new-header .top-bar .languages a:where([lang="ar"]) {
    font-family: "droid", var(--ereg-font-family, sans-serif);
    /* Droid glyphs sit below the centre of their line box. */
    top: -3px;
}

/* Mobile language dropdown */
.language-dropdown .selector b {
    margin-inline-end: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}
.language-dropdown .options {
    top: calc(100% + 6px);
    /* Keep every option above the mobile homepage hero (#Diapo: 1020). */
    z-index: 1021;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-small, 8px);
    box-shadow: 0 6px 20px rgba(var(--gray-1000-rgb), .12);
}
.new-header .top-bar .language-dropdown :where(.options) a {
    align-items: center;
    height: 40px;
    padding: 8px 6px;
    border-radius: var(--radius-xsmall);
    font-size: 14px;
    line-height: 22px;
}
.language-dropdown .options a:where([aria-current="true"]) {
    background-color: var(--gray-100);
}
.language-dropdown .options a:hover {
    background-color: var(--gray-200);
}
.language-dropdown :is(.selector, .options a):focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.new-header .top-bar .language-dropdown {
    display: none;
}

@media (max-width: 767px) {
    .new-header .top-bar .content:where(:has(.language-dropdown)) {
        flex-direction: row;
        gap: 12px;
        padding-block: 4px;
    }

    .new-header .top-bar .content:where(:has(.language-dropdown)) .slogan {
        width: auto;
        min-width: 0;
        padding-block: 0;
    }

    .new-header .top-bar .content:where(:has(.language-dropdown)) .desktop-languages {
        display: none;
    }

    .new-header .top-bar .content .language-dropdown {
        display: block;
        width: auto;
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    .language-dropdown .selector,
    .new-header .top-bar .language-dropdown :where(.options) a {
        min-height: 44px;
        height: auto;
    }

    .language-dropdown .selector {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border: 0;
        background-color: transparent;
        color: var(--header-top-bar-text, var(--gray-1000));
        text-align: start;
        cursor: pointer;
    }

    .language-dropdown .selector b {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .language-dropdown .language-caret {
        font-size: 20px;
    }

    .language-dropdown.open .language-caret {
        transform: rotate(180deg);
    }

    .language-dropdown .options {
        inset-inline: auto 0;
        min-width: 160px;
        max-width: calc(100vw - 30px);
        max-height: 60vh;
        overflow-y: auto;
        background-color: var(--gray-0);
    }

    .new-header .top-bar .language-dropdown :where(.options) a {
        display: flex;
        top: auto;
        margin: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .language-dropdown :where(b[lang="ar"]) {
        font-family: "droid", var(--ereg-font-family, sans-serif);
    }
}