@import (reference) "variables.less";


body {

	#banner {

		&.darker {

			margin-bottom: 0;

			// #banner ha anche le classi "container darker" (vedi eventi_head.twig)
			// quindi erediterebbe il padding-top pensato per il box di testo
			// sottostante (vedi .container.darker più sotto). L'ID #banner ha
			// specificità più alta e vince sempre, indipendentemente dall'ordine.
			padding-top: 0;

		}
		
		#carousel {

			.carousel-item {

				min-height: 20rem;
				height: 35vh;
				max-height: 40rem;

			}//.carousel-item

		}//#carousel


		.nav {

			&#evento_nav {

				border: 0;
				padding: 0;
				bottom: -3rem;

				.nav-item {
					
					margin: 0;
					color: var(--bs-tertiary-color);
					font-size: 1.25rem;
					font-weight: 700;
					border-right: 2px solid var(--bs-tertiary-color);

					// Non basarsi su :last-child: nel markup convivono le pillole
					// desktop e quella mobile (nascoste via classi d-lg-*, non
					// rimosse dal DOM), quindi l'ultima pillola "vera" è sempre
					// quella con l'angolo arrotondato a destra.
					&.rounded-end-3 {

						border-right: 0;

					}

					.nav-link {

						border: 0;
						min-width: 3rem;

					}//.nav-link

					&.active, &.current {

						background-color: var(--bs-primary);

						a {

							font-weight: 700;
							color: var(--bs-white);
						}

					}

					// Mobile: tra tutte le pillole (una per sezione) resta visibile
					// solo quella della sezione corrente, le altre sono raggiungibili
					// dal pannello aperto dall'hamburger (vedi .mobile-pill in
					// eventi_head.twig)
					&.mobile-pill {

						display: none;

						&.current {
							display: block;
						}

					}//&.mobile-pill

				}//.nav-item

				// Rimuove la freccia caret nativa di Bootstrap
				.nav-hamburger-toggle::after {
					display: none;
				}

				// Bottone hamburger → X
				.nav-hamburger-toggle {
					width: 2rem;
					height: 3.3rem;
					display: flex !important;
					align-items: center;
					justify-content: center;
					padding: 0.25rem 0 0.25rem 0.75rem;

					// Variante mobile: riusa solo le dimensioni/centratura del
					// pulsante, non il padding asimmetrico (pensato per l'icona
					// con pseudo-elementi) né lo stato ".show" gestito da Bootstrap,
					// perché qui le 3 barre sono i div di .mobile-toggle animati
					// via classe .change (JS custom, vedi scripts.js)
					&.mobile-toggle {
						padding: 0;

						// A pannello aperto si chiude dalla X nella sua testata:
						// questo, che sta nella pagina, finirebbe sopra le voci
						&.change {
							visibility: hidden;
						}
					}

					.nav-toggler-icon {
						position: relative;
						display: block;
						width: 25px;
						height: 4px;
						background-color: currentColor;
						border-radius: 4px;
						transition: background-color 0.15s ease;

						&::before,
						&::after {
							content: '';
							position: absolute;
							left: 0;
							width: 25px;
							height: 4px;
							background-color: currentColor;
							border-radius: 4px;
							transition: top 0.15s 0.15s ease, transform 0.15s ease;
						}

						&::before { top: -6px; }
						&::after  { top:  6px; }
					}

					// Stato aperto: le tre barre diventano una X
					&.show {
						.nav-toggler-icon {
							background-color: transparent;

							&::before {
								top: 0;
								transform: rotate(45deg);
								transition: top 0.15s ease, transform 0.15s 0.15s ease;
							}

							&::after {
								top: 0;
								transform: rotate(-45deg);
								transition: top 0.15s ease, transform 0.15s 0.15s ease;
							}
						}
					}
				}

				// Dropdown "Altro" (Crediti ECM, Video, Download, ...): stesso
				// rosso in hover del menu principale.
				.dropdown-menu {

					.dropdown-item {

						&:hover, &:focus {
							background: transparent;
							margin: 0;
							color: var(--bs-primary);
							padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
						}

					}//.dropdown-item

				}//.dropdown-menu

			}//&#evento_nav

		}

		// Desktop: con i testi allineati in basso (.bottom-0) la pillola di
		// #evento_nav, a cavallo del bordo del banner, copriva l'ultima riga.
		// Su mobile lo spazio c'è già (padding-bottom della .band qui sotto).
		@media (min-width: 992px) {

			#carousel .carousel-inner .band.bottom-0 {

				padding-bottom: 3rem;

			}

		}

		// Mobile: il box testo (.band) va a piena larghezza (vedi col-12 col-lg-5
		// in eventi_head.twig), ma il carosello resta comunque troppo basso per
		// contenere titolo/occhiello/sottotitolo — essendo .band position-absolute
		// non "spinge" l'altezza del carousel-item, quindi va allargata a mano,
		// e i testi (dimensioni Bootstrap di default) vanno ridotti. Il blocco
		// sta dopo ".nav#evento_nav .nav-item" qui sopra (stessa specificità:
		// vince chi viene dichiarato per ultimo, non basta il media query).
		@media (max-width: 991.98px) {

			#carousel .carousel-item {

				height: auto;
				min-height: 28rem;
				max-height: none;

			}//.carousel-item

			.carousel-inner .band {

				// Spazio in più in fondo al testo, altrimenti il bottone
				// (es. "Iscrizione") finisce sotto la pillola di #evento_nav
				// che galleggia a cavallo del bordo inferiore del banner.
				padding-bottom: 3.5rem;

				h1, h3, h4, h5 {
					font-size: 1.5rem;
				}

				h2 {
					font-size: 1.1rem;
				}

				h1, h2, h3, h4, h5, p {
					margin: 0.5rem;
				}

				p {
					font-size: 0.85rem;
				}

			}//.band

			// Pillola unica visibile (sezione corrente): testo più piccolo,
			// altrimenti occupa troppo spazio e si sovrappone al contenuto
			.nav#evento_nav .nav-item {
				font-size: 0.95rem;
			}

		}//@media

	} //#banner

	// :not(#banner) perché #banner ha anche le classi "container darker" (vedi
	// eventi_head.twig) e finirebbe per ereditare questo padding-top, staccandolo
	// dal menu invece di farlo partire subito sotto.
	.container.darker:not(#banner) {

		padding-top: 4rem;

		.evento-content {
		
			background: var(--bs-body-bg);
			padding: 2rem 2rem 1rem 2rem;
			margin-bottom: 1em;

			// Section title
			h2 {
				color: var(--bs-primary);
				font-size: 2rem;
				font-weight: 700;
				text-align: center;
				margin-bottom: 2.5rem;
			}

			// Link alla pagina genitore sopra il titolo (pagine di terzo livello).
			// Annulla il riquadro rosso in hover dei link nei testi, che su
			// pagina_di_testo prenderebbe anche questo (.text_editor-content).
			.pagina-back {
				display: inline-flex;
				align-items: center;
				gap: 0.5rem;
				color: var(--bs-grigio-600);
				font-size: 1rem;
				text-decoration: none;
				margin-bottom: 1rem;
				transition: color 0.2s ease;

				svg {
					width: 1.1em;
					height: 1.1em;
					flex-shrink: 0;
				}

				&:hover {
					color: var(--bs-primary);
					background-color: transparent;
					text-decoration: none;
					padding: 0;
					margin: 0 0 1rem 0;
				}
			}

		} //#evento-content

	}//.container.darker




	// ===================================
	// SIDEBAR ORGANIZZAZIONE
	// ===================================
	
	#spalla {
		
		h3 {
			color: var(--bs-primary);
			font-size: 0.75rem;
			font-weight: 700;
			margin-bottom: 1.5rem;
		}

		p {

			font-size: 0.9rem;
			margin-bottom: 0.2rem; 

		}

		a {

			text-decoration: none;
			color: var(--bs-primary);
			overflow-wrap: anywhere;

			// L'ID #spalla ha specificita' maggiore della regola di hover dei
			// link nei testi (".spalla-elemento-testo a:hover", main.less), quindi
			// senza questo override il colore resterebbe rosso sul riquadro rosso.
			&:hover {
				color: var(--bs-white);
			}

		}
		
		.spalla-box, .badge {

			border-radius: 0.75rem;
			padding: 1.5rem;
			margin-bottom: 1.5rem;

		}

		.badge {

			width: 100%;
			background-size: cover;
			background-position: center;
			min-height: 30rem;
			
			.label {

				background-color: rgba(var(--bs-body-color-rgb), 0.75);				
				color: rgb(var(--bs-body-bg-rgb));	
				border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
				backdrop-filter: contrast(2) blur(4px);
				font-size: 1rem;
				padding: 0.5rem 1rem;
				margin: -1.5rem -1.5rem 1rem -1.5rem;
				border: none;
			}
			
			
			.band {

				width: 100%;
				background-color: rgba(var(--bs-body-color-rgb), 0.75);	
				left: 0;
				padding: 0.5rem 1rem;
				border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
				backdrop-filter: contrast(2) blur(4px);

				.spalla-elemento-titolo, .spalla-elemento-testo {
	
					text-align: left;
					font-weight: 500;
					
					a {

						text-decoration: none;
						line-height: 1.75rem;
						background-color: var(--bs-primary);
						background-position: right 8px center;
						color: var(--bs-light);
						background-image: url('../images/Button-Arrow-Big.png');
						background-repeat: no-repeat;
						background-position: right 9px center;
						background-size: 0.5rem;
						padding: 0.2rem 1.5rem 0.2rem 0.5rem;
						cursor: hand;
						border-radius: 0.3rem;
									
						&:hover {
							
							background-color: var(--bs-light);
							color: rgb(var(--bs-primary-rgb));
							background-image: url('../images/Button-Arrow-Big-Hover.png');
							
						} //&:hover

					}
	
				}

			}

		}

		.spalla-box {
			
			background-color: #ffffff;

			.label {

				color: var(--bs-white);
				background-color: var(--bs-primary);
				font-weight: 700;
				font-size: 1rem;
				padding: 0.5rem 1rem 0.5rem 1rem;
				margin: -1.5rem -1.5rem 1rem -1.5rem;
				border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
				border: none;

			}

			.spalla-elemento {

				margin-bottom: 1em;
				padding-bottom: 1em;
				border-bottom: 1px dashed var(--bs-body-color);

				&:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border-bottom: none;
				}

				.spalla-elemento-titolo {

					color: var(--bs-primary);
					margin-bottom: 0.75em;

				}//.spalla-elemento-titolo

				// Loghi (Ente promotore, Patrocinio...) caricati alla loro
				// dimensione originale: stanno nella larghezza della colonna e
				// in un'altezza massima, così quelli quadrati non diventano enormi
				.spalla-logo,
				.spalla-elemento-testo img {

					display: block;
					max-width: 100%;
					max-height: 5rem;
					width: auto;
					height: auto;
					margin-bottom: 0.75em;

				}//.spalla-logo

			} //.spalla-elemento

			

		}

	}
	
} //body

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

		
	} //body

} //@media (min-width: 768px)
// Spalla "sticky" da desktop (affiancata al contenuto; su mobile è in colonna
// e scorre normalmente). --spalla-top è calcolato in scripts.js:
// 1rem se la spalla è più corta della finestra (resta ferma in alto), negativo
// se è più lunga (scorre finché se ne vede il fondo, poi si ferma a 1rem dal basso).
// align-self evita che la colonna venga stirata all'altezza della riga,
// cosa che renderebbe lo sticky inefficace.
@media (min-width: 992px) {

	body #spalla {
		position: sticky;
		top: var(--spalla-top, 1rem);
		align-self: flex-start;
	}

	// Colonna del contenuto: stesso comportamento quando è più corta della
	// spalla. La classe e --contenuto-top sono messe da scripts.js solo se le
	// due colonne sono affiancate.
	body .contenuto-sticky {
		position: sticky;
		top: var(--contenuto-top, 1rem);
		align-self: flex-start;
	}

}

// Pannello mobile del sottomenu evento sopra l'hamburger del menu principale
// (.mobile-toggle, z-index 1041), che in cima alla pagina cadrebbe proprio
// sulla X della testata del pannello e ne intercetterebbe il tocco.
body #banner .mobile-panel {
	z-index: 1042;
}