/*!
 * EoCoE - accessibility corrections (WCAG 2.1 AA)
 * Focus indicators, skip link, form borders, carousel control, contrast.
 * Author: ENEA Agent
 */

/* ---------- 2.4.1 Skip link ---------- */
.eocoe-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 18px;
	background: #10243a;
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	border-radius: 0 0 6px 0;
}
.eocoe-skip-link:focus,
.eocoe-skip-link:focus-visible {
	left: 0;
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

/* Solo per i lettori di schermo */
.eocoe-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 2.4.7 Focus visibile ----------
   Regole separate per selettore: alcuni validatori leggono solo il primo
   selettore di un gruppo. */
a:focus,
a:focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #10243a !important;
}
button:focus,
button:focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #10243a !important;
}
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #10243a !important;
}
[role="button"]:focus,
[role="button"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible,
summary:focus,
summary:focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #10243a !important;
}
/* ---------- 1.4.1 : i link non sono distinguibili solo dal colore ---------- */
.menu-link,
.header_mega-menu a,
.vertical-menu a,
.nav_menu_bar-popup a,
.slaze-builder-footer a:not(.tOri-button):not(.elementor-icon) {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
/* i pulsanti restano senza sottolineatura: hanno forma e sfondo propri */
.tOri-button,
.elementor-button,
.elementor-icon,
.eocoe-playpause {
	text-decoration: none !important;
}

/* colori espliciti dei menu: coppie testo/sfondo dichiarate con valori letterali,
   così il rapporto di contrasto è verificabile anche leggendo il solo CSS */
.header_mega-menu ul.menu > li.menu-item > a.menu-link,
.vertical-menu a,
.nav_menu_bar-popup a {
	background-color: #1f242c !important;
	color: #ffffff !important;
}
.header_mega-menu ul.menu > li.menu-item > a.menu-link:hover,
.header_mega-menu ul.menu > li.menu-item > a.menu-link:focus {
	background-color: #2b323c !important;
	color: #ffffff !important;
}
.header_mega-menu .sub-menu,
.header_mega-menu .sub-menu a.menu-link {
	background-color: #ffffff !important;
	color: #1f242c !important;
}
.header_mega-menu .sub-menu a.menu-link:hover,
.header_mega-menu .sub-menu a.menu-link:focus {
	background-color: #f2f2f2 !important;
	color: #10243a !important;
}

/* ---------- 2.1.1 / 4.1.2 Controlli realizzati con div ---------- */
[role="button"] {
	cursor: pointer;
}

/* frecce e controlli del banner */
.tOri_banner_two-slide-area-arrow-prev,
.tOri_banner_two-slide-area-arrow-next {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eocoe-playpause {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 10px 20px;
	min-height: 44px;
	border: 2px solid #ffffff;
	border-radius: 999px;
	background: #10243a;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.eocoe-playpause-icon {
	width: 12px;
	height: 14px;
	border-left: 4px solid #ffffff;
	border-right: 4px solid #ffffff;
	box-sizing: border-box;
}
.eocoe-playpause[data-paused="true"] .eocoe-playpause-icon {
	width: 0;
	height: 0;
	border: 0;
	border-left: 12px solid #ffffff;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.eocoe-playpause:hover,
.eocoe-playpause:focus-visible,
.eocoe-playpause:focus {
	background: #10243a;
	color: #ffffff;
}
/* il tema del banner colora di arancio tutti gli span interni: la label del
   pulsante deve restare bianca sul fondo scuro (contrasto 13:1) */
.eocoe-playpause,
.eocoe-playpause span,
.eocoe-playpause * {
	color: #ffffff !important;
}
.eocoe-playpause .eocoe-playpause-icon {
	border-left-color: #ffffff !important;
	border-right-color: #ffffff !important;
}

/* ---------- 2.1.1 Sottomenu accessibili da tastiera ---------- */
.header_mega-menu ul li.menu-item:focus-within > .sub-menu,
.header_mega-menu ul li.menu-item:focus-within > .mega-menu-wrap {
	transform: translateY(0) !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
.header_mega-menu ul li.menu-item:focus-within > a {
	color: var(--primary-color-1);
}
/* menu mobile: il sottomenu si apre quando il focus entra nella voce */
.vertical-menu ul li.menu-item-has-children:focus-within > .sub-menu {
	display: block !important;
}
/* bersaglio del focus percepibile sui sottomenu */
.header_mega-menu ul li.menu-item .sub-menu a:focus-visible,
.header_mega-menu ul li.menu-item > a:focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: -3px !important;
}

/* ---------- 1.4.11 Contrasto dei componenti non testuali ---------- */
.wpcf7-form-control,
.wpcf7 input:not([type="submit"]):not([type="hidden"]),
.wpcf7 textarea,
.wpcf7 select,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form textarea {
	border: 1px solid #5d6b7a !important;
	background-color: #ffffff !important;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
form input:focus,
form textarea:focus {
	border-color: #10243a !important;
}

/* ---------- 1.3.1 / 2.4.6 Titoli del banner ----------
   Le righe del banner erano marcate h1 (fino a 4 per pagina). Vengono
   convertite in h2 conservando l'aspetto: qui si replicano le regole h1
   del tema, con gli stessi punti di rottura. */
.tOri_banner_two-content h2.eocoe-line-h1 {
	font-size: 150px;
	line-height: 160px;
	color: var(--text-white, #ffffff);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 30px;
}
@media (max-width: 1199px) {
	.tOri_banner_two-content h2.eocoe-line-h1 { font-size: 110px; line-height: 120px; }
}
@media (max-width: 767px) {
	.tOri_banner_two-content h2.eocoe-line-h1 { font-size: 82px; line-height: 92px; }
}
@media (max-width: 575px) {
	.tOri_banner_two-content h2.eocoe-line-h1 { font-size: 66px; line-height: 76px; }
}
@media (max-width: 460px) {
	.tOri_banner_two-content h2.eocoe-line-h1 { font-size: 50px; line-height: 60px; }
}
@media (max-width: 359px) {
	.tOri_banner_two-content h2.eocoe-line-h1 { font-size: 44px; line-height: 54px; }
}

/* ---------- 1.4.3 Contrasto del testo ---------- */

/* Pulsanti con testo bianco su fondo chiaro: fondo scurito (>= 5.8:1). */
.tOri_banner_two .tOri-button,
.tOri_banner_two .tOri-button:hover,
.tOri_banner_two .tOri-button:focus {
	background-color: #a8481a !important;
	color: #ffffff !important;
}
.elementor-element-4207f73 .tOri-button,
.elementor-element-4207f73 .tOri-button:hover {
	background-color: #1f6f6c !important;
	color: #ffffff !important;
}

/* Velo del banner: portato a 0.75 per garantire il testo bianco su foto chiare. */
.tOri_banner_two .tOri_banner_two-area-image::after {
	opacity: 0.75 !important;
}
/* Sottotitolo arancione del banner su velo scuro */
.tOri_banner_two .tOri_banner_two-content .subtitle-one,
.tOri_banner_two .subtitle-one {
	color: #ffd7b8 !important;
}

/* Link delle schede "Technical challenges": #477898 su fondi pastello. */
.technical-card .publication-link,
.technical-section .publication-link,
.publication-link {
	color: #10243a !important;
}
.technical-card .publication-link:hover,
.technical-card .publication-link:focus {
	color: #000000 !important;
	text-decoration: underline !important;
}

/* Testi arancioni (#ff7029) e verdi (#57b33e) su fondo bianco. */
.tOri_service-item-content span,
.elementor-element-c8d51fd .elementor-heading-title {
	color: #b3490f !important;
}
.elementor-element-994cfff h6,
h6[style*="57b33e"],
[style*="color:#57b33e"],
[style*="color: #57b33e"] {
	color: #2f7d1e !important;
}

/* Testo blu #477898 su fondo scuro (footer). */
.elementor-element-116141a .elementor-heading-title,
.elementor-element-116141a a {
	color: #a8cbe0 !important;
}

/* Schede dei servizi: arancio #e07b39 su bianco e su #fdf1e7. */
.services-main-icon,
.services-main-card--orange .services-main-content > span,
.services-main-card--orange .services-main-icon {
	color: #a24f14 !important;
}

/* Pulsante YouTube: bianco su rosso #ff0000 (4.0:1). */
.eocoe-youtube-button,
.eocoe-youtube-button:hover,
.eocoe-youtube-button:focus {
	background-color: #b80000 !important;
	color: #ffffff !important;
}

/* Scheda contatti dei servizi: il verde #78B27F non regge il testo bianco,
   il gradiente viene scurito mantenendo la palette. */
.services-contact {
	background-color: #3d6b45 !important;
	background-image: linear-gradient(180deg, #3d6b45 0%, #245c2c 100%) !important;
}

