/* ============================================================
   Language toggle (client-side EN / ES)
   Append to css/style.css, or link this file right after it.
   ============================================================ */

/* ---------- the button ----------
   Borrows the nav's own vocabulary: same uppercase 800-weight body
   face, same orange underline the site already uses to mean
   "current". It reads as part of the nav, not bolted on. */
.lang-toggle-btn{
  display:inline-block;
  background:none; border:0; padding:.35rem .1rem 4px;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:800; font-size:.9rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:3px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.lang-toggle-btn:hover{
  color:var(--teal-deep);
  border-bottom-color:var(--orange);
}
.lang-toggle-btn:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:3px;
}

/* Always visible in the header bar, at every width.
   NOT inside .nav-links: that collapses into the hamburger below
   960px, and a language switch hidden behind a menu labelled in
   English is no use to the person who needs it. */
.nav > .lang-toggle-btn{ flex:none; margin-left:1rem; }

@media(max-width:960px){
  .nav > .lang-toggle-btn{
    margin-left:auto; margin-right:.25rem;
    padding:.5rem .4rem 4px;      /* bigger tap target */
    font-size:.8rem;
  }
}

/* ---------- whole-element swaps ----------
   For copy too long or too link-heavy to live inside a data-es
   attribute: write both versions, show one.

   Default (no JS, or English): Spanish hidden, English shown.
   The boot snippet in the head sets .lang-es before first paint,
   so this never flashes. */
.lang-es-only{ display:none; }
html.lang-es .lang-es-only{ display:revert; }
html.lang-es .lang-en-only{ display:none; }

/* ---------- Spanish typesetting ----------
   Spanish runs roughly 20–25% longer than English, and the display
   face is set at weight 900 with negative tracking, which is
   exactly where long words break badly. */
html.lang-es h1,
html.lang-es h2,
html.lang-es h3{
  hyphens:auto;
  overflow-wrap:break-word;
  letter-spacing:0;
}
html.lang-es .btn,
html.lang-es .pill,
html.lang-es .eyebrow{ letter-spacing:.04em; }
html.lang-es .nav-links{ gap:1.1rem; }
html.lang-es .nav-links a{ font-size:.85rem; }

/* ---------- no JavaScript ----------
   The whole mechanism is JS. Say so rather than leaving a dead
   button: without JS the site is English only. */
.no-js .lang-toggle-btn{ display:none; }