/* lingue.css — La Senyera · § 25 · le tre lingue (16/10/2026, Domenico: «il sito anche in inglese e spagnolo: /en/ e /es/,
   selettore IT EN ES, lingua proposta dal telefono»). Un file a parte, caricato dopo style.css: le stesse misure, gli
   stessi colori (navy, corallo, Jost) e la stessa curva (--ease-out) di style.css, senza toccarne le sezioni.
   § 25-bis (17/10/2026, step 9-ter): CINQUE lingue, IT · EN · ES · FR · DE, sempre visibili anche da telefono senza aprire
   il menu (11 § 1-ter); la lingua del browser la sceglie /assets/thk/lingua.js del kit (spostamento alla prima visita), e
   la barra della lingua proposta qui sotto non si usa più (le sue regole restano, senza effetto).
   - La scelta della lingua con le sigle, in alto a destra (da telefono accanto al menu, se ci sta), nel menu del telefono
     coi nomi interi e in fondo; la lingua della pagina è navy con la riga di corallo, le altre grigie (5,9:1 sull'avorio).
   - La barra della lingua proposta (assets/js/lingua.js) sta SOPRA la testata e sposta la pagina di quanto è alta: non
     copre il calendario, i pulsanti, la barra del telefono né la barra dei cookie. Entra dall'alto (solo transform,
     240 ms, ease-out forte, una volta); con «riduci animazioni» compare e basta. */
.lingua-scelta { display: flex; align-items: center; gap: .45em; font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .14em; white-space: nowrap; }
.lingua-scelta a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 3px;
  color: var(--grigio-testo); text-decoration: none; transition: color .16s ease;
}
.lingua-scelta a[aria-current] { color: var(--navy); }
.lingua-scelta a[aria-current]::after {
  content: ""; position: absolute; left: 3px; right: calc(3px + .14em); bottom: 10px; height: 1.5px; background: var(--corallo);
}
.lingua-scelta__sep { color: var(--linea-blu); }
@media (hover: hover) and (pointer: fine) {
  .lingua-scelta a:hover { color: var(--navy); }
}
/* nella testata la scelta sta accanto al pulsante: stretta, così il pulsante resta su una riga (misurato da 861 a 1920 px) */
.testata .lingua-scelta { font-size: .8125rem; letter-spacing: .08em; gap: .2em; }
.testata .lingua-scelta a { padding: 0 2px; }
.testata .lingua-scelta a[aria-current]::after { left: 2px; right: calc(2px + .08em); }
.testata .btn { white-space: nowrap; }
/* da 861 a 1359 px il menu in alto non c'è (c'è il menu a tutto schermo): il logo a sinistra, il resto a destra */
@media (min-width: 861px) and (max-width: 1359px) {
  .testata__in { grid-template-columns: auto 1fr; }
  .testata__azioni { grid-column: 2; }
}
@media (max-width: 860px) {
  .lingua-scelta { font-size: .8125rem; letter-spacing: .1em; gap: .3em; }
}
/* § 25-bis · da telefono stretto (fino a 560 px) cinque sigle accanto al logo e al menu non ci stanno senza rimpicciolire il
   logo (misurato: a 390 px il logo scendeva da 180 a 97 px): le sigle vanno su una riga loro, sotto, dentro la testata,
   allineate al menu; la testata si allunga di 30 px (--header-h: la pagina, i salti alle sezioni, il menu e il foglio del
   calendario la seguono da soli). Ogni sigla è un bersaglio di almeno 32 × 30 px. Da 561 px restano accanto al menu. */
@media (max-width: 560px) {
  :root { --header-h: 102px; }
  .testata__in { height: 72px; }
  .testata .lingua-scelta {
    position: absolute; left: 0; right: 0; top: 72px; height: 30px;
    justify-content: flex-end; gap: 0; padding: 0 calc(var(--gutter) - 6px) 0 var(--gutter);
    font-size: .75rem; letter-spacing: .12em;
  }
  .testata .lingua-scelta a { min-height: 30px; min-width: 32px; justify-content: center; padding: 0 3px; }
  /* la riga di corallo sotto la sigla, non sotto tutto il bersaglio */
  .testata .lingua-scelta a[aria-current]::after { display: none; }
  .testata .lingua-scelta a > span[aria-hidden] { position: relative; }
  .testata .lingua-scelta a[aria-current] > span[aria-hidden]::after {
    content: ""; position: absolute; left: 0; right: .12em; bottom: -5px; height: 1.5px; background: var(--corallo);
  }
  .testata .lingua-scelta__sep { width: 4px; text-align: center; }
}

/* nel menu del telefono: i nomi interi, sotto il pulsante */
.menu-tel__lingue {
  display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px;
  font-family: var(--sans); font-size: 1rem; letter-spacing: .06em;
  opacity: 0; transform: translateY(14px); transition: opacity .16s ease, transform .16s var(--ease-out);
}
.menu-tel.aperto .menu-tel__lingue { opacity: 1; transform: none; transition: opacity .4s ease .46s, transform .45s var(--ease-out) .46s; }
.menu-tel .menu-tel__lingue a { font-size: inherit; padding: 10px 0; border-bottom: 0; color: var(--grigio-testo); }
.menu-tel .menu-tel__lingue a[aria-current] { color: var(--navy); text-decoration: underline; text-decoration-color: var(--corallo); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* in fondo: le lingue sono collegamenti veri */
.lingue a { color: var(--grigio-testo); }
.lingue a[aria-current] { color: var(--navy); font-weight: 500; }

/* la barra della lingua proposta dal telefono */
.barra-lingua {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 18px;
  min-height: 44px; padding: 6px 56px 6px var(--gutter);
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: .9375rem; letter-spacing: .02em; line-height: 1.3;
  transform: translateY(-100%); transition: transform .24s var(--ease-out);
}
.barra-lingua.aperta { transform: none; }
.barra-lingua__testo { margin: 0; }
.barra-lingua__vai {
  display: inline-flex; align-items: center; min-height: 32px;
  color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: var(--corallo);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.barra-lingua__chiudi {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff;
  font-size: 1.625rem; line-height: 1; cursor: pointer;
}
.barra-lingua a:focus-visible, .barra-lingua__chiudi:focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .barra-lingua__chiudi:hover { background: rgba(255, 255, 255, .12); }
}
.barra-lingua__chiudi:active { transform: scale(.94); }
html.con-barra-lingua body { padding-top: var(--barra-lingua, 0px); }
html.con-barra-lingua .testata { top: var(--barra-lingua, 0px); }
html.con-barra-lingua .menu-tel { padding-top: calc(var(--header-h) + 24px + var(--barra-lingua, 0px)); }
@media (max-width: 860px) {
  .barra-lingua { font-size: .875rem; justify-content: flex-start; gap: 0 12px; padding-left: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .barra-lingua { transform: none; transition: none; }
  .menu-tel__lingue, .menu-tel.aperto .menu-tel__lingue { transform: none; transition: opacity .2s ease; }
}

/* collaudo delle lingue (16/10/2026): con la barra della lingua aperta la testata scende della sua altezza.
   1 · i salti alle sezioni (menu, «Richiedi la disponibilità») si fermano sotto la testata, non sotto la sua metà;
   2 · da telefono il foglio del calendario non sale sotto la testata (sui telefoni bassi, 360×640 e 320×568). */
html.con-barra-lingua { scroll-padding-top: calc(var(--header-h) + 8px + var(--barra-lingua, 0px)); }
@media (max-width: 860px) {
  html.con-barra-lingua .cal { max-height: min(88dvh, calc(100dvh - var(--header-h) - var(--barra-lingua, 0px) - 12px)); }
}

/* § 26 · audit del pannello (16/10/2026, P9): il titolo grande lo scrive la cliente. Una parola lunghissima (o una
   traduzione lunga) va a capo dentro lo schermo invece di uscire a destra a 320 px; le parole normali non cambiano.
   (Il limite è sulla larghezza dello schermo, non in percentuale: una percentuale cambiava l'altezza della parola in
   corsivo anche coi titoli normali.) */
.hero h1 .parola, .hero h1 em { max-width: calc(100vw - 2 * var(--gutter, 16px)); overflow-wrap: break-word; }