/**
 * Polylang: フロート言語スイッチャー
 *
 * 画面左下、Userway ユニット (.uwy) の上に固定表示する。
 * Userway 自体は外部スクリプトで動的に挿入されるため、運用上の高さブレを
 * --jfhany-uwy-offset で吸収する。
 *
 * 使用デザイントークン: assets/css/style.css の :root を参照。
 */

:root {
  /* Userway ウィジェット上端までの逃げ高さ（Userway 側の実寸に応じて調整可） */
  --jfhany-uwy-offset: 64px;
  /* フローティング UI の z-index（モーダル < これ < ドロワー上限の中間） */
  --jfhany-z-floating: 60;
}

.jfhany-lang-switcher {
  position: fixed;
  left: var(--jfhany-space-md, 1rem);
  bottom: calc(var(--jfhany-uwy-offset) + var(--jfhany-space-xl, 2rem));
  z-index: var(--jfhany-z-floating);
  background-color: var(--jfhany-color-surface-container-low, #e8e2d7);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: var(--jfhany-space-sm) var(--jfhany-space-md);
}

.jfhany-lang-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jfhany-lang-switcher__item {
  margin: 0;
}

.jfhany-lang-switcher__link {
  display: block;
  min-width: 2.5rem;
  padding: var(--jfhany-space-xs, 0.25rem) var(--jfhany-space-md, 1rem);
  border-radius: 999px;

  font-family: var(--jfhany-font-base);
  font-size: var(--jfhany-font-size-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--jfhany-color-text, #1a1a18);

  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.jfhany-lang-switcher__link:hover,
.jfhany-lang-switcher__link:focus-visible {
  background-color: var(--jfhany-color-bg-light, #e8e2d7);
  color: var(--jfhany-color-text, #1a1a18);
}

.jfhany-lang-switcher__link:focus-visible {
  outline: 2px solid var(--jfhany-color-accent, #e6b54a);
  outline-offset: 2px;
}

.jfhany-lang-switcher__item.is-active .jfhany-lang-switcher__link {
  background-color: var(--jfhany-color-primary, #1a1a18);
  color: var(--jfhany-color-on-primary, #f4efe6);
}

.jfhany-lang-switcher__item.is-active .jfhany-lang-switcher__link:hover,
.jfhany-lang-switcher__item.is-active .jfhany-lang-switcher__link:focus-visible {
  background-color: var(--jfhany-color-primary-dark, #32302d);
  color: var(--jfhany-color-on-primary, #f4efe6);
}

@media (max-width: 600px) {
  .jfhany-lang-switcher {
    /* モバイルでは Userway のサイズが変わることが多いので逃げを広めに */
    --jfhany-uwy-offset: 56px;
    left: var(--jfhany-space-sm, 0.5rem);
  }
}

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