/* ============================================================
responsive.css — adattamento a tablet e smartphone
============================================================
PERCHÉ SERVE L'`!important` OVUNQUE
Nelle pagine tutti gli stili sono inline (`style="..."`), perché
le artboard vengono esportate così. Una regola normale di un
foglio di stile perde SEMPRE contro un attributo `style`:
l'unico modo di scavalcarlo è `!important`. Non è trascuratezza,
è l'unica strada.
COME SI AGGANCIA
Ogni regola parte da una classe messa a mano nel markup
(`sez`, `griglia-3`, `riga-corso`, …). Se una sezione nuova non
si adatta, quasi sempre manca la classe nel file .html.
LE SOGLIE
1439px il menu diventa a scomparsa: gli otto link della home
stanno in fila con logo e i due pulsanti («Fai un
quesito» e «Richiedi un corso») solo da ~1420px, e sotto
vanno a capo su due righe (con un pulsante solo bastavano
~1300px e la soglia era 1320). Vale per tutte le pagine,
così la testata non cambia passando da una all'altra
1023px le ancore si fermano sotto la testata compatta
900px griglie a 3 colonne → 2, colonne di testo → 1
640px tutto su una colonna, margini stretti
Da 1440px in su l'unica regola attiva è quella che nasconde il
pulsante «Menu»: il desktop resta identico a com'era.
============================================================ */
/* ------------------------------------------------------------
1. TESTATA — menu a scomparsa
------------------------------------------------------------
Struttura nel markup:
Da 1440px in su `.menu-pannello` è `display: contents`: sparisce
come scatola e nav + pulsanti tornano figli diretti dell'header,
cioè esattamente il layout di prima. Sotto, diventa il pannello
che si apre. Lo stato è quello nativo di ; `menu.js`
serve solo a richiuderlo quando si sceglie una voce o si tocca
fuori, perché i link #sezione non cambiano pagina. */
.menu-toggle {
list-style: none;
cursor: pointer;
align-items: center;
gap: 7px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #2E4E60;
border: 1px solid #EAD9C8;
border-radius: 4px;
padding: 11px 14px;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle::marker { content: ''; }
.menu-mobile[open] .menu-toggle { background: #2E4E60; color: #ffffff; border-color: #2E4E60; }
.menu-toggle:focus-visible { outline: 2px solid #E4761F; outline-offset: 2px; }
/* --- da 1440px in su: com'era prima --- */
@media (min-width: 1440px) {
.menu-mobile { display: none !important; }
.menu-pannello { display: contents; }
}
/* --- sotto i 1440px: pannello a scomparsa --- */
@media (max-width: 1439.98px) {
.menu-mobile { display: block; flex-shrink: 0; }
.menu-toggle { display: flex; }
.menu-pannello { display: none; }
.menu-mobile[open] ~ .menu-pannello {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border-bottom: 1px solid #EAD9C8;
box-shadow: 0 14px 30px rgba(43, 54, 64, 0.14);
padding: 6px 20px 18px;
}
.menu-mobile[open] ~ .menu-pannello .nav-principale {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 0 !important;
}
.menu-mobile[open] ~ .menu-pannello .nav-principale > a {
display: flex;
align-items: center;
min-height: 48px;
font-size: 16px !important;
border-bottom: 1px solid #F0E3D6;
}
.menu-mobile[open] ~ .menu-pannello .nav-principale > a:last-child { border-bottom: 0; }
/* il pulsante d'azione chiude il pannello, a tutta larghezza */
.menu-mobile[open] ~ .menu-pannello .cta-header {
display: block !important;
width: 100%;
margin-top: 14px;
padding: 15px 18px !important;
text-align: center;
}
/* «Fai un quesito» e il pulsante d'azione: affiancati in testata,
uno sotto l'altro nel pannello */
.menu-mobile[open] ~ .menu-pannello .cta-gruppo {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
}
/* --- testata compatta sotto i 640px --- */
@media (max-width: 640px) {
.sito-header { padding: 9px 16px !important; gap: 10px !important; }
.header-marchio img { height: 40px !important; }
.header-marchio span { font-size: 15px !important; }
.menu-toggle { padding: 10px 12px; }
/* pagine senza menu (news, articoli, privacy): il link «Torna alla
home» sparisce, perché lo stesso comando è già nel pulsante
flottante in basso a sinistra (.fab-home), presente su tutte */
.solo-desktop { display: none !important; }
}
/* le ancore devono fermarsi sotto la testata, che ora è più bassa */
@media (max-width: 1023px) {
section[id], aside[id], div[id] { scroll-margin-top: 76px !important; }
}
@media print {
.menu-mobile { display: none !important; }
.menu-pannello { display: contents; }
}
/* ------------------------------------------------------------
2. MARGINI DELLE SEZIONI
------------------------------------------------------------
`.sez` = qualunque sezione con 56px di margine laterale
`.sez-alta` = quelle con 64px o più di margine sopra/sotto */
@media (max-width: 900px) {
.sez { padding-left: 28px !important; padding-right: 28px !important; }
.sez-alta { padding-top: 56px !important; padding-bottom: 56px !important; }
}
@media (max-width: 640px) {
.sez { padding-left: 20px !important; padding-right: 20px !important; }
.sez-alta { padding-top: 40px !important; padding-bottom: 40px !important; }
}
/* ------------------------------------------------------------
3. GRIGLIE
------------------------------------------------------------
`.griglia-3` schede (servizi, pubblicazioni, testimonianze)
`.griglia-4` le statistiche sulla fascia blu
`.griglia-testo` le due colonne asimmetriche (titolo + testo)
`.griglia-form` le coppie di campi nei moduli
`.riga-corso` una riga del calendario: data | titolo | Iscriviti */
@media (max-width: 900px) {
.griglia-3 { grid-template-columns: repeat(2, 1fr) !important; }
.griglia-testo { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px) {
.griglia-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
.griglia-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 16px !important; }
.griglia-form { grid-template-columns: 1fr !important; gap: 16px !important; }
.riga-corso { grid-template-columns: 1fr !important; gap: 10px !important; padding: 15px 16px !important; }
.riga-corso > a {
text-align: center;
padding: 13px 18px !important;
}
}
/* ------------------------------------------------------------
4. RIFINITURE
------------------------------------------------------------ */
@media (max-width: 900px) {
/* nella sezione contatti la colonna dei recapiti passa
da fianco a sotto: il filetto ruota di conseguenza */
.recapiti {
border-left: 0 !important;
padding-left: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
padding-top: 26px !important;
}
}
@media (max-width: 640px) {
/* i titoli a corpo fisso (30-42px) sono troppo grandi su 390px */
.titolo-hero { font-size: clamp(26px, 7.4vw, 42px) !important; }
.titolo-sez { font-size: clamp(23px, 6.2vw, 32px) !important; }
/* foto dell'apertura: a tutta larghezza e più bassa,
la cornice sfalsata non ha senso senza spazio attorno */
.foto-hero { width: 100% !important; height: 240px !important; }
.foto-hero-cornice { display: none !important; }
/* piè di pagina su due righe invece che su una */
.sito-footer { flex-wrap: wrap !important; gap: 14px !important; }
}