/**
 * Header e footer fatti con Elementor (inc/hf-elementor.php)
 */

/* UAE carica Font Awesome 5 su tutte le pagine e la sua regola ".fa" (font
   "Font Awesome 5 Free") svuota le icone Font Awesome 4 del tema: social del
   pannello laterale e degli articoli. Il tema forza i codici FA4 con !important,
   quindi le icone "fa" tornano al font FA4 del tema. Le icone di UAE ed
   Elementor usano le classi fas/fab/far e non cambiano. */
.fa {
	font-family: FontAwesome !important;
	font-weight: normal !important;
}

/* --- Header e footer del tema nascosti quando sono attivi quelli Elementor (UAE) --- */
body.ehf-header .philantrop_page_wrapper > header {
	display: none !important;
}

body.ehf-footer .philantrop_footer_cont {
	display: none !important;
}

/* Il tema allarga a 100vw (e senza padding) i contenitori Elementor a larghezza piena,
   pensati per il contenuto delle pagine: qui l'header deve restare largo quanto la pagina. */
body .elementor-element.e-parent.ukraine-hf-header {
	left: auto;
	right: auto;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-block-start: var(--padding-block-start);
	padding-block-end: var(--padding-block-end);
	padding-inline-start: var(--padding-inline-start);
	padding-inline-end: var(--padding-inline-end);
}

/* --- Header fisso in alto durante lo scorrimento ---
   UAE stampa l'header subito dentro <body>: è quel blocco a restare fisso.
   position: sticky non funziona perché il tema mette overflow: hidden sul body,
   quindi il blocco è "fixed" e lo script (inc/hf-elementor.php) riserva in cima
   alla pagina uno spazio alto quanto l'header (--ukraine-hf-header-h).
   Per toglierlo, in Elementor cancella la classe "ukraine-hf-sticky". */
body.ukraine-hf-fixed {
	padding-top: var(--ukraine-hf-header-h, 0px);
}

body.ukraine-hf-fixed > .ukraine-hf-fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

body.ukraine-hf-fixed.admin-bar > .ukraine-hf-fixed-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.ukraine-hf-fixed.admin-bar > .ukraine-hf-fixed-header {
		top: 46px;
	}
}

/* Immagini dell'header (logo, loghi istituzionali): senza lo spazio sotto la riga
   di testo, che negli articoli (dove si carica il kit Elementor) alzava l'header di 10px. */
.ukraine-hf-header .elementor-widget-image {
	line-height: 0;
}

.ukraine-hf-header .elementor-widget-image img {
	vertical-align: middle;
}

/* --- Pulsanti icona (pannello laterale, cerca) ---
   !important: il tema e Elementor danno ai <button> sfondo, bordi e padding. */
.ukraine-hf-icon-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: color .3s ease;
}

.ukraine-hf-icon-btn svg {
	display: block;
	fill: currentColor;
}

/* --- Selettore lingue (widget "Webvox – Selettore lingue") ---
   Sopra 1024px pulsante con tendina (assets/js/lang-switcher.js), fino a 1024px
   riga di bandiere. */
/* Nella riga flex dell'header il widget non deve restringersi: con il menu
   orizzontale (sopra 1500px) finiva a larghezza 0 e copriva la lente. */
.elementor-widget-ukraine_hf_lang_switcher {
	flex-shrink: 0;
}

.ukraine-lang-switcher {
	position: relative;
	display: flex;
	align-items: center;
}

.ukraine-lang-switcher ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ukraine-lang-switcher li {
	margin: 0;
	padding: 0;
}

.ukraine-lang-switcher a {
	display: flex;
	align-items: center;
	color: #333333;
	text-decoration: none;
}

.ukraine-lang-flag {
	display: block;
	flex-shrink: 0;
	border-radius: 2px;
}

.ukraine-lang-switcher a[aria-current] {
	cursor: default;
}

/* Linea verticale tra selettore e pulsante cerca. */
.ukraine-lang--sep::after {
	content: "";
	width: 1px;
	height: 20px;
	margin: 0 8px;
	background-color: #c4c4c2;
}

/* Desktop: pulsante (bandiera, codice, freccia) e tendina con le lingue. */
@media (min-width: 1025px) {
	.ukraine-lang-switcher .ukraine-lang-toggle {
		position: relative;
		display: flex;
		align-items: center;
		gap: 6px;
		height: 40px;
		margin: 0;
		padding: 0 6px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font: 600 13px/1 "Sora", sans-serif;
		letter-spacing: .02em;
		color: #333333;
		cursor: pointer;
	}

	/* Codice a larghezza fissa: il pulsante non cambia larghezza con la lingua. */
	.ukraine-lang-code {
		min-width: 20px;
		text-align: center;
	}

	/* Barretta 2px sotto: gialla al passaggio del mouse, scura a tendina aperta. */
	.ukraine-lang-toggle::after {
		content: "";
		position: absolute;
		left: 6px;
		right: 6px;
		bottom: 6px;
		height: 2px;
		transition: background-color .15s ease-out;
	}

	.ukraine-lang-toggle:hover::after {
		background-color: #fcbf00;
	}

	.ukraine-lang-toggle[aria-expanded="true"]::after {
		background-color: #333333;
	}

	.ukraine-lang-toggle:active {
		opacity: .7;
	}

	.ukraine-lang-switcher .ukraine-lang-toggle:focus-visible {
		outline: 2px solid #333333;
		outline-offset: 2px;
		border-radius: 4px;
	}

	.ukraine-lang-chevron {
		flex-shrink: 0;
		transition: transform .15s ease-out;
	}

	.ukraine-lang-toggle[aria-expanded="true"] .ukraine-lang-chevron {
		transform: rotate(180deg);
	}

	/* Tendina allineata a destra del pulsante (prima del separatore), si apre verso sinistra. */
	.ukraine-lang-switcher ul {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 10;
		display: flex;
		flex-direction: column;
		min-width: 180px;
		padding: 6px 0;
		border: 1px solid #c4c4c2;
		border-radius: 4px;
		background-color: #ffffff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s .15s;
	}

	.ukraine-lang--sep ul {
		right: 17px;
	}

	.ukraine-lang-toggle[aria-expanded="true"] + ul {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	/* Lingua corrente come prima voce. */
	.ukraine-lang-switcher li:has(> [aria-current]) {
		order: -1;
	}

	/* Senza la transizione "all" del tema sui link: ritarderebbe anche la visibilità
	   ereditata e il focus da tastiera non andrebbe sulla prima lingua. */
	.ukraine-lang-switcher a {
		gap: 12px;
		height: 44px;
		padding: 0 16px;
		font: 500 15px/1.2 "Sora", sans-serif;
		white-space: nowrap;
		transition: none;
	}

	.ukraine-lang-switcher a[href]:hover,
	.ukraine-lang-switcher a[href]:focus-visible {
		background-color: #f5f5f3;
		color: #333333;
	}

	.ukraine-lang-switcher a[href]:hover .ukraine-lang-label,
	.ukraine-lang-switcher a[href]:focus-visible .ukraine-lang-label {
		text-decoration: underline 2px #fcbf00;
		text-underline-offset: 4px;
	}

	.ukraine-lang-switcher a:focus-visible {
		outline: 2px solid #333333;
		outline-offset: -2px;
	}

	/* La lingua corrente non ha href: senza colore esplicito l'hover del tema
	   la colorava come lo sfondo e il nome spariva. */
	.ukraine-lang-switcher a[aria-current],
	.ukraine-lang-switcher a[aria-current]:hover {
		font-weight: 600;
		color: #333333;
	}

	.ukraine-lang-check {
		flex-shrink: 0;
		margin-left: auto;
	}
}

/* Tablet e mobile: riga di bandiere; con più di 2 lingue le bandiere restano
   solo nel pannello laterale. */
@media (max-width: 1024px) {
	.ukraine-lang-toggle,
	.ukraine-lang-check {
		display: none;
	}

	.ukraine-lang-switcher ul {
		display: flex;
		gap: 4px;
	}

	.ukraine-lang-switcher a {
		position: relative;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/* Nome della lingua solo per i lettori di schermo. */
	.ukraine-lang-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Barretta 2px sotto la bandiera: gialla al passaggio del mouse, scura sulla lingua corrente. */
	.ukraine-lang-switcher a::after {
		content: "";
		position: absolute;
		top: calc(50% + 12px);
		left: calc(50% - 12px);
		width: 24px;
		height: 2px;
		transition: background-color .2s ease;
	}

	.ukraine-lang-switcher a:not([aria-current]):hover::after {
		background-color: #fcbf00;
	}

	.ukraine-lang-switcher a:not([aria-current]):active {
		opacity: .7;
	}

	.ukraine-lang-switcher a[aria-current]::after {
		background-color: #333333;
	}

	.ukraine-lang-switcher a:focus-visible {
		outline: 2px solid #333333;
		outline-offset: 2px;
		border-radius: 4px;
	}

	.elementor-widget-ukraine_hf_lang_switcher:has(.ukraine-lang-switcher:not(.ukraine-lang--count-1, .ukraine-lang--count-2)) {
		display: none;
	}

	/* Header tablet/mobile (logo, bandiere, hamburger): a stringersi è il logo,
	   non l'hamburger, che altrimenti finiva sotto le bandiere. */
	.e-con:has(> .elementor-widget-ukraine_hf_lang_switcher) > .ukraine-hf-menu-mobile {
		flex-shrink: 0;
	}

	.e-con:has(> .elementor-widget-ukraine_hf_lang_switcher) > .ukraine-hf-logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.e-con:has(> .elementor-widget-ukraine_hf_lang_switcher) > .ukraine-hf-logo img {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 767px) {
	.e-con:has(> .elementor-widget-ukraine_hf_lang_switcher) {
		column-gap: 8px !important;
	}
}

/* --- Fascia 1025-1749px: menu a hamburger al posto di quello orizzontale ---
   (Elementor ha solo i punti di passaggio tablet 1024px e mobile 767px).
   Con le bandiere delle lingue in barra il menu orizzontale (voci inglesi più lunghe)
   ci sta solo da 1750px in su. */
@media only screen and (min-width: 1025px) and (max-width: 1749px) {
	.elementor-element.ukraine-hf-header {
		--min-height: 70px !important;
	}

	.ukraine-hf-header > .ukraine-hf-menu-desktop {
		display: none !important;
	}

	.ukraine-hf-header > .ukraine-hf-menu-mobile.elementor-hidden-desktop {
		display: block !important;
	}

	.ukraine-hf-header > .ukraine-hf-logo {
		--flex-grow: 1 !important;
		flex-grow: 1 !important;
	}

	.ukraine-hf-header > .ukraine-hf-loghi img {
		width: 200px !important;
	}
}

/* Il menu tedesco (circa 880px di testo su 8 voci) ci sta solo da 1850px in su:
   fino a 1849px resta l'hamburger, come nella fascia sopra. */
@media only screen and (min-width: 1750px) and (max-width: 1849px) {
	html:lang(de) .elementor-element.ukraine-hf-header {
		--min-height: 70px !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-menu-desktop {
		display: none !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-menu-mobile.elementor-hidden-desktop {
		display: block !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-logo {
		--flex-grow: 1 !important;
		flex-grow: 1 !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-loghi img {
		width: 200px !important;
	}
}

/* Il menu francese (circa 823px di testo su 8 voci) ci sta da 1800px in su. */
@media only screen and (min-width: 1750px) and (max-width: 1799px) {
	html:lang(fr) .elementor-element.ukraine-hf-header {
		--min-height: 70px !important;
	}

	html:lang(fr) .ukraine-hf-header > .ukraine-hf-menu-desktop {
		display: none !important;
	}

	html:lang(fr) .ukraine-hf-header > .ukraine-hf-menu-mobile.elementor-hidden-desktop {
		display: block !important;
	}

	html:lang(fr) .ukraine-hf-header > .ukraine-hf-logo {
		--flex-grow: 1 !important;
		flex-grow: 1 !important;
	}

	html:lang(fr) .ukraine-hf-header > .ukraine-hf-loghi img {
		width: 200px !important;
	}
}

/* Menu orizzontale: spazio tra le voci ridotto in base alla larghezza, se no non ci
   sta accanto a logo, bandiere, cerca e loghi (da 2100px vale quello di Elementor, 28px).
   Calcolato sul menu inglese (circa 704px di testo su 8 voci); tedesco e francese, più
   lunghi, hanno uno spazio ridotto a parte (da 2200px anche loro 28px). */
@media only screen and (min-width: 1750px) and (max-width: 1799px) {
	.ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media only screen and (min-width: 1800px) and (max-width: 1919px) {
	.ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item,
	html:lang(fr) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

@media only screen and (min-width: 1920px) and (max-width: 2099px) {
	.ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	html:lang(de) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item,
	html:lang(fr) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

@media only screen and (min-width: 2100px) and (max-width: 2199px) {
	html:lang(de) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item,
	html:lang(fr) .ukraine-hf-header > .ukraine-hf-menu-desktop a.hfe-menu-item {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* --- Menu mobile (pannello laterale UAE): righe divisorie come nel menu mobile del tema --- */
.ukraine-hf-menu-mobile .hfe-flyout-content .hfe-nav-menu > .menu-item {
	border-bottom: 1px solid #c4c4c2;
}

/* --- Voci lingua dei menu (inc/lang-switcher.php) ---
   Nel menu orizzontale ci sono le bandiere del widget; nel pannello laterale sono
   righe bandiera + nome. !important: carattere, colori e padding del menu sono nel
   CSS che Elementor genera per il widget UAE, con selettori più specifici. */
.ukraine-hf-menu-desktop .hfe-nav-menu .lang-item {
	display: none;
}

.ukraine-hf-menu-mobile .hfe-nav-menu .lang-item > a {
	display: flex;
	align-items: center;
	justify-content: flex-start !important;
	gap: 12px;
	min-height: 48px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-family: "Sora", sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: #333333 !important;
}

/* Hover: testo scuro (il giallo su bianco non si legge) con sottolineatura gialla. */
.ukraine-hf-menu-mobile .hfe-nav-menu .lang-item:not(.current-lang) > a:hover .ukraine-lang-name {
	text-decoration: underline 2px #fcbf00;
	text-underline-offset: 4px;
}

.ukraine-hf-menu-mobile .hfe-nav-menu .current-lang > a {
	font-weight: 600 !important;
	cursor: default;
}

.ukraine-lang-current {
	color: #4a4b54;
}

@media (prefers-reduced-motion: reduce) {
	.ukraine-lang-switcher a::after,
	.ukraine-lang-toggle::after,
	.ukraine-lang-chevron,
	.ukraine-lang-switcher ul,
	.ukraine-hf-menu-mobile .hfe-nav-menu .lang-item > a {
		transition: none;
	}
}

/* --- Footer: scritta grande riempita con l'immagine del tema (url in inc/hf-elementor.php) --- */
.ukraine-hf-adv-text .elementor-heading-title {
	background-position: center;
	background-size: cover;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ukraine-hf-copyright a {
	color: #ffffff;
	text-decoration: underline;
}