/* ==========================================================================
   language-switcher.css — .wf-lang (PLAN §5.6, §6.2, §11.5d)
   role="group" with three compact IT/EN/ES <button>s (full autonym in
   aria-label). Active one carries aria-current="true" + a visible chip.
   D wires behaviour.
   ========================================================================== */

.wf-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border: 1px solid var(--c-parchment-line);
  border-radius: var(--radius-md);
  padding: 2px;
  background: var(--c-parchment);
}

.wf-lang__btn {
  height: 44px;                     /* BRIEF §8: >=44px tap target, pinned
                                        (not min-height) so it can't drift
                                        out of line with the CTA/toggle next
                                        to it if a fallback font's line-height
                                        differs before web fonts load */
  min-width: 44px;                  /* square-ish IT/EN/ES chips */
  padding: 0 var(--space-xs);
  font-family: var(--font-serif);
  font-size: var(--step--1);
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--c-sepia-soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wf-lang__btn:hover { color: var(--c-terracotta-dk); }

/* Active language. */
.wf-lang__btn[aria-current="true"] {
  background-color: var(--c-terracotta);
  color: #fff;
  font-weight: 600;
}
.wf-lang__btn[aria-current="true"]:focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* On phones the nav bar (brand + RSVP CTA + switcher + ☰) is tight; trim the
   chip padding so the row never overflows, but min-width/height stay at 44px
   (BRIEF §8) rather than shrinking the tap target. */
@media (max-width: 40rem) {
  .wf-lang { gap: 0; }
  .wf-lang__btn { padding-inline: 2px; }
}