/* Site language selector (home/includes/language_selector.html).
   Tokens only (--ds-*, seo/css/ds-tokens.css); spacing on the 4px grid; every
   control is at least 44px tall. The language names are never truncated: a
   visitor who cannot read the page must still find their own language. */
.language-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  margin: 0;
  font-family: var(--ds-font-sans);
  color: var(--ds-ink);
}
.language-selector__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0;
  font-size: var(--ds-font-size-label);
  line-height: var(--ds-line-height-label);
  font-weight: 600;
  color: var(--ds-ink);
}
.language-selector__label .material-icons-outlined {
  flex: none;
  font-size: 20px;
  color: var(--ds-ink-soft);
}
.language-selector__select {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-card);
  color: var(--ds-ink);
  font: inherit;
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}
.language-selector__submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-card);
  color: var(--ds-ink);
  font: inherit;
  font-size: var(--ds-font-size-label);
  line-height: var(--ds-line-height-label);
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.language-selector__submit:hover { background: var(--ds-surface); }
.language-selector__submit .material-icons-outlined { flex: none; font-size: 20px; }
.language-selector__select:focus-visible,
.language-selector__submit:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

/* Discovery header: icon label, the select and a confirm button on one line,
   between the section links and the page action. */
.language-selector--compact { flex-wrap: nowrap; gap: var(--ds-space-2); }
.language-selector--compact .language-selector__label,
.language-selector--compact .language-selector__submit { position: relative; }
.language-selector--compact .language-selector__submit { padding: var(--ds-space-2); }
.discovery-header__language { display: flex; align-items: center; min-height: 44px; margin-left: auto; }
.discovery-header__language + .discovery-header__cta { margin-left: 0; }

@media (max-width: 812px) {
  /* Below the desktop breakpoint the header wraps: logo and action first, the
     section links next, the language selector on its own last line. */
  .discovery-header__language { order: 4; flex-basis: 100%; margin-left: 0; }
  .discovery-header__language + .discovery-header__cta { margin-left: auto; }
}