/*
	(c)2024 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear across the site in different templates.
*/

.container {
/*
	Set site maximum width only here and use this class to centre and contain the content in browser window.
	Use "max-width" instead of "width" for auto-responsiveness.
	Keep inline padding to prevent content touching viewport edges. Adjust them in responsive.css for specific breakpoint if needed.
*/
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
	position: relative;
}
	.full-width {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
	.full-bleed {
		/* 	alternative to .full-width
		- https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/ */
		width: 100vw;
		margin-left: 50%;
		transform: translateX(-50%);
	}


.section {
	padding: 2rem 0;
	background-color: var(--section-bg, #fff);
	box-shadow: -50vw 0 0 0 var(--section-bg),
				-25vw 0 0 0 var(--section-bg),
				 25vw 0 0 0 var(--section-bg),
				 50vw 0 0 0 var(--section-bg);
}
	.section.type-1 {
		--section-bg: #d9e6f4; /* lighter blue; */
	}
		.section.type-1 a {
			font-weight: 600;
		}
	.section.type-2 {
		--section-bg: var(--beige);
	}
	.section.type-3 {
		--section-bg: #e8f8ff;
	}
	.section.type-4 {
		--section-bg: var(--primary);
		color: #fff;
	}
		.section.type-4 a {
			color: inherit;
		}
		.section.type-4 a:hover {
			color: #e45c11;
		}
		.section.type-4 h2 {
			color: inherit;
		}
	.section.type-5 {
		--section-bg: var(--blue-sky);
	}


/* Layout Helpers */
.align-center {
	text-align: center;
}
.no-padding {
	padding: 0;
}



.site-header {
	padding: 1rem 0;
	background-color: var(--blue-navy);
	color: #fff;
	position: relative;
	z-index: 10;
}
	.site-header-container {
		display: flex;
		/* flex-wrap: wrap; */
		column-gap: 1rem;
		row-gap: 1rem;
	}

	/*
		Position .site-header over .featured-banners when they are on page and are first of type inside .primary,
		but not if there is .livestream section, as it should replace the .featured-banners
	 */
	body:has(:not(.livestream-block) + main .primary > .featured-banners:first-of-type) .site-header {
		background: transparent;
		padding: 0;
	}
	body:has(:not(.livestream-block) + main .primary > .featured-banners:first-of-type) .site-header-container {
		position: absolute;
		inset-inline: 0;
	}
	/* do not show Featured Banners if livestream in on page */
	.livestream-block + main .featured-banners {
		display: none;
	}

/* Livestream */
.livestream-block {
	margin-bottom: 2em;
	/* background-color: var(--blue-navy); */
}
	.livestream-block iframe {
		display: block;
		width: 100%;
		height: auto;
		/* margin: min(7.5vw, 7rem) auto 2rem; */
		margin: 0 auto 2rem;

		aspect-ratio: 640 / 360;
	}


.site-title {
	flex-shrink: 1;
	margin: 1rem auto 1rem 0;
	min-width: 60px;
	max-width: 200px;
	width: 10vw;
}
	.site-title > a {
		display: block;
		text-decoration: none;
		color: inherit;
		font-weight: 800;
		font-size: 30px;
		line-height: 1;
		transition: all .2s;
	}
	.site-title:hover > a {
		opacity: .8;
	}
	.site-title-img {
		display: block;
		max-width: 100%;
		height: auto;
	}


/* ! Search Form */
.search-form {
	display: inline-flex;
	margin: auto 0 auto auto;
	width: 14vw;
}
	.search-form .search-input {
		flex-grow: 1;
		padding: .75rem;
		border-radius: 0;
		border-start-start-radius: var(--border-radius);
		border-end-start-radius: var(--border-radius);
		border-inline-end: 0;

		font-weight: 600;
		font-size: clamp(12px, .25rem + .75vw, 16px);
		letter-spacing: .05em;
	}
	.search-form .search-button {
		border-radius: 0;
		border-start-end-radius: var(--border-radius);
		border-end-end-radius: var(--border-radius);
		font-size: 0;
		min-width: 3rem;
		width: auto;
		padding: .5rem;
		background-color: var(--orange-dark);
		background-image: url("/img/icon-search.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto;
		background-size: 50%;
	}

/* ! Announcement Ribbon/Bar */
.announcement {
	display: block;
	background: var(--orange-dark);
	background: color-mix(in oklch, var(--orange-dark) 90%, black); /* darken 10% to pass WCAG AA level */
	padding: .5rem 0 .6rem;
	color: #fff;
	font-size: 100%;
	font-family: var(--font-secondary);
	text-align: center;
	letter-spacing: .1em;
}
	.announcement * {
		color: inherit;
	}
	.announcement > .container div > * {
		margin-bottom: .25em;
	}
	.announcement > .container div > *:last-child {
		margin-bottom: 0;
	}
	.announcement h2 {
		font-size: 24px;
		margin-top: 0;
		margin-bottom: .5rem;
	}
	.announcement a {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
	}
	.announcement a:hover {
		color: #000;
	}


/* 	! Regions */
main {
	display: flex;
	flex-direction: column;
}
	.main-container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		flex-grow: 1;
		min-height: 100%;
	}
/* 	.t-single .main-container {
		flex-direction: column;
	} */
		.sidebar {
			width: 25%;
			max-width: 300px;
			padding: 2rem 2rem 2rem 0;
			margin-bottom: auto;
			border-inline-end: 2px solid var(--orange-regular);
			border-image:
			linear-gradient(
			  to bottom,
			  var(--orange-regular),
			  rgba(0, 0, 0, 0)
			) 1 100%;
		}
		.primary {
			width: 75%;
			padding: 2rem var(--main-columns-gap) 0;

			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

		.p-home .sidebar {
			display: none;
		}
		.p-home .primary {
			width: 100%;
		}
		.s-main.p-home .primary {
			padding: 0;
		}



		.t-single .primary {
			max-width: 1000px;
			margin-inline: auto;
		}


	/* ! Regions for Layout Module */
	.region-row {
		display: flex;
	}
		.region-cell {
			width: 100%;
			padding: 2rem 5%;
		}
		.region-cell:first-child {
			padding-left: 0;
		}
		.region-cell:last-child {
			padding-right: 0;
		}



/* ! Social element */
.social-block {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin-top: auto;
	letter-spacing: .05em;
}
	@media (min-width: 800px) {
		/* Compensate for sidebar when .social-block is inside .primary column and isn't centred relative to .main-container */
		.s-main:not(.p-home) .sidebar + .primary .social-block {
			transform: translateX(-12.5vw);
		}
	}

	.social-block > h2 {
		margin: 0;
		line-height: normal;
		text-transform: uppercase;
		letter-spacing: inherit;
	}
	.social {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			column-gap: 1.5rem;

			list-style: none;
			margin: .25em 2rem;
			padding: 0;
			text-align: center;
	}
			.social > li {
				line-height: unset;
			}
			.social > li > a {
				display: block;
				padding: .25rem;
				margin: 0;
				border-radius: .25rem;
				vertical-align: middle;
				color: inherit;

				background-color: var(--primary);
				color: #fff;

				transition: transform .1s;
			}
			.social > li > a:hover {
				background-color: var(--orange-dark);
			}
			.social > li > a:focus {
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 1rem rgba(102,175,233,.75);
		background-color: var(--blue-bright);
			}
			.social .icon {
				display: block;
				width: 2rem;
				height: 2rem;
			}
		.social-block::after {
			content: "Connect";
			display: block;
			font-family: var(--font-secondary);
			font-size: 2rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: inherit;
		}

/* ! Site Footer  */
.site-footer {
	position: relative;
	clear: both;
	padding: 2rem 0 1rem;
	margin: 0;
	background-color: var(--blue-navy);
	color: #fff;

	font-size: 18px;
}
	.site-footer-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 1rem;
	}
	.site-footer a {
		color: inherit;
	}
	.site-footer a:hover {
		color: var(--orange-dark);
	}
	.copyright {
		width: 100%;
		margin-block: 1rem;
		text-align: left;
		font-size: 11px;
		font-weight: normal;
		opacity: .75;
	}
	.footer-contact {
		margin-left: 2rem;
		margin-right: auto;
	}
	.footer-nav {
		max-width: 66%;
		font-weight: 600;
	}
	.footer-nav > .nav-list {
		columns: 2 300px;
	}
	.footer-nav .nav-link {
		display: inline-block;
		padding-inline: 0;
	}

/* ! Error Pages */
.error-header {
	font-size: 50px;
}
.error-code {
	font-size: 12px;
}