/* Language switcher override.
 *
 * Renders the current locale as a text button ("English ▾" or
 * "Bahasa Indonesia ▾") instead of the default globe icon. The
 * current locale appears inside the dropdown as a non-link with
 * subdued styling. The hover/active states mirror Zensical's
 * existing .md-header__button affordance.
 */

.md-header__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.4rem 0.6rem;
  text-transform: none;
  white-space: nowrap;
}

.md-header__lang-label {
  letter-spacing: 0;
}

.md-header__lang-chevron {
  height: 0.85rem;
  width: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.25s, opacity 0.25s;
}

.md-header__lang:hover .md-header__lang-chevron,
.md-header__lang:focus-within .md-header__lang-chevron {
  opacity: 1;
}

/* Inherit Zensical's button hover treatment so the text button looks
   like the other header controls. */
.md-header__lang .md-header__button {
  border-radius: 0.4rem;
}

.md-header__lang .md-header__button:hover,
.md-header__lang .md-header__button:focus {
  background-color: var(--md-default-fg-color--lightest);
  opacity: 1;
}

/* Current-locale entry inside the dropdown: a span, not a link.
   No underline on hover, no pointer, subdued color. */
.md-select__link--current {
  color: var(--md-default-fg-color--light);
  cursor: default;
  font-weight: 500;
}

.md-select__link--current:focus,
.md-select__link--current:hover {
  color: var(--md-default-fg-color--light);
  background-color: transparent;
}