/*
 * Language menu shared by the public pages (passport, login) and the landing page.
 * Colours come from the page's design tokens where it has them (light and dark mode on the
 * public pages); the fallbacks are the light values for pages without tokens.
 */

.language-menu {
    position: relative;
}

.language-menu summary {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--brand, #425057);
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.language-menu summary::-webkit-details-marker {
    display: none;
}

.language-menu summary:hover,
.language-menu[open] summary {
    background: var(--background, #eef2f3);
}

.language-menu .icon {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.language-menu .globe-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.language-menu .chevron-icon {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.15s ease;
}

.language-menu[open] .chevron-icon {
    transform: rotate(180deg);
}

.language-list {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 10;
    min-width: 11rem;
    margin: 0;
    padding: 0.375rem;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d5dee1);
    border-radius: 0.5rem;
    box-shadow: var(--menu-shadow, 0 0.5rem 1.5rem rgb(31 42 48 / 0.12));
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: none;
}

.language-list a {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--text, #1f2a30);
    text-decoration: none;
}

.language-list a:hover {
    background: var(--background, #eef2f3);
}

.language-list a[aria-current] {
    color: var(--brand, #425057);
    font-weight: 600;
}

.language-code {
    color: var(--muted, #5d6b72);
    font-size: 0.75rem;
    font-weight: 600;
}

.language-menu summary:focus-visible,
.language-list a:focus-visible {
    outline: 3px solid var(--accent, #82b1bc);
    outline-offset: 2px;
}