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

body {
	
	.darker {

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

	}//.darker

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

	#menu {

		&.fullwidth {

			background: transparent;
			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

		#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;
							padding: 0.35rem 0;
							font-weight: 400;
							font-size: 1.05rem;
							color: var(--bs-body-color);
							text-decoration: none;
							border-bottom: 0.1875rem solid transparent;

							&: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;
											color: var(--bs-dark);
										}

										&.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 (collapse)
	#navbarNav {

		background: linear-gradient(0deg, rgba(var(--bs-body-bg-rgb), .91) 0%,  rgba(var(--bs-body-bg-rgb), .91) 66%, rgba(199, 199, 199, 0.91) 100%);

		ul {

			&.navbar-nav {

				li {

					&.nav-item {

						background-image: url('../images/Button-Arrow-Big-Hover.png');
						background-repeat: no-repeat;
						background-position: left 15px center;
						background-size: 10px;
						padding-left: 34px;

						.fw-medium {
							font-weight: 700;
							color: var(--bs-primary);
						}

						&:hover {

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

						} //&:hover

						// Sottomenu (Convegni / Ricerca | calls) in mobile
						.nav-submenu {

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

							li {

								a {

									display: block;
									padding: 0.3rem 0;
									color: var(--bs-body-color);
									text-decoration: none;
									font-size: 1rem;

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

								}//a

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

							}//li

						}//.nav-submenu

					}//.nav-item

				} //li

			}//.navbar-nav

		}//ul

	}//#navbarNav

	.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 {
				.nav-link {
					color: var(--bs-gray-700);
					font-weight: 500;
					padding: 0.75rem 1.5rem;
					border-bottom: 3px solid transparent;
					transition: all 0.3s ease;
					
					&:hover,
					&.active {
						color: var(--bs-primary);
						border-bottom-color: var(--bs-primary);
					}
				}
			}
		}
	} 
	
	#footer {
		
		background-color: var(--bs-gray-500);
		margin-top: 0;
		
		a {
			
			text-decoration: none;
			color: var(--bs-primary);
			
		}
		
	}//#footer
	
}