/* Header language menu: native <details>, last item of the header's first row.
   Logical properties keep it at the row end in RTL; site colors only. */
.lang-menu { position: relative; flex: none; }
.lang-menu__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-weight: 600;
  white-space: nowrap; list-style: none; cursor: pointer; user-select: none; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 999px; }
.lang-menu__btn::-webkit-details-marker { display: none; }
.lang-menu__btn:hover, .lang-menu[open] > .lang-menu__btn { border-color: var(--navy); }
.lang-menu__short { display: none; }
.lang-menu__caret { transition: transform 0.2s; }
.lang-menu[open] .lang-menu__caret { transform: rotate(180deg); }
.lang-menu__list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30; display: grid;
  grid-template-columns: repeat(2, max-content); gap: 2px; width: max-content; margin: 0; padding: 8px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.lang-menu__list a { display: block; padding: 8px 12px; white-space: nowrap; text-decoration: none; border-radius: 10px; }
.lang-menu__list a:hover { background: rgba(29, 154, 138, 0.08); color: var(--navy); }
.lang-menu__list a[aria-current] { font-weight: 700; background: var(--cream); box-shadow: inset 0 0 0 1px var(--coral); }

@media (max-width: 600px) {
  .lang-menu { position: static; }
  .lang-menu__btn { gap: 4px; padding: 6px 10px; }
  .lang-menu__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang-menu__short { display: inline; }
  .lang-menu__list { top: 100%; inset-inline: 0; width: auto; grid-template-columns: repeat(2, 1fr);
    padding: 8px 16px 12px; border-radius: 0; }
}

/* Phones: brand and language menu share the first row (menu at the row end);
   the Tools menu takes the second row so long labels never push the menu down. */
@media (max-width: 480px) {
  .lang-menu { margin-inline-start: auto; }
  .tools-menu { order: 1; flex-basis: 100%; margin-inline-start: 0; }
  .tools-menu > summary { width: fit-content; }
}