/*
 * Footer. Measurements match the Squarespace footer (black "Subscribe" section) at 1440px and 390px.
 * Squarespace sizes text with the viewport: headings 1.44vw + 16px, body 0.24vw + 16px (both stop
 * growing at 1800px). Section padding is 3.3vmax, plus 17px at the bottom (and at the top on phones).
 * Squarespace uses vmax (the larger of width and height), which blows up in full-page screenshots and
 * tall windows, so this uses vw with a floor, and fixed sizes on phones (measured on a 390×900 screen;
 * real phones differ from Squarespace by about 1px).
 */
.sr-footer {
	--sr-footer-heading: min(calc(1.44vw + 16px), 41.92px);
	--sr-footer-text: min(calc(0.24vw + 16px), 20.32px);
	--sr-footer-pad: max(3.3vw, 29.7px);
	padding: var(--sr-footer-pad) 3vw calc(var(--sr-footer-pad) + 17px);
	font-size: var(--sr-footer-text);
	line-height: 1.6;
}

@media (max-width: 767px) {
	.sr-footer {
		--sr-footer-heading: 28.96px;
		--sr-footer-text: 18.16px;
		padding: 46.7px 6vw;
	}
}

.sr-footer .sr-footer__title {
	max-width: 85%;
	margin: 0 auto;
	font-size: var(--sr-footer-heading);
	font-weight: 400;
	line-height: 1.2;
}

/* 83% rather than Squarespace's 85%: EB Garamond is about 2% narrower than Adobe Garamond, so this
   keeps the same line break on phones ("…address to / receive news and updates."). */
.sr-footer .sr-footer__intro {
	max-width: 83%;
	margin: 16px auto 0;
}

/* Newsletter form (Mailchimp for WP): three stacked 288px fields, then a crimson button. */
.sr-footer .mc4wp-form {
	width: 288px;
	max-width: 100%;
	margin: 40px auto 0;
}

.sr-footer .mc4wp-form-fields p {
	margin: 0 0 16px;
	text-align: center;
}

.sr-footer .mc4wp-form-fields p:last-child {
	margin-bottom: 0;
}

.sr-footer .mc4wp-form input:not([type="submit"]) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 66px;
	margin: 0;
	padding: 22.4px 32px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--sr-footer-text);
	line-height: 19.2px;
}

/* Squarespace's fields grow a few pixels taller on wide screens. */
@media (min-width: 1060px) {
	.sr-footer .mc4wp-form input:not([type="submit"]) {
		height: calc(1.285em + 46.8px);
	}
}

.sr-footer .mc4wp-form input::placeholder {
	color: rgba(0, 0, 0, 0.3);
	opacity: 1;
}

.sr-footer .mc4wp-form input[type="submit"] {
	display: inline-block;
	box-sizing: border-box;
	height: 64px;
	margin: 0;
	padding: 22.4px 32px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 19.2px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.sr-footer .mc4wp-form input[type="submit"]:hover {
	opacity: 0.8;
}

/* "We respect your privacy." and the praytimes.org credit: 16px, a blank line apart. */
.sr-footer .sr-footer__privacy,
.sr-footer .sr-footer__credit {
	margin: 0;
	font-size: 16px;
	line-height: 25.6px;
}

.sr-footer .sr-footer__privacy {
	margin-top: 74px;
}

.sr-footer .sr-footer__credit {
	margin-top: 25.6px;
}

.sr-footer .sr-footer__credit a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3.2px;
}

/* Social icons: 28px boxes 16px apart; the glyphs are 26px tall like Squarespace's. */
.sr-footer .sr-footer__social {
	gap: 16px;
	margin: 34px 0 0;
	padding: 0;
}

.sr-footer .sr-footer__social .wp-social-link,
.sr-footer .sr-footer__social .wp-social-link a {
	width: 28px;
	height: 28px;
	padding: 0;
}

.sr-footer .sr-footer__social .wp-social-link a {
	justify-content: center;
}

.sr-footer .sr-footer__social .wp-social-link svg {
	flex: none;
	width: 34.67px;
	height: 34.67px;
}

.sr-footer .sr-footer__social .wp-social-link-facebook a::before {
	flex: none;
	width: 33.2px;
	height: 33.2px;
	transform: translate(-0.5px, -0.7px);
}