/* Language picker, in the header's utility strip.

   BioHorizons only. The template ships no language control - its own note in _SiteHeaderChrome
   says as much - so this is a site file rather than an addition to site-utility-bar.css, and the
   template's copy of that stylesheet stays identical to this one's.

   Everything here reads the strip's own tokens (--su-fg, --su-fg-strong, --su-field-border) so the
   picker follows a re-theme with the rest of the strip rather than pinning its own colours. */

.site-language {
    position: relative;
}

/* ---------------------------------------------------------------------------
   Desktop - the dropdown
   --------------------------------------------------------------------------- */

.site-language__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.site-language__caret {
    font-size: .6rem;
    opacity: .7;
    transition: transform .15s ease;
}

.site-language__toggle[aria-expanded="true"] .site-language__caret {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-language__caret {
        transition: none;
    }
}

/* A light surface on a dark strip, so nothing in the menu inherits --su-fg. Matched to the account
   menu beside it, including the z-index that keeps it above the header. */
.site-language__menu {
    --bs-dropdown-min-width: 14rem;
    --bs-dropdown-font-size: .8125rem;
    z-index: 1050;
    color: var(--site-color-text, #344054);
}

.site-language__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-3, .75rem);
}

.site-language__item.is-current {
    font-weight: var(--site-font-weight-semibold, 600);
}

.site-language__flags {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex: none;
}

    /* Sized here rather than trusting the stored image: the flag files are nominally 24px but the
       menu should not change height if one of them is not. */
    .site-language__flags img {
        display: block;
        width: 1.125rem;
        height: auto;
        border-radius: 1px;
    }

/* ---------------------------------------------------------------------------
   Small screens - the flat row in the drawer block
   --------------------------------------------------------------------------- */

.site-language--drawer {
    display: flex;
    align-items: center;
    gap: var(--site-space-3, .75rem);
    flex-wrap: wrap;
}

.site-language__label {
    color: var(--su-fg);
    white-space: nowrap;
}

.site-language__row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Codes rather than names down here: five language names wrap to three lines on a phone, and the
   codes are what the URL prefix uses anyway. */
.site-language__code {
    display: inline-block;
    padding: .25rem .5rem;
    border: 1px solid var(--su-field-border);
    border-radius: var(--site-radius-small, 4px);
    color: var(--su-fg);
    font-size: .75rem;
    letter-spacing: .02em;
    text-decoration: none;
}

.site-language__code:hover,
.site-language__code:focus-visible {
    color: var(--su-fg-strong);
    border-color: var(--su-fg-strong);
    text-decoration: none;
}

.site-language__code.is-current {
    color: var(--su-fg-strong);
    border-color: var(--su-fg-strong);
    font-weight: var(--site-font-weight-semibold, 600);
}