/* ------------------------------------------------------------------
   i18n — EN / ES / PT / IT

   Same mechanism already proven on usato-bmb-kw3500-68000.html, lifted
   into a shared file so every page behaves identically.

   Every translated string ships in the HTML four times, once per
   language, each on its own element carrying a `lang` attribute. The
   rules below leave the active language alone and hide the other three.
   Nothing is injected at runtime, so all four languages are in the
   source a crawler reads, and the text is on screen before any script
   runs — no flash of the wrong language.

     <h1 lang="en">Used machines</h1>
     <h1 lang="es">Máquinas usadas</h1>
     <h1 lang="pt">Máquinas usadas</h1>
     <h1 lang="it">Macchine usate</h1>

   The active language lives in one place: html[data-lang]. js/i18n.js
   sets it. Text generated by JavaScript can't use this mechanism, so it
   reads its strings from {en,es,pt,it} objects via IB23_I18N.t() and
   re-renders on the ib23:langchange event.
------------------------------------------------------------------- */

/* Hide only the inactive-language elements. The active one keeps whatever
   display its own tag or class already defines — table-cell, inline-flex,
   grid — which is why this hides the others instead of showing the one. */
html[data-lang="en"] [lang]:not([lang="en"]),
html[data-lang="es"] [lang]:not([lang="es"]),
html[data-lang="pt"] [lang]:not([lang="pt"]),
html[data-lang="it"] [lang]:not([lang="it"]){
  display:none !important;
}

/* Before js/i18n.js runs, html has no data-lang yet and all four languages
   would paint at once. Assume English until told otherwise — it is the
   default, so for most visitors this is also the final answer. */
html:not([data-lang]) [lang]:not([lang="en"]){
  display:none !important;
}

/* .lang-stack — stack the four variants in the same grid cell so the block
   is always as tall as the longest translation. Switching language then
   swaps the text without shifting anything below it. Use it on headings and
   hero copy, where a reflow is most visible.

   Must come after the rule above: same specificity, source order decides. */
/* !important because this class exists only to create the overlap, and losing
   it fails silently and expensively: a page rule as ordinary as
   `.g-item b{display:block}` outranks `.lang-stack`, the four variants stop
   sharing a cell and stack instead. Three of them are invisible but still
   occupy their lines, so a one-line label reserves four lines of empty space
   and nothing looks broken enough to notice. */
.lang-stack{display:grid !important;}
.lang-stack.inline{display:inline-grid !important;}
.lang-stack > *{grid-area:1 / 1;}
/* A button centres its label; the stack inside it holds the width of the
   longest translation, so centre within that too or a short one sits left of
   where the label belongs. */
.btn > .lang-stack{justify-items:center;}
html[data-lang] .lang-stack > [lang]{display:block !important;visibility:hidden;}
html[data-lang] .lang-stack.inline > [lang]{display:inline-flex !important;}
html[data-lang="en"] .lang-stack > [lang="en"],
html[data-lang="es"] .lang-stack > [lang="es"],
html[data-lang="pt"] .lang-stack > [lang="pt"],
html[data-lang="it"] .lang-stack > [lang="it"]{visibility:visible;}
html:not([data-lang]) .lang-stack > [lang]{display:block !important;visibility:hidden;}
html:not([data-lang]) .lang-stack > [lang="en"]{visibility:visible;}

/* ---- the switcher ---------------------------------------------------- */

/* radius matches the buttons it sits beside — see the scale in css/tokens.css */
.langsw{display:inline-flex;align-items:stretch;gap:1px;flex:none;
  border:1px solid var(--border,#e4e3df);border-radius:var(--r-btn,8px);overflow:hidden;
  background:var(--bg,#fff);}

/* Every button is the same width whatever its two letters are, so the control
   reads as one object rather than four of different sizes. */
.langsw button{appearance:none;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.42em;
  font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  padding:.52em .62em;min-width:60px;color:var(--gray,#55575c);line-height:1;
  transition:background-color .16s ease, color .16s ease;}

/* The flag is a round chip. Unselected it sits back at 40% and desaturated;
   selected it comes up to full colour — which is the thing the eye catches,
   so the current language is legible at a glance and not only from the
   highlighted background. */
.langsw button img{width:17px;height:17px;flex:none;display:block;
  border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
  opacity:.4;filter:saturate(.35);
  transition:opacity .18s ease, filter .18s ease;}
.langsw button:hover img{opacity:.75;filter:saturate(.8);}
.langsw button.active img{opacity:1;filter:none;box-shadow:0 0 0 1px rgba(255,255,255,.5);}

.langsw button:hover{background:rgba(0,0,0,.05);color:var(--charcoal,#232427);}
.langsw button.active{background:var(--charcoal,#232427);color:#fff;}
.langsw button:focus-visible{outline:2px solid var(--orange,#f16522);outline-offset:-2px;}

/* on a dark bar */
.langsw.on-dark{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);}
.langsw.on-dark button{color:rgba(255,255,255,.62);}
.langsw.on-dark button:hover{background:rgba(255,255,255,.12);color:#fff;}
.langsw.on-dark button.active{background:#fff;color:var(--charcoal,#232427);}
.langsw.on-dark button img{box-shadow:0 0 0 1px rgba(255,255,255,.28);}
.langsw.on-dark button.active img{box-shadow:0 0 0 1px rgba(0,0,0,.18);}

/* Below the point where the header runs out of room the two letters step
   aside and the flag carries the language on its own — four flag-and-letter
   buttons are 240px, which is most of a phone header once the logo, the
   machines button and the menu have taken theirs. The letters stay in the
   accessible name either way. */
@media (max-width:560px){
  .langsw{flex-shrink:1;}
  .langsw button{min-width:0;padding:.5em .5em;gap:0;}
  .langsw button span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;}
  .langsw button img{width:19px;height:19px;}
}
@media (max-width:380px){
  .langsw button{padding:.45em .38em;}
  .langsw button img{width:17px;height:17px;}
}

@media print{
  .langsw{display:none !important;}
  /* only the printed language should take up space on the page */
  .lang-stack > [lang]{display:none !important;}
  html[data-lang="en"] .lang-stack > [lang="en"],
  html[data-lang="es"] .lang-stack > [lang="es"],
  html[data-lang="pt"] .lang-stack > [lang="pt"],
  html[data-lang="it"] .lang-stack > [lang="it"]{display:block !important;}
}