/**
 * Correzioni sopra il foglio del prototipo.
 *
 * Sta in un file separato perché assets/css/polo.css deve restare identico
 * al prototipo: così un suo aggiornamento si sovrascrive senza perdere nulla.
 */

/* Fondo per le card senza immagine, finché il campo `area` non esiste. */
.card-media-vuota{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg, var(--navy-800), var(--navy-700));
}
.card-media-vuota span{
	color:rgba(255,255,255,.62); font-weight:700; font-size:.82rem;
	letter-spacing:.14em; text-transform:uppercase;
}

/* -----------------------------------------------------------------------
 * Login: riquadro del single sign-on.
 * Stesse classi della pagina Elementor precedente, così eventuali stili
 * altrove continuano ad applicarsi. Il colore segue la pelle del dominio.
 * --------------------------------------------------------------------- */
.izeos-box{
	border:1px solid var(--line); border-radius:24px; padding:2.2rem 1.6rem;
	max-width:500px; margin:2.5rem auto; text-align:center; background:#fff;
	box-shadow:var(--sh-2);
}
.izeos-top-logo{ margin-bottom:1.4rem; display:flex; justify-content:center }
.izeos-top-logo .logo{ color:var(--navy-900) }
.izeos-top-logo .logo-parole b{ color:var(--navy-900) }
.izeos-title{
	font-size:1.5rem; font-weight:700; margin:0 0 .6rem; color:var(--ink);
	font-family:var(--f-display); letter-spacing:-.02em;
}
.izeos-sub{ margin:0 0 1.5rem; color:var(--ink-50); font-size:1rem }
.izeos-button{
	display:inline-block; padding:.7rem 3.4rem; border-radius:6px; font-weight:700;
	color:#fff; background:var(--brand); cursor:pointer; margin:0 auto 1.4rem;
	font-size:.95rem; text-transform:uppercase; text-decoration:none; min-height:44px;
	line-height:1.8;
}
.izeos-button:hover{ background:var(--brand-600); text-decoration:none; color:#fff }
.izeos-register{ font-size:.9rem; color:var(--ink-50); margin:0 }
.izeos-register a{ text-decoration:none; font-weight:600; color:var(--brand) }

@media (max-width:480px){
	.izeos-box{ width:100%; padding:1.5rem 1rem }
	.izeos-title{ font-size:1.2rem }
	.izeos-button{ width:100%; padding-left:0; padding-right:0 }
}

/* -----------------------------------------------------------------------
 * Striscia di servizio sotto i 400 px.
 *
 * Il prototipo nasconde i due claim e centra la riga, ma la pastiglia del
 * dominio bordeaux è più lunga di quella del blu ("... universitario
 * Nurse24"): a 360 px la riga sfora di 2 px e la pagina scorre in
 * orizzontale. La riga va quindi lasciata andare a capo.
 * --------------------------------------------------------------------- */
@media (max-width:400px){
	.hdr-utility-in{ flex-wrap:wrap; row-gap:.25rem; justify-content:center }
	.hdr-utility-in > *{ min-width:0 }
	.hu-sep{ display:none }
	.hu-ruolo{ white-space:normal; text-align:center }
}

/* -----------------------------------------------------------------------
 * hidden deve nascondere davvero.
 *
 * Il browser nasconde gli elementi con l'attributo hidden tramite
 * [hidden]{display:none}, ma e' una regola del browser: qualsiasi regola
 * del foglio di stile che imposti display la batte. .card{display:flex} lo
 * faceva, quindi le card "nascoste" dal catalogo restavano disegnate.
 *
 * Si vedevano tutti i corsi invece di 24, la pagina era alta 29.000 pixel
 * e il pulsante "mostra altri" sembrava non fare niente: le card che
 * doveva aggiungere erano gia' tutte li'.
 *
 * Vale per ogni elemento, non solo per le card: e' il comportamento che
 * l'attributo hidden dovrebbe avere ovunque.
 * -------------------------------------------------------------------- */
[hidden]{ display:none !important }

/* -----------------------------------------------------------------------
 * Filtri laterali: etichette lunghe.
 *
 * Il chip eredita white-space:nowrap, quindi "Laurea magistrale a ciclo
 * unico" non andava a capo: il conteggio veniva spinto sei pixel fuori dal
 * pannello e tagliato. Il chip sembrava senza numero e il testo arrivava a
 * filo dei bordi.
 *
 * Si lascia andare a capo l'etichetta e si tiene il numero fermo a destra,
 * allineato in alto cosi' su due righe resta agganciato alla prima.
 * -------------------------------------------------------------------- */
.cerca-filtri .chip{
	white-space:normal;
	align-items:flex-start;
	gap:.6rem;
	line-height:1.3;
	text-align:left;
	padding-top:.5rem;
	padding-bottom:.5rem;
}
.cerca-filtri .chip b{
	flex:0 0 auto;
	font-variant-numeric:tabular-nums;
}

/* -----------------------------------------------------------------------
 * Login: il marchio su fondo chiaro.
 *
 * Il marchio e' disegnato per la testata, che e' scura: il wordmark
 * Nurse24 e' un PNG bianco, il filetto e' bianco al 26% e "Polo di
 * orientamento" e' bianco al 65%. Dentro il riquadro di accesso, che e'
 * bianco, restava visibile solo il titolo: le altre tre parti c'erano ma
 * non si vedevano.
 *
 * Il PNG bianco diventa scuro con brightness(0), quindi il marchio resta
 * al suo posto invece di essere sostituito da testo. Filetto e
 * sottotitolo seguono currentColor, che qui e' gia' il colore giusto per
 * ciascuna delle due pelli.
 *
 * Quando arrivera' il logo Nurse24 definitivo, se ne esiste una versione
 * scura conviene usare quel file al posto del filtro.
 * -------------------------------------------------------------------- */
.izeos-top-logo .logo-polo{ filter:brightness(0) }
.izeos-top-logo .logo-riga{ background:currentColor; opacity:.25 }
.izeos-top-logo .logo-parole span{ color:currentColor; opacity:.62 }
/*
 * Stessa storia per il marchio IZEOS del dominio blu: .logo svg porta
 * color:#fff a mano, pensato per la testata scura, e nel riquadro bianco
 * spariva. Qui il colore lo eredita dal contenitore, che e' gia' scuro.
 */
.izeos-top-logo .logo svg{ color:inherit }

/* -----------------------------------------------------------------------
 * Aree in home: la fotografia al posto dell'icona.
 *
 * Il tondo era nato per un'icona disegnata, di quelle che avevamo scritto
 * noi quando le aree erano quattro e decise a mano. Le aree adesso sono
 * quelle degli atenei e le loro fotografie le manda il cliente: nel tondo
 * ci va la foto, ritagliata al centro.
 * -------------------------------------------------------------------- */
.pc-ico{ overflow:hidden; padding:0; display:flex; align-items:center; justify-content:center }
.pc-ico img,
.pc-ico svg{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }

/* -----------------------------------------------------------------------
 * Pannello dei filtri piu' alto dello schermo.
 *
 * Il pannello era sticky: agganciato in alto mentre la pagina scorre.
 * Con tre blocchi di chip diventa piu' alto dello schermo, e la parte
 * sotto non si raggiungeva piu': non scorreva con la pagina, perche'
 * agganciata, e non scorreva da sola.
 *
 * Prima gli avevo messo una barra di scorrimento propria. Sbagliato: due
 * cose che scorrono dentro la stessa pagina, e chi legge non sa piu'
 * quale sta muovendo. Ora il pannello non e' piu' agganciato e scorre
 * con la pagina, come qualsiasi altra colonna. Si perde il filtro
 * sempre in vista, si guadagna un filtro che si vede tutto.
 *
 * Sotto i 900px non cambia niente: li' il pannello e' un cassetto a
 * tutta altezza e il suo corpo scorre gia' per conto suo.
 * -------------------------------------------------------------------- */
@media (min-width:901px){
	.cerca-filtri{ position:static; max-height:none; overflow:visible }
}

/* -----------------------------------------------------------------------
 * Riepilogo dell'iscrizione.
 *
 * Le righe non le stampa il template: le costruisce lo script in
 * functions.php, quello che serviva gia' il vecchio sito, con la sua
 * struttura (<p><span class="field-label"><span class="field-value">).
 *
 * Etichetta sopra e valore sotto, non affiancati: la colonna e' stretta e
 * un titolo di corso su una riga sola non ci sta, andava a capo in mezzo
 * al prezzo.
 * -------------------------------------------------------------------- */
/*
 * Il vecchio foglio mette al contenitore bordo, sfondo e un padding con
 * !important: dentro il riquadro del Polo diventava una scatola dentro
 * la scatola. Si spegne.
 *
 * Stessa storia per il testo. Il vecchio foglio impone al riquadro
 * 'Open Sans' a 18px, tutto con !important. Open Sans non e' fra i font
 * del sito e nessuno lo carica, quindi il riquadro cadeva sul sans-serif
 * di sistema: dentro una pagina scritta in Inter si vedeva benissimo che
 * era un'altra cosa, ed era anche piu' grande del testo intorno.
 *
 * Da qui in giu' ogni regola che tocca font, peso o colore porta
 * !important: non e' vezzo, e' l'unico modo di battere quelle.
 */
#riepilogo-form-container{
	margin:0 !important; padding:0 !important;
	border:0 !important; background:none !important;
	font-family:var(--f-ui) !important;
	font-size:.86rem !important;
}
#riepilogo-form-container p{
	margin:0 !important; padding:.5rem 0; border-bottom:1px solid var(--line-soft);
	font-size:.86rem !important; font-weight:400 !important;
	line-height:1.4 !important; color:var(--ink) !important;
}
#riepilogo-form-container p:last-child{ border-bottom:0; padding-bottom:0 }
#riepilogo-form-container .field-label{
	display:block; font-size:.68rem !important; font-weight:600 !important;
	color:var(--ink-50) !important; line-height:1.3 !important;
}
#riepilogo-form-container .field-value{
	display:block; font-size:.86rem !important; font-weight:700 !important;
	color:var(--navy-800) !important; line-height:1.35 !important;
}
#riepilogo-form-container .field-value-price{ display:block; font-weight:700 !important }
/* Il riquadro si intitola gia' "Riepilogo": la riga dello script e' un
   secondo titolo che dice la stessa cosa. */
#riepilogo-form-container p.riepilogo{
	display:none;
}

/* -----------------------------------------------------------------------
 * Iscrizione: un solo indicatore di avanzamento.
 *
 * Ce n'erano due, uno sopra l'altro. Quello in cima e' del tema e racconta
 * la pratica per intero — i tuoi dati, la verifica del polo,
 * l'immatricolazione in Ateneo — e prosegue anche dopo che il modulo e'
 * stato mandato. Quello dentro il modulo e' di WPForms e conta le sue tre
 * pagine. Due scale diverse, tutte e due numerate "1 2 3": messe una sotto
 * l'altra si leggono come un errore.
 *
 * Resta quello del tema, che e' l'unico a dire dove si e' nel percorso.
 * Dentro il modulo restano comunque "Prosegui" e "Indietro", che dicono se
 * c'e' ancora qualcosa da compilare.
 * -------------------------------------------------------------------- */
.iscr-form .wpforms-page-indicator{ display:none !important }

/* -----------------------------------------------------------------------
 * Iscrizione: i pulsanti del modulo sono i pulsanti del sito.
 *
 * "Prosegui", "Indietro" e "Invia iscrizione" sono generati da WPForms e
 * arrivavano con la forma del plugin: rettangolo a spigoli poco tondi, un
 * altro blu, un altro corpo. Nella stessa schermata ci sono "Cerca tra i
 * corsi" e "Parla con un orientatore", che sono .btn.
 *
 * Qui il modulo prende quella forma: stessa pastiglia, stesso colore della
 * pelle (bordeaux o blu, li' --brand cambia da solo), stesso corpo.
 * "Indietro" prende invece la versione chiara, come .btn-ghost: e'
 * l'azione secondaria delle due e non deve pesare quanto l'altra.
 *
 * Le regole del vecchio foglio non c'entrano: sono appese a
 * #form-iscrizione-new, un contenitore che questa pagina non ha piu'.
 * Quelle di WPForms invece si', e vanno battute con !important.
 * -------------------------------------------------------------------- */
.iscr-form .wpforms-page-button,
.iscr-form .wpforms-submit{
	display:inline-flex !important; align-items:center; justify-content:center;
	gap:.55rem;
	font-family:var(--f-ui) !important;
	font-size:.94rem !important; font-weight:600 !important;
	letter-spacing:-.005em !important; line-height:1.2 !important;
	text-transform:none !important;
	padding:.86rem 1.6rem !important;
	border:1px solid transparent !important; border-radius:999px !important;
	background:var(--brand) !important; color:#fff !important;
	box-shadow:none !important;
	cursor:pointer;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.iscr-form .wpforms-page-button:hover,
.iscr-form .wpforms-submit:hover{
	background:var(--brand-600) !important; color:#fff !important;
	transform:translateY(-1px); box-shadow:var(--sh-2) !important;
}
.iscr-form .wpforms-page-button:active,
.iscr-form .wpforms-submit:active{ transform:translateY(0) }

/* "Indietro": azione secondaria, quindi chiara. */
.iscr-form .wpforms-page-button.wpforms-page-prev{
	background:transparent !important; color:var(--brand) !important;
	border-color:var(--line) !important;
}
.iscr-form .wpforms-page-button.wpforms-page-prev:hover{
	background:var(--azure-100) !important; color:var(--brand) !important;
	border-color:var(--azure-100) !important;
}

/*
 * I due pulsanti di pagina stanno in una riga sola: sopra i 480 px
 * "Indietro" a sinistra e "Prosegui" a destra, sotto in colonna.
 */
.iscr-form .wpforms-page-button-group{
	display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
}
@media (max-width:480px){
	.iscr-form .wpforms-page-button-group{ flex-direction:column-reverse; align-items:stretch }
	.iscr-form .wpforms-page-button,
	.iscr-form .wpforms-submit{ width:100% }
}

/* -----------------------------------------------------------------------
 * Le strisce di loghi: in testata e nella fascia della home.
 *
 * Non e' piu' il solo wordmark Nurse24 a 21 px (.logo-polo): adesso e' la
 * striscia intera, marchio del Polo e tre atenei, larga sedici volte la
 * sua altezza. A 40 px sono 656 px, che in una finestra da 1200 stanno
 * accanto al menu — ma non in una da 1050.
 *
 * Invece di inseguire i punti di rottura, la striscia rimpicciolisce da
 * sola: altezza 40, larghezza massima quella che avanza, e object-fit
 * contain a tenere le proporzioni. Quando lo spazio si stringe l'immagine
 * si fa piu' piccola, non schiacciata. Perche' funzioni servono i
 * min-width:0 qui sotto: un elemento flex, per impostazione predefinita,
 * non scende sotto la larghezza del suo contenuto, e senza quelli sarebbe
 * il menu a farsi da parte.
 *
 * Sotto i 640 px non e' piu' una questione di larghezza: <picture> nel
 * template passa al solo marchio, e li' l'altezza torna a essere l'unica
 * misura che conta.
 * -------------------------------------------------------------------- */
.hdr-in{ min-width:0 }
.hdr-in > .logo-link{ flex:0 1 auto; min-width:0 }
.hdr-in > .nav{ flex:none }
.logo-link .logo,
.logo-cu,
.logo-cu picture{ min-width:0; max-width:100% }
.logo-cu picture{ display:block }

.logo img.logo-striscia{
	height:40px; width:auto; max-width:100%; display:block;
	object-fit:contain; object-position:left center;
}
@media (max-width:640px){ .logo img.logo-striscia{ height:30px } }
@media (max-width:400px){ .logo img.logo-striscia{ height:26px } }

/*
 * Fascia "I nostri partner" (era "In convenzione con": testo cambiato il
 * 18/09/2026 su richiesta di Stefania - l'etichetta e' nel markup, non nel
 * disegno).
 *
 * Nella fascia la striscia ha tutta la riga per se', quindi il vincolo e'
 * solo l'altezza. A 34 px ogni logo viene grande quanto i tre file separati
 * di prima a 25: nella striscia l'altezza comprende anche il sottotitolo di
 * Mercatorum, che da solo occupa un quarto dell'immagine.
 */
.ic-in{ min-width:0 }
.ic-loghi{ min-width:0; max-width:100% }
.ic-loghi .ic-striscia{
	height:34px; width:auto; max-width:100%; display:block;
	object-fit:contain; object-position:left center;
}
@media (max-width:860px){ .ic-loghi .ic-striscia{ height:29px; object-position:center } }
@media (max-width:420px){ .ic-loghi .ic-striscia{ height:25px } }


/* -----------------------------------------------------------------------
 * Striscia di servizio: meno spazio ai lati.
 *
 * Il prototipo le dava padding .5rem 1.5rem, e sotto i 640px lo stringeva
 * a .15rem 1rem. Chiesto da Chahir il 24 settembre 2026: .5rem 0 su tutti
 * e due i domini, a qualsiasi larghezza.
 *
 * Sta qui e non in polo.css perche' quel foglio deve restare identico al
 * prototipo; e viene caricato dopo, quindi vince anche sulla media query.
 * -------------------------------------------------------------------- */
.hdr-utility-in{ padding:.5rem 0 }

@media (max-width:640px){
	.hdr-utility-in{ padding:.5rem 0 }
}

/* -----------------------------------------------------------------------
 * "In collaborazione con": CISL FP e Nurse24, in fondo alla home.
 *
 * Chiesta da Pietro il 27 settembre 2026. Fascia discreta, sopra il piede:
 * e' una firma, non una vetrina.
 *
 * Sul bordeaux i loghi scendono di un paio di pixel (.collab-mini): li' non
 * devono farsi notare piu' del marchio del Polo, che le linee guida
 * Multiversity vogliono sempre il piu' grande della pagina.
 * -------------------------------------------------------------------- */
.collab{ padding:1.6rem 0 2.2rem }
.collab-in{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap }
.collab-eti{
	font-size:.7rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
	color:var(--ink-40, #8a8078);
}
.collab-loghi{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; min-width:0 }
.collab-loghi .collab-logo{
	height:30px; width:auto; max-width:100%; display:block;
	object-fit:contain; opacity:.85; transition:opacity .2s;
}
.collab-loghi .collab-logo:hover{ opacity:1 }

/* bordeaux: piu' piccoli del marchio del Polo */
.collab-mini .collab-loghi .collab-logo{ height:24px }

@media (max-width:860px){
	.collab-in{ justify-content:center; text-align:center }
	.collab-loghi{ justify-content:center; gap:1.4rem }
	.collab-loghi .collab-logo{ height:26px }
	.collab-mini .collab-loghi .collab-logo{ height:21px }
}
@media (max-width:420px){
	.collab-loghi .collab-logo{ height:22px }
	.collab-mini .collab-loghi .collab-logo{ height:19px }
}

/* -----------------------------------------------------------------------
 * Bordeaux: nessun logo di ateneo piu' grande del marchio del Polo.
 *
 * Pietro, 27 settembre 2026: "university logos may appear only in secondary
 * sections (like the partner strip or the offer page), smaller than the Polo
 * logo". La regola vale ovunque, non solo in testata.
 *
 * In home la sezione "Offerta formativa" li teneva gia' a 38px, sotto i 40px
 * del marchio. La pagina /offerta-formativa/ no: le sue card non stanno in
 * .offerta e prendevano i 66px di polo.css, quindi gli atenei uscivano piu'
 * grandi del Polo.
 *
 * Si guarda la pelle e non l'id del dominio: il blu e' .pelle-ecampus, e li'
 * la regola Multiversity non si applica.
 * -------------------------------------------------------------------- */
body:not(.pelle-ecampus) .seg-logo-img{ height:34px; max-width:78% }

@media (max-width:760px){
	body:not(.pelle-ecampus) .seg-logo-img{ height:30px }
}

/* -----------------------------------------------------------------------
 * I bottoni non cambiano colore al passaggio del mouse.
 *
 * Segnalazione di Pietro del 30 settembre 2026: sul bottone "Richiedi
 * informazioni" il testo diventava blu scuro sul bordeaux, illeggibile.
 *
 * Non era nostro. Il tema padre ha, dentro il suo reset, la riga
 *   a:active, a:hover { color:#336 }
 * che pesa (0,1,1), mentre .btn pesa (0,1,0): al passaggio del mouse vinceva
 * il tema padre e il testo passava da bianco a #336. Si vedeva su ogni
 * bottone che e' un <a>, non solo su quello delle lauree; li' saltava
 * all'occhio perche' la scritta e' lunga e sta su due righe.
 *
 * .btn:hover pesa (0,2,1) e basta a rimettere le cose a posto. Si riscrive
 * var(--fg-btn) e non un colore fisso, cosi' ogni variante - bianco su
 * bordeaux, bordeaux su chiaro, bianco su scuro - si tiene il suo.
 * -------------------------------------------------------------------- */
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited{ color:var(--fg-btn) }