/* lingue.css — kit THK, 20/10/2026 · IL MENÙ A TENDINA DELLE LINGUE dei siti di affitti brevi (step 9-ter; Domenico,
 * 20/10/2026: «devono andare sempre con un menù a tendina»). Nel sito sta in /assets/thk/lingue.css, accanto a lingua.js,
 * e non si modifica lì: lo stile del sito si dà con le variabili qui sotto, nel CSS del sito (es. .lingue { --thk-lingue-
 * fondo: var(--crema); }), o con regole più precise nel CSS del sito, dopo questo file.
 *
 * Il selettore (11 § 1-ter, Kit-pannello/LEGGIMI.md § «🌍 Le lingue»):
 *   <details class="lingue" data-thk-lingue>
 *     <summary aria-label="Lingua: IT">IT</summary>
 *     <ul><li><a href="/" hreflang="it" lang="it">IT · Italiano</a></li> … <li><a href="/de/" hreflang="de" lang="de">DE · Deutsch</a></li></ul>
 *   </details>
 * Chiuso si vede solo il pulsante con la sigla della pagina e la freccia; aperto, l'elenco delle cinque lingue sotto il
 * pulsante, allineato a destra (di solito il selettore sta in alto a destra; a sinistra lo allinea lingua.js), sopra il
 * resto della pagina. Il pulsante è alto almeno 44 px (si tocca bene col dito). Niente JavaScript per aprirlo: <details> lo fa da solo; lingua.js lo
 * chiude toccando fuori, con Esc e scegliendo. Le regole valgono solo per il <details class="lingue"> del kit: un
 * selettore fatto a mano con la classe «lingue» (un <nav>, uno <span>) non si tocca. */
details.lingue { position: relative; display: inline-block; flex: none; font: inherit; color: inherit; }
details.lingue > summary {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; min-width: 44px; padding: 0 .8em;
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-weight: 600; letter-spacing: .04em; line-height: 1;
  color: var(--thk-lingue-pulsante-testo, currentColor);
  background: var(--thk-lingue-pulsante-fondo, transparent);
  border: 1px solid var(--thk-lingue-bordo, currentColor);
  border-radius: var(--thk-lingue-raggio, 999px);
}
details.lingue > summary::-webkit-details-marker { display: none; }
details.lingue > summary::marker { content: ""; }
details.lingue > summary::after {
  content: ""; width: .42em; height: .42em; margin-left: .1em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform .2s ease;
}
details.lingue[open] > summary::after { transform: translateY(20%) rotate(-135deg); }
details.lingue > summary:focus-visible { outline: 2px solid var(--thk-lingue-fuoco, currentColor); outline-offset: 3px; }
details.lingue > ul {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000;
  min-width: 11.5em; margin: 0; padding: .35em; list-style: none;
  background: var(--thk-lingue-fondo, #fff); color: var(--thk-lingue-testo, #1b1b1b);
  border-radius: var(--thk-lingue-raggio-elenco, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
}
/* il selettore sta a sinistra: l'elenco si apre verso destra (lo decide lingua.js, data-thk-lingue-lato) */
details.lingue[data-thk-lingue-lato="sinistra"] > ul { left: 0; right: auto; }
details.lingue > ul li { margin: 0; padding: 0; }
details.lingue > ul a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .85em; border-radius: 8px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
details.lingue > ul a:hover, details.lingue > ul a:focus-visible { background: var(--thk-lingue-evidenza, rgba(0, 0, 0, .06)); outline: none; }
details.lingue > ul a[aria-current="true"] { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { details.lingue > summary::after { transition: none; } }
@media print { details.lingue { display: none; } }