/* ═══════════════════════════════════════════════════════════════
   KYOMEI LABS — Language Switcher (WordPress / Avada production)
   Component styles only — demo navbar/reset omitted on purpose.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --kl-navy:          #1A1F2B;
  --kl-navy-light:    #242A38;
  --kl-navy-surface:  #2A3145;
  --kl-olive:         #9BA53B;
  --kl-olive-hover:   #A8B244;
  --kl-white:         #FFFFFF;
  --kl-white-muted:   #B0B8C8;
  --kl-text-on-dark:  #E8ECF2;

  --ls-bg:            var(--kl-navy-light);
  --ls-bg-hover:      var(--kl-navy-surface);
  --ls-slider-bg:     var(--kl-olive);
  --ls-text-active:   var(--kl-white);
  --ls-text-inactive: var(--kl-white-muted);
  --ls-height:        34px;
  --ls-btn-width:     42px;
  --ls-radius:        17px;
  --ls-font-size:     12px;
  --ls-gap:           3px;

  --ls-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ls-duration:      0.35s;
  --kl-focus-ring:    0 0 0 2px var(--kl-navy), 0 0 0 4px var(--kl-olive);
}

.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--ls-bg);
  border-radius: var(--ls-radius);
  padding: var(--ls-gap);
  gap: 0;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lang-switcher *,
.lang-switcher *::before,
.lang-switcher *::after {
  box-sizing: border-box;
}

.lang-switcher__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ls-btn-width);
  height: calc(var(--ls-height) - var(--ls-gap) * 2);
  border: none;
  border-radius: calc(var(--ls-radius) - var(--ls-gap));
  background: transparent;
  color: var(--ls-text-inactive);
  font-family: inherit;
  font-size: var(--ls-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ls-duration) var(--ls-spring);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.lang-switcher__btn--active {
  color: var(--ls-text-active);
}

.lang-switcher__btn:not(.lang-switcher__btn--active):hover {
  color: var(--kl-text-on-dark);
}

.lang-switcher__btn:focus-visible {
  outline: none;
  box-shadow: var(--kl-focus-ring);
  border-radius: calc(var(--ls-radius) - var(--ls-gap));
}

.lang-switcher__slider {
  position: absolute;
  z-index: 1;
  top: var(--ls-gap);
  left: var(--ls-gap);
  width: var(--ls-btn-width);
  height: calc(var(--ls-height) - var(--ls-gap) * 2);
  background: var(--ls-slider-bg);
  border-radius: calc(var(--ls-radius) - var(--ls-gap));
  transform: translateX(0);
  transition: transform var(--ls-duration) var(--ls-spring);
  pointer-events: none;
  will-change: transform;
}

.lang-switcher[data-active-lang="jp"] .lang-switcher__slider {
  transform: translateX(var(--ls-btn-width));
}

.lang-switcher__slider::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ls-slider-bg);
  opacity: 0.25;
  filter: blur(8px);
  transition: opacity 0.3s ease;
}

.lang-switcher:hover .lang-switcher__slider::after {
  opacity: 0.4;
}

.lang-switcher--mobile {
  --ls-height:      42px;
  --ls-btn-width:   72px;
  --ls-radius:      21px;
  --ls-font-size:   14px;
  --ls-gap:         4px;
  width: min(100%, 200px);
  position: relative;
  z-index: 9999;
  pointer-events: all !important;
  display: inline-flex !important;
}

.lang-switcher--mobile .lang-switcher__btn {
  flex: 1;
  width: auto;
  pointer-events: all !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lang-switcher--mobile .lang-switcher__slider {
  width: calc(50% - var(--ls-gap));
}

.lang-switcher--mobile[data-active-lang="jp"] .lang-switcher__slider {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .lang-switcher__slider,
  .lang-switcher__btn {
    transition-duration: 0.01s;
    transition-timing-function: linear;
  }
}

/* ─── Avada header placement ─── */
.fusion-tb-header .kyomei-lang-switcher-host--desktop {
  display: flex;
  align-items: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.fusion-tb-header .fusion-flex-justify-content-flex-end {
  align-items: center;
}

/* Hide the previous Polylang EN/JP menu-item toggle after the pill is in place. */
body.kyomei-ls-ready .fusion-tb-header li.lang-item,
body.kyomei-ls-ready .awb-menu li.lang-item,
body.kyomei-ls-ready .kyomei-pll-fallback__toggle {
  display: none !important;
}

/* Fallback bar (Japanese pages without a TB header). */
.kyomei-pll-fallback .kyomei-lang-switcher-host--desktop {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Mobile / off-canvas footer placement */
.kyomei-lang-switcher-mobile-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px 16px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  position: relative;
  z-index: 9999;
  pointer-events: all !important;
}

.off-canvas-content .kyomei-lang-switcher-mobile-wrap,
.awb-off-canvas-inner .kyomei-lang-switcher-mobile-wrap {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Until JS relocates the hosts, keep them out of document flow. */
body > .kyomei-lang-switcher-host {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Desktop switcher is header-only; mobile instance lives in the flyout. */
@media (max-width: 850px) {
  .fusion-tb-header .kyomei-lang-switcher-host--desktop {
    display: none !important;
  }
}