:root {
	--green: #5f710d;
	--security: #336699;
	--industrial: #66cccc;
	--pharmaceutical: #5DADE2;
	--induction: #ff8000;
	--groundsearch: #5d874d;
	--healthcare: #66cccc; /* 2ECC71 */
	--anticollision: #993333;
	--lace: #555555;
	--sfondo-nero: #1b1b1b;
	--sfondo-grigio: rgb(235, 235, 235);
	--swiper-navigation-color: var(--section-color);
	--swiper-pagination-color: var(--section-color);
	--bianco: white;
	--nero: #1b1b1b;
	--hero-altezza: 75vh;
	--hero-submenu-transition-delay: 0.2s;
	--hero-submenu-transition-speed: 0.2s;
	--submenu-altezza-minima: 30vh;
	--submenu-altezza: 0px;
}

@font-face {
	font-family: "OpenSans";
	src: url("https://cdn.ceia.net/static/fonts/OpenSans-Regular.ttf") format('truetype');
	font-weight: normal;
	font-display: swap;
}

body {
	word-spacing: 0.16rem;
	color: #333;
	overflow: auto;
	margin: 0;
	padding: 0;
	font-family: "OpenSans", Arial, Verdana, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
	width: 5px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--section-color);
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
}

.hide-first-on-mobile > :first-child {
	display: block
}

.hide-first-on-mobile > :last-child {
	display: none !important
}

body:has(dialog[open]) {
	overflow: hidden
}

dialog {
	overflow: hidden;
	border: 2px solid var(--section-color);
	border-radius: 1rem;
}

	dialog::backdrop {
		background: rgba(0, 0, 0, 0.45);
		backdrop-filter: blur(6px);
	}

	dialog[open] {
		animation: fadein 0.2s ease-in forwards;
	}


section h1 {
	font-size: 2rem
}

section.alternate {
	background-color: var(--bianco);
}

	section.alternate:nth-of-type(even):not(:first-of-type), .sfondo {
		background-color: var(--sfondo-grigio);
	}

@media (max-width: 1099px) {

	.hide-first-on-mobile > :first-child {
		display: none !important
	}

	.hide-first-on-mobile > :last-child {
		display: block !important
	}
}

@media (min-width: 1100px) {

	[data-submenu-name] {
		transition: opacity ease 0.3s;
	}

		[data-submenu-name]:not([data-submenu-name=""]),
		.navbar-rows-submenu[data-submenu-name] {
			opacity: 0;
			visibility: hidden;
			position: absolute;
		}

		[data-submenu-name].shown {
			opacity: 1;
			visibility: visible;
			position: static;
		}
}

.text-capitalize {
	text-transform: capitalize
}


/* CTA styles*/
.cta {
	color: var(--CTA-text-color) !important;
	background-color: var(--section-color);
	border: 1px solid #d8d8d8;
	padding: 10px 30px;
	transition: all .12s ease-in-out;
	border-radius: 1rem;
	text-decoration: none;
	text-transform: capitalize;
}

	.cta:hover, .card:hover .cta {
		color: var(--CTA-text-hover-color, var(--CTA-text-color, var(--nero, black))) !important;
		background-color: white;
		border: 1px solid var(--section-color);
		box-shadow: 2px 2px 7px 1px rgb(224, 224, 224);
	}
/* FORM STYLES*/
.form-control {
	border: 1px solid #dddfe2;
	font-size: 17px;
	border-radius: 6px;
	outline: none !important;
	padding: 1rem;
}

	.form-control:focus {
		border-color: var(--section-color);
		caret-color: var(--section-color);
	}

	.form-control:user-invalid {
		border: 1px solid red
	}

@media (max-width: 832px) {
	.form-control {
		font-size: 14px;
	}
}

/* Product Table Styles */

.CSSTableGenerator {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border: 1px solid var(--section-color, #5f710d);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

	.CSSTableGenerator table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	.CSSTableGenerator tr:last-child td:last-child {
		border-bottom-right-radius: 10px;
	}

	.CSSTableGenerator tr:last-child td:first-child {
		border-bottom-left-radius: 10px;
	}

	.CSSTableGenerator table tr:first-child td:first-child {
		border-top-left-radius: 10px;
	}

	.CSSTableGenerator table > tr:first-child td:last-child {
		border-top-right-radius: 10px;
	}


	.CSSTableGenerator td {
		vertical-align: middle;
		border: 1px solid var(--section-color, #5f710d);
		border-width: 0px 1px 1px 0px;
		text-align: left;
		padding: 10px;
		font-size: 1rem;
		font-weight: normal;
	}

	.CSSTableGenerator tr:last-child td {
		border-width: 0px 1px 0px 0px;
	}

	.CSSTableGenerator tr td:last-child {
		border-width: 0px 0px 1px 0px;
	}

	.CSSTableGenerator tr:last-child td:last-child {
		border-width: 0px 0px 0px 0px;
	}

	.CSSTableGenerator tr:first-child td {
		border: none;
		background-color: var(--sfondo-grigio);
		color: var(--sfondo-nero) !important;
		text-align: center;
		border-width: 0px 0px 1px 1px;
		font-weight: bold;
		color: #ffffff;
	}


/* Accordions */
.accordion-container {
	display: flex;
	flex-direction: column;
}

	.accordion-container > .accordion-element:not(:last-of-type) .accordion-title {
		border-bottom: none;
	}

	.accordion-container > .accordion-element:first-child .accordion-title {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}

.accordion-title {
	font-weight: bold;
	background-color: transparent;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: all 0.4s;
	border: 1px solid black;
}

	.accordion-title.active, .accordion-title:hover {
		background-color: var(--section-color);
	}

.accordion-panel {
	display: none;
	padding: 1rem;
	border: 1px solid black;
	border-top: none;
	background-color: white;
	overflow: hidden;
	transition: height 0.5s;
}

	.accordion-panel.open {
		display: block;
	}

/* CEIA Sticky Table - Responsive*/
/* Begin */

/* === Wrapper generale === */
.table-wrap {
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--section-color-dark);
	border-radius: 0.7rem;
	background: #fff;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}

/* === Base table styling === */
.table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
	table-layout: fixed;
	font-family: system-ui, sans-serif;
	font-size: 0.95rem;
	color: var(--section-color);
	border-radius: 0.7rem;
	overflow: hidden;
}

	.table th,
	.table td {
		padding: 0.7rem 0.8rem;
		text-align: left;
		vertical-align: middle;
		white-space: normal; /* testo va a capo */
		word-wrap: break-word;
		word-break: break-word;
		border-bottom: 1px solid var(--section-color);
		border-right: 1px solid var(--section-color); /* <<< bordo verticale interno standard */
		transition: background-color 0.25s ease-in-out;
	}

		/* Rimuove bordo destro sull’ultima colonna */
		.table th:last-child,
		.table td:last-child {
			border-right: none;
		}

	/* Header */
	.table th {
		font-weight: normal;
		background: var(--section-color);
		color: #fff;
		border-bottom: 1px solid var(--section-color-dark); /* bordo sotto header */
		border-right: 1px solid var(--section-color-dark); /* bordo verticale header scuro */
	}

		/* Prima colonna */
		.table td:first-child,
		.table th:first-child {
			border-right: 1px solid var(--section-color-dark); /* bordo verticale scuro */
		}

	/* Alternanza righe */
	.table tbody tr:nth-child(even) {
		background: var(--section-color-light);
	}

	.table tbody tr:nth-child(odd) {
		background: #fff;
	}

	/* Hover */
	.table tbody tr:hover {
		background-color: rgba(255, 255, 150, 0.3);
		transition: background-color 0.25s ease-in-out;
	}

/* Sticky Header */
.sticky-header thead th {
	position: sticky;
	top: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 2;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.16);
}

/* === Caption elegante sopra la tabella === */
.table-caption {
	font-family: system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	text-align: center;
	color: var(--section-color-dark);
	background: var(--section-color-light);
	border: 1px solid var(--section-color-dark);
	border-bottom: none;
	border-radius: 0.7rem 0.7rem 0 0;
	padding: 0.6rem 1rem;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

/* === Gestione immagini nelle celle === */
.table td img {
	max-width: 200px; /* la larghezza massima */
	width: 100%; /* adatta proporzionalmente dentro la cella */
	height: auto; /* mantiene il rapporto d’aspetto */
	display: block;
	margin: 0.3rem auto;
	border-radius: 0.4rem;
}

/* Centra testo e immagini nelle celle con immagini */
.table td[colspan],
.table td[rowspan] {
	text-align: center;
	vertical-align: middle;
}

/* === Sticky Left Column con bordi orizzontali visibili === */
.sticky-left th:first-child,
.sticky-left td:first-child {
	position: sticky;
	left: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 1;
	/* Bordi coerenti e visibili */
	border-right: 1px solid var(--section-color-dark); /* bordo verticale scuro */
	border-top: 1px solid var(--section-color-dark); /* bordo superiore come il resto */
	border-bottom: 1px solid var(--section-color-dark); /* bordo inferiore come il resto */
	box-shadow: none;
}

/* Header: prima cella sticky */
.sticky-header.sticky-left thead th:first-child {
	position: sticky;
	left: 0;
	top: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 3;
	border-right: 1px solid var(--section-color-dark);
	border-top: none; /* evita doppio bordo con il bordo superiore della tabella */
	border-bottom: 1px solid var(--section-color-dark); /* bordo orizzontale sotto header */
}

/* Rimuove eventuali ombre che possono coprire i bordi */
.sticky-left th:first-child,
.sticky-left td:first-child {
	box-shadow: none;
}

/* Sticky Header + Left Column combinata */
.sticky-header.sticky-left thead th:first-child {
	z-index: 3;
}

/* === Responsive "Stacked" (mobile) === */
@media (max-width: 640px) {
	/* Rimuove il bordo e lo sfondo del contenitore principale */
	.table-wrap {
		border: none;
		box-shadow: none;
		background: transparent;
	}

	/* Rimuove bordi visibili del contenitore tabella */
	.table {
		border: none;
		border-radius: 0;
		box-shadow: none;
		min-width: auto;
		width: 100%;
		table-layout: auto;
	}

	.responsive-stack thead {
		display: none;
	}

	.responsive-stack,
	.responsive-stack tr,
	.responsive-stack td {
		display: block;
		text-align: left;
		border: none;
	}

		.responsive-stack tr {
			padding: 0;
			border: 1px solid var(--section-color-dark);
			border-radius: 0.7rem;
			overflow: hidden;
		}

			/* Header interno: angoli in alto arrotondati */
			.responsive-stack tr:first-child td {
				border-top-left-radius: 0.7rem;
				border-top-right-radius: 0.7rem;
			}

			/* Ultima riga SOLO dell'ULTIMA sub-tabella */
			.responsive-stack tr:last-of-type td:last-of-type {
				border-bottom-left-radius: 0.7rem;
				border-bottom-right-radius: 0.7rem;
			}

			/* Evita arrotondamento su tutte le righe intermedie */
			.responsive-stack tr:not(:last-of-type) td {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

		/* Impedisce che lo sfondo del primo td (header) sbordi */
		.responsive-stack td:first-child {
			border-top-left-radius: 0.7rem;
			border-top-right-radius: 0.7rem;
			overflow: hidden;
		}

		.responsive-stack tr + tr {
			margin-top: 0.75rem;
		}

		.responsive-stack td {
			display: flex;
			justify-content: flex-start;
			padding: 0.4rem;
			color: var(--section-color);
			border-bottom: 1px solid var(--section-color);
			border-right: none;
			white-space: normal;
			word-wrap: break-word;
			word-break: break-word;
		}

			.responsive-stack td:last-child {
				border-bottom: none;
			}

			.responsive-stack td:first-child:before {
				content: none;
			}

			.responsive-stack td:before {
				content: attr(data-label);
				font-weight: 600;
				margin-right: 0.5rem;
				color: var(--section-color);
				flex-shrink: 0;
			}

	/* In mobile, mantieni proporzioni e wrap */
	@media (max-width: 640px) {
		.responsive-stack td img {
			max-width: 80%;
			height: auto;
			margin: 0.5rem auto;
		}
	}
}

/* End */
