/* ==========================================================================
   Dhakker — shared EN / ع / DE switcher for the standalone public pages
   (donate, donate/thank-you, download).

   Scope: the switcher control only. These pages each carry their own page CSS;
   this file exists so the control looks identical everywhere instead of being
   re-styled per page. Values mirror the same control in public/css/legal.css,
   which mirrors brand/tokens (Deep Green #0b2d26, Warm Ivory #f4f1ea,
   Light Gray #e5e7e6, Dark Gray #333f3c, Gold #c89a4b).
   ========================================================================== */

.lang-toggle {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 100;
  display: flex;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  background: #f4f1ea;
  border: 1px solid #e5e7e6;
  box-shadow: 0 2px 8px rgba(11, 45, 38, 0.06);
}

/* On Deep Green surfaces the ivory chip would glare — invert it. */
.lang-toggle--on-dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.lang-toggle button {
  min-width: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: 'Sora', -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #333f3c;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle--on-dark button {
  color: rgba(255, 255, 255, 0.75);
}

.lang-toggle button:hover {
  color: #0b2d26;
}

.lang-toggle--on-dark button:hover {
  color: #ffffff;
}

.lang-toggle button.active {
  background: #ffffff;
  color: #0b2d26;
  box-shadow: 0 1px 3px rgba(11, 45, 38, 0.08);
}

.lang-toggle--on-dark button.active {
  background: #ffffff;
  color: #0b2d26;
}

.lang-toggle button:focus-visible {
  outline: 2px solid #c89a4b;
  outline-offset: 2px;
}

/* Arabic body/UI font — Qomra is display-only, so the control stays Plex. */
[dir='rtl'] .lang-toggle button {
  font-family: 'IBM Plex Sans Arabic', 'Sora', sans-serif;
}

/* Language-swapped copy: only the active language's node is shown. Inline by
   default so a span inside a sentence doesn't break the line flow; block-level
   containers opt in with .lang-content--block. */
.lang-content {
  display: none;
}

.lang-content.active {
  display: inline;
}

.lang-content--block.active {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lang-toggle button {
    transition: none;
  }
}