/************************************************************************************
*
*			Variables
*
***********************************************************************************/

:root {
	/********** Colors **********/
    --clr-primary: #000000;
    --clr-secondary: #ffce00;
	--clr-alt: #ffce00;
    --clr-gray: #272727;
	--clr-gray-light: #595252;
    --clr-offwhite: #f2f2f2;

	/********** Typography **********/

	/**** Font Families ****/
	--site-font: "shuttleblock", sans-serif;
	--awesome-icons: "Font Awesome 6 Pro";
	--divi-icons: "ETModules";

	/****Font-sizes****/

	/*Responsize Font Sizes*/
	--60px-r: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); /*36px at 480px and 60px at 1440px*/
	--48px-r: clamp(1.5rem, 0.75rem + 2.5vw, 3rem); /*24px at 480px and 48px at 1440px*/
	--36px-r: clamp(1.25rem, 0.75rem + 1.667vw, 2.25rem); /*20px at 480px and 36px at 1440px*/
	--32px-r: clamp(1.125rem, 0.688rem + 1.458vw, 2rem); /*18px at 480px and 32px at 1440px*/
	--24px-r: clamp(1rem, 0.75rem + 0.833vw, 1.5rem); /*16px at 480px and 24px at 1440px*/
	--18px-r: clamp(1rem, 0.88rem + 0.399vw, 1.125rem); /*16px at 480px and 18px at 981px*/
	--16px-r: clamp(0.75rem, 0.755rem + 0.399vw, 1rem); /*12px at 480px and 16px at 981px*/

	/*Static Font Sizes*/
	--18px-s: 1.125rem;
	--16px-s: 1rem;
	--14px-s: 0.875rem;
	--12px-s: 0.75rem;
	
	/*Header Styles*/
	
	/*Header Defaults*/
	--header-fontfamily: var(--site-font);
	--header-letterspacing: 0;
	--header-lineheight: 1.125;
	--header-texttransform: uppercase; 
	--header-weight: 600;
	
	/*Header Colors*/
	--header-color: var(--clr-primary);
	--header-light-color: #ffffff;
	--header-em-color: var(--clr-secondary);
	--header-light-em-color: var(--clr-secondary);
	--header-strong-color: var(--clr-secondary);
	--header-light-strong-color: var(--clr-secondary);
	
	/*Header Sizes*/
	--h1-size: var(--60px-r);
	--h2-size: var(--48px-r);
	--h3-size: var(--36px-r);
	--h4-size: var(--24px-r);
	--h5-size: var(--12px-s);
	
	/*Subheader/Preheader Styles*/
	--subheader-color: var(--clr-primary); 
	--subheader-color-light: var(--clr-secondary);
	--subheader-weight: 600;
	--subheader-letterspacing: 0.91px;
	--subheader-lineheight: 1.25;
	--subheader-size: var(--14px-s);
	--subheader-texttransform: uppercase;
	
	/*Text Styles*/

	/*Text Default Styles*/
	--text-color: #000000;
	--text-color-light: #ffffff;
	--text-fontfamily: var(--site-font);
	--text-letterspacing: 0;
	--text-lineheight: 2;
	--text-size: var(--16px-s);
	--text-weight: 400;
	
	/*Large Text Styles*/
	--text-size-large: var(--24px-r);
	--text-lineheight-large: 1.125;
	
	/*Text Link Styles*/
	--text-link-color: var(--clr-alt);
	--text-link-light-color: var(--clr-secondary);
	--text-link-decoration: none;
	--text-link-weight: inherit;
		
	/*Text Link Hover & Focus Styles*/
	--text-link-color-hover: var(--text-color);
	--text-link-light-color-hover: var(--text-color-light);
	
	/*Button Styles*/
	
	/*Button Default Styles*/
	--btn-border: none;
	--btn-borderradius: 26px;
	--btn-fontfamily: var(--site-font);
	--btn-size: var(--14px-s);
	--btn-weight: 600;
	--btn-letterspacing: 0;
	--btn-lineheight: 1;
	--btn-padding: 20px 35px;
	--btn-texttransform: uppercase;
	--btn-transition: var(--misc-transition);
	
	/*Dark Button*/
	--btn-dark-background: var(--clr-primary);
	--btn-dark-bordercolor: var(--clr-primary);
	--btn-dark-color: #ffffff;
	/*Dark Button Hover & Focus*/
	--btn-dark-background-hover: var(--clr-secondary);
	--btn-dark-bordercolor-hover: var(--clr-secondary);
	--btn-dark-color-hover: #000000;
	
	/*Light Button*/
	--btn-light-background: var(--clr-secondary);
	--btn-light-bordercolor: var(--clr-secondary);
	--btn-light-color: #000000;
	/*Light Button Hover & Focus*/
	--btn-light-background-hover: var(--clr-gray);
	--btn-light-bordercolor-hover: #ffffff;
	--btn-light-color-hover: #ffffff;
	
	/*Flex Wrapper Styles*/

	/*Flex Wrapper Default Styles*/
	--flex-gap: 25px;
	--flex-col-width: calc((100% * (1 / var(--flex-columns))) - (var(--flex-gap) * ((var(--flex-columns) - 1) / var(--flex-columns))));
	
	/*Background Styles*/
	
	/*Background Color Styles*/
	--background-primary: var(--clr-primary);
	--background-secondary: var(--clr-secondary);
	--background-gray: var(--clr-gray);
	--background-offwhite: var(--clr-offwhite);
	
	/*Content Template/Archive Background Styles*/
	--background-blog: #000000;
	--background-post: #000000;
	--background-career: #000000;
	--background-search: #000000;
	
	/*Overlay Styles*/
	
	/*Overlay Default Styles*/
	--overlay-blendmode: normal;
	--overlay-opacity: 0.8;
	
	/*Overlay Color Styles*/
	--overlay-primary: var(--clr-primary);
	--overlay-secondary: var(--clr-gray);
	--overlay-dark: #000000;
	
	/*Special Layout Styles*/
	--row-maxwidth: 1260px;
	--row-width: 90%;
	
	/********** Post Card Styles **********/
	
	/*Post Card Default Styles*/
	--postcard-background: #ffffff;
	--postcard-border: var(--misc-border);
	--postcard-bordercolor: var(--misc-bordercolor);
	--postcard-padding: 0;
	--postcard-transition: var(--misc-transition);
	
	/*Post Card Image Styles*/
	--postcard-image-aspectratio: 16/9;
	
	/*Post Card Meta Styles*/
	--postcard-meta-padding: 15px 25px;
	
	/*Post Card Element Styles*/
	--postmeta-span-color: #000000;
	--postmeta-span-letterspacing: 0.78px;
	--postmeta-span-lineheight: 1;
	--postmeta-span-size: var(--12px-s);
	--postmeta-span-texttransform: uppercase;
	--postmeta-span-weight: 600;
	--postmeta-title-color: var(--header-color);
	--postmeta-title-size: var(--h4-size);
	
	/*Post Card Hover & Focus Styles*/
	--postcard-background-hover: var(--clr-offwhite);
	--postcard-bordercolor-hover: var(--clr-primary);
	--postmeta-span-color-hover: var(--clr-primary);
	--postmeta-title-color-hover: inherit;
	
	/********** Form Styles **********/
	
	/*Form Layout Styles*/
	--form-gap: 25px;
	
	/*Form Pseudo Styles*/
	--form-placeholder-color: rgba(255,255,255,0.25);
	--form-autofill-color: #ffffff;
	
	/*Form Field Styles*/
	--form-field-background: var(--clr-gray);
	--form-field-borders: solid 1px;
	--form-field-bordercolor: var(--misc-bordercolor);
	--form-field-padding: 8px 12px;
	--form-field-transition: var(--misc-transition);
	
	--form-input-border: var(--misc-border);
	--form-input-bordercolor: var(--form-field-bordercolor);
	--form-input-color: #ffffff;
	--form-input-fontfamily: var(--site-font);
	--form-input-letterspacing: 0;
	--form-input-lineheight: 1.25;
	--form-input-texttransform: initial;
	--form-input-size: var(--16px-s);
	--form-input-weight: 500;
	
	/*Form Label Styles*/
	--form-label-color: #ffffff;
	--form-label-fontfamily: var(--site-font);
	--form-label-letterspacing: 0;
	--form-label-lineheight: 1.25;
	--form-label-texttransform: uppercase;
	--form-label-size: var(--12px-s);
	--form-label-weight: 600;
	
	/*Form Hover & Focus Styles*/
	--form-field-background-hover: inherit;
	--form-field-bordercolor-hover: var(--clr-secondary);
	--form-input-bordercolor-hover: var(--clr-secondary);
	
	/* --- Main Header Styles --- */
	
	/*Topbar Styles*/
	--topbar-padding: var(--topbar-vertial-padding) var(--mainheader-horizontal-padding);
	--topbar-vertial-padding: 12px;
	--topbar-menu-color: var(--clr-primary);
	--topbar-menu-color-hover: #ffffff;
	--topbar-menu-size: var(--14px-s);
	
	/*Prmary Nav Styles*/
	--primarynav-padding: var(--primarynav-vertical-padding) var(--mainheader-horizontal-padding);
	--primarynav-vertical-padding: 30px;
	--primarynav-menu-size: var(--14px-s);
	--primarynav-menu-padding: 8px;
	--primarynav-menu-gap: 8px;
	
	/*Main Header Menu Default Styles*/
	--mainheader-menu-color: #ffffff;
	--mainheader-menu-color-hover: var(--clr-alt);
	--mainheader-menu-font: var(--site-font);
	--mainheader-menu-letterspacing: 0;
	--mainheader-menu-texttransform: uppercase;
	--mainheader-menu-weight: 600;
	--submenu-closebtn-width: 44px;
	
	/*Main Header Misc Styles*/
	--mainheader-border: var(--misc-border);
	--mainheader-bordercolor: var(--misc-bordercolor);
	--mainheader-horizontal-padding: 25px;
	--mainheader-ctabtn-width: 100%;
	--mainheader-height-offset: 64px;
	
	/********** Misc Styles **********/
	--misc-border: solid 1px;
	--misc-bordercolor: var(--clr-gray-light);
	--misc-transition: all 0.2s ease 0s;
}

@media screen and (min-width: 981px) { 
	
	:root {	
		
		/* --- Special Layout Styles --- */
		--nearlyfull-width: min(--row-width, calc(var(--row-maxwidth) + var(--nearlyfull-offset)));
		--nearlyfull-offset: calc((100vw - var(--row-maxwidth)) / 2);
		
		/* --- Main Header Styles --- */
		
		/*Main Header Column Styles*/
		--mainheader-menu-width: calc((100% - var(--mainheader-col-width))/2);
		--mainheader-col-width: var(--mainheader-col-size);
		--mainheader-col-size: 160px;
		
		/* Main Header Misc Styles */
		--mainheader-height-offset: 107px;
		--mainheader-ctabtn-width: calc(100% - var(--mainheader-horizontal-padding));
	}
	
}