@layer reset, base, components, utilities;

:root {
	/* Colors */
	--white: hsl(0, 0%, 100%); /* #FFFFFF */
	--black: hsl(0, 0%, 0%); /* #000000 */

	--dark-charcoal: hsl(216, 18%, 16%); /* hex: #222831 */
	--slate-blue: hsl(210, 23%, 24%); /* hex: #2E3C4A */
	--crimson-red: hsl(353, 73%, 43%); /* #BD1D2F */
	--platinum-white: hsl(0, 0%, 94%); /* #EFEFEF */

	/* Typography */
	--font-base:
		'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
		sans-serif;

	/* Headings */
	--fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3rem); /* 32 → 48 */
	--fs-h2: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); /* 24 → 32 */
	--fs-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.5rem); /* 20 → 24 */

	--lh-h1: clamp(2.625rem, 2.2rem + 2vw, 3.625rem); /* 42 → 58 */
	--lh-h2: clamp(2rem, 1.8rem + 1.5vw, 2.625rem); /* 32 → 42 */
	--lh-h3: clamp(1.625rem, 1.5rem + 0.8vw, 1.75rem); /* 26 → 28 */

	/* Body */
	--fs-body: 1rem; /* fisso: 16px */

	--lh-body: 1.375rem; /* 22px */

	/* UI text */
	--fs-button: 1rem; /* 16px */
	--fs-menu: 1rem; /* 16px */
	/* --fs-menu: clamp(1rem, 0.9rem + 0.6vw, 1.5rem); 16 → 24 */

	--lh-button: clamp(1.25rem, 1.2rem + 0.5vw, 1.375rem); /* 20 → 22 */
	--lh-menu: clamp(1.25rem, 1.3rem + 1vw, 2rem); /* 20 → 32 */

	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-5: 2rem;

	/* Vertical flow spacing */
	--flow-sm: var(--space-2); /* piccolo */
	--flow-md: var(--space-3); /* default */
	--flow-lg: var(--space-5); /* grande */

	/* link */
	--link-color: var(--black);
	--link-underline-thickness: 1px;
	--link-underline-offset: 0.2em;
	--link-transition: 200ms ease;
}

@layer reset {
	/* 1. Box sizing */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* 2. Remove default margin */
	* {
		margin: 0;
	}

	/* 3. Improve text rendering */
	body {
		min-height: 100vh;
		font-family: var(--font-base);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--black);
		background-color: var(--white);
		text-rendering: optimizeLegibility;
	}

	/* 4. Media defaults */
	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	/* 5. Form elements inherit font */
	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* 6. Avoid text overflow */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}
}

@layer base {
	html {
		font-size: 16px !important;
	}

	body,
	.footer {
		font-family: var(--fs-body) !important;
		font-weight: 400;
		line-height: var(--lh-body) !important;
		color: var(--black) !important;
	}

	.e-n-menu-heading li nav li a {
		/* font-size: var(--fs-h2) !important;
		line-height: var(--lh-h2) !important; */
		font-size: 28px !important;
		line-height: 18px !important;
	}

	.first-content-header #breadcrumbs a {
		color: var(--white) !important;
		font-size: var(--fs-h3) !important;
		line-height: var(--lh-h3) !important;
	}

	span.glossaryLink,
	a.glossaryLink {
		border-color: inherit !important;
		color: inherit !important;
	}

	#breadcrumbs a {
		font-size: var(--fs-body) !important;
	}

	ul:not(nav ul) {
		font-size: var(--fs-body) !important;
		margin-top: 1px !important;
		margin-bottom: 30px !important;
	}

	h1 {
		font-size: var(--fs-h1) !important;
		line-height: var(--lh-h1) !important;
	}

	h2:not(.elementor-heading-title) {
		font-size: var(--fs-h2) !important;
		line-height: var(--lh-h2) !important;
	}

	h3:not(.elementor-heading-title) {
		font-size: var(--fs-h3) !important;
		line-height: var(--lh-h3) !important;
	}

	h2.elementor-heading-title {
		font-size: var(--fs-h2) !important;
	}
	h3.elementor-heading-title {
		font-size: var(--fs-h3) !important;
	}

	h1,
	h2,
	h3 {
		font-weight: 600;
	}

	strong {
		font-weight: 700;
	}

	.button {
		font-weight: 500;
	}

	.small-text {
		font-weight: 300;
	}

	p {
		font-size: var(--fs-body) !important;
		line-height: var(--lh-body) !important;
	}

	.button {
		font-size: var(--fs-button);
		line-height: var(--lh-button);
	}

	.elementor-nav-menu li a {
		font-size: var(--fs-menu) !important;
		line-height: var(--lh-menu) !important;
	}

	a:not(:has(svg)):not(li.e-n-menu-item a):not(.logo a):not(
			.elementor-button
		):not(.news-post-item) {
		color: var(--link-color);
		text-decoration: none;

		background-image: linear-gradient(currentColor, currentColor);
		background-size: 0% var(--link-underline-thickness);
		background-position: 0 100%;
		background-repeat: no-repeat;

		transition:
			color var(--link-transition),
			background-size var(--link-transition);

		&:hover,
		&:focus-visible {
			background-size: 100% var(--link-underline-thickness);
		}
	}

	.footer,
	.footer p,
	.footer a {
		font-size: var(--fs-body) !important;
		color: var(--white) !important;
	}
	.footer .e-n-accordion-item-title {
		color: var(--white) !important;
	}

	.h1-like p,
	.h1-like span {
		font-size: var(--fs-h1) !important;
		line-height: var(--lh-h1) !important;
		font-weight: 400 !important;
	}
	.h1-like strong {
		font-weight: 600 !important;
	}

	.swiper-slide .h1-like span {
		font-size: 80px !important;
	}

	.h2-like p,
	.h2-like span,
	.h2-like h2 {
		font-size: var(--fs-h2) !important;
		line-height: var(--lh-h2) !important;
		font-weight: 400 !important;
	}
	.h2-like strong,
	.h2-like h2 {
		font-weight: 600 !important;
	}
	.h2-like span {
		font-weight: 700 !important;
	}

	.h3-like p,
	.h3-like span {
		font-size: var(--fs-h3) !important;
		line-height: var(--lh-h3) !important;
		font-weight: 400 !important;
	}
	.h3-like strong {
		font-weight: 600 !important;
	}
	.h3-like span {
		font-weight: 700 !important;
	}
	.marquee span {
		font-weight: 700 !important;
	}
}

.page .first-content-header,
.single .first-content-header,
.archive .first-content-header {
	background-color: var(--slate-blue);

	padding: 10px !important;
	@media (min-width: 768px) {
		padding: var(--space-5) !important;
	}
}

.first-content-header
	.elementor-element:nth-child(2)
	.elementor-widget-container {
	line-height: var(--lh-h3);
}

.page .first-content-header h1,
.page .first-content-header span,
.single .first-content-header h1,
.single .first-content-header span,
.archive .first-content-header h1,
.archive .first-content-header span {
	font-weight: 400 !important;
	color: var(--white) !important;
}

.page .first-content-header span,
.single .first-content-header span,
.archive .first-content-header span {
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body) !important;
	@media (min-width: 768px) {
		font-size: var(--fs-h3) !important;
		line-height: var(--lh-h3) !important;
	}
}

.page .first-content-header .button:hover svg circle,
.single .first-content-header .button:hover svg circle,
.archive .first-content-header .button:hover svg circle {
	fill: var(--crimson-red);
}

.page .first-content-header .button:hover svg path,
.single .first-content-header .button:hover svg path,
.archive .first-content-header .button:hover svg path {
	stroke: var(--white);
}

.page .content-image img,
.archive .content-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 300px !important;

	@media (min-width: 768px) {
		height: 400px !important;
	}
}

.page .grid-content .box,
.archive .grid-content .box {
	cursor: pointer;
}

.page .grid-content img,
.archive .grid-content img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	aspect-ratio: 1/1;
}

.page .grid-content h2,
.archive .grid-content h2 {
	font-weight: 500 !important;
}

.page .grid-content .box .elementor-image-box-wrapper,
.archive .grid-content .box .elementor-image-box-wrapper {
	position: relative;
	overflow: hidden;
}

.page .grid-content .box .elementor-image-box-img,
.archive .grid-content .box .elementor-image-box-img {
	margin: 0;
}

/* Nascondi la descrizione di default */
.page .grid-content .box .elementor-image-box-description,
.archive .grid-content .box .elementor-image-box-description {
	@media (min-width: 1024px) {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		padding: 40px !important;
		margin: 0;
		background: color-mix(in srgb, var(--slate-blue), transparent 20%);
		color: white;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		text-align: left;
		border-left: 10px solid var(--crimson-red) !important;
	}
}

/* Mostra la descrizione all'hover */
.page .grid-content .box:hover .elementor-image-box-description,
.archive .grid-content .box:hover .elementor-image-box-description {
	opacity: 1;
}

.page .grid-content .box .elementor-image-box-content,
.archive .grid-content .box .elementor-image-box-content {
	@media (min-width: 1024px) {
		position: absolute;
		bottom: 3px;
		left: 0;
		right: 0;
		top: 0;
		z-index: 3;
	}
}

.page .grid-content .box .elementor-image-box-title,
.archive .grid-content .box .elementor-image-box-title {
	display: none;
}

.number .h2-like span {
	font-weight: 500 !important;
}
.number .h2-like span.elementor-counter-number-suffix {
	font-size: calc(var(--fs-h2) - 2px) !important;
}

.swiper-pagination-bullet {
	height: 12px !important;
	width: 12px !important;
	transition: width 0.3s ease;
}
.swiper-pagination-bullet-active {
	width: 24px !important;
	border-radius: 12px !important;
	transition: width 0.3s ease;
}
.eael-data-table-wrap th,
.eael-data-table-wrap td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@layer utilities {
	.flow > * + *:not(.elementor-widget-divider) {
		margin-top: var(
			--flow-space,
			var(--flow-md)
		) !important; /* default to medium spacing - <div class="flow" style="--flow-space: var(--flow-sm)"> */
	}
}

/* Layer overlay su immagine background */
.elementor-94586
	.elementor-element.elementor-element-2fab09b:not(
		.elementor-motion-effects-element-type-background
	),
.elementor-94586
	.elementor-element.elementor-element-2fab09b
	> .elementor-motion-effects-container
	> .elementor-motion-effects-layer {
	background-color: #2e3c4a;
	background-image: url(https://wcg.iol-custom21.it/wp-content/uploads/2026/01/Group-44.jpg);
	position: relative;
}

.elementor-94586
	.elementor-element.elementor-element-2fab09b:not(
		.elementor-motion-effects-element-type-background
	)::before,
.elementor-81515
	.elementor-element.elementor-element-4794b31:not(
		.elementor-motion-effects-element-type-background
	)::before,
.elementor-94586
	.elementor-element.elementor-element-2fab09b
	> .elementor-motion-effects-container
	> .elementor-motion-effects-layer::before,
.elementor-81515
	.elementor-element.elementor-element-4794b31
	> .elementor-motion-effects-container
	> .elementor-motion-effects-layer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(46, 60, 74, 0.9) 0%,
		rgba(46, 60, 74, 0.9) 100%
	);
	pointer-events: none;
}

.megamenu ul.e-n-menu-heading > li.e-n-menu-item {
	border-bottom: 2px solid var(--dark-charcoal) !important;
}

.elementor-231452
	.elementor-element.elementor-element-1a5acdd
	> .elementor-widget-container,
.elementor-231452
	.elementor-element.elementor-element-dca0a37
	> .elementor-widget-container,
.elementor-231452
	.elementor-element.elementor-element-d6cc157
	> .elementor-widget-container,
.elementor-231452
	.elementor-element.elementor-element-c69dbf3
	> .elementor-widget-container {
	background-color: transparent !important;
}

.elementor-231452
	.elementor-element.elementor-element-43b2ca8
	.elementor-button
	svg
	path {
	fill: var(--crimson-red) !important;
}

.elementor-231452
	.elementor-element.elementor-element-43b2ca8
	.elementor-button:hover
	svg
	path,
.elementor-231452
	.elementor-element.elementor-element-43b2ca8
	.elementor-button:focus
	svg
	path {
	fill: #ffffff !important;
}

.lp-alternate-box .elementor-column {
	min-height: 650px;
}

#galleria {
	.swiper-slide img {
		aspect-ratio: 1/1;
	}
	.swiper-pagination {
		bottom: -25px !important;
	}
}

.no-ul ul,
.no-ul ul li {
	font-weight: 400 !important;
	color: var(--black) !important;
}

.blue-form .wpcf7-form select {
	width: 100%;
	background-color: #fff;
	border: none;
	border-radius: 0;
	padding: 15px 20px;
	font-size: 18px;
	color: #000;
	box-sizing: border-box;
	margin-bottom: 0;
}

.red-form a:hover {
	color: var(--white) !important;
}

.red-form .wpcf7-form input[type='submit'] {
	border: 1px solid var(--white) !important;
	background-color: var(--white) !important;
	width: auto !important;
	color: var(--crimson-red) !important;
	& :hover,
	& :focus {
		background-color: var(--crimson-red) !important;
		color: var(--white) !important;
	}
}

.tag a:not(.news-filter-btn) span,
.custom-tag span,
span.post-tag {
	background-color: #efefef !important;
	color: var(--black) !important;
	padding: 5px 10px;
	border-radius: 50px;
}
.tag a:not(.news-filter-btn) span .elementor-button-text,
span.post-tag,
span.post-tag.black {
	color: var(--black) !important;
}

.first-content-header .cta a {
	background-color: var(--white) !important;
}

.first-content-header .cta a:hover,
.first-content-header .cta a:focus {
	background-color: var(--crimson-red) !important;
}

.first-content-header .cta a span {
	color: var(--crimson-red) !important;
	font-size: var(--fs-body) !important;
}
.first-content-header .cta a svg path {
	fill: var(--crimson-red) !important;
}

.first-content-header .cta a:hover span,
.first-content-header .cta a:focus span {
	color: var(--white) !important;
}
.first-content-header .cta a:hover svg path,
.first-content-header .cta a:focus svg path {
	fill: var(--white) !important;
}
/* News Container - Responsive Flex Direction */
.news-container {
	flex-direction: column !important;
}

@media (min-width: 1024px) {
	.news-container {
		flex-direction: row !important;
	}
}
/* News Grid - 3 columns layout */
.news-grid-container {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 2rem !important;
	padding: 0;
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.news-grid-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (min-width: 1024px) {
	.news-grid-container {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* News Post Item - Border styling */
.news-post-item {
	border: 1px solid var(--black) !important;
	padding: 0 !important;
}

/* News Post Image - Aspect Ratio */
.news-post-image {
	aspect-ratio: 21 / 10 !important;
	object-fit: cover !important;
	width: 100% !important;
	display: block !important;
}

/* News Pagination Styling */
.news-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 3rem !important;
	padding: 2rem 0 !important;
	flex-wrap: wrap !important;
}

.pagination-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border: none !important;
	background-color: transparent !important;
	color: var(--black) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}

.pagination-btn:hover {
	background-color: var(--platinum-white) !important;
}

.pagination-current {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	background-color: var(--crimson-red) !important;
	color: var(--white) !important;
	border-radius: 50% !important;
	font-weight: 600 !important;
}

.pagination-prev,
.pagination-next {
	font-size: 1.2rem !important;
}

.pagination-dots {
	padding: 0 4px !important;
	color: var(--black) !important;
}

.news-tags-filter {
	flex-direction: row !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	border-bottom: 1px solid var(--black) !important;
	padding: 1rem 0 !important;
	gap: 1rem !important;
	flex-wrap: nowrap;
}

.news-tags-filter .tag {
	flex-shrink: 0;
	min-width: auto;
}

.news-tags-filter::-webkit-scrollbar,
.elementor-element-a8dc86b::-webkit-scrollbar {
	height: 6px;
}

.news-tags-filter::-webkit-scrollbar-track,
.elementor-element-a8dc86b::-webkit-scrollbar-track {
	background: transparent;
}

.news-tags-filter::-webkit-scrollbar-thumb,
.elementor-element-a8dc86b::-webkit-scrollbar-thumb {
	background: var(--black);
	border-radius: 3px;
}

/* News Tags Filter Buttons */
.news-tags-filter .tag .elementor-button {
	background-color: var(--white) !important;
	border: 1px solid var(--black) !important;
	color: var(--black) !important;
	border-radius: 25px !important;
	padding: 0.5rem 1rem !important;
	white-space: nowrap !important;
	transition: all 0.3s ease !important;
	font-weight: 500 !important;
}

.news-tags-filter .tag .elementor-button:hover {
	background-color: var(--crimson-red) !important;
	border-color: var(--crimson-red) !important;
	color: var(--white) !important;
}

.news-tags-filter .tag .elementor-button.active {
	background-color: var(--crimson-red) !important;
	border-color: var(--crimson-red) !important;
	color: var(--white) !important;
}

@media (min-width: 1024px) {
	.news-post-content {
		height: 100%;
	}
	.single-post .news-post-content > .e-con-inner {
		height: 100%;
		justify-content: space-between !important;
	}
}

.condivisione .elementor-share-btn {
	border: 1px solid var(--crimson-red);
}
.elementor-image-gallery .gallery {
	display: flex;
	align-items: center;
}

.elementor-image-gallery img {
	border: none !important;
}

.page-id-12567 form p > label {
	color: var(--black) !important;
}

.page-id-12567 form p > label a {
	color: var(--crimson-red) !important;
	font-size: 18px !important;
}

/* Alternate content: show first 3, reveal on toggle */
.alternate-content.is-hidden,
.alterate-content.is-hidden {
	display: none !important;
}

.alternate-content-toggle-wrap {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.alternate-content-has-toggle {
	position: relative;
	padding-bottom: 3.5rem;
}

.alternate-content-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem;
	border-radius: 999px !important;
	background-color: var(--crimson-red) !important;
	color: var(--white) !important;
	font-weight: 600;
	text-decoration: none;
	border: 10px solid var(--white);
	cursor: pointer;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
}

.alternate-content-toggle:hover,
.alternate-content-toggle:focus {
	background-color: #a80732;
}

.alternate-content-toggle .toggle-icon {
	font-size: 1rem;
	line-height: 1;
}

@media (min-width: 768px) {
	.scroll-carousel .elementor-swiper-button {
		display: none !important;
	}
}