/* Language selector of the header: a native <details> menu, so that the links to the
   other languages are in the page without JavaScript. */
.language-switcher {
  position: relative;
}

.language-switcher summary {
  cursor: pointer;
  list-style: none;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.language-switcher[open] summary {
  border-color: #353636;
}

.language-switcher ul {
  background: #fff;
  border: 1px solid #dde1e9;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(8, 40, 50, 0.12);
  list-style: none;
  margin: 4px 0 0;
  min-width: 100%;
  padding: 4px;
  position: absolute;
  right: 0;
  z-index: 20;
}

.language-switcher li a,
.language-switcher li a:visited {
  border-radius: 6px;
  color: #353636;
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  white-space: nowrap;
}

.language-switcher li a:hover {
  background: #f1f5f8;
  color: #148BBF;
}

/* The menu opens over the article hero that follows the header. */
header:has(.language-switcher) {
  position: relative;
  z-index: 30;
}

/* On small screens the desktop actions are hidden: the same menu sits in the top bar,
   in front of the menu button, with the language code as its label. */
.language-switcher--compact {
  display: none;
  margin-left: auto;
}

@media (max-width: 1099px) {
  .language-switcher--compact {
    display: block;
  }

  .language-switcher--compact summary {
    padding: 0 12px;
  }

  .language-switcher--compact + .header__menu-toggle {
    margin-left: 8px;
  }
}