/* Regole comuni a tutte le pagine di lommo.it.
   Si carica dopo lo <style> di ogni pagina (tag messo da REF/_lavorazione/Sito/metti_sito_css.py),
   quindi a parità di selettore vince lui. Se cambia, alzare VER nello script e rilanciarlo. */

/* Margini laterali (29/10/2026). Molti blocchi (newsletter, FAQ, pagine città, intestazioni)
   scrivono padding:NN 0 e cancellavano il margine del .wrap: da telefono il testo toccava il bordo.
   .wrap.wrap pesa più di «.nl-band .inner» e simili. */
.wrap.wrap{padding-left:40px;padding-right:40px}
.pano-head,.how-head{padding-left:40px;padding-right:40px}
@media(max-width:880px){
  .wrap.wrap,.pano-head,.how-head{padding-left:22px;padding-right:22px}
}

/* Da telefono hero e footer ritrovano il respiro sopra e sotto: prima la regola mobile
   .wrap{padding:0 22px} lo azzerava, e il logo grande stava attaccato al menu. */
@media(max-width:760px){
  .hero{padding-top:44px;padding-bottom:64px}
  .foot-top{padding-top:56px;padding-bottom:30px}
  .foot-bot{padding-bottom:30px}
}

/* Scritta LOMMO.it sotto il pittogramma (scelta di EM, 29/10/2026): nell'hero e nel footer.
   NON nel logo del menu in alto, NON nella filigrana del CAD (quella è disegnata nel canvas). */
.hero .mark::after,.foot-top .fmark::after{
  content:"LOMMO.it";display:block;font-family:'Clash',sans-serif;font-weight:600;line-height:1;
  letter-spacing:.32em;text-indent:.32em;white-space:nowrap
}
.hero .mark::after{font-size:clamp(17px,4.8vw,26px);margin-top:.8em}
.foot-top .fmark::after{font-size:clamp(13px,3.2vw,18px);margin-top:.9em}

/* Concorsi: ente, luogo e data andavano a capo male (ente ridotto a «P…», data fuori dalla
   scheda, da telefono e da tablet). La riga ora si spezza. */
.meta{flex-wrap:wrap;row-gap:3px}
.meta .org{max-width:100%}

/* Pop-up «Resta sul pezzo» da telefono (4/11/2026). Era alto fino a calc(100vh - 48px) e agganciato
   al fondo: su iPhone 100vh è l'altezza a barre del browser nascoste, quindi con le barre in vista la
   scheda usciva in alto, sotto la barra di stato, e con lei la ×, l'unico modo di chiuderla.
   Ora l'altezza è quella che si vede (dvh; chi non lo conosce resta sulla regola della pagina),
   la × resta in vista mentre la scheda scorre, e da telefono c'è più aria intorno.
   Il campo email a 16px: sotto, iOS ingrandisce la pagina quando lo tocchi e non torna indietro. */
.nl-pop{max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
.nl-pop .x{position:sticky;top:-10px;right:auto;margin:-10px -10px -20px auto;z-index:1}
@media(max-width:760px){
  .nl-pop{left:20px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .nl-pop .pform input{font-size:16px}
}

/* Giro da telefono di tutte le pagine (4/11/2026, REF/_lavorazione/Sito/Prova telefono/giro.mjs).
   Campi a 16px sugli schermi a tocco: sotto, iOS ingrandisce la pagina quando li tocchi e spesso non
   torna indietro (preventivi, misure, formazione, concorsi, fisco e CAD stavano tra 12,5 e 15,5px).
   Al computer restano come sono. */
@media(hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px!important}
}
/* Il menu laterale chiuso sta fuori a destra, ma la sua ombra entrava nello schermo: una fascia
   grigia lungo il bordo destro di ogni pagina. Chiuso non ha ombra. */
.drawer{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.drawer:not(.show){box-shadow:none}
/* Schermi da 320px (iPhone SE, Android piccoli): titoli e totale uscivano di lato e la pagina
   si rimpiccioliva tutta. */
@media(max-width:360px){
  .misura .head-tool h1{font-size:25px}
  .khero h1{font-size:40px}
  .tool-prev .dock-inner{padding-left:14px;padding-right:14px;gap:8px}
  .tool-prev .dock .tot-mobile{font-size:22px}
  .tool-prev .tip::after{width:220px}
}
/* Misure: con i campi a 16px una tendina dal testo lungo allargava la riga oltre lo schermo. */
.misura .dim-row{min-width:0}
.misura .dim-row select{max-width:100%}