/* ============================================================
   Lotus Dharma — Version Switch Component
   Variants: default (light), .is-on-dark (hero/cover), .is-compact
   ============================================================ */

/* ── Base container ─────────────────────────────────────────── */
.lotus-version-switch {
  display:         inline-flex;
  gap:             4px;
  padding:         5px;
  border:          1px solid var(--lotus-border);
  border-radius:   999px;
  background:      rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Buttons ────────────────────────────────────────────────── */
.lotus-version-switch__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         7px 14px;
  font-size:       12px;
  font-weight:     600;
  letter-spacing:  .09em;
  text-transform:  uppercase;
  border-radius:   999px;
  border:          1px solid transparent;
  text-decoration: none;
  color:           var(--lotus-primary);
  opacity:         .7;
  transition:      opacity .15s ease, background .15s ease, border-color .15s ease;
  line-height:     1;
}

.lotus-version-switch__btn:hover {
  opacity:         1;
  border-color:    color-mix(in srgb, var(--lotus-primary) 18%, transparent);
  background:      color-mix(in srgb, var(--lotus-primary) 6%, transparent);
  text-decoration: none;
}

.lotus-version-switch__btn:focus-visible {
  outline:        2px solid var(--lotus-accent);
  outline-offset: 2px;
  opacity:        1;
}

/* Active / current page */
.lotus-version-switch__btn.is-active {
  opacity:      1;
  color:        var(--lotus-primary);
  border-color: color-mix(in srgb, var(--lotus-primary) 28%, transparent);
  background:   color-mix(in srgb, var(--lotus-primary) 10%, transparent);
  font-weight:  700;
}

/* ── Dark overlay variant (use inside Cover blocks) ─────────── */
.lotus-version-switch.is-on-dark {
  border-color: rgba(255, 255, 255, .25);
  background:   rgba(0, 0, 0, .30);
}

.lotus-version-switch.is-on-dark .lotus-version-switch__btn {
  color:   rgba(255, 255, 255, .80);
  opacity: 1;
}

.lotus-version-switch.is-on-dark .lotus-version-switch__btn:hover {
  color:        #fff;
  border-color: rgba(255, 255, 255, .35);
  background:   rgba(255, 255, 255, .12);
}

.lotus-version-switch.is-on-dark .lotus-version-switch__btn.is-active {
  color:        #fff;
  border-color: rgba(255, 255, 255, .55);
  background:   rgba(255, 255, 255, .20);
}

/* ── Compact variant (for header HTML element) ──────────────── */
.lotus-version-switch.is-compact {
  padding: 3px;
  gap:     2px;
}

.lotus-version-switch.is-compact .lotus-version-switch__btn {
  padding:    5px 10px;
  font-size:  11px;
}

/* ============================================================
   Floating Version Switch
   Rendered via wp_footer — independent of Kadence header layout.
   ============================================================ */

/*
 * Outer wrapper: fixed to the right edge, vertically centred.
 *
 * z-index ladder (Kadence uses ~100 for sticky header):
 *   - Admin bar:        99999
 *   - Kadence sticky:   ~100
 *   - Our float:        9000   → above content, below admin bar
 *
 * The wrapper is rotated 90° so the pill reads top-to-bottom
 * along the right edge (EN · VI · KIDS stacked vertically).
 * On mobile it flips back to horizontal at the bottom-right.
 */
.lotus-float-switch {
  position:         fixed;
  right:            -1px;
  top:              50%;
  /*
   * Rotate 90° around the element's own centre, then shift it so
   * only ~8px of the pill peeks past the right edge — enough to
   * be visible and clickable without being half off-screen.
   * Adjust the translateX value to taste:
   *   0px  = fully on screen (flush with edge after rotation)
   *  -8px  = 8px peeking off the right edge (subtle tab effect)
   */
  transform:        translateY(-50%) rotate(90deg) translateX(calc(50% - 8px));
  transform-origin: center center;
  z-index:          9000;

  display:          flex;
  align-items:      center;
}

/* When WP admin bar is visible, shift down so we don't overlap it */
.admin-bar .lotus-float-switch {
  top: calc(50% + 16px); /* half of 32px admin bar */
}

/*
 * The inner .lotus-version-switch pill inherits all version-palette
 * tokens (--lotus-primary, --lotus-border, etc.) from body.lang-vi /
 * body.is-kids automatically — no extra rules needed here.
 *
 * Override the default pill background to be slightly more opaque
 * when floating so it reads well against any page content.
 */
.lotus-float-switch .lotus-version-switch {
  background:      rgba(255, 255, 255, .88);
  border-color:    var(--lotus-border);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, .10),
    0 1px  4px rgba(0, 0, 0, .06);
  /* Slightly tighter padding when floating */
  padding: 4px;
  gap:     3px;
}

.lotus-float-switch .lotus-version-switch__btn {
  padding:   6px 12px;
  font-size: 11px;
}

/* ── Mobile: unrotate, move to bottom-right corner ─────────── */
@media (max-width: 768px) {
  .lotus-float-switch {
    top:       auto;
    bottom:    20px;
    right:     16px;
    transform: none;
    margin-right: 0;
  }

  /* Restore horizontal pill layout */
  .lotus-float-switch .lotus-version-switch {
    flex-direction: row;
  }

  /* Lift above mobile browser chrome */
  .admin-bar .lotus-float-switch {
    top:    auto;
    bottom: 20px;
  }
}

/* ── Tablet: keep vertical but shift slightly inward ───────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .lotus-float-switch {
    right: 0;
  }
}