/* =========================================================================
   CCNL Metalmeccanici 2021 — UILM
   Foglio 2 di 6: BASE E STRUTTURA

   Impostazioni generali, intestazione con logo e ricerca, barra laterale.
   ========================================================================= */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--sfondo);
  padding-bottom: calc(var(--altezza-nav) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Su schermi grandi la navigazione passa a sinistra */
@media (min-width: 1000px) {
  body { padding-bottom: 0; padding-left: 232px; }
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; }

/* Contorno per chi naviga con la tastiera. Il giallo del marchio su fondo
   bianco dava 1.43:1, quasi invisibile: chi preme Tab non vedeva dove si
   trovava. Nessun colore singolo va bene su tutti i fondi (il chiaro sparisce
   sul bianco, lo scuro sparisce sul blu), quindi uso due anelli: uno dorato
   e uno bianco all'interno. Almeno uno dei due si stacca sempre. */
:focus-visible {
  outline: 3px solid var(--oro-bordo);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 4px;
}

.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- intestazione */
.intestazione {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, var(--blu) 0%, var(--blu-scuro) 100%);
  color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 2px 12px rgba(6, 47, 102, .28);
}

/* Sul telefono l'intestazione si ritira mentre scorri verso il basso, cosi'
   si guadagna spazio per il testo, e torna appena risali. Il JavaScript
   mette data-intestazione="nascosta" sul body. Su PC resta sempre al suo posto. */
@media (max-width: 999px) {
  /* il movimento e' continuo e guidato dallo scorrimento: niente transition,
     altrimenti resterebbe indietro rispetto al dito */
  .intestazione { will-change: transform; }
  body[data-intestazione="nascosta"] .intestazione {
    transform: translateY(-100%);
  }
  /* il menu di salto tabelle stava appiccicato SOTTO l'intestazione: se
     questa se ne va, deve salire anche lui, altrimenti resta un buco in alto */
  body[data-intestazione="nascosta"] .menu-tabelle {
    top: 0;
  }
}

/* chi ha chiesto meno animazioni: gestito dalla regola globale
   @media (prefers-reduced-motion) vicino all'inizio del file */

.intestazione-interno {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  max-width: 1180px; margin: 0 auto;
  min-height: var(--altezza-intestazione);
  /* riferimento del menu a tendina: cosi' il menu si allinea al bordo destro
     del bottone anche su schermo largo, dove questa riga e' piu' stretta
     dell'intestazione. */
  position: relative;
}

/* Comandi raggruppati in alto a destra. */
.comandi { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Il marchio prende lo spazio disponibile, cosi i comandi restano a destra.
   Puo' restringersi (min-width: 0): se il telefono e' molto stretto il testo
   si accorcia con i puntini invece di spingere fuori i pulsanti. */
.marchio {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  /* Il link deve essere largo SOLO quanto il logo e la scritta: prima si
     allargava a riempire il vuoto (flex: 1 1 auto), e cliccando su uno spazio
     apparentemente vuoto si tornava alla home. Sul telefono, dove la ricerca
     non c'e', occupava quasi tutta la barra.
     La ricerca resta comunque a destra grazie al suo margin-left: auto. */
  flex: 0 1 auto; min-width: 0;
}
.marchio:hover { text-decoration: none; }
.marchio-logo {
  width: 40px; height: 40px;
  border-radius: 50%;          /* il logo e' gia' rotondo: niente angoli */
  background: rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
/* Il testo sta accanto al logo anche sul telefono. Prima compariva solo
   sopra i 620px, cosi' su mobile si vedeva il logo e basta. */
.marchio-testo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marchio-testo strong, .marchio-testo small {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marchio-testo strong { font-size: 15px; font-weight: 700; }
.marchio-testo small { font-size: 11.5px; opacity: .82; }

/* Schermi stretti: testo un po' piu' piccolo, cosi' "CCNL Metalmeccanici"
   e "5 febbraio 2021 · UILM" restano interi anche su telefoni da 320px. */
@media (max-width: 619px) {
  .marchio { gap: 8px; }
  .marchio-testo strong { font-size: 13.5px; }
  .marchio-testo small { font-size: 10.5px; }
}

.ricerca-rapida {
  display: none; flex: 1; align-items: center; position: relative;
  max-width: 520px; margin-left: auto;
}
@media (min-width: 760px) { .ricerca-rapida { display: flex; } }

.ricerca-rapida input {
  width: 100%; padding: 10px 44px 10px 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 15px;
  /* accensione morbida del bordo: senza, il dorato comparirebbe di scatto */
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ricerca-rapida input::placeholder { color: rgba(255, 255, 255, .85); }
/* Campo attivo: NON cambia lo sfondo, si accende solo il bordo dorato.
   Cosi' si vede subito dov'e' il cursore senza il lampo chiaro sul blu.
   Il testo resta bianco (8:1 sul blu piu' chiaro dell'intestazione).
   L'alone e' disegnato con box-shadow e non con un bordo piu' spesso:
   il bordo occuperebbe spazio e il campo si allargherebbe a ogni click,
   facendo saltare il testo. */
.ricerca-rapida input:focus {
  background: rgba(255, 255, 255, .14);   /* identico allo stato a riposo */
  color: #fff;
  border-color: var(--giallo); outline: none;
  box-shadow: 0 0 0 3px rgba(255, 211, 77, .38);
}
/* il segnaposto resta uguale a riposo e da attivo: cosi' cliccando nel campo
   non cambia nulla tranne il bordo, che e' l'unico segnale. */
.ricerca-rapida input:focus::placeholder { color: rgba(255, 255, 255, .85); }

.bottone-cerca {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: currentColor;
}
/* La lente segue il colore del campo (currentColor): bianca sul blu.
   Prima diventava blu perché il campo si riempiva di bianco; ora il fondo
   resta blu, quindi una lente blu sparirebbe. */
.ricerca-rapida input:focus ~ .bottone-cerca { color: #fff; }

/* ------------------------------------------- tendina dei suggerimenti */
/* Elenco a comparsa sotto la barra di ricerca, mentre si scrive. */
.tendina {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 60;
  max-height: 320px; overflow-y: auto;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  text-align: left;
}
.tendina[hidden] { display: none; }

/* Sul telefono la tendina va SOPRA il campo, non sotto.
   Con la tastiera aperta lo spazio sotto il campo e' proprio quello coperto
   dalla tastiera: mettendola sotto finirebbe dietro la tastiera o fuori
   schermo. Sopra invece c'e' spazio libero.
   Il campo non si sposta e la pagina non salta: cambia solo dove appare
   l'elenco. Da PC resta sotto, come prima. */
@media (max-width: 759px) {
  .tendina {
    top: auto;
    bottom: calc(100% + 6px);
    /* meno altezza che da PC: appesa sopra il campo, deve entrare nello
       schermo anche quando la casella sta in alto (es. sezione Cerca).
       Non supera mai meta' schermo, cosi' non puo' uscire dal bordo. */
    max-height: min(230px, 45vh);
    /* La tendina sta SOPRA il campo, quindi l'elenco va letto dal basso
       verso l'alto. Le voci arrivano gia' dalla piu' pertinente alla meno:
       invertendole, la piu' pertinente resta subito attaccata al campo
       (dove sta il dito) e le altre salgono.
       Da PC, dove la tendina sta sotto, l'ordine resta normale. */
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
  .tendina[hidden] { display: none; }
}

/* Niente gap: la parte digitata (in grassetto) e il resto della parola devono
   restare attaccate, come un'unica parola. Con il gap si apriva uno spazio
   fra "fer" e "ie", che rendeva la voce meno leggibile. */
.tendina-voce {
  display: block;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--testo); font-size: 15px; text-align: left;
}
.tendina-voce:hover, .tendina-voce[aria-selected="true"] {
  background: var(--blu-chiaro); color: var(--blu);
}
.tendina-voce strong { font-weight: 700; color: var(--blu); }

/* Nell'intestazione blu la tendina deve staccarsi bene */
.intestazione .tendina { border-color: rgba(255, 255, 255, .2); }

.bottone-annulla {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--bordo-tenue); color: var(--testo-tenue); font-size: 15px;
}

.bottone-installa {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 0; border-radius: 999px;
  background: var(--giallo); color: #3a2c00;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
/* Il pulsante "Installa app" compare SOLO se il browser dichiara davvero il sito
   installabile: lo accende il JS togliendo l'attributo `hidden`. Per sicurezza,
   oltre a hidden, richiediamo anche che il dispositivo sia touch (classi messe
   sul <html> dal JS). Su un PC la classe `dispositivo-desktop` lo nasconde
   sempre, anche se il browser lanciasse l'evento di installabilita'. */
#bottone-installa[hidden] { display: none !important; }
html.dispositivo-desktop #bottone-installa { display: none !important; }

.bottone-installa span { display: none; }
@media (min-width: 900px) { .bottone-installa span { display: inline; } }

/* Pulsante del tema chiaro/scuro, in alto a destra nell'intestazione. */
.bottone-tema {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transition: background .15s, border-color .15s;
}
.bottone-tema:hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .5);
}

/* icona del tema: mostra sole o luna in base al tema attivo */
.bottone-tema .icona-luna { display: none; }
html[data-tema="scuro"] .bottone-tema .icona-sole { display: none; }
html[data-tema="scuro"] .bottone-tema .icona-luna { display: block; }

/* ------------------------------------------ pulsante comprimi menu (freccia) */
/* Sta dentro la barra laterale, in cima. Solo una freccia, centrata:
   ← per comprimere, → per riespandere. Niente testo: e' piu' pulito, e il
   significato resta chiaro. L'etichetta per gli screen reader e' in aria-label.
   I colori vengono dalle variabili del tema: la barra e' bianca in tema chiaro
   e scura in tema scuro. Con un bianco fisso il pulsante spariva sul chiaro;
   con --blu fisso sparirebbe sullo scuro, perche' --blu non cambia col tema.
   --tab-livello-testo invece si schiarisce da solo nel tema scuro. */
.bottone-menu {
  display: none;                      /* solo dove c'e' la barra laterale */
  align-items: center; justify-content: center;
  /* Il pulsante deve restare a 18px dal bordo sinistro in ENTRAMBI gli stati,
     cosi' non si sposta sotto il mouse quando il menu si apre o si chiude.
     Il margine compensa il padding della barra: 12px aperta, 8px compressa. */
  flex: 0 0 auto;
  width: 40px; height: 40px;
  margin: 8px 0 4px 6px;              /* 12 + 6 = 18px dal bordo */
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--blu-chiaro);
  color: var(--tab-livello-testo);
  transition: background .15s, border-color .15s, color .15s;
}
.bottone-menu:hover {
  background: var(--tab-livello-testo);
  border-color: var(--tab-livello-testo);
  color: var(--superficie);
}
.bottone-menu:focus-visible { outline: 3px solid var(--oro-bordo); outline-offset: 2px; }

/* mostra la freccia giusta in base allo stato */
.bottone-menu .freccia-destra { display: none; }
html[data-menu="compresso"] .bottone-menu .freccia-sinistra { display: none; }
html[data-menu="compresso"] .bottone-menu .freccia-destra { display: block; }

@media (min-width: 1000px) { .bottone-menu { display: flex; } }

/* ------------------------------------------- barra laterale comprimibile */
/* Il pulsante in intestazione aggiunge/toglie l'attributo su <html>.
   Compressa: la barra si riduce a icone, e la pagina guadagna spazio. */
@media (min-width: 1000px) {
  html[data-menu="compresso"] body { padding-left: 76px; }

  html[data-menu="compresso"] .navigazione { width: 76px; padding-left: 8px; padding-right: 8px; }
  html[data-menu="compresso"] .navigazione a {
    justify-content: center; padding: 12px 0; gap: 0;
  }
  html[data-menu="compresso"] .navigazione a span { display: none; }

  /* compresso: la freccia resta da sola, centrata dentro il pulsante.
     Il margine sinistro sale a 10px perche' la barra ha meno padding (8px):
     8 + 10 = 18px dal bordo, esattamente come da aperta.
     padding: 0 e non 10px 0, se no il pulsante diventerebbe piu' alto. */
  html[data-menu="compresso"] .bottone-menu {
    margin-left: 10px;
    padding: 0; justify-content: center;
  }
  html[data-menu="compresso"] .bottone-menu span { display: none; }
}

/* Su schermi piccoli il menu e' in basso e non si comprime: il pulsante
   e' nascosto (gia' gestito sopra). */

/* ------------------------------------------------------------- vista */
.vista { max-width: 1180px; margin: 0 auto; padding: 16px 14px 40px; }
.vista:focus { outline: none; }
@media (min-width: 700px) { .vista { padding: 22px 22px 56px; } }

.schermata[hidden] { display: none; }

/* ========================================================================
   SELETTORE DEL CONTRATTO (in alto a destra, accanto al tema)
   Il sito gestisce piu' contratti: qui si sceglie quale si sta leggendo.
   Sul telefono mostra solo il nome corto, sul PC anche il sottotitolo.
   ======================================================================== */
.selettore-contratto {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit; cursor: pointer;
  max-width: 260px;
  transition: background-color .16s ease, border-color .16s ease;
}
.selettore-contratto:hover { background: rgba(255, 255, 255, .24); }
.selettore-contratto:focus-visible {
  outline: 2px solid var(--giallo, #ffd34d);
  outline-offset: 2px;
}
.selettore-contratto-icona { display: flex; flex-shrink: 0; opacity: .9; }
.selettore-contratto-testi {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; min-width: 0; text-align: left;
}
.selettore-contratto-nome {
  font-size: 12.5px; font-weight: 700;
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* il sottotitolo serve sul PC; sul telefono occuperebbe una riga intera */
.selettore-contratto-sotto {
  font-size: 10.5px; opacity: .8;
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selettore-contratto-freccia { font-size: 10px; opacity: .85; flex-shrink: 0; }

@media (max-width: 759px) {
  /* telefono: solo la sigla del contratto, niente sottotitolo */
  .selettore-contratto { max-width: 150px; padding: 6px 8px; gap: 6px; }
  .selettore-contratto-icona { display: none; }
  .selettore-contratto-sotto { display: none; }
  .selettore-contratto-nome { font-size: 12px; max-width: 104px; }
}

/* ---------------------------------------------------------- menu a tendina */
.menu-contratti {
  /* Posizione di riserva; quella precisa la mette il JavaScript quando il
     menu si apre (posizionaMenu), misurando il bottone. Cosi' il menu cade
     esattamente sotto il selettore, allineato al suo bordo destro, qualunque
     cosa ci sia accanto nell'intestazione. */
  position: fixed;
  top: 70px;
  right: 14px;
  z-index: 60;
  /* mai piu' largo dello schermo: su un telefono stretto il menu si stringe
     invece di uscire dal bordo */
  width: min(320px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 8px;
  border-radius: 14px;
  background: var(--superficie, #fff);
  color: var(--testo, #16202e);
  border: 1px solid var(--bordo, #d8dee9);
  box-shadow: 0 18px 40px rgba(6, 20, 45, .28);
}
.menu-contratti[hidden] { display: none; }
.menu-contratti-titolo {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .68;
  padding: 4px 8px 8px;
}
.scegli-contratto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.scegli-contratto:hover { background: var(--blu-chiaro, rgba(11, 78, 162, .08)); }
.scegli-contratto.attivo {
  background: var(--blu-chiaro, rgba(11, 78, 162, .08));
  box-shadow: inset 3px 0 0 var(--blu, #0b4ea2);
}
.scegli-contratto-nome { font-size: 14px; font-weight: 700; }
.scegli-contratto-sotto { font-size: 12px; opacity: .78; }
.scegli-contratto.attivo .scegli-contratto-nome::after {
  content: " ✓"; font-weight: 400;
}
.menu-contratti-nota {
  margin: 8px 8px 2px; font-size: 11.5px; line-height: 1.4; opacity: .7;
}

/* l'intestazione resta sempre un riferimento valido, anche se la riga interna
   cambia misura */
.intestazione { position: relative; }
.intestazione-interno { position: relative; }