/**
 * Footer
 * ============================================================================
 * Site footer with contact information, links, and newsletter signup.
 *
 * Load order: After base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens)
 * ============================================================================
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* stylelint-disable-next-line ssa/no-unscoped-type-selectors -- footer is a semantic element */
footer {
	background-color: var(--footer-bg);
	background-image: var(--footer-gradient);
}

footer .content {
	color: var(--footer-text);
	display: flex;
	max-width: 1280px;
	padding: 70px 50px 50px;
}

footer .content a,
footer .content .lhs a,
footer .content .text a {
	color: var(--footer-link);
}

footer .content a:hover,
footer .content .lhs a:hover,
footer .content .text a:hover {
	color: var(--footer-link);
	opacity: var(--footer-link-hover-opacity);
}

footer .content .lhs {
	display: inline-block;
	margin-right: 5%;
	width: 50%;
}

footer .content .lhs img {
	margin-bottom: 25px;
}

footer .content ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin-bottom: var(--space-5);
	padding-left: var(--space-0);
	width: 100%;
}

footer .content ul li {
	margin-right: 30px;
}

footer .content ul li:last-of-type {
	margin-right: var(--space-0);
}

footer .content .rhs {
	display: inline-block;
	width: 40%;
}

footer .content p {
	display: inline-block;
	margin: 0 30px 50px 0;
}

footer.fsb {
	background-color: var(--black);
	background-image: none;
	text-align: center;
}

footer.fsb .content {
	display: inline-block;
}

footer.fsb .footer-logo {
	height: auto;
	max-width: 150px;
	margin-bottom: 0.5em;
}

footer.fsb .content p {
	font-size: 13px;
	margin-bottom: 1em;
	width: 100%;
}

footer.fsb .content ul li {
	font-size: 14px;
	margin: 0 3px;
	width: fit-content;
}

footer.fsb .content .white-button {
	display: inline-block;
	font-size: 14px;
	background-color: var(--white);
	width: fit-content;
	margin: 20px auto;
	border: 1px solid var(--black);
	border-radius: var(--radius-sm);
	padding: 10px 15px;
	text-decoration: none;
	color: var(--black);
}

footer .hbspt-form {
	width: 50%;
}

/* ==========================================================================
   Responsive: Wide (max-width: 1280px)
   ========================================================================== */

@media (max-width: 1280px) {
	footer .content ul li {
		margin: 0 0 10px;
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	footer .content {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ==========================================================================
   Responsive: Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	footer .content ul {
		margin-bottom: var(--space-0);
	}

	footer .content .lhs {
		display: inline-block;
		margin: 0 0 40px;
		width: 100%;
	}

	footer .content {
		padding: var(--space-6);
		padding-left: 16px;
		padding-right: 16px;
		flex-direction: column;
	}

	footer .hbspt-form {
		width: 100%;
	}
}