@import (reference) "variables.less";
@import "fonts.less";

// Transizione fade out/in tra le pagine (View Transitions API, cross-document).
// Browser senza supporto ignorano semplicemente questa regola: nessun fallback necessario.
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.25s;
}

body {

	// Sotto questa larghezza il layout va in scroll orizzontale invece
	// di continuare a restringersi (rotture su viewport insolitamente
	// stretti, es. alcuni in-app browser)
	min-width: 330px;
	overflow-x: auto;

	// Sfondo pagina: stesso grigio della fascia contenuti (.darker) e del
	// footer; i box dei contenuti restano bianchi.
	background-color: var(--bs-body-darker-color);

	a {
		color: var(--bs-primary);
		text-decoration: none;
	}// a

	// Link dentro i testi scritti da backend (campi WYSIWYG): riquadro rosso
	// con testo bianco in hover. Limitato ai contenitori dei testi, così
	// pulsanti, card, icone social e menu (anch'essi <a>) non lo ereditano.
	.text_editor-content,
	.categoria-testo,
	.spalla-elemento-testo,
	span.descrizione {
		a:hover {
			text-decoration: underline;
			color: var(--bs-white);
			background-color: var(--bs-primary);
			padding: 0.1rem 0.25rem;
			margin: -0.1rem -0.25rem;
			transition: all 0.2s ease-in-out;
			border-radius: var(--bs-border-radius);
		}//	a:hover
	}

	.darker {

		background-color: var(--bs-body-darker-color);

	}//.darker

	// ===================================
	// MENU (nav principale)
	// ===================================

	#menu {

		&.fullwidth {

			background: var(--bs-body-darker-color);
			padding: 1.25rem 0;
			z-index: 1030;

		}//&.fullwidth

		.menu-brand {

			.logo {

				img {
					height: 2.2rem;
					width: auto;
					display: block;
				}

			}//.logo

			.navbar-brand {

				&.text-primary {

					display: inline-block;
					border: 0.125rem solid var(--bs-primary);
					margin-left: 0.5rem;
					padding: 0 1rem;
					font-weight: 500;
					font-size: 1.15rem;
					line-height: 2.2rem;
					text-transform: uppercase;
					text-decoration: none;
					white-space: nowrap;

					&:hover {

						background: var(--bs-primary);
						color: var(--bs-white) !important;

					}//&:hover

				}//&.text-primary

			}//.navbar-brand

		}//.menu-brand

		// Mobile: il badge "Eventi scientifici" va a capo sotto il logo,
		// mentre logo e hamburger restano allineati sulla stessa riga
		// (stile convegnoscientificoaic.celiachia.it, sfondo resta bianco)
		@media (max-width: 991.98px) {

			.container {
				align-items: flex-start;
			}

			.menu-brand {

				flex-wrap: wrap;

				.logo {

					width: 100%;

					img {

						height: 2.8rem;

					} //.img


				} //.logo

				.navbar-brand.text-primary {
					margin: 0.5rem -0.1rem;
					padding: 0 0.5rem;
					text-align: center;
					font-size: 0.85rem;
					width: auto;
					line-height: 1.75rem;
				}

			}//.menu-brand

		}//@media

		#menu-container {

			nav.desktop {

				// Solo la lista di primo livello va in riga: senza il combinatore
				// diretto ">" questa regola colpirebbe anche la <ul class="dropdown-menu">
				// annidata, rendendola orizzontale invece che verticale.
				> ul {

					list-style: none;
					display: flex;
					align-items: center;
					gap: 2rem;
					margin: 0;
					padding: 0;
					
					.menu-item {
						
						position: relative;
						
						> a {
							
							display: inline-block;
							margin: 0;
							font-weight: 400;
							font-size: 1.05rem;
							color: var(--bs-body-color);
							text-decoration: none;
							background-color: transparent;
							border-bottom: 0.1875rem solid transparent;
							padding: 0;

							&:hover {
								color: var(--bs-primary);
							}

						}//> a

						// Evidenziazione voce attiva, stile convegnoscientificoaic.celiachia.it
						&.current > a {

							color: var(--bs-primary);
							border-bottom-color: var(--bs-primary);

						}//&.current > a

						// Voci con sottomenu: si aprono al click, stesso meccanismo
						// (dropdown Bootstrap) di #evento_nav nelle pagine evento
						&.dropdown {

							.dropdown-toggle {

								&::after {
									margin-left: 0.5rem;
									vertical-align: 0.1em;
								}

							}//.dropdown-toggle

							// Sottomenu, evidenziazione e stile celiachia.it
							// (pannello bianco + trattino grigio sugli item)
							.dropdown-menu {

								padding: 0.75rem 0;
								margin-top: 0.5rem;
								min-width: 14rem;

								li {

									a.dropdown-item {

										padding: 0.4rem 1.5rem;
										font-size: 1rem;
										
										&:hover, &:focus {
											background: transparent;
											margin: 0;
											color: var(--bs-primary);
										}

										&.current {
											color: var(--bs-primary);
											font-weight: 700;
										}

									}//a.dropdown-item

								}//li

							}//.dropdown-menu

						}//&.dropdown

					}//.menu-item

				}//ul

			}//nav.desktop

		}//#menu-container

	}//#menu

	// Mobile nav: hamburger animato a X + pannello a comparsa,
	// stile convegnoscientificoaic.celiachia.it (sfondo bianco anziché grigio).
	// Classi riutilizzabili (non ID) perché lo stesso pattern serve sia al
	// menu principale (nav.twig) sia a #evento_nav (eventi_head.twig), che
	// convivono nella stessa pagina.
	.mobile-toggle {

		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.3125rem;
		cursor: pointer;
		z-index: 1041;

		div {

			width: 1.75rem;
			height: 0.1875rem;
			background-color: var(--bs-dark);
			transition: 0.4s;

		}//div

		&.change {

			.bar1 {
				transform: rotate(-45deg) translate(-0.375rem, 0.375rem);
			}

			.bar2 {
				opacity: 0;
			}

			.bar3 {
				transform: rotate(45deg) translate(-0.375rem, -0.375rem);
			}

		}//&.change

	}//.mobile-toggle

	.mobile-panel {

		position: fixed;
		inset: 0;
		z-index: 1040;
		pointer-events: none;

		.mobile-panel-inner {

			position: fixed;
			top: 0;
			right: 0;
			width: 100%;
			max-width: 26rem;
			height: 100%;
			overflow-y: auto;
			background: var(--bs-white);
			transform: scaleX(0);
			transform-origin: right top;
			transition: transform 0.3s ease;
			pointer-events: auto;

			&.open {
				transform: scaleX(1);
			}

			// Testata: #title nel menu principale, .mobile-panel-title nel
			// pannello del sottomenu evento (nome evento al posto del logo)
			#title,
			.mobile-panel-title {

				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 0.5rem;
				padding: 1.5rem;

				// Stessi stili del logo/badge nell'header (vedi .menu-brand),
				// impilati invece che affiancati
				a.logo img {

					height: 2.2rem;
					width: auto;
					display: block;

				}//a.logo img

				a.eventi {

					display: inline-block;
					border: 0.125rem solid var(--bs-primary);
					padding: 0 1rem;
					font-weight: 500;
					font-size: 1.15rem;
					line-height: 2.2rem;
					text-transform: uppercase;
					text-decoration: none;
					color: var(--bs-primary);

					&:hover {

						background: var(--bs-primary);
						color: var(--bs-white) !important;

					}//&:hover

				}//a.eventi

			}//#title, .mobile-panel-title

			// Testata del pannello evento: titolo a sinistra, X a destra
			// (nel menu principale la X è l'hamburger dell'header stesso)
			.mobile-panel-head {

				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 1.25rem;

			}//.mobile-panel-head

			// Nome dell'evento come intestazione dell'elenco voci (pannello
			// evento): fascia grigia attaccata alle voci, testo nel colore
			// delle voci non correnti così non si confonde con la corrente
			.evento-nome {

				background: var(--bs-grigio-400);
				padding: 0.75rem 1.5rem;
				color: var(--bs-body-color);
				font-weight: 700;
				font-size: 1.1rem;

			}//.evento-nome

			// Elenco voci: primo livello come righe piene (icona freccia +
			// riempimento rosso al tocco), secondo livello come blocco
			// distinto sotto la voce padre (sfondo tenue, righe separate),
			// così il tocco/hover non "inghiotte" più anche i figli
			ul.navbar-nav {

				list-style: none;
				margin: 0;
				padding: 0;

				li.nav-item {

					border-bottom: 0.0625rem solid var(--bs-border-color);

					> a {

						display: block;
						padding: 1rem 1.5rem;
						background-image: url('../images/Button-Arrow-Big-Hover.png');
						background-repeat: no-repeat;
						background-position: right 1.5rem center;
						background-size: 10px;
						color: var(--bs-body-color);
						text-decoration: none;
						font-weight: 500;
						font-size: 1.1rem;

						&:hover {

							background-color: var(--bs-primary);
							background-image: url('../images/Button-Arrow-Big.png');
							color: var(--bs-light);

						}//&:hover

					}//> a

					// Voce della pagina corrente: rossa, ma in hover torna bianca
					// sul rosso (a pari specificità questa regola, che viene dopo,
					// vincerebbe sul colore di &:hover: rosso su rosso)
					&.current > a {
						color: var(--bs-primary);
						font-weight: 700;

						&:hover {
							color: var(--bs-light);
						}
					}

					// Sottomenu (Convegni / Ricerca | calls) in mobile: righe
					// proprie, con sfondo tenue per distinguerle dalla voce
					// padre e un hover indipendente da quello del padre
					.nav-submenu {

						list-style: none;
						margin: 0;
						padding: 0;
						background: var(--bs-light);

						li {

							border-top: 0.0625rem solid var(--bs-border-color);

							a {

								display: block;
								padding: 0.65rem 1.5rem 0.65rem 2.25rem;
								color: var(--bs-body-color);
								text-decoration: none;
								font-size: 1rem;

								&:hover {
									background-color: var(--bs-primary);
									color: var(--bs-white);
									border: 0;
								}

							}//a

							&.current > a {
								color: var(--bs-primary);
								font-weight: 700;

								&:hover {
									color: var(--bs-white);
								}
							}

						}//li

					}//.nav-submenu

				}//li.nav-item

			}//ul.navbar-nav

		}//.mobile-panel-inner

	}//.mobile-panel

	.btn {
		
		background-color: var(--bs-primary);
		border: 0;
		background-image: url('../images/Button-Arrow-Big.png');
		background-repeat: no-repeat;
		background-position: right 8px center;
		padding-right: 30px;
		cursor: hand;
					
		&:hover {
			
			background-color: var(--bs-light);
			color: rgb(var(--bs-primary-rgb));
			background-image: url('../images/Button-Arrow-Big-Hover.png');
			
		} //&:hover
	
	} // .btn
	

	// ===================================
	// BANNER E CAROUSEL
	// ===================================
	
	.carousel-indicators {
	
		[data-bs-target] {
			
			border: 0;
			margin: 0;
			height: 0.5rem;
			width:  4rem;
			
			&:first-child {
				border-radius: 1rem 0 0 1rem;
			}
						
			&:last-child {
				border-radius: 0 1rem 1rem 0;
			}
	
		}
		
	}
	
	.carousel-control-next, 
	.carousel-control-prev {
		width: 4%;
	}
	
	#banner {
		
		margin-bottom: 2rem;
		
		#carousel {
			
			padding: 0;
			overflow: hidden;
			
			.carousel-item {
				background-size: cover;
				background-position: center center;
				height: 65vh;
				min-height: 30rem;
			}
			
			.carousel-inner {
				
				.band {
					
					display: block;
					width: 100%;
					backdrop-filter: contrast(2) blur(4px);
	
					&.dark {
						background-color: rgba(var(--bs-body-color-rgb),0.75);	
						color: rgb(var(--bs-body-bg-rgb));	
					}
	
					&.light {
						background-color: rgba(var(--bs-body-bg-rgb),0.75);	
						color: rgb(var(--bs-body-color-rgb));
					}
	
					&.text_red {
						color: rgb(var(--bs-primary-rgb));
					}
					
					&.text_dark, &.text_light, &.text_red {
						h1, h2, h3, h4, h5, p {
							margin: 1rem;
							display: block;
						}
						
						p {
							font-size: 1rem;
							font-weight: 100;
							
							strong {
								font-weight: 700;
							}
						}
					}
					
					&.bottom-0 {
						&.extra-bottom {
							padding-bottom: 3rem !important;
						}
					}
	
					&.top-0 {
						padding-top: 6rem !important;
					}
					
					h3 {
						p {
							margin: 0;	
						}
					}
					
				}
				
			}
			
		}
		
		// Submenu under banner
		.nav {
			margin-top: 1rem;
			border-bottom: 2px solid var(--bs-gray-300);
			
			.nav-item {
				overflow-x: none;
				.nav-link {
					font-weight: 500;
					padding: 0.75rem 1.5rem;
					border-bottom: 3px solid transparent;
					transition: all 0.3s ease;
					color: var(--gray-700);
					border-radius: 0;

					&:hover,
					&.active {
						border-bottom-color: var(--bs-primary);
						text-decoration: none;
						background-color: transparent;
						color: var(--bs-primary);
						padding: 0.75rem 1.5rem;
						margin: 0;
						border-bottom: 3px solid transparent;
					} // &:hover, &.active
				}// .nav-link
			}// .nav-item
		}// .nav

		// Banner HP: pesi e dimensioni del testo come il banner del sito live
		&.home-banner #carousel .carousel-inner .band {
			h1, h2, h3, h4, h5, p {
				&, strong, b {
					font-weight: 500;
				}
			}

			.titolino {
				font-size: 1.5rem;
				line-height: 1.4;
				margin: 1rem 1rem 0;
			}

			.titolo {
				margin: 0.25rem 1rem;

				h1, h2, h3, h4, h5, p {
					font-size: clamp(2rem, 4.3vw, 3.75rem);
					line-height: 1.1;
					margin: 0;
				}
			}

			.occhiello {
				font-size: 1.8rem;
				line-height: 1.4;
				margin: 0 1rem 0.5rem;
			}

			@media (max-width: 767px) {
				.titolino {
					font-size: 1.05rem;
				}

				.titolo {
					h1, h2, h3, h4, h5, p {
						font-size: 1.75rem;
					}
				}

				.occhiello {
					font-size: 1.25rem;
				}
			}
		}
	}
	
	#footer {

		background-color: var(--bs-body-darker-color);
		color: var(--bs-grigio-600);
		margin-top: 0;

		a {

			text-decoration: none;
			color: var(--bs-grigio-600);
			transition: color 0.2s ease;

			&:hover {
				color: var(--bs-primary);
			}

		}

		.footer-titolo {
			font-size: 1.125rem;
			font-weight: 700;
			margin-bottom: 0.75rem;
		}

		// Icone: cerchio grigio con simbolo bianco (Facebook è già un cerchio)
		.footer-social {
			gap: 1.75rem;
			margin-bottom: 1.25rem;

			a {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 34px;
				height: 34px;
				border-radius: 50%;
				background-color: var(--bs-grigio-600);
				color: var(--bs-white);
				transition: background-color 0.2s ease;

				svg {
					width: 18px;
					height: 18px;
				}

				&:hover {
					background-color: var(--bs-primary);
					color: var(--bs-white);
				}

				&.social-facebook {
					background-color: transparent;
					color: var(--bs-grigio-600);

					svg {
						width: 34px;
						height: 34px;
					}

					&:hover {
						color: var(--bs-primary);
					}
				}
			}
		}//.footer-social

		.footer-link {
			font-size: 1.125rem;
			line-height: 1.2;
			margin-bottom: 0;
		}

		.footer-logo {
			display: block;
			max-width: 100%;
			max-height: 55px;
			width: auto;
			margin-bottom: 1.75rem;
		}

		.footer-testo {
			font-size: 0.875rem;
			line-height: 1.2;

			h1, h2, h3, h4, h5, h6 {
				font-size: 1.125rem;
				font-weight: 700;
				margin-bottom: 0.75rem;
			}

			p:last-child {
				margin-bottom: 0;
			}
		}

	}//#footer
	
}

// Small devices (landscape phones, 576px and up)
@media (max-width:767px) { 
	
	body {


		#banner {

			padding-left: 1em;
			padding-right: 1em;

		}

		
	} //body

} //@media (min-width: 768px)