/*
	(c)2024 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear across the site in different templates.
	All can be removed and started from scratch or elements can be adjusted individually.
*/

.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 horizontal padding to prevent content touching viewport edges. Adjust them in responsive.css for specific breakpoint if needed.
*/
	max-width: var(--container, 1200px);
	margin: 0 auto;
	padding: 0 1rem;
	position: relative;
}
.container-inner {
	max-width: var(--container-inner);
	margin: 0 auto;
}

.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 {
	margin-block: 2rem;
	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: var(--film); /* lighter blue; */
	}
		.section.type-1 a {
			font-weight: 600;
		}
	.section.type-2 {
		--section-bg: var(--financing);
	}
		.section.type-2 a {
			color: #fff;
		}
		.section.type-2 .cke {
			max-width: 800px;
			margin-inline: auto;
		}
	.section.type-3 {
		--section-bg: var(--music);
		color: #fff;
	}



.site-header {
	padding: .5rem 0;
	background-color: var(--primary);
	color: var(--secondary);
}
	.site-header-container {
		display: flex;
		flex-wrap: wrap;
	}



.site-title {
	margin: auto 0;
	/* max-width: 250px; */
}
	.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 {
		width: 100%;
		height: auto;
	}


/* Search Button */
.apply-button {
	display: block;
	margin: auto 0 auto auto;
	padding: .5rem 2rem;
	border-color: #fff;

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

	font-size: 13px;
	font-family: var(--font-primary-bold);
}


/* Search Form */
.search-form {
	display: flex;
	margin: 0;
	margin-left: auto;
	background-color: var(--primary);
	color: #fff;
	border: 1px solid currentcolor;
}
	.search-form .search-input {
		border: none;
		background-color: inherit;
		color: inherit;
	}
	.search-form .search-button {
		border-radius: 0;
		border: none;
		font-size: 0;
		min-width: 2rem;
		width: 2rem;
		height: 2rem;
		padding: .25rem;
		background: url("/img/icon-search.svg") center center no-repeat transparent;
		background-size: auto;
		background-size: 65%;
		opacity: .8;
	}
		.search-form .search-button:hover {
			opacity: 1;
		}


/* Languages toggle */
.languages {
	padding: 0;
	margin: auto 0 auto auto;
	list-style: none;
	display: inline-flex;
	font-size: 100%;

	/* Hide (disable) Languages toggle until French site is ready */
	opacity: 0;
	pointer-events: none;
}
	.languages li {
		margin: 0;
	}
	.languages a {
		text-transform: uppercase;
		text-decoration: none;
		display: block;
		padding: 0 .5rem;

		color: inherit;
	}
	.languages a:hover {
		opacity: .75;
	}







/* ! Announcement Ribbon */
.announcement {
	/* display: none; */
	background: dodgerblue;
	padding: 1rem 0;
	color: #fff;
	font-size: 80%;
	text-align: center;
}
	.announcement * {
		color: inherit;
	}
	.announcement > .container div > * {
		margin-bottom: .25em;
	}
	.announcement > .container div > *:last-child {
		margin-bottom: 0;
	}
	.announcement h2 {
		font-size: 30px;
		margin-bottom: .5rem;
	}
	.announcement a {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
	}
	.announcement a:hover {
		color: #000;
	}


/* 	! SECTIONS	*/
main {

}
	.main-container {
		padding-block: 2rem;
	}


	/* ! 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;
		}



/* ! Newsletter  */
.newsletter-block p {
	font-size: .75rem;
}
.newsletter-form > div > * {
	font-size: 12px;
}
.newsletter-form > div {
	display: flex;
	flex-wrap: wrap;
}
	.newsletter-form > div label {
		width: 100%;
	}



/* ! Social element */
.social {
	display: block;
	list-style: none;
	margin: .25em 0;
	padding: 0;
	line-height: 1;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;

	--icon-size: 2.5rem;
}
	.social > li {
		display: inline-block;
		margin-left: .5rem;
	}
	.social > li:first-of-type {
		margin-left: -.25rem;
	}
	.social > li > a {
		display: inline-block;
		padding: 0;
		margin: 0;
		border: 0px solid transparent;
		border-radius: 100%;
		vertical-align: middle;

		color: inherit;
		transition: opacity: .3s;
	}
	.social > li > a:hover {
		opacity: .75;
	}
	.social .icon {
		width: var(--icon-size);
		height: var(--icon-size);
	}

	.site-header .social {
		--icon-size: 1.5rem;
	}
	.site-footer .social {
		margin: 0 0 0 auto;
	}


/* ! Site Footer  */
.site-footer {
	position: relative;
	clear: both;
	padding: 3rem 0 2rem;
	margin: 0;
	background-color: var(--primary);
	color: var(--secondary);
}
	.site-footer-container {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		--cols: 4;
		--gap: 2rem;
	}

	.footer-col {
		flex-basis: calc( (100% - ((var(--cols) - 1) * var(--gap))) / var(--cols) );
	}

		.footer-address {

		}

	.site-footer a:not(.button) {
		color: inherit;
		transition: .2s all;
	}
	.site-footer a:not(.button):hover {
		opacity: .5;
		text-decoration: none;
	}
	.site-footer h2 {
		font-size: 1rem;
		font-family: var(--font-primary-bold);
		text-transform: uppercase;
	}
	.footer-logo {
		display: block;
		max-width: 80px;
		margin-bottom: 1rem
	}
	.footer-logo img {
		display: block;
		width: 100%;
		height: auto;
		filter: grayscale(100%) brightness(200%);
	}
	.footer-land {
		flex-basis: 48%;
	}
	.footer-logo-gov {
		max-width: 200px;
	}

	.footer-accessibility {

	}
		.footer-accessibility-button {
			padding: .5rem 1rem;
			margin-bottom: auto;
			background-color: #fff200;
			color: #000;
			border: none;
			text-transform: none;
			transition: .3s all;
		}
		.footer-accessibility-button:hover {
			background-color: #000;
		}

	.footer-navigation {
		flex-basis: 48%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.footer-nav {
			display: flex;
			flex-direction: row;
		}

	.copyright {
		width: 100%;
		margin: 0;
		opacity: .5;
		text-align: center;
	}


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



.site-header-container {
	display: grid;
	grid-template-columns: .75fr 1.25fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: .5rem 1rem;
	grid-template-areas:
		"logo logo social lang"
		"search search apply apply"
		"nav nav nav nav";
}
	.site-title  { grid-area: logo; max-width: 250px; }
	.languages { grid-area: lang; margin-inline-start: 0; }
	.social { grid-area: social; align-self: center; }
	.search-form { grid-area: search; margin-block: auto; }
	.apply-button { grid-area: apply; }
	.main-nav { grid-area: nav; }

	.nav-toggle { grid-area: lang; margin-inline-start: auto !important; }

@media (min-width: 800px) {
	.site-header-container {
		grid-template-areas:
			"logo social social lang"
			"logo search search apply"
			"nav nav nav nav";
	}
	.languages { margin-inline-start: auto; }
}
@media (min-width: 1200px) {
	.site-header-container {
		grid-template-areas:
			"logo lang lang lang"
			"logo social search apply"
			"logo nav nav nav";
	}

}