/** @format */

@font-face {
	font-family: 'GT America';
	src: url('../../fonts/GT-America-Standard-Regular.woff2') format('woff2'), url('../../assets/fonts/GT-America-Standard-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GT America';
	src: url('../../fonts/GT-America-Standard-Bold.woff2') format('woff2'), url('../../assets/fonts/GT-America-Standard-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GT America Extended';
	src: url('../../fonts/GT-America-Extended-Medium.woff2') format('woff2'), url('../../assets/fonts/GT-America-Extended-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-display: block;
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	src: local(''), url('../../fonts/MaterialIcons-Regular.woff2') format('woff2'), url('../../fonts/MaterialIcons-Regular.woff') format('woff');
}

:root {
	--megamenu-bar-logo-width: min(9.6rem, 39%);
	--megamenu-bar-padding-tb: clamp(0.8rem, 2.5vw, 1.5rem);
	--header-burgersize: 3px;
	--header-burgermax: 500px;
	--tag-padding: 0.2em 1em;
	--bottom-padding-inline: 2rem;

	/*
	---COLORS---
	*/
	--color-white: #fff;
	--color-neutral-grey: #b6b6b6;
	/*--color-neutral-grey: aquamarine; /* DEMO */
	--color-dark-neutral: #77887e;
	--color-green-positive: #00d31c;
	--color-roedl-green: #3abe7c;
	--color-roedl-light-matcha: #ecf4e9;
	--color-roedl-hunter-green: #1c3828;
	--color-roedl-poison-green: #cafd26;
	--color-roedl-canyon-red: #ff644b;
	--color-white-o80: rgba(255, 255, 255, 0.8);

	--color-roedl-hunter-green-o10: rgba(28, 56, 40, 0.1);

	/*
	---FONT FAMILIES---
	*/
	--ff-primary-font: 'GT America', Helvetica, Arial, sans-serif;
	--ff-secondary-font: 'GT America Extended', Helvetica, Arial, sans-serif;
	--ff-icon-font: 'Icons', sans-serif;
	--font-extended: normal normal 500 var(--fs-body) var(--ff-secondary-font);

	/*
	---FONT SIZES---
	*/
	--fs-h1: clamp(2.5rem, 5vw, 5rem);
	--fs-h2: clamp(1.8rem, 3.6vw, 3rem);
	--fs-h3: clamp(1.6rem, 2.5vw, 2rem);
	--fs-h4: clamp(1.125rem, 2.25vw, 1.5rem);

	--fs-quote: clamp(1.125rem, 2.25vw, 1.5rem);
	--fs-body: clamp(0.9375rem, 1.85vw, 1.125rem);
	--fs-small: clamp(0.75rem, 1.5vw, 0.9375rem);

	--fs-button: clamp(0.8rem, 1.6vw, 1rem);
	--fs-tag: clamp(0.8rem, 1.6vw, 0.8rem);
	--fs-navigation: clamp(0.8rem, 1.6vw, 1rem);

	/*
	---SPACING / GAPS---
	*/
	--margin-h1: calc(var(--universal-gap) / 2);
	--margin-h2: calc(var(--universal-gap) / 2);
	--margin-h3: calc(var(--universal-gap) / 2);
	--margin-h4: calc(var(--universal-gap) / 2);

	--button-padding-tb: 0.5em;
	--button-padding-lr: 1.25em;
	--desktop-bar-item-item-lr: 3rem;

	/*
	---BORDER---
	*/
	--border-radius-button: 0.25rem;

	/*ALT Spot Colors*/
	/*--color-orange-gobi: #eaa21c;*/
	/*ALT */
	--main-color: var(--color-roedl-poison-green);
	--spot-color: var(--color-roedl-poison-green); /* OLD --color-orange-gobi */
	--main-color-blog: var(--color-roedl-poison-green);
	--spot-color-blog: var(--color-roedl-poison-green); /* OLD --color-orange-gobi */

	/*
	---ALT SPACING / GAPS---
	*/
	--universal-gap: clamp(1rem, 2.6vw, 2rem);
	--text-max-width: 1050px;
	--title-image-min-height: 300px;

	/*
	---ALT MAIN GRID---
	*/
	--grid-min-cell-width: 320px;
}

/*
---ALT DYNAMIC HEIGHTS---
*/
:root {
	--header-topcareerlinks-height: 0px;
	--header-topbar-height: 0px;
	--header-bottombar-height: 0px;
}

#main {
	--real-heights-from-top: calc(var(--header-topcareerlinks-height) + var(--header-topbar-height) - 1px);
	--real-heights-from-bottom: var(--header-bottombar-height);
}