/* Language menu in the header of every page: a <details> dropdown showing the current language. */
.langs { position: relative; font-size: 15px; line-height: 1.2; }
.langs summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 11px; border: 1px solid #E8E3F1; border-radius: 999px;
  background: #fff; color: #2A2230; font-weight: 500;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover { border-color: #BDB1DC; }
.langs summary:focus-visible { outline: 2px solid #6D4C6F; outline-offset: 2px; }
.langs svg { width: 16px; height: 16px; flex: none; }
.langs .chev { width: 12px; height: 12px; transition: transform .15s; }
.langs[open] .chev { transform: rotate(180deg); }
.langs ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #E8E3F1; border-radius: 16px;
  box-shadow: 0 14px 34px rgba(42, 34, 48, .16);
}
.langs li { margin: 0; }
.langs a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px; color: #2A2230; text-decoration: none;
}
.langs a:hover { background: #EFE6F0; }
.langs a[aria-current="page"] { font-weight: 650; color: #5E3F60; }
.langs a[aria-current="page"]::after { content: "✓"; }