@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);

					&:last-child {
	
						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); 
						}
						
					}

				}//.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;

					.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;
							}
						}
					}
				}

			}//&#evento_nav

		}
	} //#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;
			}

		} //#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);

		}
		
		.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

			} //.spalla-elemento

			

		}

	}
	
} //body

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

		
	} //body

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