/* Root Styles */

:root {
	--base-size: 16;
	
	/* Used if the entire site's size needs adjusting */
	--site-size-adjuster: 1;
	font-size: calc(var(--base-size) * 1px * var(--site-size-adjuster));
	
	/* Set Font Families */
	--wp--preset--font-family--primary: var(--wp--preset--font-family--nunito-sans), sans-serif;
	--wp--preset--font-family--secondary: var(--wp--preset--font-family--noto-serif), serif;
	--wp--preset--font-family--tertiary: var(--wp--preset--font-family--roboto), sans-serif;
	
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Site content grows when screen larger than this */
@media (min-width: 1920px) {
	:root {
		font-size: calc(var(--base-size) / 1920 * 100vw * var(--site-size-adjuster));
	}
}

/* Site content shrinks when screen smaller than this */
@media (max-width: 1600px) {
	:root {
		font-size: calc(var(--base-size) / 1600 * 100vw * var(--site-size-adjuster));
	}
}

body {
	/* Set default colors */
	--wp--preset--color--default: var(--wp--preset--color--custom-grey);
	--wp--preset--color--primary: var(--wp--preset--color--custom-orange);
	--wp--preset--color--secondary: var(--wp--preset--color--custom-grey);
	--wp--preset--color--tertiary: var(--wp--preset--color--custom-sage-green);
	
	/* Calculate Header Size for Sticky Header Padding and Anchor Link Offset */
	
	/* Header Heights */
	--announcement-bar-height: 0px;
	--header-nav: max(108px,calc(120rem / var(--base-size)));
	
	&.has-announcement-bar {
		--announcement-bar-height: max(40px,var(--spacing-40));
	}
	
	/* Logo Dimensions */
	--logo-height-px: 140;
	--logo-width-px: 140;
	--logo-overlap: max(20px,calc(20rem / var(--base-size)));
	
	/* Logo Calculated */
	--logo-height: calc(var(--header-nav) + var(--logo-overlap));
	--logo-width: calc(var(--logo-width-px) / var(--logo-height-px) * var(--logo-height));

	/* Set Header Height Variables */
	--header-height: calc(var(--announcement-bar-height) + var(--header-nav));
	
	/* Set Member Directory Scroll Margin */
	--directory-scroll-margin-top: 100px;
}

@media (max-width: 959px) {
	body {
		--header-height: 108px;
		--logo-height: var(--header-nav);
	}
}


:root * {
	/* Anchor Offset */
	scroll-margin-top: calc(var(--header-height) + var(--announcement-bar-height));
	
	
	/* Font Size Variables */
	
	/* Largest font size in desktop design */
	--font-size-max: 80;
	/* Smallest font size in desktop design */
	--font-size-min: 16;
	--font-range: calc(var(--font-size-max) - var(--font-size-min));

	/* Size you want the largest font size to be on mobile */
	--mobile-font-size-max: 40;
	/* Size you want the smallest font size to be on mobile */
	--mobile-font-size-min: 16;
	--mobile-font-range: calc(var(--mobile-font-size-max) - var(--mobile-font-size-min));

	--min-font-size: calc(1px * (((var(--font-size, var(--base-size)) - var(--font-size-min))/var(--font-range)) * var(--mobile-font-range) + var(--mobile-font-size-min)));
	--responsive-font-size: calc(1rem*var(--font-size, var(--base-size))/var(--base-size));
	--font-size-generator: max(var(--min-font-size), var(--responsive-font-size));

	font-size: var(--font-size-generator);
	--wp--preset--font-size--xs: var(--font-size-generator);
	--wp--preset--font-size--s: var(--font-size-generator);
	--wp--preset--font-size--ms: var(--font-size-generator);
	--wp--preset--font-size--m: var(--font-size-generator);
	--wp--preset--font-size--ml: var(--font-size-generator);
	--wp--preset--font-size--l: var(--font-size-generator);
	--wp--preset--font-size--xl: var(--font-size-generator);
	--wp--preset--font-size--xxl: var(--font-size-generator);
	--wp--preset--font-size--xxxl: var(--font-size-generator);
	--wp--preset--font-size--xxxxl: var(--font-size-generator);
}