/*
===================================
===================================
Global styles

- The is the file for CSS that applies to the entire site.
- Variables, resets, global styles, etc. should be added here.
- This file should be linked to every page on the site.
- We can also add global component styles here (buttons, forms, etc.)
===================================
===================================
*/

/* 
===================================
Resets (box-sizing, normalize, etc.) 
===================================
*/

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* 
===================================
Variables (colors, text, spacing, etc.)
===================================
*/

:root {
	/* Color Definitions */
	--color-white: #fff;
	--color-amaranth: #b91515;
	--color-teal: #007a80;
	--color-cybergrape: #6c4681;
	--color-dark-onyx: #1f1d1d;
	--color-onyx: #424241;
	--color-yaleblue: #184f85;
	--color-hotpink: #fa6cb7;
	--color-citrine: #d3c53f;
	--color-citron: #92a32d;
	--color-copper: #b16120;
	--color-grey: #6c6c6c;
	--color-bluepurple: linear-gradient(0deg, #6c4681 -5.71%, #184f85 103.44%);
	--color-purpleblue: linear-gradient(180deg, #6c4681 -5.71%, #184f85 103.44%);
	--color-yellowgreen: linear-gradient(
		180deg,
		#d3c53f 0%,
		#d3c53f 26.04%,
		#92a32d 58.85%,
		#b37122 100%
	);

	/* Color Assignment */
	--body-background-color: var(--color-white);
	/* button colors */
	--button1-color: var(--color-white);
	--button1-hover-border: var(--color-white);
	--button2-color: var(--color-amaranth);
	--button2-hover: var(--color-white);
	--button3-color: var(--color-amaranth);
	--button3-hover-border: var(--color-amaranth);

	/* Text */
	--main-font: "Josefin Sans", sans-serif;
	--body-font: "Open Sans", sans-serif;

	/* Styles for fonts */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* Font sizes */
	--font16: 1rem;
	--font21: 1.313rem;
	--font24: 1.5rem;
	--font28: 1.75rem;
	--font36: 2.25rem;
	--font46: 2.875rem;
	--font56: 3.5rem;

	/* Line Height */
	--line-height20: 1.25rem;
	--line-height26: 1.625rem;
	--line-height28: 1.75rem;
	--line-height32: 2rem;
	--line-height40: 2.5rem;
	--line-height50: 3.125rem;
	--line-height58: 3.625rem;

	/* Spacing */
	--spacing10: 10px;
	--spacing20: 20px;
	--spacing40: 40px;
	--spacing65: 65px;
	--spacing80: 80px;
	--spacing84: 84px;
	--spacing100: 100px;
	--spacing164: 164px;
	--spacing185: 185px;
	--spacing213: 213px;

	--spacing-footer: 50px 160px;
	--spacing-header-button: 125px 279px;

	/* border-radius */
	--border-radius10: 10px;

	/* Wrappers */
	--wrapper-width-max: 1328px;
	--wrapper-width-max-sm: 1080px;
	--desktop-wrapper-width: 85%;
	--mobile-wrapper-width: 95%;
}

/* accessibility */
.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* button styles and a tags */
/* overwrite sizes if needed. */

a {
	text-decoration: none;
	color: inherit;
}

a:hover,
a:focus {
	text-decoration: underline;
	cursor: pointer;
}

.button1 {
	margin: 0 auto;
	padding: var(--spacing10) var(--spacing40);
	gap: 10px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgb(0, 0, 0, 0);
	color: var(--color-white);
	border: 3px solid var(--color-white);
	font-size: var(--font21);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height26);
	cursor: pointer;
}

.button1:hover,
.button1:focus {
	background: var(--button1-hover-border);
	color: var(--color-dark-onyx);
}

.button2 {
	padding: var(--spacing10) var(--spacing40);
	color: var(--color-white);
	border: none;
	border-radius: 10px;
	background-color: var(--button2-color);
	font-family: var(--main-font);
	font-weight: var(--font-weight-bold);
	font-size: var(--font21);
	cursor: pointer;
}

.button2:hover,
.button2:focus {
	background-color: var(--button2-hover);
	color: var(--color-dark-onyx);
}

.button3 {
	padding: var(--spacing10) var(--spacing40);
	border: 3px solid var(--button3-color);
	border-radius: 10px;
	background-color: var(--button3-color);
	color: var(--color-white);
	font-family: var(--main-font);
	font-weight: var(--font-weight-bold);
	font-size: var(--font21);
	cursor: pointer;
	text-align: center;
}

.button3:hover,
.button3:focus {
	border: 3px solid var(--button3-hover-border);
	background-color: transparent;
	color: var(--color-dark-onyx);
	text-decoration: none;
}

/* 
===================================
Global Styles (html, body, text, links, etc.)
===================================
*/

html {
	font-size: 16px;
}

body {
	background-color: var(--body-background-color);
	font-family: var(--main-font);
}

/* Images */
img {
	max-width: 100%;
	display: block;
}

/* Text */
h1,
.h1-styles {
	font-size: var(--font56);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height58);
	color: var(--color-white);
}

h2,
.h2-styles {
	font-size: var(--font46);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height50);
	color: var(--color-onyx);
}

h3,
.h3-styles {
	font-size: var(--font36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height40);
	color: var(--color-white);
}

h4,
.h4-styles {
	font-size: var(--font28);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height32);
	color: var(--color-white);
}

h5,
.h5-styles {
	font-size: var(--font24);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height28);
	color: var(--color-onyx);
}

/* Mobile body2 in figma */
p {
	font-size: var(--font16);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height26);
	color: var(--color-white);
	font-family: var(--body-font);
}

time {
	font-size: var(--font16);
	font-weight: var(--font-weight-regular);
}

/* Links */
a {
	color: var(--color-white);
	text-decoration: none;
}

strong,
time,
address {
	color: var(--color-onyx);
	font-style: normal;
}

/* Lists */
footer li {
	list-style-type: none;
	line-height: var(--line-height32);
	text-align: center;
	margin-bottom: 20px;
}

footer ul {
	padding-left: 0px;
	padding-inline-start: 0px;
}

/* Forms */

/* 
===================================
Wrappers (container, flexbox, etc.)
===================================
*/

/* Container */

/* Wrappers */
.wrapper {
	width: var(--mobile-wrapper-width);
	margin: 0 auto;
	max-width: var(--wrapper-width-max);
}

/* Global Hidden Class */
.hidden {
	display: none;
}

/* custom disable scroll class: for modal functionality */
.disable-scroll {
	overflow: hidden;
}

/* 
===================================
Global Component Styles (buttons, forms, etc.)
===================================
*/

/* Buttons */

.button-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing40);
	margin: var(--spacing40) 0 var(--spacing65);
}

/* footer submit button */
.text-input .button2 {
	border-radius: 10px;
	background-color: var(--button2-color);
	padding: var(--spacing10) var(--spacing40);
	color: var(--color-white);
	border: none;
	min-width: 187px;
	min-height: 50px;
	margin: var(--spacing20);
	font-weight: var(--font-weight-bold);
	font-size: var(--font21);
}

.text-input .button2:hover {
	background-color: var(--color-white);
	color: var(--color-dark-onyx);
}

/* HEADER STYLES BB */

body {
	font-family: var(--main-font);
}

/* top bar section */
.top-bar {
	background-color: var(--color-dark-onyx);
	color: var(--color-white);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing20);
}

.dp-wrapper {
	width: var(--mobile-wrapper-width);
	display: flex;
	justify-content: space-between;
}

.logo-container {
	display: flex;
}

.logo-container img {
	width: 215px;
}

/* desktop menu */
.desktop-menu {
	display: none;
	flex-direction: row;
	align-items: center;
}

.desktop-nav {
	list-style-type: none;
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
}

.desktop-nav li {
	padding: var(--spacing10) var(--spacing20);
	font-size: var(--font21);
}

.desktop-nav li a:hover,
.desktop-nav li [aria-current="page"] {
	border-bottom: 2px solid var(--color-white);
	text-decoration: none;
}

.dp-wrapper .button2 {
	display: none;
}

/* mobile menu button style */
#mobile-menu {
	background-color: transparent;
	border: 0px;
	padding: 0;
	align-items: center;
	display: flex;
	z-index: 11;
}

#mobile-menu svg {
	fill: var(--color-white);
}

/* menu container */
#menu-container {
	position: relative;
	display: flex;
	align-items: center;
}

nav .img-container {
	max-width: 390px;
	margin: auto;
}

#nav-links-container {
	position: absolute;
	top: 100px;
	bottom: 0px;
	right: -20px;
	z-index: 10;
}

/* nav-links style */
#nav-links {
	display: flex;
	list-style-type: none;
	margin: 0;
	gap: 20px;
	flex-direction: column;
	background-color: var(--color-dark-onyx);
	width: 200px;
	height: auto;
	overflow: hidden;
	padding: 28px 55px 44px 46px;
}

#nav-links a {
	color: var(--color-white);
	text-decoration: none;
	font-weight: var(--font-weight-regular);
	font-size: var(--font16);
}

/* The Mobile X */
#mobileClose {
	display: hidden;
}

/* FOOTER STYLES */
footer {
	background-color: var(--color-dark-onyx);
	color: var(--color-white);
}

/* Transition and transform for logo and social links for better visual */
footer a img {
	transition: all 0.1s ease-in;
}

footer a img:hover {
	transform: scale(110%);
}

/* footer main is the container for all content except for very bottom links */
.footer-main {
	padding-top: var(--spacing40);
	display: flex;
	flex-direction: column-reverse;
}

footer .policy-links {
	display: flex;
	flex-direction: column;
	gap: var(--spacing20);
	padding: var(--spacing20) 0;
}

.footer-form
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedContent
	h4,
.footer-form
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-successBody
	.ml-form-successContent
	h4 {
	margin-top: 0px;
	margin-bottom: var(--spacing20);
	line-height: var(--line-height40);
}

/* Logo and land acknowledgement button container*/
.footer-logo-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody,
.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-successBody {
	padding: 0;
}

.ml-embedded,
.ml-embedded h4,
.ml-embedded span,
.ml-embedded p,
.ml-embedded label,
.ml-embedded .label-description,
.ml-embedded button,
.ml-embedded input[type="email"],
.ml-embedded input[type="checkbox"] + label {
	font-family: var(--font-main) !important;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-horizontalRow
	button,
.ml-embedded #mlb2-11072124 .ml-mobileButton-horizontal button,
.ml-embedded input[type="email"] {
	height: 50px !important;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-horizontalRow
	button,
.ml-embedded #mlb2-11072124 .ml-mobileButton-horizontal button {
	font-family: var(--font-main) !important;
	font-size: var(--font21) !important;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsOptionsCheckbox
	.label-description::after {
	height: 16px;
	width: 16px;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-formContent.horozintalForm {
	padding-bottom: 0;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsOptionsCheckbox
	.label-description {
	padding-left: var(--spacing10);
	line-height: 28px;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsOptionsCheckbox
	.description,
.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsContent
	p {
	margin: 0;
	line-height: 28px;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsContent.horizontal {
	font-size: 12px;
	margin: var(--spacing10) 0 0;
	display: flex;
	justify-content: flex-end;
	flex-flow: row-reverse;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissionsContent.horizontal
	span {
	font-size: 14px !important;
	line-height: 14px !important;
}

#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	p {
	width: 100%;
}

.ml-embedded
	#mlb2-11072124.ml-form-embedContainer
	.ml-form-embedWrapper
	.ml-form-embedBody
	.ml-form-embedPermissions
	.ml-form-embedPermissionsContent
	a {
	color: var(--color-white);
	font-size: inherit;
	text-decoration: none;
}

/* footer links list */
.links-columns {
	min-width: 250px;
	margin: 0px;
}

/* Land Acknowledgement button */
.btn-la {
	background-color: transparent;
	color: var(--color-white);
	border: none;
	margin: var(--spacing40) 0;
	font-size: var(--font21);
}

/* hover effect on all footer links */
.btn-la:hover {
	border-bottom: 2px solid var(--color-white);
}

/* Form Styles */
.footer-form {
	text-align: center;
	padding: var(--spacing20);
}

.text-input {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.text-input input {
	height: 50px;
	width: 100%;
	max-width: 450px;
	border-radius: 10px;
	border: none;
}

#newsletter-input {
	padding-left: 24px;
}

/* bottom links */
.bottom-links {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.social-svgs {
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}

/* MODAL */

/* positioning for body to stop scroll when modal is open */
.fixed {
	overflow: hidden;
}

/* modal overlay */
.overlay-la {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	z-index: 1;
}

.modal {
	width: 90%;
	max-width: 1100px;
	max-height: 90vh;
	margin: 0 auto;
	/* was 26px and replaced with variable */
	padding: var(--spacing20);
	position: fixed;
	left: 0;
	right: 0;
	top: 2vh;
	background-color: var(--body-background-color);
	color: var(--color-onyx);
	border: 1px solid var(--body-background-color);
	border-radius: 4px;
	z-index: 30;
}

.modal-wrapper {
	position: relative;
}

.modal-content {
	overflow-y: scroll;
	max-height: 65vh;
}

.modal-scroll {
	max-height: calc(85vh 300px);
}

/* modal text content */
.modal p {
	color: var(--color-onyx);
}

.modal-header h4 {
	text-align: center;
	color: var(--color-onyx);
	margin-bottom: 0px;
}

.btn-close {
	position: absolute;
	right: -10px;
	top: -40px;
}

.btn-close button {
	border: none;
	background-color: transparent;
}

.btn-close svg {
	width: 32px;
	height: 32px;
}

/* End of modal styles */

/* Policy Page Styles */
.policy-page #main-content {
	padding: var(--spacing80) var(--spacing20);
}

.policy-page #main-content h1,
.policy-page #main-content h2,
.policy-page #main-content h3,
.policy-page #main-content a {
	color: var(--color-onyx);
}

/* 
===================================
Media Queries (overriding styles for different screen sizes)

Note: Here we are using a mobile-first approach, so we start with the smallest screen size and work our way up.
Start by writing styles for the mobile version of the design on the lines above.
Anything that needs to change for larger screens should be added to the media queries below.

Feel free to change the min/max-width values to whatever you need. Use variables.
===================================
*/

/* Tablet Only */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.modal-scroll {
		padding: var(--spacing20);
	}
	.links-columns {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		width: 80%;
		margin: 0 auto;
	}
	.links-child {
		display: flex;
		flex-direction: column;
	}
}

/* Tablet and Larger */
@media screen and (min-width: 768px) {
	#nav-links-container {
		top: 80px;
	}

	.button-container {
		flex-direction: row;
	}

	/* Add styles that apply to table and desktop */
}
/* desktop */
@media (min-width: 1024px) {
	p {
		font-size: var(--font21);
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height26);
		color: var(--color-onyx);
	}

	time {
		font-size: var(--font21);
	}

	.text-input {
		display: flex;
		flex-direction: column;
		align-items: start;
	}
	.text-input .button2 {
		margin-left: 0px;
	}

	form p {
		width: 100%;
		padding-bottom: var(--spacing10);
	}

	/* Hero Styles */
	#hero {
		padding-top: 0;
	}

	#hero p {
		line-height: var(--line-height32);
	}

	#hero #hero-heading {
		font-size: var(--font56);
		line-height: var(--line-height58);
	}

	/* Footer styles */
	.wrapper {
		width: var(--desktop-wrapper-width);
	}

	.footer-main {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.footer-main h4 {
		font-size: var(--font36);
		font-weight: var(--font-weight-bold);
		line-height: 0px;
		color: var(--color-white);
	}

	.footer-main p {
		margin: 0px;
	}

	footer li {
		text-align: left;
	}

	.footer-logo-btn {
		align-items: start;
	}

	.links-columns {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 30%;
		gap: 10%;
	}

	.links-child {
		display: flex;
		flex-direction: column;
		width: fit-content;
	}

	.bottom-links {
		flex-direction: row;
	}

	footer .policy-links {
		flex-direction: row;
	}

	.footer-form {
		width: 40%;
		text-align: left;
		padding: 0px;
	}

	.footer-form form {
		display: flex;
		flex-direction: column;
	}

	.footer-form form p {
		color: var(--color-white);
		width: 85%;
	}

	.text-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 5%;
	}

	/* removing margin on button to align with content */
	.text-input .button2 {
		margin-right: 0px;
	}

	.modal-content {
		/* overflow-y: auto; */
		overflow: hidden;
		font-size: var(--font21);
	}

	.modal-scroll {
		padding: var(--spacing20);
	}

	/* End of footer styles */
}
@media screen and (min-width: 1049px) {
	/* header */
	/* hide menu bar for larger screen */
	#menu-container {
		display: none;
	}

	.desktop-menu {
		display: flex;
	}

	/* top bar positioning */
	header {
		position: relative;
	}

	.top-bar {
		position: absolute;
		width: 100%;
		z-index: 20;
		justify-content: center;
		padding: var(--spacing20) 0;
	}

	.policy-page .top-bar {
		position: relative;
	}

	.dp-wrapper .button2 {
		font-family: var(--main-font);
		display: flex;
		width: 194px;
		height: 50px;
		padding: 10px 40px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		border-radius: 10px;
		background: var(--button2-color);
		color: var(--color-white);
		cursor: pointer;
		border: none;
		font-size: var(--font21);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height32);
	}

	.button2:hover {
		background: var(--color-white);
		color: var(--color-dark-onyx);
		text-decoration: none;
	}

	.dp-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: var(--desktop-wrapper-width);
		max-width: var(--wrapper-width-max);
	}

	#hero .dp-wrapper {
		align-items: flex-start;
	}

	.logo-icon {
		min-width: 205px;
	}
	/* header */
}
/* desktop 1180px */
@media screen and (min-width: 1180px) {
	/* adjusting font sizes and styling for p tags (in figma this is body1)*/
	a {
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height26);
	}

	.button3 a {
		font-weight: var(--font-weight-bold);
	}
}

/* For larger screens */
@media (min-width: 1280px) {
	footer {
		padding: 0 var(--spacing65);
	}
}

/* For EVEN larger screens */
@media (min-width: 1500px) {
	.text-input {
		flex-direction: row;
		align-items: center;
	}
}