/* ==========================================================================
   ANARE - www.anare.it
   Foglio di stile unico, responsive (mobile-first)
   ========================================================================== */

:root{
	--blue-900:#16294a;
	--blue-800:#1c3557;
	--blue-700:#20406f;
	--blue-600:#3262a0;
	--blue-400:#4c82c6;
	--blue-100:#e8eff8;
	--blue-50:#f4f8fc;
	--ink:#2b2b2b;
	--ink-soft:#555;
	--line:#dde5ee;
	--white:#fff;
	--radius:10px;
	--shadow:0 2px 10px rgba(22,41,74,.08);
	--shadow-lg:0 10px 30px rgba(22,41,74,.16);
	--container:1100px;
	--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}

body{
	margin:0;
	font-family:var(--font);
	font-size:1rem;
	line-height:1.6;
	color:var(--ink);
	background:var(--blue-50);
}

img{max-width:100%; height:auto; border:0;}

a{color:var(--blue-600);}
a:hover{color:var(--blue-800);}

h1,h2,h3,h4{line-height:1.25; color:var(--blue-800); margin:0 0 .5em;}

.visually-hidden{
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

/* ==========================================================================
   HEADER + NAVIGAZIONE
   ========================================================================== */

#header{
	background:var(--white);
	border-bottom:1px solid var(--line);
	box-shadow:var(--shadow);
	position:sticky;
	top:0;
	z-index:100;
}

.header-inner{
	max-width:var(--container);
	margin:0 auto;
	padding:.6rem 1rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	flex-wrap:wrap;
}

.logo{
	display:flex;
	align-items:center;
	gap:.7rem;
	text-decoration:none;
	color:var(--blue-800);
	min-width:0;
}

.logo img{width:56px; height:56px; flex:none;}

.logo-text strong{
	display:block;
	font-size:1.35rem;
	letter-spacing:.02em;
	line-height:1.1;
}

.logo-text small{
	display:block;
	font-size:.72rem;
	color:var(--ink-soft);
	line-height:1.25;
	max-width:26ch;
}

/* hamburger */
.nav-toggle{
	display:inline-flex;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:44px; height:44px;
	padding:9px;
	background:none;
	border:1px solid var(--line);
	border-radius:8px;
	cursor:pointer;
}

.nav-toggle-bar{
	display:block;
	height:2px;
	width:100%;
	background:var(--blue-800);
	border-radius:2px;
	transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* nav mobile-first: pannello a scomparsa */
.nav{
	display:none;
	width:100%;
}

.nav.is-open{display:block;}

.nav-list{
	list-style:none;
	margin:0;
	padding:0 0 .75rem;
}

.nav-group-title{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	padding:.7rem .25rem;
	background:none;
	border:0;
	border-top:1px solid var(--line);
	font-family:inherit;
	font-size:1rem;
	font-weight:600;
	color:var(--blue-800);
	cursor:pointer;
	text-align:left;
}

.caret{
	flex:none;
	width:.5em; height:.5em;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg);
	transition:transform .2s ease;
	margin-left:.5em;
}

.nav-group-title[aria-expanded="true"] .caret{transform:rotate(225deg);}

.nav-sub{
	list-style:none;
	margin:0;
	padding:0 0 .5rem;
	display:none;
}

.nav-item .nav-group-title[aria-expanded="true"] + .nav-sub{display:block;}

.nav-sub a{
	display:block;
	padding:.45rem .75rem;
	text-decoration:none;
	color:var(--ink);
	border-radius:6px;
}

.nav-sub a:hover{background:var(--blue-100); color:var(--blue-800);}

.nav-cta{
	display:block;
	margin:.75rem 0 0;
	padding:.6rem 1rem;
	background:var(--blue-600);
	color:var(--white) !important;
	font-weight:600;
	text-align:center;
	text-decoration:none;
	border-radius:8px;
}

.nav-cta:hover{background:var(--blue-800);}

/* nav desktop */
@media (min-width:920px){

	.nav-toggle{display:none;}

	.nav{
		display:block;
		width:auto;
	}

	.nav-list{
		display:flex;
		align-items:center;
		gap:.25rem;
		padding:0;
	}

	.nav-item{position:relative;}

	.nav-group-title{
		width:auto;
		border-top:0;
		padding:.55rem .7rem;
		font-size:.95rem;
		border-radius:8px;
		white-space:nowrap;
	}

	.nav-group-title:hover,
	.nav-item:focus-within .nav-group-title{
		background:var(--blue-100);
	}

	.caret{
		width:.4em; height:.4em;
		border-width:2px;
		transform:rotate(45deg) translateY(-15%);
	}

	.nav-sub{
		position:absolute;
		top:100%;
		left:0;
		min-width:240px;
		background:var(--white);
		border:1px solid var(--line);
		border-radius:var(--radius);
		box-shadow:var(--shadow-lg);
		padding:.4rem;
		z-index:50;
	}

	.nav-item:hover > .nav-sub,
	.nav-item:focus-within > .nav-sub,
	.nav-item .nav-group-title[aria-expanded="true"] + .nav-sub{
		display:block;
	}

	.nav-sub a{padding:.45rem .65rem; font-size:.92rem;}

	.nav-item-cta{margin-left:.5rem;}

	.nav-cta{
		margin:0;
		padding:.5rem .9rem;
		font-size:.92rem;
		white-space:nowrap;
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

#content{
	max-width:var(--container);
	margin:0 auto;
	padding:1.25rem 1rem 2.5rem;
	width:100%;
}

.layout{
	display:grid;
	grid-template-columns:1fr;
	gap:1.5rem;
}

@media (min-width:920px){
	.layout{
		grid-template-columns:minmax(0,1fr) 300px;
		gap:2rem;
	}
}

.main-col{min-width:0;}

/* ==========================================================================
   HOME
   ========================================================================== */

.hero{
	position:relative;
	border-radius:var(--radius);
	overflow:hidden;
	margin:0 0 1.5rem;
	box-shadow:var(--shadow);
	background:var(--blue-800);
}

.hero-img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
}

@media (min-width:700px){
	.hero-img{height:320px;}
}

.hero-caption{
	position:absolute;
	inset:auto 0 0 0;
	padding:2.5rem 1.5rem 1.25rem;
	background:linear-gradient(to top, rgba(22,41,74,.85), rgba(22,41,74,0));
	color:var(--white);
}

.hero-caption h1{
	color:var(--white);
	font-size:clamp(1.5rem, 4vw, 2.25rem);
	margin:0;
	text-shadow:0 1px 3px rgba(0,0,0,.4);
}

.hero-caption p{
	margin:.15rem 0 0;
	font-size:clamp(.95rem, 2.5vw, 1.15rem);
	opacity:.92;
}

.intro-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:1rem;
	margin:0 0 1.5rem;
}

@media (min-width:700px){
	.intro-grid{grid-template-columns:1fr 1fr;}
}

.card{
	background:var(--white);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:1.25rem;
}

.card p{margin:0;}

.video-box{
	position:relative;
	width:100%;
	aspect-ratio:16 / 9;
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow);
	background:#000;
	margin:0 0 1.25rem;
}

.video-box iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}

.note{
	font-size:.85rem;
	color:var(--ink-soft);
}

.note a{color:inherit;}

/* ==========================================================================
   PAGINE DI CONTENUTO
   ========================================================================== */

.page-body{
	background:var(--white);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:1.5rem;
}

@media (min-width:700px){
	.page-body{padding:2rem;}
}

.page-header h1{
	font-size:clamp(1.4rem, 3.5vw, 1.9rem);
	color:var(--blue-600);
	margin:0 0 .25rem;
}

.page-subtitle{
	text-transform:uppercase;
	letter-spacing:.04em;
	font-size:.9rem;
	color:var(--ink-soft);
	margin:0 0 1rem;
}

.banner-img{
	display:block;
	width:100%;
	max-width:600px;
	margin:0 0 1.25rem;
	border-radius:6px;
}

.page-img{
	border-radius:8px;
	margin:0 0 1rem;
}

@media (min-width:700px){
	.page-img{
		float:right;
		max-width:45%;
		margin:0 0 1rem 1.5rem;
	}
}

.page-text{overflow-wrap:break-word;}
.page-text p{margin:0 0 1em;}
.page-text ul{margin:0 0 1em; padding-left:1.4em;}
.page-text li{list-style:square; margin:0 0 .25em;}
.page-text img{border-radius:6px;}
.page-text table{max-width:100%; border-collapse:collapse;}

/* ==========================================================================
   SIDEBAR / EVENTI
   ========================================================================== */

.sidebar-title{
	font-size:1.25rem;
	color:var(--blue-600);
	padding:0 0 .25rem;
	border-bottom:2px solid var(--blue-100);
	margin:0 0 1rem;
}

.event-card{
	background:var(--white);
	border:1px solid var(--line);
	border-left:4px solid var(--blue-400);
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:.85rem 1rem;
	margin:0 0 .75rem;
}

.event-card h3{
	font-size:.98rem;
	margin:0;
}

.event-card h3 a{
	color:var(--blue-800);
	text-decoration:none;
}

.event-card h3 a:hover{text-decoration:underline;}

.event-date{
	display:inline-block;
	font-size:.78rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.03em;
	color:var(--blue-600);
	margin:0 0 .2rem;
}

.event-more{font-size:.9rem;}

.sidebar-box{
	background:var(--white);
	border:1px solid var(--line);
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:1rem;
	font-size:.92rem;
}

.sidebar-box img{border-radius:6px; margin:0 0 .5rem;}

/* eventi - pagina completa */
.event-full{
	padding:0 0 1.5rem;
	margin:0 0 1.5rem;
	border-bottom:1px solid var(--line);
}

.event-full:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}

.event-full h2{
	font-size:1.3rem;
	color:var(--blue-600);
	margin:0 0 .2rem;
	scroll-margin-top:90px;
}

/* ==========================================================================
   RICERCA ANAGRAFICA
   ========================================================================== */

.search-form{
	background:var(--blue-100);
	border-radius:8px;
	padding:1rem;
	margin:1.25rem 0;
}

.search-form label{
	display:block;
	font-weight:600;
	font-size:.9rem;
	margin:0 0 .4rem;
	color:var(--blue-800);
}

.search-row{
	display:flex;
	gap:.5rem;
	flex-wrap:wrap;
}

.search-row input{
	flex:1 1 220px;
	padding:.6rem .75rem;
	font-size:1rem;
	font-family:inherit;
	border:1px solid var(--line);
	border-radius:8px;
}

.search-row input:focus{
	outline:2px solid var(--blue-400);
	outline-offset:1px;
	border-color:var(--blue-400);
}

.search-row button{
	padding:.6rem 1.5rem;
	font-size:1rem;
	font-family:inherit;
	font-weight:600;
	color:var(--white);
	background:var(--blue-600);
	border:0;
	border-radius:8px;
	cursor:pointer;
}

.search-row button:hover{background:var(--blue-800);}

.search-results-title{margin-top:1rem;}

.search-results{
	width:100%;
	max-width:480px;
	border-collapse:collapse;
	font-size:.95rem;
}

.search-results th,
.search-results td{
	text-align:left;
	padding:.5rem .75rem;
	border-bottom:1px solid var(--line);
}

.search-results th{
	color:var(--blue-800);
	white-space:nowrap;
	width:1%;
}

.search-empty{
	background:#fdf3f3;
	border:1px solid #ecc8c8;
	border-radius:8px;
	padding:.75rem 1rem;
	color:#8a3232;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer{
	background:var(--blue-800);
	color:#cfdcee;
	margin-top:2rem;
}

.footer-inner{
	max-width:var(--container);
	margin:0 auto;
	padding:2rem 1rem 1rem;
	display:grid;
	grid-template-columns:1fr;
	gap:1.5rem;
}

@media (min-width:700px){
	.footer-inner{grid-template-columns:2fr 1fr 1fr;}
}

.footer-brand{
	display:flex;
	gap:.9rem;
	align-items:flex-start;
}

.footer-brand img{opacity:.9;}

.footer-brand p,
.footer-info p{margin:0; font-size:.9rem; line-height:1.5;}

.footer-brand strong{color:var(--white);}

.footer-nav{display:flex; flex-direction:column; gap:.35rem;}

.footer-nav a{
	color:#cfdcee;
	text-decoration:none;
	font-size:.9rem;
}

.footer-nav a:hover{color:var(--white); text-decoration:underline;}

.footer-copy{
	max-width:var(--container);
	margin:0 auto;
	padding:1rem;
	font-size:.78rem;
	color:#9db4d2;
	border-top:1px solid rgba(255,255,255,.12);
	text-align:center;
}

/* ==========================================================================
   COOKIE BAR
   ========================================================================== */

.cookiebar{
	position:fixed;
	inset:auto 0 0 0;
	z-index:200;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1rem;
	flex-wrap:wrap;
	padding:.75rem 1rem;
	background:var(--blue-900);
	color:var(--white);
	font-size:.88rem;
	box-shadow:0 -2px 10px rgba(0,0,0,.25);
}

.cookiebar[hidden]{display:none;}

.cookiebar p{margin:0;}

.cookiebar a{color:#a8c6ec;}

.cookiebar button{
	padding:.45rem 1.25rem;
	font-family:inherit;
	font-size:.88rem;
	font-weight:600;
	color:var(--blue-900);
	background:var(--white);
	border:0;
	border-radius:6px;
	cursor:pointer;
}

.cookiebar button:hover{background:var(--blue-100);}

/* ==========================================================================
   STAMPA
   ========================================================================== */

@media print{
	#header, #footer, .sidebar, .cookiebar, .nav-toggle{display:none !important;}
	body{background:#fff;}
	.page-body{border:0; box-shadow:none; padding:0;}
}