/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */

/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/

/* CodeStitch Root and Helpers */
@media only screen and (min-width: 0em) {
	// Website colors
	:root {
		--primary: #ffba19;
		--primaryLight: #ffd675;
		--secondary: #0d3c6c;
		--secondaryLight: #d9f0fc;
		--headerColor: #1a1a1a;
		--bodyTextColor: #242429;
		--bodyTextColorWhite: #fafbfc;

		/* 13px - 16px */
		--topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
		/* 31px - 49px */
		--headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
		--bodyFontSize: 1rem;

		/* 60px - 100px top and bottom */
		--sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
	}

	// Text styles - can be replaced using CodeStitch's "Content Flair" Stitches
	.cs-topper {
		font-size: var(--topperFontSize);
		font-weight: 700;
		line-height: 1.2em;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--secondary);
		display: block;
	}

	.cs-title {
		font-size: var(--headerFontSize);
		font-weight: 900;
		line-height: 1.2em;
		margin: 0 auto (16/16rem);
		color: var(--headerColor);
		position: relative;
	}

	.cs-text {
		font-size: var(--bodyFontSize);
		line-height: 1.5em;
		width: 100%;
		margin: 0 auto;
		color: var(--bodyTextColor);
	}

	// Button - can be replaced using CodeStitch's "Button" Stitches
	.cs-button-solid {
		font-family: inherit;
		font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		width: auto;
		// height: (24/16rem);
		padding: (8/16rem);
		color: #000;
		background-color: var(--primary);
		border: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		position: relative;
		z-index: 1;
		transition: color 0.3s;
		transition-delay: 0.1s;

		&:hover {
			color: #fff;
			&:before {
				width: 100%;
			}
		}

		&:before {
			content: "";

			//Transition properties
			width: 0;
			height: 100%;
			background-color: #000;
			opacity: 1;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			transition: width 0.3s;
		}
	}
}

@media only screen and (min-width: 64em) {
	.cs-button-solid {
		padding: (12/16rem) (24/16rem);
	}
}

/* Fonts */
// Grab your fonts to locally host from https://google-webfonts-helper.herokuapp.com/fonts

/* roboto-regular - latin */
@font-face {
	font-style: normal;
	font-family: "Roboto";
	font-weight: 400;
	font-display: swap;
	src: local(""), url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/assets/fonts/roboto-v29-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
	font-style: normal;
	font-family: "Roboto";
	font-weight: 700;
	font-display: swap;
	src: local(""), url("/assets/fonts/roboto-v29-latin-700.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/assets/fonts/roboto-v29-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-900 - latin */
@font-face {
	font-style: normal;
	font-family: "Roboto";
	font-weight: 900;
	font-display: swap;
	src: local(""), url("/assets/fonts/roboto-v29-latin-900.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/assets/fonts/roboto-v29-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* General styles */
body,
html {
	font-family: "Roboto", Arial, sans-serif;
	font-size: 100%;
	margin: 0;
	padding: 0;
	color: var(--bodyTextColor);
	overflow-x: hidden;
}

*,
*:before,
*:after {
	margin: 0;
	box-sizing: border-box;
	padding: 0;
}

body {
	transition: background-color 0.3s;
}

.container {
	width: 92%;
	margin: auto;
	position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--headerColor);
}

p,
li,
a {
	font-size: (16/16rem);
	line-height: 1.5em;
	margin: 0;
}

p,
li {
	color: #353535;
}

a,
button {
	&:hover {
		cursor: pointer;
	}
}

ul {
	list-style-position: inside;
}

// Hidden Screen reader skip nav button
.skip {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1111111;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

*:focus,
*:focus-visible {
	outline-color: var(--primary);
	outline-style: solid;
	outline-offset: 0.25rem;
	outline-width: 0.25rem;
}

kbd {
	background-color: #eee;
	border-radius: 3px;
	border: 1px solid #b4b4b4;
	box-shadow:
	  0 1px 1px rgba(0, 0, 0, 0.2),
	  0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
	color: #333;
	display: inline-block;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	white-space: nowrap;
  }
  

/* Scale full website with the viewport width */
@media only screen and (min-width: 2000px) {
	body,
	html {
		font-size: 0.85vw;
	}
}

/* Utility classes for layout */

.cs-hidden {
    display: none;
}

@media (min-width: 64rem) {
    .lg\:cs-flex {
        display: flex;
		gap: 0.5rem;
    }

	.lg\:cs-hidden {
        display: none;
    }
}
