/**
 * switcher.css — Novagroup EN/ES Language Switcher
 * Pill-style toggle with breathing room, copper active state.
 * HTML uses .lang-switcher__btn (alias rules below for .lang-switcher__link compat).
 * ALL values reference tokens from css/tokens.css.
 */

/* ============================================================
 * SWITCHER CONTAINER
 * ============================================================ */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* On light backgrounds */
.lang-switcher--light {
  border-color: var(--c-fog);
}

/* ============================================================
 * SWITCHER BUTTONS / LINKS
 * HTML markup uses .lang-switcher__btn; CSS also supports .lang-switcher__link
 * ============================================================ */
.lang-switcher__btn,
.lang-switcher__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1) var(--sp-3);
  color: rgb(255 255 255 / 0.65);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    color            var(--dur-micro) var(--ease-out);
  position: relative;
  border-radius: var(--radius-pill);
}

/* Remove base.css link underline pseudo */
.lang-switcher__btn::after,
.lang-switcher__link::after {
  display: none;
}

.lang-switcher__btn:hover,
.lang-switcher__link:hover {
  color: var(--c-white);
  background-color: rgb(255 255 255 / 0.1);
}

/* Light background variant */
.lang-switcher--light .lang-switcher__btn,
.lang-switcher--light .lang-switcher__link {
  color: var(--c-steel);
}

.lang-switcher--light .lang-switcher__btn:hover,
.lang-switcher--light .lang-switcher__link:hover {
  color: var(--c-navy);
  background-color: var(--c-fog-2);
}

/* ============================================================
 * ACTIVE / CURRENT LANGUAGE
 * ============================================================ */
.lang-switcher__btn.is-active,
.lang-switcher__btn[aria-current="true"],
.lang-switcher__link.is-active,
.lang-switcher__link[aria-current="true"] {
  background-color: var(--c-copper);
  color: var(--c-navy);
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.lang-switcher__btn.is-active:hover,
.lang-switcher__btn[aria-current="true"]:hover,
.lang-switcher__link.is-active:hover,
.lang-switcher__link[aria-current="true"]:hover {
  background-color: var(--c-copper-bright);
  color: var(--c-navy);
}

/* Light background active */
.lang-switcher--light .lang-switcher__btn.is-active,
.lang-switcher--light .lang-switcher__link.is-active {
  background-color: var(--c-copper);
  color: var(--c-navy);
}

/* ============================================================
 * SEPARATOR between EN and ES
 * HTML uses .lang-switcher__sep (span with "|" text)
 * ============================================================ */
.lang-switcher__sep {
  width: 1px;
  height: 12px;
  background-color: rgb(255 255 255 / 0.25);
  flex-shrink: 0;
  font-size: 0;      /* hide the "|" character — use background as visual divider */
  margin: 0 var(--sp-1);
  align-self: center;
}

/* Legacy divider element name */
.lang-switcher__divider {
  width: 1px;
  height: 12px;
  background-color: rgb(255 255 255 / 0.25);
  flex-shrink: 0;
  margin: 0 var(--sp-1);
}

.lang-switcher--light .lang-switcher__sep,
.lang-switcher--light .lang-switcher__divider {
  background-color: var(--c-fog);
}

/* ============================================================
 * COARSE POINTER — guarantee 44px touch targets on EN/ES (#25)
 * Desktop visuals unchanged; only touch devices get the taller targets.
 * ============================================================ */
@media (pointer: coarse) {
  .lang-switcher__btn,
  .lang-switcher__link {
    min-height: 44px;
    padding-block: var(--sp-3);
  }
}