/*
 * Global footer. design/DESIGN-SYSTEM.md §4.15, PAGE-STRUCTURE §9.
 *
 * The signature element is the right-hand red panel: it bleeds UPWARD past the
 * footer's top edge via a negative margin and gets a slanted top edge from
 * clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%).
 *
 * Fixes applied from DESIGN-SYSTEM §8: links are sentence case (item 14), the
 * copyright keeps only weight 500 / clamp(12,0.8vw,15) (item 13), the social gap
 * is 22px not 22.337915420532227px (item 16), and the e-mail link stays italic
 * like every other Barlow in the design (item 15).
 */

.sp-footer {
	position: relative;
	background: var(--sp-bg-deep);
	overflow: visible;
}

.sp-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
	max-width: var(--sp-container);
	margin-inline: auto;
	padding: clamp(28px, 3vw, 52px) var(--sp-gutter) 0;
}

/* ------------------------------------------------------------ left column */

.sp-footer__left {
	padding-bottom: clamp(18px, 2vw, 32px);
}

.sp-footer__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
}

.sp-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-footer__col li + li {
	margin-top: 0;
}

.sp-footer__link {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 600;
	font-size: var(--sp-fs-footer-link);
	line-height: 1.2;
	text-align: left;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-footer__link:hover,
.sp-footer__link:focus {
	color: var(--sp-red);
}

.sp-footer__cta {
	margin-top: clamp(28px, 3.4vw, 52px);
	font-size: var(--sp-fs-footer-cta);
	padding: var(--sp-3) var(--sp-12);
}

.sp-footer__copy {
	margin-top: clamp(22px, 2.6vw, 40px);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--sp-fs-copyright);
	color: var(--sp-text-50);
}

/* -------------------------------------------------------- red bleed panel */

.sp-footer__panel {
	position: relative;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.2vw, 34px);
	/*
	 * -(grid padding-top) pulls the panel flush with the footer's top edge;
	 * --sp-footer-bleed is how far past it the panel then rises. layout.css
	 * gives the last section that much extra bottom padding to sit clear of it.
	 */
	margin-top: calc(-1 * (clamp(28px, 3vw, 52px) + var(--sp-footer-bleed)));
	padding: clamp(56px, 6vw, 100px) clamp(24px, 2.6vw, 46px) clamp(40px, 4.4vw, 74px);
	background: var(--sp-red);
	clip-path: var(--sp-clip-footer);
	color: var(--sp-text);
	text-align: center;
}

.sp-footer__lockup {
	width: min(100%, 380px);
	height: auto;
}

.sp-footer__contact {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sp-6);
}

.sp-footer__avatar {
	position: relative;
	flex: 0 0 auto;
	width: 94px;
	height: 94px;
}

.sp-footer__avatar img {
	width: 94px;
	height: 94px;
	border-radius: var(--sp-radius-circle);
	object-fit: cover;
	object-position: 50% 22%;
}

.sp-footer__dot {
	position: absolute;
	right: 2px;
	bottom: 6px;
	width: 19px;
	height: 19px;
	border-radius: var(--sp-radius-circle);
	background: var(--sp-green);
	border: 2px solid var(--sp-red);
}

.sp-footer__rows {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	text-align: left;
}

.sp-footer__row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.sp-footer__row .sp-icon {
	flex-shrink: 0;
	width: 29px;
	height: 29px;
	color: var(--sp-text);
}

.sp-footer__phone {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-snug);
	color: var(--sp-text);
}

.sp-footer__hours {
	display: block;
	font-family: var(--sp-font-body);
	font-weight: 400;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-snug);
	color: var(--sp-text);
}

.sp-footer__email {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 600;
	font-size: var(--sp-fs-xl);
	color: var(--sp-text);
	text-decoration: underline;
}

.sp-footer__email:hover,
.sp-footer__email:focus {
	color: var(--sp-bg-deep);
}

.sp-footer__address {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-snug);
	color: var(--sp-text);
}

/* --------------------------------------------------------------- social */

/*
 * Per design/OVERRIDES.md an icon with no URL must not render at all, so this
 * row is absent from the DOM until simpulse_social_links() returns something.
 */
.sp-footer__social {
	display: flex;
	align-items: center;
	gap: 22px;
}

.sp-footer__social a {
	display: inline-flex;
	color: var(--sp-text);
	line-height: 0;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-footer__social a:hover,
.sp-footer__social a:focus {
	color: var(--sp-bg-deep);
}

.sp-footer__social .sp-icon {
	width: 45px;
	height: 45px;
}