/* ============================================================================
   Makhymo · correzioni responsive per telefono e tablet
   Caricato per ultimo su tutte le pagine, dopo il tema e i moduli.

   Perche' esiste questo file: il design system del sito ha un solo punto di
   rottura (820px), quindi fra telefono e tablet il layout e' identico e nessuno
   dei due riceve attenzioni specifiche. Qui stanno le regole che mancavano,
   raccolte in un posto solo invece che sparse in 318 pagine.

   Nessuna regola tocca il desktop: tutto vive dentro una media query.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. BERSAGLI DA TOCCARE  (fino a 1024px: telefoni e tablet)
   Con il dito non si ha la precisione del mouse. La regola condivisa nel
   settore e' 44px di lato minimo; nel footer i link erano alti 23px con 6px
   di spazio, quindi due voci vicine distavano meno di 30px.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {

  /* Elenchi di link del footer, presenti su ogni pagina del sito */
  footer .elementor-icon-list-item { padding-bottom: 0 !important; }
  footer .elementor-icon-list-item > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Link territoriali in fondo alle pagine di servizio provinciali */
  .mk-territ-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Icone social: l'icona resta della sua dimensione, si allarga solo l'area
     sensibile al tocco. Cosi' il tocco e' comodo ma la grafica non cambia. */
  footer a.elementor-social-icon,
  footer .elementor-social-icon { position: relative; }
  footer a.elementor-social-icon::after,
  footer .elementor-social-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Link legali (privacy, cookie, preferenze): erano alti 22px.
     iubenda inietta il proprio CSS a runtime e vince su qualunque regola
     scritta qui, anche con !important. Invece di contendere la cascata,
     si allarga l'area sensibile con uno pseudo-elemento: iubenda non ha
     regole su ::after, quindi non c'e' conflitto e la grafica non cambia. */
  p.mk-legal-links { line-height: 46px !important; }
  p.mk-legal-links a[class],
  footer p.mk-legal-links a[class] { position: relative !important; }
  .mk-legal-links a::after {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Comandi di zoom della mappa territorio */
  .leaflet-touch .leaflet-bar a,
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  /* Chiusura della scheda prodotto */
  .sm-pc-modal-close {
    width: 44px !important;
    height: 44px !important;
  }

  /* Pulsanti di invio: erano alti 42px */
  .mk-form button,
  .bd-form button,
  .mk-btn-primary,
  button.mk-btn-primary { min-height: 46px; }
}

/* ---------------------------------------------------------------------------
   2. MODULI DI CONTATTO  (fino a 1024px: telefoni E tablet)
   Safari ingrandisce la pagina quando si tocca un campo con testo sotto i 16px,
   e poi la lascia ingrandita: succede su iPhone e allo stesso modo su iPad,
   quindi la soglia va portata fino a 1024px e non fermata ai telefoni.
   La spunta della privacy era larga 13px: troppo poco per un campo obbligatorio,
   su qualsiasi schermo si tocchi con il dito.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select { font-size: 16px !important; }

  /* min-width e min-height, non width/height: cosi' la misura tiene anche dove
     un altro foglio (scheda prodotto, moduli Elementor) impone la propria. */
  .mk-check input[type="checkbox"],
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: #C6183D;
  }

  /* La riga del consenso privacy era impaginata con display:flex. Il testo pero'
     e' spezzato dal link ("Ho letto e accetto l'" + <a>informativa</a> + "ai sensi
     dell'art. 13..."), e flex trasforma ogni frammento in un elemento a se':
     su schermo stretto diventano tre colonne strette affiancate, con l'ultima
     tagliata fuori. Torna a essere un normale paragrafo, con il quadratino
     affiancato: il testo scorre come si deve e resta leggibile.
     Serve !important perche' su alcune pagine la regola flex sta in un <style>
     dentro il corpo, quindi dopo questo foglio. */
  .mk-check {
    display: block !important;
    min-width: 0;
    line-height: 1.55;
  }
  .mk-check input[type="checkbox"] {
    float: left;
    margin-right: 11px;
    margin-top: 2px;
  }
  .mk-check a { white-space: normal; }

  /* Il modulo e' una griglia a colonna automatica: la colonna si dimensiona sul
     contenuto piu' largo, quindi la riga della spunta (quadratino + testo che
     non si spezza) faceva sporgere TUTTE le righe oltre il contenitore.
     minmax(0,1fr) impedisce alla colonna di superare lo spazio disponibile. */
  .mk-form { grid-template-columns: minmax(0, 1fr); }
  .mk-form > *, .mk-form .frow, .mk-form .mk-check { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   3. TESTI MINUTI  (fino a 1024px: telefoni e tablet)
   Etichette, occhielli e badge stavano fra 10,5 e 11px: su uno schermo tenuto
   a mezzo metro dagli occhi diventano faticosi. Portati a 12px, che resta
   piccolo rispetto al corpo del testo ma si legge. Un pixel CSS misura uguale
   su telefono e su tablet, quindi la soglia vale per entrambi.

   Qui serve !important, e non e' pigrizia: alcune di queste regole vivono in
   blocchi <style> dentro il corpo delle pagine (.mky-card-label, .bd-card .k),
   quindi arrivano DOPO questo foglio e a parita' di specificita' vincerebbero.
   Trattandosi di una soglia minima di leggibilita', e' corretto che prevalga.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mk-eyb, .mk-badge, .mk-lc-cat, .mk-latest-eyb, .mk-catchip, .mk-ameta,
  .sm-bsl-badge, .sm-bsl-info-lbl, .sm-trr-eyebrow, .sm-ptl-badge,
  .sm-ptl-label, .sm-ptl-guar-lbl, .sm-sadv-tag, .sm-sadv-item-name,
  .sm-pc-badge, .sm-pc-type, .sm-pc-brand, .sm-pc-spec-lbl, .sm-pc-price-lbl,
  .bd-badge, .bd-card .k {
    font-size: 12px !important;
  }
  /* questi in widgets2.css hanno un selettore piu' specifico del mio
     (.sm-trr .sm-trr-eyebrow), quindi vanno pareggiati o restano a 11px */
  .sm-trr .sm-trr-eyebrow,
  .sm-trr .sm-trr-legend-item,
  .sm-trr .sm-trr-zone-badge,
  .sm-trr .sm-trr-comuni-label,
  .sm-sadv .sm-sadv-tag,
  .sm-orb .sm-orb-badge,
  .sm-orb .sm-orb-detail-eyebrow,
  .sm-orb .sm-orb-detail-type,
  .sm-orb .sm-orb-detail-stat-lbl,
  .sm-orb .sm-orb-detail-tag {
    font-size: 12px !important;
  }
  /* etichette con selettore semplice, sfuggite al primo giro */
  .sm-trr-stat-lbl, .sm-tga-badge, .sm-sty-badge, .sm-soc-badge, .sm-ibd-badge,
  .sm-st-badge, .sm-st-stat-lbl, .sm-pc-banner-feat-lbl, .mky-badge, .mky-card-label {
    font-size: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   4. GRIGLIE STRETTE  (fino a 430px: telefoni piccoli e medi)
   Quattro riquadri affiancati a due a due lasciano 150px per colonna: le frasi
   come "Copertura completa - Provincia di Alessandria e Monferrato" si spezzano
   su cinque righe. Sotto i 430px vanno in colonna singola.
   ------------------------------------------------------------------------ */
@media (max-width: 430px) {
  /* widgets2.css impone "1fr 1fr !important" con selettore .sm-trr .sm-trr-stats:
     per avere la meglio serve la stessa specificita', non basta !important. */
  .sm-trr .sm-trr-stats,
  .sm-trr-stats { grid-template-columns: 1fr !important; }
  .sm-trr .sm-trr-stats > * { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   5. TABLET IN VERTICALE  (768-1024px)
   In questa fascia il sito mostra ancora impaginazioni a piu' colonne pensate
   per il desktop, con colonne piu' strette di quelle desktop. Le poche voci
   rimaste fuori misura vengono riportate dentro.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* i titoli non devono mai spezzare una parola a meta' */
  .ui-e-title, .mk-card h3, .sm-ptl-card h3 { overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------------------
   6. BARRA DI NAVIGAZIONE FISSA SU TELEFONO E TABLET
   Il tema marca gia' #wrapper-navbar come "sticky", ma la barra dentro e'
   in posizione assoluta: il contenitore resta alto zero e non c'e' nulla a cui
   agganciarsi, cosi' l'intestazione scorre via. Qui il contenitore diventa fisso
   e la barra torna nel flusso, dandogli la sua altezza.

   Lo stato "scorrimento" del tema funziona gia' anche su telefono (mette la
   classe uicore-scrolled sulla navbar, non sul body): trasparente sopra l'eroe,
   fondo chiaro e logo a colori appena si scorre. Non serve quindi dare un fondo
   proprio alla barra: basta renderla fissa e il resto lo fa il tema.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  #wrapper-navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9990;
  }
  /* la barra torna nel flusso, cosi' da dare l'altezza al contenitore fisso */
  #wrapper-navbar .uicore-header-wrapper { position: relative !important; }
  /* il menu a tutto schermo deve restare sopra la barra */
  .uicore-navigation-wrapper { z-index: 9999 !important; }

  /* la barra copre l'inizio della pagina: le ancore interne non devono
     finirci sotto */
  [id]:not(body) { scroll-margin-top: 96px; }
}

/* ---------------------------------------------------------------------------
   7. EROE DELLA HOME PIU' CORTO SU TELEFONO
   Su desktop resta com'e'. Su telefono occupava il 90% dello schermo (760px su
   844): si vedeva solo l'immagine e nulla del contenuto sottostante, e per
   capire di cosa si occupa l'azienda bisognava gia' scorrere.
   Dimezzato a 45vh, con i margini interni ridotti in proporzione.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-60 .elementor-element.elementor-element-6daa3db7 {
    --min-height: 45vh;
    --padding-top: 24px;
    --padding-bottom: 24px;
  }
}

/* ---------------------------------------------------------------------------
   8. MODULO "LE NOSTRE SOLUZIONI" A TUTTA LARGHEZZA SU TELEFONO
   Su 390px il modulo era largo 324: perdeva 66px in tre livelli annidati
   (padding della sezione 10px, margini di .e-con-inner 9px, margini propri 14px).
   Invece di neutralizzarli uno per uno, il modulo esce dai contenitori con la
   tecnica a tutta larghezza: funziona ovunque compaia, senza dipendere dagli
   identificativi Elementor della singola pagina.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sm-orb {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   9. COMPENSAZIONE DEI TITOLI PORTATI AL LIVELLO CORRETTO
   Alcuni titoli erano marcati h4/h5 dove la gerarchia richiedeva h3, e questo
   spezzava l'ordine dei titoli per chi naviga con un lettore di schermo.
   Cambiare il livello sistema la semantica ma altera l'altezza di riga, che nel
   tema dipende dal tag. Qui viene ripristinata quella originale: la grafica
   resta identica a prima, cambia solo cosa il tag comunica.
   Fuori da media query: vale a ogni larghezza, come l'aspetto che ripristina.
   ------------------------------------------------------------------------ */
h3.ui-e-accordion-title,
h4.ui-e-accordion-title { line-height: 1.4; }
h3.ui-e-post-title { line-height: 1.4; }

/* ---------------------------------------------------------------------------
   10. ELEMENTI CHE ELEMENTOR NASCONDEVA IN ATTESA DELLA PROPRIA ANIMAZIONE
   Elementor marca con .elementor-invisible gli elementi con animazione
   d'ingresso, e il suo JavaScript toglie la classe quando entrano nello schermo.
   Su un sito statico quel JavaScript non c'e' piu': la classe non viene mai
   rimossa e gli elementi resterebbero invisibili per sempre (803 su 307 pagine,
   fra cui la griglia degli articoli nelle pagine servizio).
   Qui tornano visibili subito. Si perdono le animazioni d'ingresso, che sul
   caricamento erano comunque un costo: il contenuto c'e' fin dal primo istante.
   Fuori da media query: vale a ogni larghezza.
   ------------------------------------------------------------------------ */
.elementor-invisible { visibility: visible !important; }

/* ---------------------------------------------------------------------------
   11. STRISCIA BIANCA IN FONDO AL FOOTER
   Il blocco "Dove operiamo" e' l'ultimo figlio del footer, ha bordo superiore
   bianco e testo pensati per un fondo scuro, ma non ha sfondo proprio: si vede
   quindi il bianco della pagina, e sotto il footer navy appare una striscia
   chiara con il testo nero.
   Lo sfondo va sul footer, non sul blocco: il blocco e' centrato con
   max-width 1180px e colorarlo lascerebbe i lati bianchi sugli schermi larghi.
   Le sezioni interne hanno gia' i propri colori, quindi il navy si vede solo
   dove prima restava scoperto.
   ------------------------------------------------------------------------ */
footer { background: #133055; }
.mk-territ-links { color: rgba(255,255,255,.72); }
.mk-territ-links a { color: #fff; }
.mk-territ-links a:hover { color: #ff9db1; }

/* ---------------------------------------------------------------------------
   12. FOTO NELLE SCHEDE DI SOTTOCATEGORIA
   Le schede mostravano un'emoji dentro un quadratino rosa da 62px. Al suo posto
   c'e' ora la foto del servizio, come fascia in cima alla scheda: i margini
   negativi la portano a filo dei bordi, e il raggio superiore combacia con
   quello della scheda (18px). Padding delle schede: 32px sopra, 28px ai lati,
   uniforme su tutte le 58 pagine che le usano.
   object-fit:cover evita che le foto si deformino, avendo proporzioni diverse.
   Fuori da media query: la scheda e' identica a ogni larghezza.
   ------------------------------------------------------------------------ */
.mk-card > .mk-cardimg {
  display: block;
  width: calc(100% + 56px);
  height: 172px;
  margin: -32px -28px 22px;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  background: #f1f3f7;
}
@media (max-width: 767px) {
  .mk-card > .mk-cardimg { height: 150px; }
}

/* ---------------------------------------------------------------------------
   13. FOTO CON LARGHEZZA E ALTEZZA SCRITTE NEL CODICE
   Per la velocita' di caricamento ogni foto ha nel codice le sue dimensioni
   reali (width e height), cosi' il browser le riserva lo spazio prima di
   scaricarla. Il browser pero' tratta quell'altezza come una regola di stile:
   dove il CSS della pagina fissa solo la larghezza, l'altezza restava quella
   originale in pixel e la foto si allungava (Chi Siamo: 540x893 invece di
   540x301).
   height:auto ricalcola l'altezza dalla larghezza mantenendo le proporzioni.
   :where() ha peso zero, quindi vince solo sugli attributi: le foto a cui il
   CSS da' un'altezza voluta (es. le schede qui sopra, 172px) la mantengono.
   ------------------------------------------------------------------------ */
:where(img[width][height]) { height: auto; }

/* ---------------------------------------------------------------------------
   14. SEZIONI CHE SI APRONO: TESTO TAGLIATO SU TELEFONO
   Le fasi del percorso (es. Consulenza IT), le zone della mappa, le schede
   servizi, rete e sicurezza si aprono con un'altezza massima fissa (da 200 a
   500px). Su telefono il testo va a capo molte più volte e superava quel
   limite: la parte finale restava nascosta. 2400px lascia spazio anche ai
   testi più lunghi e mantiene l'animazione di apertura.
   ------------------------------------------------------------------------ */
html body .sm-ptl-step.active .sm-ptl-body,
html body .sm-trr .sm-trr-zone.open .sm-trr-zone-body,
html body .sm-st-feat.expanded .sm-st-feat-body,
html body .sm-srv--nas .sm-srv-drawer.open,
html body .sm-net .sm-net-card.expanded .sm-net-card-detail,
html body .sm-sec .sm-sec-layer.expanded .sm-sec-layer-detail { max-height: 2400px; }

/* ---------------------------------------------------------------------------
   15. DIAGRAMMA DELL'INFRASTRUTTURA IT SU TELEFONO (pagine Consulenza IT)
   Su schermo grande i dispositivi stanno in posizioni fisse collegate da
   linee. Su telefono le posizioni in percentuale li accavallavano: riquadri
   e nomi uno sopra l'altro. Sotto i 640px diventano una griglia a tre
   colonne, senza linee, con i nomi che vanno a capo; toccando un dispositivo
   la scheda di dettaglio si apre come prima.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  html body .sm-cit .sm-cit-toolbar { flex-wrap: wrap !important; gap: 8px 16px; padding: 12px 16px !important; }
  html body .sm-cit .sm-cit-toolbar-right { display: flex !important; flex-wrap: wrap; gap: 8px 14px; }
  html body .sm-cit .sm-cit-canvas-area { height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; padding: 24px 10px 28px; }
  html body .sm-cit .sm-cit-canvas { display: none !important; }
  html body .sm-cit .sm-cit-node { position: relative !important; top: auto !important; left: auto !important; transform: none !important; min-width: 0; }
  html body .sm-cit .sm-cit-node-box { width: 52px !important; height: 52px !important; font-size: 24px; border-radius: 14px; }
  html body .sm-cit .sm-cit-node-label { white-space: normal; max-width: 100%; font-size: 11.5px; }
  html body .sm-cit .sm-cit-node-sub { white-space: normal; text-align: center; font-size: 9.5px; line-height: 1.3; margin-top: 0; }
}