/* ==========================================================================
   IDP Nashville — Language Toggle (Pill Slide)
   Colors mapped to brand tokens: azul track, terra-queimada accent,
   areia labels, areia-100 knob (EN), terra knob (ES).
   ========================================================================== */

.lang-toggle {
  /* Geometry */
  --lt-w:         106px;
  --lt-h:         44px;
  --lt-knob-size: 34px;
  --lt-pad:       5px;

  /* Spring + timing */
  --lt-spring:    cubic-bezier(0.34, 1.65, 0.64, 1);
  --lt-dur-knob:  0.55s;
  --lt-dur-fade:  0.35s;

  /* Color map — IDP Nashville brand palette */
  --lt-track-bg:          transparent;
  --lt-track-border:      rgba(211,199,173,.40);  /* --idp-areia @ 40%   */
  --lt-track-border-es:   #754437;               /* --idp-terra-queimada */
  --lt-label:             #D3C7AD;               /* --idp-areia          */
  --lt-label-dim:         0.35;                  /* opacity for inactive */
  --lt-knob-en-bg:        #E8E0CD;               /* --idp-areia-100      */
  --lt-knob-es-bg:        #754437;               /* --idp-terra-queimada */
  --lt-knob-en-fg:        #31331F;               /* --idp-ink            */
  --lt-knob-es-fg:        #F7F3EA;               /* --idp-bone           */
  --lt-ripple-color:      rgba(117, 68, 55, .55);

  position: relative;
  display: inline-flex;
  align-items: center;
  width:  var(--lt-w);
  height: var(--lt-h);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Hidden checkbox ─────────────────────────────────────────────── */
.lang-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Track ───────────────────────────────────────────────────────── */
.lt-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--lt-track-bg);
  border: 1.5px solid var(--lt-track-border);
  transition: border-color var(--lt-dur-fade) ease;
}

/* EN label — left */
.lt-track::before {
  content: attr(data-lang-a);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lt-label);
  opacity: 1;
  transition: opacity var(--lt-dur-fade) ease;
}

/* ES label — right */
.lt-track::after {
  content: attr(data-lang-b);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lt-label);
  opacity: var(--lt-label-dim);
  transition: opacity var(--lt-dur-fade) ease;
}

/* ── Knob ────────────────────────────────────────────────────────── */
.lt-knob {
  position: absolute;
  left: var(--lt-pad);
  width:  var(--lt-knob-size);
  height: var(--lt-knob-size);
  border-radius: 999px;
  background: var(--lt-knob-en-bg);
  color:      var(--lt-knob-en-fg);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transform-origin: center;
  will-change: left, transform;
  transition:
    left             var(--lt-dur-knob) var(--lt-spring),
    transform        var(--lt-dur-knob) var(--lt-spring),
    background-color var(--lt-dur-fade) ease,
    color            var(--lt-dur-fade) ease;
}

/* ── ES active — all states driven by :has() ─────────────────────── */
.lang-toggle:has(input:checked) .lt-track {
  border-color: var(--lt-track-border-es);
}
.lang-toggle:has(input:checked) .lt-track::before {
  opacity: var(--lt-label-dim);
}
.lang-toggle:has(input:checked) .lt-track::after {
  opacity: 1;
}
.lang-toggle:has(input:checked) .lt-knob {
  left: calc(var(--lt-w) - var(--lt-knob-size) - var(--lt-pad)); /* 67px */
  background: var(--lt-knob-es-bg);
  color:      var(--lt-knob-es-fg);
}

/* ── Press squish ────────────────────────────────────────────────── */
.lang-toggle:active .lt-knob {
  transform: scaleX(1.235); /* 34px → ~42px equivalent */
}

/* ── Keyboard focus ring ─────────────────────────────────────────── */
.lang-toggle:focus-within {
  outline: 2px solid rgba(117, 68, 55, .55);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ── Ripple ──────────────────────────────────────────────────────── */
.lt-ripple {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--lt-ripple-color);
  opacity: 0;
  pointer-events: none;
}
.lt-ripple.is-active {
  animation: lt-ripple-burst .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes lt-ripple-burst {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.35); opacity: 0;  }
}

/* ── Screen-reader announce span ─────────────────────────────────── */
.lt-announce {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Page fade-in on load ────────────────────────────────────────── */
/* lang-toggle.css is enqueued in <head>, so opacity:0 is applied
   before the browser paints the body — no flash of invisible content. */
body {
  animation: lt-body-in 0.4s ease both;
}
@keyframes lt-body-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lt-knob {
    transition:
      background-color var(--lt-dur-fade) ease,
      color            var(--lt-dur-fade) ease;
  }
  .lt-track { transition: none; }
  .lt-ripple.is-active { animation: none; }
  .lang-toggle:active .lt-knob { transform: none; }
  body { animation: none; }
}