/*
 * Hanuman - ritocchi grafici moderni (si carica DOPO main.css e flexslider.css)
 * Stessa identità del sito: blu #5385c1, arancio #ff9b20, fascia corallo, font Raleway.
 * Interviene solo su leggibilità, schede, pulsanti, testata, banner cookie, effetti e uso da smartphone.
 */
@import url(raleway.css);

:root {
	--blu: #5385c1;
	--blu-scuro: #3e6aa0;
	--arancio: #ff9b20;
	--arancio-scuro: #f08700;
	--rosso: #d34646;
	--testo: #5b5f66;
	--ombra: 0 6px 24px rgba(30, 45, 70, .10);
	--ombra-su: 0 14px 34px rgba(30, 45, 70, .18);
	--raggio: 14px;
}

html { scroll-behavior: smooth; }

/* ---------- Leggibilità: testo più scuro e meno sottile (prima grigio chiaro #9a9a9a, peso 300) ---------- */
body {
	color: var(--testo);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
p, li { line-height: 1.75; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
a { transition: color .2s ease; }

/* ---------- Testata: barra traslucida con sfocatura ---------- */
#header {
	background: rgba(25, 30, 40, .55);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
#header .logo { letter-spacing: .02em; }
#header .navPanelToggle { border-radius: 8px; }

/* ---------- Banner della home ----------
 * Foto, zoom e effetto parallasse restano quelli originali (background-size: cover + attachment: fixed):
 * qui si aggiungono solo una velatura in basso per staccare il logo e lo stile del logo. */
#banner {
	position: relative;
	isolation: isolate;
}
#banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .45) 100%);
	z-index: -1;
}
#banner > img {
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	animation: comparsa 1.1s .2s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes comparsa {
	from { opacity: 0; transform: translateY(24px) scale(.96); }
	to { opacity: 1; transform: none; }
}

/* ---------- Schede (home e pagine): card con angoli arrotondati, ombra e movimento al passaggio ---------- */
.flex.flex-3 article,
.flex.flex-2 article,
#three .flex article {
	background: #fff;
	border: 0 !important;
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
	padding: 1.6em 1.6em 1.8em !important;
	margin-bottom: 2em;
	transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s ease;
}
.flex.flex-3 article:hover,
.flex.flex-2 article:hover,
#three .flex article:hover {
	transform: translateY(-6px);
	box-shadow: var(--ombra-su);
}
.flex.flex-3 article::after,
.flex.flex-3 article::before { display: none !important; } /* le vecchie linee verticali tra le colonne */
.flex.flex-3 article { width: calc(33.333% - 1.4em); }
.flex.flex-2 article { width: calc(50% - 1.2em); }
.flex.flex-3 article h3, .flex.flex-2 article h3 { color: var(--blu); margin-bottom: .6em; }

/* immagini nelle schede: stessa altezza, angoli arrotondati, zoom leggero */
.flex article p[style*="background-image"],
.flex article .image.fit,
.flex article [id^="imgscuole"],
.flex article #dona {
	border-radius: 10px;
	overflow: hidden;
	transition: transform .5s ease, filter .5s ease;
}
.flex article p[style*="background-image"] { height: 170px !important; margin-bottom: 1em; }
.flex article:hover p[style*="background-image"],
.flex article:hover .image.fit { filter: saturate(1.08); }
.flex article .image.fit img { border-radius: 10px; }

/* ---------- Pulsanti: arrotondati, con ombra e piccola animazione ---------- */
input[type=submit], input[type=reset], input[type=button], button, .button {
	border-radius: 999px !important;
	padding: 0 1.8em !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	box-shadow: 0 4px 14px rgba(255, 155, 32, .35);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 155, 32, .45);
}
.button.special { background-color: var(--arancio) !important; }
.button.special:hover { background-color: var(--arancio-scuro) !important; }

/* ---------- Fascia corallo con lo slider: cornice morbida e didascalia sopra la foto ---------- */
#two .flexslider {
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(120, 40, 0, .25);
	background: #fff;
}
#two .flexslider .slides img { border-radius: 0; }
.flex-caption {
	/* resta sotto la foto come in origine, con uno stile più pulito */
	background: #fff !important;
	color: #3c4350 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 1em 1.4em 1.1em 1.6em !important;
	border-left: 5px solid var(--arancio);
	font-size: 1.05em !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	text-align: left;
}
.flex-caption a, #two .flexslider a { text-decoration: none; }
.flex-control-paging li a { width: 10px; height: 10px; box-shadow: none; }

/* ---------- Pulsante "DONA": angoli arrotondati, ombra e piccolo movimento ---------- */
.donation-btn a { display: block; transition: transform .25s ease; }
.donation-btn img {
	display: block;
	border-radius: 0 10px 10px 0;
	box-shadow: 4px 6px 18px rgba(0, 0, 0, .25);
}
.donation-btn a:hover { transform: translateX(4px); }

/* ---------- Banner cookie: riquadro compatto in basso invece della fascia rossa a tutta larghezza ---------- */
#cookie {
	left: auto !important;
	right: 16px !important;
	bottom: 16px !important;
	width: min(440px, calc(100% - 32px)) !important;
	background: #fff !important;
	color: var(--testo) !important;
	text-align: left !important;
	padding: 1.2em 1.4em 1em !important;
	border-radius: 16px;
	border-top: 5px solid var(--rosso);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	font-size: .85em;
	line-height: 1.55 !important;
	animation: comparsa .6s .8s cubic-bezier(.2, .8, .25, 1) both;
}
#cookie p { color: var(--testo) !important; margin: 0 0 .4em 0 !important; line-height: 1.55; }
#cookie .cl-consent__btn {
	display: inline-block;
	width: auto;
	margin: .9em .8em .4em 0;
	padding: .55em 2.4em !important;
	border: 0;
	border-radius: 999px;
	background: var(--blu) !important;
	text-shadow: none;
	font: 600 15px "Raleway", Arial, sans-serif;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	line-height: 1.4;
	height: auto;
}
#cookie .cl-consent__btn:hover { background: var(--blu-scuro) !important; }
#cookie a { color: var(--blu) !important; }

/* ---------- Piè di pagina ---------- */
#footer { background: #2b3440; color: rgba(255, 255, 255, .8); padding-bottom: 1.5em; }
#footer .inner { border-top: 0; }
/* il template scrive il copyright in nero: su sfondo scuro va chiaro */
#footer .copyright { color: rgba(255, 255, 255, .8) !important; line-height: 1.8; }
#footer .copyright a { color: #fff !important; }
#footer a, #footer .icons a, #footer ul.icons li .icon { color: #fff; }
#footer .icons a { transition: transform .2s ease, color .2s ease; display: inline-block; }
#footer .icons a:hover { transform: translateY(-3px); color: var(--arancio); }

/* ---------- Menu per tablet e smartphone (pannello laterale #navPanel, completato da moderno.js) ---------- */
#header .navPanelToggle {
	min-width: 48px;
	text-align: center;
	font-size: 1.25em;
}
#navPanel {
	width: 21em;
	max-width: 86%;
	padding: 0 0 2em 0;
	background: linear-gradient(170deg, #5b8fcc 0%, var(--blu) 45%, var(--blu-scuro) 100%);
	color: #fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, .3);
}
#navPanel .nav-logo {
	display: block;
	padding: 1.1em 4em 1em 1.3em !important;
	border: 0 !important;
	background: rgba(255, 255, 255, .1);
}
#navPanel .nav-logo img { display: block; height: 58px; width: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
#navPanel .close { height: 4.4em; line-height: 4.4em; color: #fff; font-size: 1.1em; }
#navPanel ul { list-style: none; margin: 0; padding: 0; }
#navPanel #menu { padding: .6em 0; }
#navPanel #menu li { position: relative; padding: 0; margin: 0; }
#navPanel #menu li::before { display: none; } /* niente pallini */
#navPanel #menu a {
	display: block;
	border: 0 !important;
	color: #fff !important;
	font-size: 1.05em;
	font-weight: 500 !important;
	letter-spacing: .01em;
	line-height: 1.35;
	padding: .85em 1.3em !important;
	transition: background-color .15s ease;
}
#navPanel #menu a:hover, #navPanel #menu a:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
#navPanel #menu a.attivo {
	background: rgba(255, 255, 255, .18);
	box-shadow: inset 4px 0 0 var(--arancio);
	font-weight: 700 !important;
}
#navPanel #menu > li + li { border-top: 1px solid rgba(255, 255, 255, .14); }

/* sottomenu a scomparsa */
#navPanel #menu li.has-sub > a { padding-right: 3.6em !important; }
#navPanel .apri-sub {
	position: absolute;
	top: 0;
	right: 0;
	width: 3.4em;
	height: 3.05em;
	padding: 0 !important;
	margin: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .14);
	border-radius: 0 !important;
	background: transparent;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	min-height: 0;
}
#navPanel .apri-sub:hover { transform: none; background: rgba(255, 255, 255, .1); box-shadow: none; }
#navPanel .apri-sub::before {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s ease;
}
#navPanel li.aperto > .apri-sub::before { transform: rotate(-135deg) translate(-2px, -2px); }
#navPanel #menu li > ul,
#navPanel #menu li > ul.hidden {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	background: rgba(0, 0, 0, .12);
	transition: max-height .3s ease, visibility .3s;
}
#navPanel #menu li.aperto > ul { max-height: 40em; visibility: visible; }
#navPanel #menu li > ul a { padding-left: 2.3em !important; font-size: .98em; font-weight: 400 !important; }

/* lingua e pulsante dona */
#navPanel #menu li.voce-lingua a { display: flex; align-items: center; gap: .6em; font-size: .95em; opacity: .95; }
#navPanel #menu li.voce-lingua img { width: 22px; height: auto; border-radius: 3px; }
#navPanel .nav-dona {
	display: block;
	margin: 1.2em 1.3em 0;
	padding: .8em 1em !important;
	border: 0 !important;
	border-radius: 999px;
	background: var(--rosso);
	color: #fff !important;
	font-weight: 700 !important;
	text-align: center;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* pagina dietro oscurata mentre il menu è aperto (si chiude toccandola) */
body:has(#navPanel.visible) { overflow: hidden; }
body:has(#navPanel.visible)::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(15, 25, 40, .5);
	z-index: 10002;
	animation: oscura .25s ease both;
}
@keyframes oscura { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Comparsa delle sezioni allo scorrimento (attivata da moderno.js) ---------- */
.js-rivela .rivela {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .25, 1);
}
.js-rivela .rivela.visibile { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media screen and (min-width: 737px) and (max-width: 980px) {
	/* due schede per riga invece di una sola a tutta larghezza */
	.flex.flex-3 { flex-direction: row; }
	.flex.flex-3 article, .flex.flex-2 article { width: calc(50% - 1em); border-bottom: 0; }
}

/* ---------- Smartphone ---------- */
@media screen and (max-width: 736px) {
	body { font-size: 15px; }
	.flex.flex-3 article, .flex.flex-2 article { width: 100%; }
	.flex article p[style*="background-image"] { height: 200px !important; }
	input[type=submit], input[type=button], button, .button { min-height: 44px; }
	#cookie { right: 12px !important; bottom: 12px !important; width: calc(100% - 24px) !important; }
}

/* chi preferisce meno movimento: niente zoom e comparse */
@media (prefers-reduced-motion: reduce) {
	#banner > img, #cookie { animation: none !important; }
	.js-rivela .rivela { opacity: 1; transform: none; transition: none; }
	* { scroll-behavior: auto !important; }
}