/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Three bands, matching the Figma frames:

     .mtfs-newsletter     gray strip, 86px — socials, contact, subscribe form
     .mtfs-footer__body   black-2 — brand column plus four link columns
     .mtfs-footer__bottom black-2 — divider rule and centred copyright

   The column grid is Bootstrap's; only the skin lives here.

   Responsive plan:
     < md (768)   link columns go two-up, brand column full width
     < lg (992)   the newsletter strip stacks and centres
   ========================================================================== */

.mtfs-footer {
	background: var(--mtfs-color-footer-bg);
	color: var(--mtfs-on-dark);
}

.mtfs-footer a {
	color: var(--mtfs-on-dark);
	text-decoration: none;
	transition: color var(--mtfs-transition);
}

.mtfs-footer a:hover {
	color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Newsletter strip
   -------------------------------------------------------------------------- */

/* The same hairline that separates the bands above it. */
.mtfs-newsletter {
	border-top: 1px solid var(--mtfs-color-border);
	background: var(--mtfs-newsletter-bg);
	color: var(--mtfs-white);
	font-size: var(--mtfs-size-body-2);
}

.mtfs-newsletter__inner {
	min-height: var(--mtfs-topbar-h);
	padding-block: var(--mtfs-space-3);
}

.mtfs-newsletter__link {
	color: var(--mtfs-white);
	text-decoration: none;
	white-space: nowrap;
}

.mtfs-newsletter__link:hover {
	color: var(--mtfs-white);
	opacity: 0.85;
}

/*
 * The subscribe form is a Contact Form 7 form, so we cannot control its
 * markup — .mtfsibra-form--inline lays whatever it renders out as one row: a
 * field that grows and a button that does not.
 */
.mtfs-newsletter__form .mtfsibra-form--inline form,
.mtfs-newsletter__form form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mtfs-space-3);
	margin: 0;
}

.mtfs-newsletter__form .wpcf7-form-control-wrap {
	flex: 1 1 var(--mtfs-newsletter-field-w);
	min-width: 220px;
	margin: 0;
}

/*
 * The design puts an envelope inside the left of the field. CF7 renders only
 * what its form template contains, so the icon is part of that template — it
 * comes from the theme's own registry, not from a background image, so it
 * recolours with the palette like every other icon on the page.
 *
 * When the wrapper is present it becomes the flex item, and the CF7 wrap
 * inside it goes back to being a plain block.
 */
.mtfs-newsletter__form .mtfs-newsletter__field {
	position: relative;
	flex: 1 1 var(--mtfs-newsletter-field-w);
	min-width: 220px;
}

.mtfs-newsletter__form .mtfs-newsletter__field .wpcf7-form-control-wrap {
	flex: none;
	min-width: 0;
}

.mtfs-newsletter__field > .mtfs-icon {
	position: absolute;
	top: 50%;
	left: var(--mtfs-space-4);
	transform: translateY(-50%);
	color: var(--mtfs-on-dark-muted);

	/*
	 * Chrome paints a form control's own background after the positioned
	 * descendants around it, so the icon disappeared under the field's dark
	 * fill. Any explicit z-index puts it back on top.
	 */
	z-index: 1;

	/* Clicking the icon should land in the field behind it. */
	pointer-events: none;
}

.mtfs-newsletter__field .form-control {
	padding-left: var(--mtfs-field-icon-pad);
}

.mtfs-newsletter__form .form-control {
	height: var(--mtfs-cta-h);
	border-color: transparent;
	background: var(--mtfs-black-2);
	color: var(--mtfs-white);
}

.mtfs-newsletter__form .form-control::placeholder {
	color: var(--mtfs-on-dark-muted);
	opacity: 1;
}

.mtfs-newsletter__form .form-control:focus {
	border-color: var(--mtfs-color-primary);
	background: var(--mtfs-black-2);
	color: var(--mtfs-white);
}

.mtfs-newsletter__form .wpcf7-submit {
	height: var(--mtfs-cta-h);
	padding-inline: var(--mtfs-space-6);
	white-space: nowrap;
}

/* CF7's response line would otherwise push the strip taller than the design. */
.mtfs-newsletter__form .wpcf7-response-output {
	flex: 1 0 100%;
	margin-top: var(--mtfs-space-2) !important;
	color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Footer body
   -------------------------------------------------------------------------- */

.mtfs-footer__body {
	padding-block: var(--mtfs-space-8);
}

.mtfs-footer__brand .mtfs-logo__img {
	width: 190px;
}

.mtfs-footer__tagline {
	max-width: 340px;
	margin: var(--mtfs-space-5) 0 0;
	font-size: var(--mtfs-size-body-2);
	color: var(--mtfs-on-dark);
}

.mtfs-footer__heading {
	margin-bottom: var(--mtfs-space-5);
	font-size: var(--mtfs-size-h4);
	font-weight: var(--mtfs-weight-h4);
	color: var(--mtfs-white);
}

.mtfs-footer__menu li + li {
	margin-top: var(--mtfs-space-3);
}

/* The hover underline itself lives in 08-components.css, shared with the
   header nav. inline-block is what gives it something to measure: an inline
   <a> wrapping onto two lines would draw the rule across the whole box. */
.mtfs-footer__menu a {
	display: inline-block;
	font-size: var(--mtfs-size-body-2);
}


/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.mtfs-footer__bottom .container {
	padding-block: var(--mtfs-space-5);
	border-top: 1px solid var(--mtfs-border-on-dark);
}

.mtfs-footer__copyright {
	margin: 0;
	font-size: var(--mtfs-size-body-2);
	text-align: center;
	color: var(--mtfs-on-dark);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.mtfs-newsletter__inner {
		min-height: 0;
		padding-block: var(--mtfs-space-4);
	}

	.mtfs-newsletter__form {
		width: 100%;
	}

	.mtfs-newsletter__form form {
		justify-content: center;
	}

	.mtfs-footer__body {
		padding-block: var(--mtfs-space-7);
	}

	.mtfs-footer__tagline {
		max-width: none;
	}
}

@media (max-width: 575.98px) {

	.mtfs-newsletter {
		font-size: var(--mtfs-size-body-3);
	}

	.mtfs-newsletter__form .wpcf7-submit {
		width: 100%;
	}

	.mtfs-footer__heading {
		font-size: var(--mtfs-size-h5);
		margin-bottom: var(--mtfs-space-4);
	}
}