/* Language menu and language suggestion of the homepage and pricing, in every locale (#513). */
:root { --lang-border:#d5dcea; --lang-surface:#fff; --lang-ink:#0d1838; --lang-soft:#eef2fb; --lang-link:#2450e0; }
[data-theme=dark] { --lang-border:#3b4c6d; --lang-surface:#141f35; --lang-ink:#edf2ff; --lang-soft:#1c2943; --lang-link:#a9bcff; }

.lang-menu { position:relative; display:inline-flex; flex:none; }
.lang-menu-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--lang-border); border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:650; letter-spacing:.02em; cursor:pointer; touch-action:manipulation; }
.lang-menu-button:hover, .lang-menu-button[aria-expanded=true] { background:var(--lang-soft); }
.lang-menu-button svg { width:20px; height:20px; flex:none; }
.lang-menu-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lang-menu-list { position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; min-width:184px; margin:0; padding:6px; list-style:none; border:1px solid var(--lang-border); border-radius:12px; background:var(--lang-surface); box-shadow:0 12px 32px #0d183829; }
/* An item keeps the list's alignment; its own dir only orders the words inside it. */
.lang-menu-list a { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:8px; color:var(--lang-ink); font-size:15px; text-decoration:none; touch-action:manipulation; direction:inherit; }
.lang-menu-list a:hover, .lang-menu-list a:focus-visible { background:var(--lang-soft); text-decoration:none; }
.lang-menu-list a[aria-current=page] { font-weight:700; }
.lang-menu-list a[aria-current=page]::after { content:"\2713"; margin-inline-start:auto; color:var(--lang-link); }

.lang-suggest { display:flex; align-items:center; justify-content:center; gap:8px; padding:4px 16px; padding-inline-end:4px; background:var(--lang-soft); color:var(--lang-ink); font-size:15px; }
.lang-suggest a { display:inline-flex; align-items:center; min-height:44px; color:var(--lang-link); font-weight:650; touch-action:manipulation; }
.lang-suggest button { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:inherit; font-size:22px; line-height:1; cursor:pointer; touch-action:manipulation; }
.lang-suggest button:hover { background:var(--lang-surface); }

.lang-links { display:none; }
.lang-links a { display:flex; align-items:center; min-height:44px; touch-action:manipulation; direction:inherit; }
.lang-links a[aria-current=page] { font-weight:700; }

@media (max-width:640px) {
    .lang-menu-code { display:none; }
    .lang-menu-button { padding:0; }
    /* Under the header across the screen, as the account menu opens, so no item leaves the screen. */
    .lang-menu-list { position:fixed; top:calc(70px + env(safe-area-inset-top)); inset-inline:12px; min-width:0; }
}
/* Too narrow for the button: the same choice sits in the hamburger menu. */
@media (max-width:480px) {
    .nav-cta-cluster > .lang-menu { display:none; }
    .nav-drawer .lang-links { display:grid; align-self:stretch; margin-top:6px; padding-top:6px; border-top:1px solid var(--lang-border); }
}
/* With the button, a signed-in header wraps the brand below 414 px. */
@media (max-width:413px) {
    .uf-nav-actions > .lang-menu { display:none; }
    .uf-nav-links .lang-links { display:grid; margin-top:6px; padding-top:6px; border-top:1px solid var(--lang-border); }
}