/* Language menu in the header, language links in the footer, and the suggestion bar.
   The markup is generated by tools/i18n/i18n.py build. */

.lang-menu { position: relative; flex: none; }
.lang-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); font-size: 14px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--bg-2); color: var(--ink); }
.lang-menu summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.lang-menu svg, .foot-langs svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang-code { display: none; font-weight: 600; font-size: 13px; }
.lang-menu ul { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 1px 1px rgb(0 0 0 / .04), 0 8px 24px -8px rgb(0 0 0 / .12), 0 40px 80px -40px rgb(0 0 0 / .25); }
.lang-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 15px; text-decoration: none; }
.lang-menu a:hover { background: var(--bg-2); }
.lang-menu a[aria-current] { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.lang-menu a[aria-current]::after { content: ""; width: 12px; height: 7px; margin-left: auto; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.nav-row .lang-menu + .theme-toggle { margin-left: -24px; }
.nav-row .brand + .lang-menu { margin-left: auto; }
@media (max-width: 760px) {
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .nav-row .lang-menu { margin-left: auto; }
  .nav-row .lang-menu + .theme-toggle { margin-left: -24px; }
}

.foot-langs { padding-block: 0 28px; }
.foot-langs nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); }
.foot-langs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.foot-langs a:hover { color: var(--ink); }
.foot-langs a[aria-current] { background: var(--ink); color: var(--bg); font-weight: 600; }

/* Fixed to the bottom so it never pushes the page down (no layout shift). */
.lang-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px max(16px, calc((100vw - 1120px) / 2)) max(10px, env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.lang-bar p { margin: 0; flex: 1 1 240px; }
.lang-bar a, .lang-bar button { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.lang-bar a { background: var(--ink); color: var(--bg); }
.lang-bar button { border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); }
.lang-bar a:hover, .lang-bar button:hover { opacity: .86; }
.lang-bar a:focus-visible, .lang-bar button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .lang-menu summary { transition: none; } }
@media print { .lang-menu, .foot-langs, .lang-bar { display: none; } }