/* Quotelyx - foglio di stile della parte multilingua.
   E' un file NUOVO: style.css non e' stato toccato. Qui dentro c'e' solo quello che serve
   al menu delle lingue, al bollino "traduzione automatica", al bottone "Traduci" e alle
   lingue che si scrivono da destra a sinistra (arabo, ebraico, persiano, urdu).
   Usa le stesse variabili di colore di style.css, cosi' resta tutto coerente. */

/* ------------------------------------------------------------------ menu delle lingue */
.langbox { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.langbox select {
  max-width: 190px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); font: inherit; font-size: .9em; cursor: pointer;
}
.langbox select:hover { border-color: var(--accent); }
.langbox select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* etichetta per chi usa un lettore di schermo: non si vede ma si sente */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- avviso "questa pagina e' automatica" */
.autobar { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid #f2dd9a; }
.autobar .wrap { padding-top: 6px; padding-bottom: 6px; }
.badge.auto { background: #ffe9a8; color: var(--warn-ink); margin-right: 6px; }

/* ------------------------------------------------------------- bottone "Traduci" e testo */
.traduci { display: inline-block; margin: 6px 0 0; }
.linkbtn {
  border: 0; background: none; color: var(--accent); cursor: pointer;
  font: inherit; padding: 0 4px; text-decoration: underline;
}
.linkbtn:hover { color: var(--ink); }
.tradotto { margin: 8px 0 0; border-left: 3px solid var(--line); padding-left: 10px; }
.tradotto .originale { color: var(--muted); }
/* htmx mostra questo mentre aspetta la risposta del server */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
button[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------- lingue che si scrivono da destra a sinistra */
/* Il verso lo decide il tag <html dir="rtl">: qui si raddrizza solo cio' che era
   inchiodato a sinistra. I numeri, i prezzi e i grafici restano come sono: in arabo le
   cifre si leggono comunque da sinistra a destra. */
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: right; }
[dir="rtl"] .tbl th.r, [dir="rtl"] .tbl td.r { text-align: left; }
[dir="rtl"] .langbox { margin-left: 0; margin-right: auto; }
[dir="rtl"] .timeline { border-left: 0; border-right: 2px solid var(--line); padding: 0 14px 0 0; }
[dir="rtl"] .timeline.future { border-right-color: var(--accent); }
[dir="rtl"] .timeline .ev::before { left: auto; right: -19px; }
[dir="rtl"] .tradotto { border-left: 0; border-right: 3px solid var(--line); padding: 0 10px 0 0; }
[dir="rtl"] .head .sym { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .legend .dot { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .toc a { margin: 2px 0 2px 10px; }
[dir="rtl"] .facts { direction: rtl; }
/* i numeri restano leggibili nel loro verso anche dentro una pagina araba */
[dir="rtl"] .num, [dir="rtl"] .quote, [dir="rtl"] .stat .v { direction: ltr; unicode-bidi: embed; }

/* schermi stretti: il menu delle lingue va a capo invece di stringere la ricerca */
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .langbox { margin-left: 0; }
  .langbox select { max-width: 150px; }
}