@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

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

:root {
	/* fixed values (base values) */
	--color-primary: #dd0619;
	--color-grey-primary: #1c1c1c;
	--color-grey-secondary: #393939;
	--color-emphasis: #000;
	--color-footer-body: #fff;

	--footer-horizontal-padding: 40px;
	--footer-vertical-padding: 24px;
	--footer-gutter: 24px;

	--font-size-body: 14px;
	--line-height-body: 18px;

	--font-size-heading: 32px;
	--line-height-heading: 36px;

	--font-size-heading-2: 16px;
	--line-height-heading-2: 20px;

	--font-size-footer: 14px;
	--line-height-footer: 18px;

	--font-size-copyright: 12px;
	--line-height-copyright: 16px;

	/* dynamic values */
	--footer-content-justify: space-between;

	--content-vertical-padding: 24px;
	--content-max-width: 700px;
	--content-horizontal-padding: calc((100% - var(--content-max-width)) / 2);
}

/* let's set variables here so we don't need to blow up this css file. Limit the amount of @media needed */

/** all mobile and tablet views */
@media screen and (max-width: 1299px) {
	:root {
		--app-button-gutter: 24px;
	}
}

/* mobile */
@media screen and (max-width: 744px) {
	:root {
		--content-horizontal-padding: 24px;
		--footer-content-justify: center;
	}

	.footer-content,
	.footer-content div {
		flex-wrap: wrap;
	}

	.footer-content img,
	.social-button-container {
		width: 100%;
	}
}

/* tablet mini - we drop the horizontal pad in favor of a fixed max-width sizing */
@media screen and (min-width: 745px) and (max-width: 1023px) {
	:root {
		--content-horizontal-padding: 46px;
	}
}

/* tablet big */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
	:root {
	}
}

/* all desktop views */
@media screen and (min-width: 1300px) {
	:root {
	}
}

/* desktop small */
@media screen and (min-width: 1300px) and (max-width: 1919px) {
	:root {
	}
}

/* desktop medium */
@media screen and (min-width: 1900px) and (max-width: 2559px) {
	:root {
	}
}

/* desktop large */
@media screen and (min-width: 2560px) {
	:root {
	}
}

/* with the variables above - not much needs to be done now except scaffolding */
html,
body {
	width: 100%;
	height: 100%;
}

body {
	position: relative;
	background: #000;
	color: var(--color-grey-secondary);
	font-family: Roboto, sans-serif;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

body > header {
	width: 100%;
	height: 104px;
	display: flex;
	align-items: center;
}

a {
	color: var(--color-primary);
}

/* simulate max-width with shallow markup using calc */
body > header,
body > main,
body > footer {
	padding-left: var(--content-horizontal-padding);
	padding-right: var(--content-horizontal-padding);
}

main {
	padding-top: var(--content-vertical-padding);
	padding-bottom: var(--content-vertical-padding);
	min-height: 80vh;
	background-color: #fff;
}

main > * {
	margin-bottom: 1.2em;
	margin-bottom: min(1.2em, 24px);
}

main h1 {
	color: var(--color-grey-primary);
	font-size: var(--font-size-heading);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

main h2 {
	color: var(--color-grey-primary);
	font-size: var(--font-size-heading-2);
	line-height: var(--line-height-heading-2);
}

main ul,
main ol {
	padding-left: 1.3em;
}

main b {
	color: #000;
}

body > footer {
	display: flex;
	flex-direction: column;
	gap: 32px;
	border-top: 8px solid var(--color-primary);
	color: var(--color-footer-body);
}

footer a {
	color: var(--color-footer-body);
	text-decoration: none;
}

.footer-content {
	display: flex;
	justify-content: var(--footer-content-justify);
	align-items: center;
	padding: var(--footer-vertical-padding) var(--footer-horizontal-padding) 0;
	gap: var(--footer-gutter);
}

.footer-content div {
	display: flex;
	gap: 32px;
	justify-content: var(--footer-content-justify);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
}

.footer-copyright {
	padding: 0 var(--footer-horizontal-padding) var(--footer-vertical-padding);
	gap: var(--footer-gutter);
	text-align: center;
	font-size: var(--font-size-copyright);
	line-height: var(--line-height-copyright);
	opacity: 0.8;
}

.social-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--app-button-gutter);
}

.social-button {
	display: block;
	width: 40px;
	height: 40px;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;

	color: transparent;
	overflow: hidden;
	user-select: none;
}

.social-button--twitter {
	background-image: url(./assets/Twitter-Icon.svg);
}

.social-button--instagram {
	background-image: url(./assets/Instagram-Icon.svg);
}

/* IMPORTANT: Override for Survey Monkey */
.smcx-embed,
.smcx-embed.smcx-hide-branding > .smcx-iframe-container {
	overflow: hidden;
	height: 800px !important;
}

.contact-us-info {
	position: relative;
	z-index: 1;
	top: -256px;
	padding: var(--content-vertical-padding) 0;
	background-color: #fff;
}

.contact-us-info li {
	margin-bottom: 1em;
	list-style: disc;
}