:root {
	/* Typography */
    --Heading-XL: 4rem; /* 40px */
    --Heading-L: 3.2rem; /* 32px */
    --Heading-M: 2.2rem; /* 22px */
    --Heading-S: 1.7rem; /* 17px */
    --Heading-XS: 1.4rem; /* 14px */
	--Paragraph-L: 2rem; /* 20px */
	--Paragraph-M: 1.7rem; /* 17px */
	--Paragraph-S: 1.4rem; /* 14px */

	/* Colours */
	--green: #2E813E;
	--charcoal: #54585A;
	--silver: #F7F7F5;
	--sky: #058DCF;
	--sweetgrass: #A2E00A;
	--text: #333333;
	--green-shade: #205A2B;
	--charcoal-shade: #3B3E3F;
	--green-tint: #E2F1E5; 
}

/* Variables for breakpoint md and up */
@media screen and (min-width: 768px) {
    :root {
		/* Typography */
		--Heading-XL: 5.2rem; /* 52px */
		--Heading-L: 3.2rem; /* 32px */
		--Heading-M: 2.5rem; /* 25px */
		--Heading-S: 1.7rem; /* 17px */
		--Heading-XS: 1.4rem; /* 14px */
		--Paragraph-L: 2.4rem; /* 24px */
		--Paragraph-M: 1.7rem; /* 17px */
		--Paragraph-S: 1.4rem; /* 14px */
	}
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

p {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--Paragraph-M);
	font-weight: 400;
	line-height: 140%;
	margin-bottom: 1rem;
}

.paragraph-l {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--Paragraph-L);
	font-weight: 400;
	line-height: 140%;
}

.paragraph-m {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--Paragraph-M);
	font-weight: 400;
	line-height: 140%;
}

.paragraph-s {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--Paragraph-S);
	font-weight: 500;
	line-height: 100%;
}

.heading-xl {
	font-size:  var(--Heading-XL);
	font-family: 'Lora', serif;
	font-weight: 400;
	line-height: 120%;
}

.heading-l {
	font-size:  var(--Heading-L);
	font-family: 'Lora', serif;
	font-weight: 400;
	line-height: 120%;
}

.heading-m {
	font-size:  var(--Heading-M);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	line-height: 120%;
}

.heading-s {
	font-size:  var(--Heading-S);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 120%;
}


.heading-xs {
	font-size:  var(--Heading-XS);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 120%;
}




/* 

SPACERS 
Use <div class="spacer-30"></div> for example to create a static spacer div.

*/
.spacer-30 {
	height: 3rem;
	width: 100%;
	display: block;
	margin: 0;
}

.spacer-25 {
	height: 2.5rem;
	width: 100%;
	display: block;
	margin: 0;
}

.spacer-20 {
	height: 2rem;
	width: 100%;
	display: block;
	margin: 0;
}

.spacer-15 {
	height: 1.5rem;
	width: 100%;
	display: block;
	margin: 0;
}

.spacer-10 {
	height: 1rem;
	width: 100%;
	display: block;
	margin: 0;
}

.spacer-5 {
	height: 5rem;
	width: 100%;
	display: block;
	margin: 0;
}


/* 

PADDING 
Add top and bottom padding to any element by using the class names. 
E.g.: <div class="padding-top-30 padding-bottom-15">Hello!</div>

*/
.padding-top-30 {
	padding-top: 3rem;
}

.padding-top-25 {
	padding-top: 2.5rem;
}

.padding-top-15 {
	padding-top: 1.5rem;
}

.padding-top-10 {
	padding-top: 1rem;
}

.padding-top-5 {
	padding-top: 5rem;
}

.padding-bottom-30 {
	padding-bottom: 3rem;
}

.padding-bottom-25 {
	padding-bottom: 2.5rem;
}

.padding-bottom-15 {
	padding-bottom: 1.5rem;
}

.padding-bottom-10 {
	padding-bottom: 1rem;
}

.padding-bottom-5 {
	padding-bottom: 5rem;
}

/* 

OVERRIDES 
Overriding existing styles

*/

a.soe-btn {
	border: 0;
	border-radius: 1.6rem;
	padding: 1.6rem 3.2rem;
	font-size: 1.7rem;
	text-align: center;
	width: 100%;
	transition: all 0.2s ease-out;
	@media screen and (min-width: 768px) {
		width: auto;
	}
	&:hover {
		background: var(--green-shade);
		border-radius: 1.6rem;
		padding: 1.6rem 3.2rem;
		text-decoration: none !important;
		font-size: 1.7rem;
		text-align:center;
		border: 0;
		transition: all 0.2s ease-in;
	}
}

a.soe-btn.secondary {
	background-color: var(--charcoal);
	&:hover {
		background: var(--charcoal-shade);
	}
}

.soe-tag-btn .btn, .btn-tertiary, a.btn-tertiary {
	border: 1px solid var(--text);
	border-radius: 1.6rem;
	padding: 1rem;
	background: white;
	color: var(--green);
	font-weight: 700 !important;
	font-size: 1.5rem;
	line-height: 100%;
	text-decoration: none;
	display: inline-block;
	transition: all 0.2s ease-out;
	margin: 0 1rem 1rem 0;

	&:hover {
		background-color: var(--green) !important;
		color: white !important;
		border-color: var(--green);
		transition: all 0.2s ease-in;
	}

	&:active {
		background-color: var(--green-tint) !important;
		color: var(--text);
		transition: all 0.2s ease-in;
	}
}

/* 

BACKGROUNDS 
New background classes

*/

.soe-bkg-ltgreen {
    background-color: var(--green-tint) !important;
} 

.soe-bkg-soe-green {
	background-color: var(--green) !important;
	color: white !important;
}

/* 

UTILITY 
Other useful classes

*/

/* Using flex for row */
.flex-row {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	align-items: center;
	flex-direction: column;
	@media screen and (min-width:768px) {
		flex-direction: row;
	}
	
	.half-column {
		width: 100%;
		@media screen and (min-width:768px) {
			width: calc(50% - 1.5rem);
		}
	}
}

/* 

DOCUMENTATION RELATED 
These are styles to style our documentation and commentary, does not need to be ported over

*/

.docu-wrapper {
	font-family: 'Courier New', Courier, monospace;
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	padding: 3.2rem 1.6rem;
	@media screen and (min-width: 768px) {
		padding-left:0;
		padding-right:0;
	}
	h1, h2, h3, h4, h5, h6, p {
		font-family: 'Courier New', Courier, monospace;
	}
}