/* =========================================
   UTILITIES.CSS - Classi generiche riutilizzabili
   ========================================= */

/* --- COLORI TESTO --- */
.text-blue { color: var(--csi-blue) !important; }
.text-orange { color: var(--csi-orange) !important; }
.text-white { color: var(--white) !important; }
.text-gray { color: #666 !important; }

/* --- COLORI SFONDO --- */
.bg-blue { background-color: var(--csi-blue) !important; }
.bg-orange { background-color: var(--csi-orange) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-gray { background-color: var(--gray-bg) !important; }

/* --- ALLINEAMENTO TESTO --- */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* --- FLEXBOX RAPIDO --- */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }

/* --- SPAZIATURE (Margini e Padding) --- 
   mt = margin-top, mb = margin-bottom, p = padding 
*/
.mt-20 { margin-top: 20px !important; }
.mt-40 { margin-top: 40px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }
.p-20 { padding: 20px !important; }
.p-40 { padding: 40px !important; }

/* --- CONTENITORE STANDARD --- */
/* Un contenitore per centrare i contenuti e non farli allargare troppo sui monitor giganti */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}