/* Select Languages */
.select-language {
  width: 100%;
  text-align: right;
  background-color: var(--color-bg-dark);
}

.select-language {
  display: block;
  width: 100%;
  text-align: right;
}

.select-language form {
  display: inline;
  margin: 0;
}

.lang-btn {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 3px 8px;
  margin-left: 6px;
  cursor: pointer;
  font: inherit;
}

/* hover effect */
.lang-btn:hover {
  background: var(--color-accent);
  color: var(--color-bg-dark);
}

/* current language */
.lang-btn.active {
  background: var(--color-accent);
  color: var(--color-bg-dark);
  font-weight: bold;
}

/* this never shrank at any breakpoint before -- at extreme zoom the
   buttons (font: inherit, no cap) eventually become individually wider
   than the effective viewport, which wrapping alone can't fix since each
   is one unbreakable inline-block token */
@media (max-width: 700px) {
  .lang-btn {
    padding: 2px 6px;
    font-size: 14px;
  }
}

/* the two-button row is the default everywhere -- .select-language-dropdown
   (the <details> version) stays hidden until the 480px block below swaps
   which one is shown. */
.select-language-dropdown {
  display: none;
}

@media (max-width: 480px) {
  /* overlaid in the corner instead of sitting in normal flow -- as a full-
     width block above .header-bar (its default), this pushed the title
     down by its own height. .topheader-content (page_layout.css) is the
     positioning context. */
  .select-language {
    position: absolute;
    top: 4px;
    right: 0.6rem;
    width: auto;
    z-index: 1;
  }

  .select-language-buttons {
    display: none;
  }

  .select-language-dropdown {
    display: inline-block;
    text-align: right;
  }

  /* .lang-btn (shared with the trigger via a second class in the HTML)
     already supplies the border/color/padding/font-size, so this is only
     the bits specific to it being a <summary> -- matches "the original
     menu"'s look exactly instead of a second, separately-tuned color. */
  .lang-dropdown-trigger {
    display: inline-block;
    cursor: pointer;
    list-style: none;
  }

  .lang-dropdown-trigger::-webkit-details-marker {
    display: none;
  }

  /* same caret pattern used by the other dropdowns on the site (see
     .dropdown-menu .link::after in dropdownmenu.css, .sidemenu-item
     .sidemenu-option::after in sidemenu.css) -- signals this is a
     dropdown now that the native marker above is suppressed, and flips
     when <details> is actually open. */
  .lang-dropdown-trigger::after {
    content: "";
    display: inline-block;
    margin-left: 0.35em;
    border: 0.45em solid transparent;
    border-top-color: currentColor;
    vertical-align: middle;
    transition: transform 0.15s ease;
  }

  .select-language-dropdown[open] .lang-dropdown-trigger::after {
    transform: rotate(180deg);
  }

  .lang-dropdown-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 4px;
  }

  .lang-btn {
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 11px;
  }
}