/* Language toggle (EN | ES) — minimal, unobtrusive header link.
   Designed to drop into any page header. No framework. No conflicts with
   app.css or dashboard.css. */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--ffc-gray);
  user-select: none;
}

.lang-toggle__btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  /* min 44px to meet DESIGN_SPEC.md touch-target rule */
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}

.lang-toggle__btn:hover,
.lang-toggle__btn:focus-visible {
  color: var(--ffc-black);
}

.lang-toggle__btn:focus-visible {
  outline: 2px solid var(--ffc-blue);
  outline-offset: 2px;
}

.lang-toggle__btn.is-active {
  color: var(--ffc-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.lang-toggle__sep {
  color: var(--ffc-gray);
  opacity: 0.6;
  font-weight: 400;
  padding: 0 2px;
}

/* When the toggle lives inside the landing page header, give it a little
   breathing room before the Donate CTA. */
.site-header__nav .lang-toggle,
.header-nav .lang-toggle {
  margin-right: 4px;
}