/* ================================================================
   Cosmetech Academy — CSS articoli
   Regole per BOX colorati, FORMULE, TABELLE e IMMAGINI.
   ⚠️ NIENTE !important: i vecchi articoli hanno stili inline che devono
   continuare a vincere.
   ================================================================ */

/* ---------- Box colorati (5 varianti, colori di progetto) ---------- */
.box-articolo {
	box-sizing: border-box;   /* padding+bordo NON aumentano la larghezza → niente overflow */
	max-width: 100%;
	margin: 1.2em 0;
	padding: 14px 18px;
	border: 1px solid;
	border-radius: 6px;
	overflow-wrap: break-word; /* parole/formule lunghe vanno a capo invece di sforare */
}
.box-articolo h4 { margin: 0 0 8px 0; }
.box-articolo p:last-child { margin-bottom: 0; }
.box-articolo-azzurro, .box-articolo-azzurra { background-color: #d6eaf8; border-color: #1a5276; }
.box-articolo-azzurro h4, .box-articolo-azzurra h4 { color: #1a5276; }
.box-articolo-verde { background-color: #d5f5e3; border-color: #1e8449; }
.box-articolo-verde h4 { color: #1e8449; }
.box-articolo-senape { background-color: #fdebd0; border-color: #784212; }
.box-articolo-senape h4 { color: #784212; }
.box-articolo-lavanda { background-color: #e8daef; border-color: #6c3483; }
.box-articolo-lavanda h4 { color: #6c3483; }
.box-articolo-rosso, .box-articolo-rossa { background-color: #fdf0f0; border-color: #c0392b; }
.box-articolo-rosso h4, .box-articolo-rossa h4 { color: #c0392b; }
.box-articolo-grigio, .box-articolo-grigia { background-color: #f2f2f2; border-color: #7f8c8d; }
.box-articolo-grigio h4, .box-articolo-grigia h4 { color: #7f8c8d; }

/* ---------- Immagini ---------- */
.blocco-immagine-articolo { text-align: center; margin: 1.2em 0 0.3em; }
.immagine-articolo { max-width: 100%; height: auto; }
.didascalia-immagine-articolo { text-align: center; font-style: italic; font-size: 0.9em; color: #555; margin: 0 0 1.2em; }

/* ---------- Formula ---------- */
.formula-articolo {
	text-align: center;
	font-family: Cambria, Georgia, "Times New Roman", serif;
	font-size: 1.15em;
	margin: 1.2em 0;
	max-width: 100%;
	overflow-wrap: break-word; /* formula lunga senza spazi → va a capo, non sfora */
}

/* ---------- Tabella ---------- */
.blocco-tabella-articolo {
	max-width: 100%;
	margin: 1em 0;
	overflow-x: auto;   /* tabella più larga del contenitore → scroll orizzontale, NON sfora la pagina */
}
.blocco-tabella-articolo table,
.tabella-articolo {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border-collapse: collapse;
}
.blocco-tabella-articolo th {
	background-color: #4526DB;
	color: #ffffff;
	text-align: left;
	padding: 8px 12px;
}
.blocco-tabella-articolo td {
	padding: 8px 12px;
	border-bottom: 1px solid #e0e0e0;
}
/* righe alterne (lettura facilitata) */
.blocco-tabella-articolo tbody tr:nth-child(even) {
	background-color: #eaeaea;
}
/* riga evidenziata (valore di riferimento) — dopo la regola zebra così vince */
.blocco-tabella-articolo tr.evidenziata {
	background-color: #dcd6f7;
	font-weight: bold;
}

/* ---------- Titolo tabella ---------- */
.titolo-tabella-articolo {
	font-weight: 700;
	margin: 1em 0 0.3em 0;
}
/* Giallo (variante sequenza colori box import Word) */
.box-articolo-giallo, .box-articolo-gialla { background-color: #ffff80; border-color: #b0b000; }
.box-articolo-giallo h4, .box-articolo-gialla h4 { color: #b0b000; }