/* Contenuti e layout: header, news, tabelle, home, FAQ, settori, pagine di errore, menu responsive.
   Caricato in ordine dopo gli altri file override (site, forms, content, customer, order-request, extras):
   la cascata è quella di un unico foglio. */

.news-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.news-rss-link {
	display: inline-block;
}

.news-rss-link img {
	display: block;
}

#main-wrapper {
	margin-top: 20px;
}

#top-info {
	margin-top: 40px;
}

#top-logo {
	float: right;
	margin: -2px 10px 0px 0px;
	text-align: right;
}

#top-logo img {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}

#top-logo br {
	display: none;
}

@media only screen and (max-width: 959px) {
	#top-logo {
		display: none;
	}
}

#tagline {
	clear: both;
	text-align: left;
	margin-left: 190px;
	color: #595858;
}

#logo {
	display: block;
	margin: 0;
}

#logo img {
	width: calc(170px - 170px * var(--logo-reduction) / 100);
	height: calc(168px - 168px * var(--logo-reduction) / 100);
}

b {
	font-weight: 800;
}

/* .elenco: il tema colora table th in bianco per default e si aspetta un
   wrapper (.table-blue, .table-green, ...) che imposti lo sfondo. .elenco
   non fa parte del tema: niente sfondo, testo grigio scuro leggibile. */
.elenco th {
	color: var(--gray-800);
	text-shadow: none;
	font-weight: 700;
}

/* table td ha background-color:#f0f0f0 opaco dal tema (base.css) — copre
   qualunque sfondo messo sul <tr>, va sovrascritto sul <td> stesso. */
.elenco td {
	background-color: var(--white);
}

.elenco tr:nth-child(even) td {
	background-color: #e9edf0;
}

/* Riga separatrice fra i record, solo desktop: sotto i 767px la separazione
   fra record è già gestita da .elenco tr nella media query più sotto. */
@media only screen and (min-width: 768px) {
	.elenco td {
		border-bottom: 1px solid var(--gray-200);
	}
}

.public-home h1 {
	margin-bottom: 20px;
}

/* Solo in home: #special-content-wrapper mostra l'immagine di copertina al
   posto del titolo pagina (rimosso dal markup per questa view). */
#special-content-wrapper.has-cover {
	background: url(/assets/main/img/latema-cover.jpg) no-repeat center center;
	background-size: cover;
	min-height: 107px;
}

@media only screen and (max-width: 767px) {
	#special-content-wrapper.has-cover {
		min-height: 85px
	}
}

/* .pagetitle usava h2 (vedi media.css:176, regola solo per <= 479px);
   ora il markup del layout usa h1 per il titolo pagina, va rispecchiato qui. */
@media only screen and (max-width: 479px) {
	.pagetitle h1 {
		font-size: 28px;
		text-align: center;
	}
}

.section-divider {
	border: 0;
	border-top: 1px solid var(--gray-200);
	margin: 32px 0;
}

/* Il tema usa una griglia a float (.row .six in framework.css): con card di
   altezza diversa (descrizioni più o meno lunghe) i float si incastrano a
   scaletta invece di restare allineati. Flexbox forza ogni riga ad allinearsi
   sulla card più alta. */
.row.items {
	display: flex;
	flex-wrap: wrap;
}

.row.items .columns {
	float: none;
}

.row.items .columns>a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.row.items .columns h3 {
	font-size: 20px;
	margin: 12px 0 4px;
}

.row.items .sector-description {
	font-size: 16px;
	font-weight: 400;
	color: var(--gray-500);
}

/* .news-list (home): card immagine+testo per le news, stesso pattern di
   .sector-list — sotto i 768px vanno in colonna anziché in riga. */
.news-list .news-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-200);
}

.news-item-body p {
	margin-bottom: 0;
}

.news-item-image {
	width: 100px;
	height: 100px;
	object-fit: cover;
	flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
	.news-list .news-item {
		flex-direction: column;
	}
}

/* .news-scroll (home): strip di card con scroll orizzontale al posto della
   lista verticale — swipe nativo su touch, frecce prev/next su desktop. */
.news-scroll-wrapper {
	position: relative;
	margin-bottom: 20px;
}

.news-scroll {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 4px;
	margin: 0 -4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.news-scroll::-webkit-scrollbar {
	display: none;
}

.news-scroll-item {
	flex: 0 0 240px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gray-200);
	border-radius: 4px;
	overflow: hidden;
}

.news-scroll-item-image {
	width: 100%;
	height: 140px;
	object-fit: cover;
	flex-shrink: 0;
}

.news-scroll-item-body {
	padding: 12px;
}

.news-scroll-item-body h3 {
	font-size: 18px;
	margin: 6px 0;
}

.news-scroll-item-body p {
	margin-bottom: 0;
	font-size: 16px;
	color: #666;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-scroll-arrow {
	display: flex;
	position: absolute;
	top: 145px;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gray-200);
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	font-size: 20px;
	line-height: 1;
	color: var(--gray-800);
	cursor: pointer;
}

.news-scroll-arrow.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.news-scroll-arrow-prev {
	left: 4px;
}

.news-scroll-arrow-next {
	right: 4px;
}

@media only screen and (max-width: 480px) {
	.news-scroll-item {
		flex-basis: 200px;
	}

	.news-scroll-item-image {
		height: 110px;
	}

	.news-scroll-arrow {
		top: 113px;
	}
}

.news-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.news-pagination-count {
	color: var(--gray-500);
	font-size: 16px;
}

.faq-header h2 {
	font-size: 24px;
	line-height: 28px;
}

.faq-metadata {
	margin-top: 10px;
	margin-bottom: 5px;
}

.faq-footer .btn-back {
	text-decoration: underline;
}

.status-chip {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.5;
}

/* Stessa convenzione del manager (StatusIndicator): Aperto verde, Chiuso grigio. */
.status-chip.is-open {
	background: #e6f4ea;
	color: var(--success-color);
}

.status-chip.is-closed {
	background: #ececec;
	color: var(--muted-color);
}

.badge.category {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--main-color);
	color: var(--white);
	font-size: 10px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.post-detail-image {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.post-detail-back {
	margin-top: 40px;
}

.post-detail-subtitle {
	font-size: 20px;
	font-weight: 700;
}

.documents-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.news-search {
	position: relative;
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.news-search input[type="text"] {
	flex: 1 1 auto;
}

.btn-reset {
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	color: var(--muted-color);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	white-space: nowrap;
}

/* display:inline-flex qui sopra batte l'attributo hidden (display:none del browser): senza questa
   regola un .btn-reset con hidden restava visibile (es. "Aggiungi prove" con poche prove). */
.btn-reset[hidden] {
	display: none;
}

.btn-reset:hover {
	color: #646464;
	border-color: var(--gray-400);
}

/* Skin dei campi che il tema non copre (base.css:1001-1019 stila solo input[type="text"]/"email"/
   textarea, quindi niente select né type="number"): stessi valori del tema, a 12px come gli
   altri input (a 16px il select risultava più alto). */
.form-select,
.estimate-row-qty {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 9px;
	border: 1px solid var(--border-color);
	border-radius: 2px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	outline: 0;
	background: #fefefe;
}

.estimate-row-qty:hover,
.estimate-row-qty:focus {
	background: #fefefe;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.error-404 {
	text-align: center;
	padding: 60px 0;
}

.error-404-logo {
	max-width: 180px;
	margin-bottom: 26px;
}

.error-404 h1 {
	margin-bottom: 30px;
}

/* .items (home, elenco prove): sovrascrive lo stacking automatico del tema
   (framework.css impila già sotto i 768px) per tenere le 2 colonne fino a
   quel breakpoint — stesso valore usato nel resto del file (767/768).
   Il float non serve: .row.items è display:flex (vedi sopra), e su un flex
   item float/clear non hanno alcun effetto per specifica CSS. */
@media only screen and (min-width: 768px) {
	.items .columns.six {
		width: 50% !important;
	}
}


/* .sector-list: card immagine+testo per settore, con la grid del tema
   (.row/.columns) invece di una <table> — sotto i 768px le colonne si
   impilano già da sole (regola del tema in framework.css).
   .row di per sé ha width:996px/min-width:768px (framework.css), pensato per
   la riga a piena pagina: qui è annidato dentro la colonna di contenuto (più
   stretta), quindi sfora a destra invece di restare centrato — va azzerato. */
.sector-list .sector-item {
	width: 100%;
	min-width: 0;
	margin: 0 0 20px;
	padding: 20px 0;
	align-items: flex-start;
}

.sector-list .sector-item>.columns {
	margin-bottom: 0;
}

.sector-list .sector-item:nth-child(even) {
	background-color: #e9edf0;
}

.sector-list .sector-image {
	max-width: 100%;
	height: auto;
}

.sector-list .sector-item p {
	margin-bottom: 0;
}

/* .elenco: tabella dati veri (Codice/Prova/Norma) — sotto i 768px si
   trasforma da tabella a blocchi impilati, con il nome colonna preso da
   data-label (impostato nei <td> della view) mostrato via ::before. */
@media only screen and (max-width: 767px) {

	.elenco,
	.elenco thead,
	.elenco tbody,
	.elenco th,
	.elenco td,
	.elenco tr {
		display: block;
		width: auto;
	}

	.elenco tr {
		border-bottom: 1px solid var(--gray-200);
		margin-bottom: 10px;
	}

	.elenco tr:first-child {
		display: none;
	}

	.elenco td {
		text-align: right;
		padding-left: 45%;
		position: relative;
	}

	.elenco td[data-label]::before {
		content: attr(data-label);
		position: absolute;
		left: 12px;
		text-align: left;
		font-weight: 700;
		color: var(--gray-800);
	}

	.elenco td.highlight {
		text-align: left;
		padding-left: 12px;
	}

	.elenco td.highlight::before {
		content: none;
	}
}

/* Sotto i 960px: il tema centra #logo solo nei breakpoint <= 767px
   (media.css), lasciando scoperto il range 768-959px dove il logo resta
   allineato a sinistra di default — centrato qui per coprire tutto <960px.
   #logo ha float:left non condizionato (style.css) che lo restringe al
   contenuto: senza width:100% il text-align:center non ha spazio in cui
   centrare nulla (float toglie l'elemento dal flusso normale del testo).
   #mainmenu-wrapper: .tinynav ha margin-bottom:-29px (per sovrapporsi al
   resto del layout nel tema originale), che lo fa sporgere sotto al bordo
   del wrapper invece di restarci centrato dentro — compensato col padding.
   #tagline ha margin-left:190px (pensato per stare a fianco di #top-logo,
   nascosto sotto i 960px) — sotto i 960px va azzerato, altrimenti il testo
   resta spinto a destra senza motivo, e va centrato per allinearsi al logo. */
@media only screen and (max-width: 959px) {
	#logo {
		width: 100%;
		text-align: center;
	}

	#mainmenu-wrapper {
		padding-bottom: 29px;
	}

	#tagline {
		margin-left: 0;
		text-align: center;
	}
}

/* Desktop (>= 960px): menu spostato a destra, logo ingrandito e
   sovrapposto in alto a destra della barra del menu */
@media only screen and (min-width: 960px) {
	header {
		position: relative;
	}

	#logo {
		position: absolute;
		top: var(--logo-top-offset);
		left: 26px;
		z-index: 20;
	}

	#logo p {
		display: none;
	}

	#mainmenu-wrapper {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	#mainmenu {
		float: none;
		width: auto;
		margin: 0 20px 0 0;
	}

	#mainmenu ul {
		float: none;
	}
}