/* Rawana — the EN / IT switcher.

   Deliberately quiet. It is a wayfinding control, not a call to action: the
   header already has one of those. Mono, uppercase and small, so it reads as
   a system label next to the nav rather than competing with it, and the only
   colour in it marks which language you are already reading. */

.rwn-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.rwn-lang__opt {
  display: inline-block;
  padding: 0.45em 0.7em;
  border: var(--wp--custom--border-width) solid transparent;
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--dim);
  text-decoration: none;
  transition:
    color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.rwn-lang__opt:hover,
.rwn-lang__opt:focus-visible {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--custom--border-accent);
}

.rwn-lang__opt.is-current {
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--surface-inset);
  border-color: var(--wp--custom--border-accent);
  cursor: default;
}

.rwn-lang__sep {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background-color: var(--wp--custom--border-accent);
  opacity: 0.6;
}

/* The long form spells the languages out. It goes in the footer, where there
   is room for a word and no nav beside it to stay out of the way of. */

.rwn-lang--long {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: none;
}

/* ---- In the header ------------------------------------------------------ */

.rwn-header__actions .rwn-lang {
  margin-inline: var(--wp--preset--spacing--20) 0;
}

@media (max-width: 480px) {
  .rwn-header__actions .rwn-lang {
    margin-inline: 0;
  }

  .rwn-header__actions .rwn-lang .rwn-lang__opt {
    padding: 0.4em 0.5em;
  }
}

/* ---- In the footer ------------------------------------------------------ */

.rwn-footer .rwn-lang {
  margin: 0;
}

.rwn-footer .rwn-lang .rwn-lang__opt {
  color: var(--wp--preset--color--dim);
}

.rwn-footer .rwn-lang .rwn-lang__opt:hover,
.rwn-footer .rwn-lang .rwn-lang__opt:focus-visible {
  color: var(--wp--preset--color--accent);
}

.rwn-footer .rwn-lang .rwn-lang__opt.is-current {
  color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
  .rwn-lang__opt {
    transition: none;
  }
}