/* Aggiunte di web2 al tema del portale storico.
   Valgono su tutte le pagine col tema storico: la vetrina (dove la sezione "Rilevatori" tiene insieme
   marcatempo, accessori e modalità dati) e le schede tecniche dei rilevatori. Stanno in un file e non
   in un <style> dentro i componenti perché servono a tutt'e due, e duplicarle vorrebbe dire tenerle
   allineate a mano. */

/* Solo le pagine separate: lì la barra del menu è fissa e senza questo margine il titolo ci finirebbe
   sotto. Sulla vetrina non serve, perché sopra c'è il video a tutta altezza. */
.pagina-vetrina { padding-top: 140px; }

/* I pannelli sono scuri col testo bianco: i link vanno in arancio come il resto degli accenti. */
.generale a { color: #ffba43; }
.generale .ritorno,
.generale .indice { font-size: 1.3em; margin-bottom: 0; }

/* ─────────────────────── Scala dei titoli e dei testi ───────────────────────
   Il tema mescola le unità: h2, h3 e i paragrafi sono in em, mentre gli h4 li fissa Bootstrap a
   18px ASSOLUTI e non li scala mai. Anche alla base per cui il tema è disegnato (14px, quella di
   Bootstrap) l'ordine non regge del tutto: già su desktop il capitolo (h4, 18px) usciva più piccolo
   del testo che introduce (1,6em = 22px).

   Sul portale storico va peggio, perché la home pubblica carica anche i fogli dell'area
   amministrativa, che portano la base a 10px: lì tutto tranne gli h4 si rimpicciolisce, e sotto i
   480px il capitolo diventava più GRANDE del titolo di sezione (h2 15, h3 14, h4 18).

   Si fa una cosa sola, alla radice: si fissa la base di queste sezioni al valore per cui il tema è
   disegnato — così i due portali calcolano gli stessi identici valori — e si riscrive la scala per
   intero, h2 > h3 > h4 > testo a ogni larghezza. Del tema si corregge anche il salto degli h2, che
   sotto i 900px tornavano a CRESCERE (2,2em → 2,5em) scavalcando la fascia precedente.

   Lo stesso problema si ripresenta sotto i titoli: gli elenchi puntati e le tabelle il tema non li
   scala affatto. Restavano a misura piena anche dove il testo scende, e un elenco finiva più grande
   del capitolo che lo introduce (sotto i 900px: elenco 22,4 contro h4 20,3; sotto i 480px, 17,5).
   Anche loro scendono insieme al testo, perché quello che conta non è la misura di ciascuno ma
   l'ordine fra tutti — per questo stanno tutte qui, una sotto l'altra, invece che sparse nel file.

   Valori risultanti, uguali sui due portali:
                 h2/h1   h3     h4     testo ed elenchi   specifiche   confronto e ritorno
     ≥1200       42      30,8   24,5   22,4               19,6         18,2
     ≤1199       36,4    28     24,5   22,4               19,6         18,2
     ≤899        36,4    28     20,3   16,1               15,4         14,7
     ≤480        25,2    21     17,5   16,1               15,4         14,7                    */
.generale {
    font-size: 14px;
}

.generale h2,
.generale h1.titolo-scheda {
    font-size: 3em;
}

.generale h4 {
    font-size: 1.75em;
}

/* Anche le due tabelle: la misura sta qui con le altre — se stesse in fondo, insieme al resto del
   loro aspetto, verrebbe DOPO le media query e le annullerebbe (successo, misurato). Là sotto
   restano solo colori, bordi e spaziature. */
.tabella-specifiche { font-size: 1.4em; }
.tabella-vetrina { font-size: 1.3em; }

/* Il titolo delle schede rilevatore è un h1 — è il nome del prodotto, cioè di che cosa parla la
   pagina — ma si vede come l'h2 di una sezione. */
.generale h1.titolo-scheda {
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0.5em 0;
    line-height: 1.3;
    color: #fff;
}

/* Livello intermedio fra il titolo della pagina (h2) e i suoi capitoli (h4): serve alla sezione
   "Prodotti", che tiene insieme tre argomenti.

   Il corpo va imposto con !important, che di solito è da evitare: il tema fissa gli h3 con
   "font-size: <n>px !important" dentro le sue media query — li usa per il ticker della copertina —
   e un !important batte qualunque specificità, persino uno stile inline (provato). */
.generale h3.sezione {
    font-size: 2.2em !important;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 1.4em 0 0.6em;
    padding-top: 0.8em;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Il primo titolo di sezione sta subito sotto quello della pagina: la riga di separazione, che fra
   una sezione e l'altra serve, lì diventerebbe un filo appiccicato al titolo. */
.generale h3.sezione:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0.6em;
}

/* Il tema qui porta gli h2 a 2,2em ma lascia il testo a 1,6em: fra i due resterebbero 8px per
   DUE livelli, e titolo di sezione e capitolo verrebbero fuori praticamente uguali. Si allarga
   l'alto invece di comprimere il basso. */
@media (max-width: 1199px) {
    .generale h2,
    .generale h1.titolo-scheda { font-size: 2.6em; }
    .generale h3.sezione { font-size: 2em !important; }
}

/* Solo qui il tema rimpicciolisce il testo (1,6em -> 1,15em). Scendono con lui, non prima, sia il
   titolo di capitolo sopra sia tutto quello che il tema si era dimenticato di scalare: elenchi,
   tabelle e il link di ritorno. */
@media (max-width: 899px) {
    .generale h4 { font-size: 1.45em; }
    .generale ul li { font-size: 1.15em; }
    .generale .ritorno,
    .generale .indice { font-size: 1.05em; }
    .tabella-specifiche { font-size: 1.1em; }
    .tabella-vetrina { font-size: 1.05em; }
}

@media (max-width: 480px) {
    .generale h2,
    .generale h1.titolo-scheda { font-size: 1.8em; }
    .generale h3.sezione { font-size: 1.5em !important; }
    .generale h4 { font-size: 1.25em; }
}

.generale ul { margin-bottom: 2em; }

/* Riquadri prodotto: le foto dei rilevatori hanno il fondo bianco, che su pannello scuro va staccato
   con un angolo arrotondato invece di finire in un rettangolo netto. */
.prodottolettore .picture { background: #fff; border-radius: 4px; }
.infolettore { margin-top: 10px; }
.infolettore .iva { font-size: 12px; color: rgba(255, 255, 255, 0.7); }

/* Due colonne, voce e valore: le specifiche di targa nelle schede rilevatore. */
.tabella-specifiche {
    width: 100%;
    margin-bottom: 2em;
    color: #fff;
    font-weight: 100;
}

.tabella-specifiche th,
.tabella-specifiche td {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: top;
}

.tabella-specifiche th { width: 34%; font-weight: 600; color: #ffba43; }

/* Più colonne, con intestazione: il confronto fra le modalità di scarico dati. */
.tabella-vetrina {
    width: 100%;
    margin-bottom: 2em;
    color: #fff;
    font-weight: 100;
}

.tabella-vetrina th,
.tabella-vetrina td {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: top;
    text-align: left;
}

.tabella-vetrina thead th { color: #ffba43; font-weight: 600; border-top: none; }

/* Su schermo stretto la tabella scorre da sola invece di sfondare la pagina. */
.tabella-scorrevole { overflow-x: auto; margin-bottom: 2em; }
.tabella-scorrevole .tabella-vetrina { margin-bottom: 0; min-width: 560px; }

@media (max-width: 767px) {
    .tabella-specifiche th { width: 40%; }
}