/* Language dropdown with flags (markup generated by nginx/build-site.mjs). */
.lang-switch { position: relative; }
.lang-menu { position: relative; }
.lang-menu summary {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; list-style: none; cursor: pointer;
  border: 1px solid #1e2940; border-radius: 8px; color: #eef1f7; user-select: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; font-weight: 600;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: #2f3f63; background: #0f1626; }
.lang-menu summary:focus-visible { outline: 2px solid #e0a526; outline-offset: 3px; }
.lang-menu .chevron { color: #8592ab; transition: transform 0.15s; }
.lang-menu[open] .chevron { transform: rotate(180deg); }

.flag {
  flex: none; display: block; width: 20px; height: 14px; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.flag svg { display: block; width: 100%; height: 100%; }

.lang-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 168px;
  margin: 0; padding: 6px; list-style: none;
  background: #0f1626; border: 1px solid #2a3753; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
/* Set by lang-menu.js when a right-aligned list would leave the screen (e.g. wrapped mobile header). */
.lang-list.align-left { right: auto; left: 0; }
.lang-list li { margin: 0; font-size: inherit; }
.lang-list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.3; color: #c3cbdb; text-decoration: none;
}
.lang-list a:hover, .lang-list a:focus-visible { background: #1e2940; color: #ffffff; outline: none; }
.lang-list a[aria-current] { color: #eef1f7; font-weight: 600; }
.lang-list a[aria-current]::after {
  content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #e0a526;
}

@media (prefers-reduced-motion: reduce) { .lang-menu .chevron { transition: none; } }