/* =====================================================================
   lang.css: the PT / EN switch (partials/lang-switch.html)
   ---------------------------------------------------------------------
   Fixed at the bottom left, on both the landing and the website. On the
   desktop site it sits below the rail's "Back to main page" link, which
   the rail's bottom padding (layout.css) keeps well above it. The current
   language is olive,
   picked from <html lang> so it's right before any script runs.
   Phone tweaks (a soft background so it reads over content) are in
   responsive.css.
   ===================================================================== */

.lang {
  position: fixed; left: 22px; bottom: 22px; z-index: 20;
  display: flex; align-items: center;
  font-size: 12px; letter-spacing: .2em; color: var(--subtle);
}
.lang a {
  padding: 10px 6px 10px 10px; /* bigger tap target; the right side is smaller to offset the letter-spacing */
  color: var(--subtle); text-decoration: none; transition: color .2s;
}
.lang span { opacity: .5; }
:root[lang="pt"] .lang [data-lang="pt"],
:root[lang="en"] .lang [data-lang="en"] { color: var(--olive); font-weight: 500; }
/* Desktop site: line the letters up with the drawn chevron of "Back to main
   page" (it starts ~6px inside its 16px icon box, so 32px + 6px = 38px) */
@media (min-width: 960px) {
  .site:not([hidden]) ~ .lang, .opening-site .lang { left: 28px; }
}
/* Only on real hover devices: on touch screens :hover sticks after a tap */
@media (hover: hover) {
  .lang a:hover { color: var(--ink); }
}