/* ============================================================================
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'" + informativa + "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