/* Global Variables */
/*##################*/

:root {

	/* Primary colours are defined in HSL, it's good: https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/ */
	/* We define it this way to have easy control over the darker/lighter versions throughout the site. */
	/* Use a converter to convert RGB to HSL (https://www.rapidtables.com/convert/color/rgb-to-hsl.html) */
	/* Just set the primary and secondary colours, then all hover/action states will automatically get lightened/darkened colours. */
	/* Can also access light/lighter/lightest/dark/darker/darkest colours throughout all the CSS */

	/* Primary Colour Definitions */
	--primary-color-hue: 33;
	--primary-color-saturation: 86%;
	--primary-color-lightness: 53%;

	--secondary-color-hue: 205;
	--secondary-color-saturation: 69%;
	--secondary-color-lightness: 55%;

	/* Derived Colours */

	--brandPrimaryColor: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness));
	--brandPrimaryColorLight: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) + 8%));
	--brandPrimaryColorLighter: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) + 16%));
	--brandPrimaryColorLightest: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) + 24%));
	--brandPrimaryColorDark: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) - 8%));
	--brandPrimaryColorDarker: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) - 16%));
	--brandPrimaryColorDarkest: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) - 24%));

	--brandSecondaryColor: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness));
	--brandSecondaryColorLight: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) + 8%));
	--brandSecondaryColorLighter: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) + 16%));
	--brandSecondaryColorLightest: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) + 24%));
	--brandSecondaryColorDark: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) - 8%));
	--brandSecondaryColorDarker: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) - 16%));
	--brandSecondaryColorDarkest: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) - 24%));

	/* Background Colours */
	--backgroundColor: rgb(255, 255, 255);

	/* Text Colours */
	--lightOnDarkTextColor: rgb(255, 255, 255);
	--darkOnLightTextColor: rgb(0, 0, 0);
	--greyTextColor: rgb(200, 200, 200);

	/* Fonts */
	--headingFont: HeeboRegular, sans-serif;
	--subheadingFont: HeeboThin, sans-serif;
	--bodyFont: HeeboRegular, sans-serif;
}

/* Global Fonts/Colours */
/* #################### */

@font-face {
	font-family: HeeboBlack;
	src: url(../../fonts/Heebo-Black.ttf);
	font-weight: normal;
}

@font-face {
	font-family: HeeboRegular;
	src: url(../../fonts/Heebo-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: HeeboLight;
	src: url(../../fonts/Heebo-Thin.ttf);
	font-weight: normal;
}

html {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

body {
	width: 100%;
	margin: 0;
	font-family: var(--bodyFont);
	font-weight: normal;
	background-color: var(--backgroundColor);
}

	body > div.content {
		/* This is the height without the top menu on all logged in pages */
		/* If there is a different kind of page, for example login or content items, where the top navigation
		menu is not there, or is a different height, you need to add a new layout and css class. */
		/* This ensures that the menu is always at the bottom. */
		/* TODO: Investigate how we can do this without having to have separate layout types.
		Can pass in class name with View Data for the special page types? */
		min-height: calc(100vh - 125px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

		body > div.content.login {
			min-height: 100vh !important;
		}

		body > div.content.content-item {
			min-height: calc(100vh - 95px) !important; /* 95px = height of #pod-content-menu */
		}

input {
	font-family: var(--bodyFont);
	font-weight: lighter;
}

button {
	font-family: var(--bodyFont);
	font-weight: normal;
}

h1, h2, h3, h4, h5 {
	font-family: var(--headingFont);
	font-weight: lighter;
}

a {
	color: var(--brandPrimaryColor);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Page Success/Error Messages */
/* ########################### */

span.page-message {
	display: flex;
	align-items: center;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	color: white;
	font-weight: bold;
	text-shadow: 0px 1px rgba(0, 0, 0, 0.4);
	margin-bottom: 1em;
}

	span.page-message.positive {
		background-color: rgb(80, 210, 120);
	}

	span.page-message.neutral {
		background-color: rgb(124, 140, 155);
	}

	span.page-message.negative {
		background-color: rgb(227, 104, 106);
	}

	span.page-message.positive::before {
		font-family: "Material Icons";
		font-weight: 900;
		content: "done";
		font-size: 2.5em;
		margin-right: 0.25em;
	}

	span.page-message.neutral::before {
		font-family: "Material Icons";
		font-weight: 900;
		content: "info_outline";
		font-size: 2.5em;
		margin-right: 0.25em;
	}

	span.page-message.negative::before {
		font-family: "Material Icons";
		font-weight: 900;
		content: "priority_high";
		font-size: 2.5em;
		margin-right: 0.25em;
	}

	/* Page Message Animation */
	span.page-message {
		opacity: 0;
		transform: scale(0.95, 0.95);
		animation-name: fade-in;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-delay: 0.15s;
	}

	@keyframes fade-in {
		from {
			opacity: 0;
			transform: scale(0.95, 0.95);
		}

		to {
			opacity: 1;
			transform: scale(1, 1);
		}
	}
	/* Environment Tag */
	/* ############### */
	.environment-tag {
	font-weight: bold;
	margin: 1em;
	font-size: 0.6em;
	color: rgba(0, 0, 0, 0.25);
	background-color: white;
	border-radius: 2em;
	padding: 0.70em 1.5em;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
	line-height: 1.5em;
	display: flex;
	align-content: center;
	line-height: 1.4em;
}

	.environment-tag::before {
		font-family: "Material Icons";
		font-weight: 900;
		content: "code";
		font-size: 1.6em;
		margin-right: 0.25em;
	}

/* Responsive Breakpoints */
/* ###################### */

@media screen and (min-width: 640px) {
	
}

@media screen and (min-width: 1024px) {

}

@media screen and (min-width: 1200px) {

}