/* Hebrew / English toggle. Self-contained so the standalone pages can use it too. */

/* Set by js/lang-boot.js only when a non-Hebrew language is active. */
html.i18n-pending body {
  visibility: hidden;
}

.lang-switch {
  --ls-blue: #2a5d84;
  --ls-green: #90c646;
  --ls-white: #ffffff;

  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ls-blue);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  line-height: 1;
  flex-shrink: 0;
}

.lang-switch__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--ls-blue);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch__btn:hover:not(.is-active) {
  background: rgba(144, 198, 70, 0.25);
}

.lang-switch__btn.is-active {
  background: var(--ls-blue);
  color: var(--ls-white);
  cursor: default;
}

.lang-switch__btn:focus-visible {
  outline: 2px solid var(--ls-green);
  outline-offset: -3px;
}

/* Variant for the solid blue header on privacy / support / delete-account. */
.lang-switch--on-dark {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}

.lang-switch--on-dark .lang-switch__btn {
  color: var(--ls-white);
}

.lang-switch--on-dark .lang-switch__btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.18);
}

.lang-switch--on-dark .lang-switch__btn.is-active {
  background: var(--ls-white);
  color: var(--ls-blue);
}

.lang-switch--on-dark .lang-switch__btn:focus-visible {
  outline-color: var(--ls-green);
}

/* Navbar (index.html): keeps the toggle beside the hamburger, never inside it. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Standalone page headers: the "MyWay" link stays centred, the toggle sits at the edge. */
.header {
  position: relative;
}

.header .lang-switch {
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  transform: translateY(-50%);
}