/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Theme Name:		Centre for Music Therapy and Wellness - Victoria 
					Conservatory of Music landing page CSS
Theme URI:		https://vcm.bc.ca/
Description:	Theme CSS for Centre for Music Therapy and Wellness site
Author:			Trapeze.ca

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


:root {
	interpolate-size: allow-keywords;

	--ui_body_min_height: 100vh;
	--ui_max_width: 1368px;
	--ui_header_height: 116px;
	--ui_gutter_width: 2rem;
	--border_width: 1px;

	--colour_white: #ffffff;
	--colour_white_rgb: 255, 255, 255;

	--colour_blue_navy: #085978;
	--colour_blue_navy_rgb: 8, 89, 120;
	--colour_blue_theme: #447f99;
	--colour_blue_theme_rgb: 68, 127, 153;
	--colour_blue_pale: #dfeaeb;
	--colour_blue_pale_rgb: 223, 234, 235;

	--colour_overlay_grey: #393b41;
	--colour_overlay_grey_rgb: 57, 59, 65;
	/* --colour_overlay_grey_alt: #3b5f74;
	--colour_overlay_grey_alt_rgb: 59, 95, 116; */
	--colour_overlay_grey_alt: #386277;
	--colour_overlay_grey_alt_rgb: 56, 98, 119;
	--colour_overlay_blue: #2f6981;
	--colour_overlay_blue_rgb: 47, 104, 129;

	--colour_copy: #ffffff;

	/* --font_size_h1: 3.25rem; *//* 52px */
	--font_size_h1: 2.875rem; /* 52px */
	--font_weight_h1: 400;
	--font_size_body: 1.0625rem; /* 17px */
	--font_weight_body: 400;
	--font_stack_headings: "Lora Regular", sans-serif !important;
	--font_stack_headings_weight: 400 !important;
	--font_stack_body: "Karla Regular", sans-serif !important;
	--font_stack_body_weight: 400 !important;

	--text_underline_width: 1px;
	--text_underline_offset: 3px;
}
@media screen and (max-width: 568px) and (orientation: portrait) {
	:root {
		--ui_body_min_height: 100svh;
		--font_size_h1: 1.75rem;
		--font_size_body: 1.25rem;
	}
}

/* Fonts */
@font-face {
	font-family: "Lora Regular";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/assets/fonts/Lora/Lora_400.woff2) format("woff2"), 
		url(/assets/fonts/Lora/Lora_400.woff) format("woff");
}
@font-face {
	font-family: "Karla Regular";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/assets/fonts/Karla/Karla_400.woff2) format("woff2"), 
		url(/assets/fonts/Karla/Karla_400.woff) format("woff");
}

/* HTML tags */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}

html {
	scrollbar-color: var(--colour_blue_navy) var(--colour_blue_theme);
	scrollbar-width: thin;
}

body {
	--_bg_posn_01: 100% 0%;
	--_bg_size_01: 85%;

	--_bg_posn_02: -20% 130%;
	--_bg_size_02: 80%;

	--_bg_posn_03: 120% 120%;
	--_bg_size_03: 85%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* align-items: center; */

	height: auto;
	min-height: var(--ui_body_min_height);
	scrollbar-gutter: stable;

	margin: 0;
	padding: 0;

	font-family: var(--font_stack_body);
	font-size: var(--font_size_body);
	font-weight: var(--font_weight_body);
	font-style: normal;
	font-optical-sizing: auto;

	background-color: var(--colour_overlay_grey_alt);
	background-repeat: no-repeat;
	background-image: 
		url(/assets/images/vcm_cfmtw_bg_01_1440x838.png), 
		url(/assets/images/vcm_cfmtw_bg_02_1440x838.png), 
		url(/assets/images/vcm_cfmtw_bg_03_1440x838.png);
	background-position: 
		var(--_bg_posn_01), 
		var(--_bg_posn_02), 
		var(--_bg_posn_03);
	background-size: 
		var(--_bg_size_01), 
		var(--_bg_size_02), 
		var(--_bg_size_03);

	scroll-behavior: smooth;

	transition: background 2.25s ease-in-out 0.25s;
}
body.initialized {
	--_bg_posn_01: 100% 0%; /* Right, top */
	--_bg_size_01: 100%;

	--_bg_posn_02: 0% 100%;
	--_bg_size_02: 90%;

	--_bg_posn_03: 100% 100%;
	--_bg_size_03: 95%;
}
@media screen and (max-width: 568px) and (orientation: portrait) {
	body {
		
	}
	body.initialized {
		--_bg_size_01: 120%;
		--_bg_size_02: 100%;
		--_bg_size_03: 100%;
	}
}
@media screen and (max-width: 568px) and (min-height: 639px) and (orientation: portrait) {
	body {
		/* --_bg_posn_01: center 100vh;
		--_bg_posn_02: center top;
		--_bg_size_02: auto 105%; */
	}
	body.initialized {
		/* --_bg_posn_01: center 100vh;
		--_bg_posn_02: center top;
		--_bg_size_02: auto 105%; */
	}
}
@media screen and (max-width: 568px) and (min-height: 743px) and (orientation: portrait) {
	body {
		/* --_bg_posn_01: center 50%;
		--_bg_posn_02: left top;
		--_bg_size_02: 100%; */
	}
	body.initialized {
		/* --_bg_posn_01: center var(--ui_header_height);
		--_bg_posn_02: left top;
		--_bg_size_02: 100%; */
	}
}
@media screen and (min-width: 569px) and (max-width: 1024px) and (orientation: landscape) {
	body {
		/* --_bg_posn_01: center 50%;
		--_bg_posn_02: left top;
		--_bg_size_02: auto 100%; */
	}
	body.initialized {
		/* --_bg_posn_01: center var(--ui_header_height);
		--_bg_posn_02: left top;
		--_bg_size_02: auto 100%; */
	}
}

/* Overlay */
body::before {
	opacity: 1;
	content: "";
	position: fixed;
	z-index: -1;
	inset: 0;
	background: var(--colour_overlay_grey_alt);
}
body.initialized::before {
	opacity: 0;
	transition: opacity 1.75s ease-in-out 0.25s;
}
	/* Scrollbars */
	body, body * {
		scrollbar-color: var(--colour_blue_navy) var(--colour_blue_theme);
		scrollbar-width: thin;
	}
	body::-webkit-scrollbar, body * ::-webkit-scrollbar {
		width: var(--scrollbar-width);
	}
	body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track {
		background: var(--colour_blue_theme);
	}
	body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb {
		background-color: var(--colour_blue_navy);
	}
	body::-webkit-scrollbar-thumb {
		border-radius: 0 0 999px 999px;
	}
	body.isScrolledDown::-webkit-scrollbar-thumb {
		border-radius: 999px;
	}

body, acronym, button, blockquote, input, li, ol, option, p, select, textarea, th, td, ul {

}

/* Copy */
h1 {
	margin-bottom: 0;
	font-family: var(--font_stack_headings);
	font-weight: var(--font_stack_headings_weight);
	font-size: var(--font_size_h1);
	color: var(--colour_white);
}
h1:first-child {
	margin-top: 0;
}

p {
	color: var(--colour_copy);
}
p:last-child {
	margin-bottom: 0;
}

/* Links */
a {
	color: var(--colour_copy);
	/* color: var(--colour_blue); */
	text-decoration: underline;
	text-decoration-thickness: var(--border_width);
	text-underline-offset: var(--text_underline_offset);
	text-decoration-color: var(--colour_copy);
	/* text-decoration-color: var(--colour_blue); */
	transition: all 0.3s ease-in-out;
}
a:hover, a:active, a:focus {
	transform: scale(1.075);
}
a.growOnHover {
	display: inline-block;
	transform: scale(1);
}
a.growOnHover:hover, a.growOnHover:active, a.growOnHover:focus {
	transform: scale(1.05);
}
a.button {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	text-decoration: none;
	color: rgba(var(--colour_white_rgb), 1);
	background: rgba(var(--colour_overlay_grey_alt_rgb), 0.5);
	border: 1px solid rgba(var(--colour_white_rgb), 1);
}
a.button:hover, a.button:active, a.button:focus {
	color: rgba(var(--colour_blue_navy_rgb), 1);
	background: rgba(var(--colour_white_rgb), 1);
	transform: scale(1.075);
}

/* Images */
img.responsive {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
img.responsive[width="460"] {
	max-width: 460px;
}
img.responsive[width="342"] {
	max-width: 342px;
}
img.responsive[width="182"] {
	max-width: 182px;
}
@media screen and (max-width: 568px) and (orientation: portrait) {
	img.responsive[width="182"] {
		max-width: 150px;
	}
}
@media screen and (min-width: 569px) and (max-width: 1024px) and (orientation: landscape) {
	img.responsive[width="182"] {
		max-width: 150px;
	}
}

/* Layout */
header, main {
	align-content: center;
	width: 100%;
	max-width: var(--ui_max_width);
	margin-inline: auto;
	padding: 1rem;
}

header {
	opacity: 0;
	transition: opacity 1s ease-in-out 0.5s;
}
body.initialized header {
	opacity: 1;
}

main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--ui_gutter_width);
	padding-bottom: calc(var(--ui_gutter_width) * 2);
}
@media screen and (max-width: 568px) and (orientation: portrait) {
	main {
		padding-top: calc(var(--ui_gutter_width) * 2);
		padding-bottom: 0;
	}
}
@media screen and (min-width: 569px) and (max-width: 1024px) and (orientation: landscape) {
	main {
		padding-top: 0;
	}
}
	.CFMTW__logo, 
	.CFMTW__heading, 
	.CFMTW__copy {
		opacity: 0;
		transform: translateY(100px);
		transition: opacity 1.5s ease-in-out 0.5s, padding 1.5s ease-in-out 0.5s, transform 1.5s ease-in-out 0.5s;
	}
	body.initialized .CFMTW__logo, 
	body.initialized .CFMTW__heading, 
	body.initialized .CFMTW__copy {
		opacity: 1;
		transform: translateY(0px);
	}

	.CFMTW__logo {
		transition-duration: 1.6s;
	}
		.CFMTW__logo img {
			
		}

	.CFMTW__heading {
		transition-delay: 0.6s;
	}
		.CFMTW__heading h1 {
			max-width: 20ch;
			text-align: center;
		}
		@media screen and (min-width: 569px) and (max-width: 1024px) and (orientation: landscape) {
			:root {
				--font_size_h1: 2.5rem; /* 40px */
			}
		}

	.CFMTW__copy {
		transition-delay: 0.8s;
		transition-duration: 1.35s;
	}
	@media screen and (max-width: 568px) and (orientation: portrait) {
		.CFMTW__copy {
			
		}
	}
	body.initialized .CFMTW__copy {
		
	}