/* ! Banners: defaults */
.banners {
	margin-bottom: 2em;
}
	.banner {
		position: relative;
		display: block !important;
	}
		.banner-link {
			display: block;
		}
			.banner-img {
				display: block;
				width: 100%;
				height: auto;
			}
			.banner-container {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: 1em;
				padding: 5%;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			.upperleft    .banner-container { align-items: flex-start; justify-content: flex-start; }
			.uppercentre  .banner-container { align-items: flex-start; justify-content: center;     text-align: center; }
			.upperright   .banner-container { align-items: flex-start; justify-content: flex-end;   }
			.middleleft   .banner-container { align-items: center;     justify-content: flex-start; }
			.middlecentre .banner-container { align-items: center;     justify-content: center;     text-align: center; }
			.middleright  .banner-container { align-items: center;     justify-content: flex-end;   }
			.lowerleft    .banner-container { align-items: flex-end;   justify-content: flex-start; }
			.lowercentre  .banner-container { align-items: flex-end;   justify-content: center;     text-align: center; }
			.lowerright   .banner-container { align-items: flex-end;   justify-content: flex-end;   }

			.banner-text {
				display: block;
				width: 100%;
				margin: 0;
				max-width: 800px;
				color: #fff;

				text-align: left;
				text-transform: none;
				transition: color .2s;
			}
			.theme-navy .banner-text {
				color: var(--blue-navy);
			}
			.theme-accent .banner-text {
				color:  var(--blue-bright);
			}
			.theme-black .banner-text {
				color: #000;
				background-color: #fff;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 50px;
					font-size: calc(1.5em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 30px;
					font-size: calc(1em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-desc {

				}

				/* optional Animations */
				.slick-slide:not(.slick-current) .banner-text {
					opacity: 0.2;
					transform: translateY(2rem);
				}
				.slick-slide.slick-current .banner-text {
					transition: transform 1s ease-out .3s, opacity 1s ease-out .3s;
					opacity: 1;
					transform: translateY(0);
				}

	/* ! Banners: Featured - slider */
	.featured-banners {
		min-height: 100px;
		background-color: var(--blue-navy);
	}
		.featured-banners .banner-container {
			padding-top: max(80px, 10vw); /* for .site-header spacing */
		}
		.featured-banners .banner-img {
			object-fit: cover;
			min-height: 350px;
			max-height: 700px;
			/* this sets vertical boundaries to Featured Banners
			 and prevents them from shrinking or growing beyond set height values
			 when viewport is either too short (mobile) or unknowingly large (wide monitors) */
		}
		.featured-banners .banner-title {
			margin-bottom: 1rem;
			font-weight: 800;
			font-size: clamp(2rem, .75rem + 5vw, 5rem);
		}
		.featured-banners .banner-subtitle {
			margin-bottom: .5rem;
			font-size: clamp(1rem, .5rem + 1vw, 3rem);
			text-wrap: balance;
		}
		.featured-banners .banner-link,
		.featured-banners .banner-desc a:not(.button) {
			display: inline-block;
			padding: .5rem 0;
			font-style: italic;
			color: var(--blue-light);
		}
		.featured-banners .banner-link:hover,
		.featured-banners .banner-desc a:not(.button):hover  {
			color: var(--orange-regular);
		}

		@media (width < 1200px) {
			.featured-banners {
				margin-bottom: 4rem;
			}
			.featured-banners .banner-container {
				padding-bottom: 4rem; /* should exceed the height of .search-form */
			}
			.featured-banners .slick-arrow,
			.featured-banners .slick-autoplay-toggle-button {
				top: calc(100% + 1.75rem);
				background-color: rgba(0,0,0,0.02);
				color: var(--primary);
				width: 1.5rem;
			}
				.featured-banners .slick-prev {
					left: auto;
					right: 3.75rem;
				}
				.featured-banners .slick-next {
					right: 1.25rem;
				}
				.featured-banners .slick-prev-icon,
				.featured-banners .slick-next-icon {
					opacity: .75;
				}
			.featured-banners .slick-dots {
				bottom: -2.25rem;
			}
				.featured-banners .slick-dots > li > button {
					border-color: var(--primary);
					/* width: .75rem; */
					width: 1.5rem;
					scale: -0.5;
				}
				.featured-banners .slick-dots > li.slick-active button .slick-dot-icon {
					background-color: var(--primary);
					opacity: .75;
				}
			.featured-banners .slick-autoplay-toggle-button {
				top: auto;
				bottom: -2.25rem;
				left: 1.25rem;
			}

		}

	/* Hide briefly on page load to prevent flash of content while banner images are loading */
	@keyframes hideBriefly {
	  0%, 100% { opacity: 0; }
	}
	.featured-banners > * { animation: hideBriefly .5s; }



	/* ! Banners: Field - slider */
	.field-banners {

	}
		.field-banners .banner-img {
			object-fit: cover;
			min-height: 200px;
			max-height: 600px;
			/* this sets vertical boundaries to Featured Banners
			 and prevents them from shrinking or growing beyond set height values
			 when viewport is either too short (mobile) or unknowingly large (wide monitors) */
		}
		.field-banners .banner-title {
			color: var(--orange-dark);
		}


	/* ! Partners (based on flex) */
	.partner-banners {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		margin: 0;
		padding-block: 2rem 3rem;
	}
		.partner-banners::before {
			content: 'Affilliates of MNS';
			display: block;
			width: 100%;
			text-align: center;
			text-transform: uppercase;
			font-family: var(--font-secondary);
			font-size: 2rem;
			font-weight: 700;
			letter-spacing: .05em;
			color: var(--blue-navy);
		}
		.partner-banners .banner {
			display: flex;
			align-items: center;
			align-content: center;
		}
		.partner-banners .banner-container {
			position: relative;
			max-width: 210px;
		}
		.partner-banners .banner-link {
			display: flex;
			align-items: center;
		}
		.partner-banners .banner-link:focus {
			outline-style: solid;
			outline-offset: 5px;
		}
		.partner-banners .banner-text {
			color: var(--blue-navy);

		}
			.partner-banners .banner-title {
				color: inherit;
				font-size: 14px;
				/* font-size: calc(.5rem + .5vw); */
				margin-top: 0;
				margin-bottom: 0;
				text-transform: none;
			}
			.partner-banners .banner-subtitle {
				color: inherit;
				font-size: 12px;
				/* font-size: calc(.5rem + .2vw); */
				margin-top: 0;
				margin-bottom: 0;
				text-transform: none;
			}

		.partner-banners .banner-img {
			max-height: 80px;
			max-width: 80px;
			height: auto;
			transition: transform .3s;
		}
		.partner-banners .banner-link:hover .banner-img {
			transform: scale(1.1);
		}



	/* ! Quicklinks (based on ) */
	.quicklink-banners {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 2rem;
		align-items: stretch;

		--ql-gap: 2rem;
		--min-height: 0;
		gap: var(--ql-gap);
	}
		.quicklink-banners .banner-container {
			padding: 5% 10%;
		}
		.quicklink-banners .quicklink {
			border: 1px solid var(--primary);
		}
		.quicklink-banners .banner-text {
			max-width: 240px;
		}
		.quicklink-banners .quicklink {
			padding: 0;
		}

			.quicklink {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 0 0 0;
				padding: 0;

				min-height: var(--min-height);
				aspect-ratio: 2/1;

				border-radius: var(--border-radius);

				background-size: cover;
				background-color: var(--primary);
				background-position: center;
				color: #fff;

				text-align: center;

				transition: .2s transform ease-in-out;
			}
				.quicklink .banner-link {
					flex-grow: 1;
					justify-content: inherit;
					align-items: inherit;

					display: flex;
					flex-direction: column;

					height: 100%;
					padding: 1rem 2rem;
					color: inherit;

					transition: .2s transform ease-in-out;

					cursor: pointer;
				}
				.quicklink .banner-link:focus {
					box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1rem rgba(102,175,233,.75);
				}
				.quicklink:has( > .banner-link):hover {
					transform: scale(105%);
				}
				.quicklink:has( > .banner-link):hover .banner-text {
					opacity: 1;
				}
				.quicklink h3 {
					margin: 0;
					font-size: 2rem;
					font-size: clamp(1rem, .75rem + 2vw, 2rem);
					line-height: 1.1;
				}
				.quicklink h4 {
					margin: .25rem 0;
					font-size: 1.25rem;
					font-size: clamp(.5rem, .75rem + 1vw, 1.25rem);
					font-weight: 100;
					line-height: 1.2;
				}
				@media (width <= 694px) {
					.quicklink-banners {
						grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
						grid-gap: 1rem;
					}
					.quicklink h3 {
						/* font-size: clamp(1rem, .75rem + 4vw, 4rem); */
						font-size: clamp(1rem, .75rem + 1vw, 2rem);
					}
					.quicklink h4 {
						/* 	font-size: clamp(1rem, .75rem + 3vw, 3.5rem); */
						font-size: clamp(.5rem, .75rem + .5vw, 1.25rem);
					}
				}
				@media (width < 500px) {

				}



		.quicklink-banners .quicklink-extra {
			border: none;
			background: none;
		}

		.quicklink-banners .quicklink-thin {
			aspect-ratio: auto;
			aspect-ratio: 4.45/1;
		}
		.quicklink-banners .quicklink-thin + .quicklink-thin {
			margin-top: 1rem;
		}

	/* ! Advert Banners for in-content announcements */
	.advert-banners {
		margin-block: 2rem;
		min-height: 100px;
		background-image: linear-gradient(to righ, skyblue, white);
		border: .5rem solid var(--blue-bright);
		border-radius: var(--border-radius);
	}
		.advert-banners .banner-container {
			padding: 5%;
		}
		.advert-banners .banner-text {
			color: var(--blue-dark);
			max-width: 600px;
		}
		.advert-banners .banner-title {
			font-size: clamp(1rem, 1rem + 2.5vw, 4rem);
		}
		.advert-banners .banner-subtitle {
			margin-block: 1rem;
			text-transform: uppercase;
			font-size: clamp(1rem, .5rem + 2vw, 2rem);
			font-weight: 900;
			color: var(--blue-bright);
		}
		.advert-banners .banner-desc * {
			font-size: 20px;
		}
		@media (width < 600px) {
			.advert-banners .banner-subtitle {
				margin-block: .5rem;
			}
			.advert-banners .banner-desc * {
				font-size: 1rem;
			}
		}