/**
 * Footer design: Midnight — .esptb-ft-midnight
 *
 * A quiet, premium footer: the brand block and the "join us" card on the
 * left, up to three link lists on the right, a thin rail of contact chips
 * and socials, then the bottom bar. Depth comes from a soft radial glow of
 * the accent and fine hairlines. Every colour is a palette token (the
 * automatic tone is "dark"), so the design reads in all five tones; fonts
 * and sizes come from the kit tokens (the theme's settings).
 */

/* ----------------------------------------------------------------- depth */

/* Two soft accent glows over the footer colour… */
.espt-block-footer .esptb-ft-midnight {
	background-image:
		radial-gradient(780px 460px at 8% -70px, color-mix(in srgb, var(--ftc-accent) 16%, transparent), transparent 72%),
		radial-gradient(640px 380px at 100% 100%, color-mix(in srgb, var(--ftc-accent) 7%, transparent), transparent 72%);
	background-repeat: no-repeat;
}

/* …and a fine "horizon" hairline along the top edge, brightest above the
   brand block. */
.espt-block-footer .esptb-ft-midnight::before {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ftc-accent) 70%, transparent) 22%, var(--ftc-line) 58%, transparent);
	content: "";
	height: 1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

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

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid {
	display: grid;
	gap: calc(var(--ftc-gap) * 1.25);
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-lead {
	align-content: start;
	display: grid;
	gap: 26px;
	min-width: 0;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links {
	align-content: start;
	display: grid;
	gap: var(--ftc-gap);
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

/* ----------------------------------------------------------------- brand */

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-brand .esptb-ft-logo-text {
	font-size: clamp(26px, 1.3rem + 1.1vw, 36px);
	letter-spacing: -0.02em;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-brand .esptb-ft-about {
	font-size: calc(var(--ft-link-size, var(--fk-link-size)) * 1.07);
	line-height: 1.75;
	margin-top: 18px;
	max-width: 52ch;
}

/* The address: one quiet line under the about text. */
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-addr { margin-top: 16px; }

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-addr .esptb-ft-crow .esptb-ft-ic {
	background: transparent;
	border: 1px solid var(--ftc-line);
	border-radius: 50%;
	height: 34px;
	width: 34px;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-addr .esptb-ft-crow-t { padding-top: 6px; }

/* ------------------------------------------------------- community card */

.espt-block-footer .esptb-ft-midnight .esptb-ft-community {
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ftc-accent) 16%, transparent), transparent 62%),
		var(--ftc-card);
	border-color: color-mix(in srgb, var(--ftc-accent) 24%, var(--ftc-line));
	border-radius: calc(var(--ftc-radius) * 1.6);
	box-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.4);
	gap: 12px 16px;
	grid-template-columns: auto minmax(0, 1fr);
	max-width: 560px;
	padding: 18px;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-community-ic { box-shadow: 0 0 0 6px var(--ftc-accent-soft); }

.espt-block-footer .esptb-ft-midnight .esptb-ft-community-h {
	font-family: var(--fk-display);
	font-size: 1.07em;
}

/* ------------------------------------------------------------ link lists */

/* A small glowing marker before each list title. */
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links .esptb-ft-title > span::before,
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links .esptb-ft-toggle > span:first-child::before {
	background: var(--ftc-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--ftc-accent-soft);
	content: "";
	display: inline-block;
	height: 6px;
	margin-right: 11px;
	vertical-align: 0.2em;
	width: 6px;
}

/* Phones, folded: the rows sit flush between hairlines; the brand block
   and the card keep their air. A list without a title never folds — it
   gets the same row rhythm. */
.espt-block-footer .esptb-ft-midnight.is-folded .esptb-ft-mn-grid,
.espt-block-footer .esptb-ft-midnight.is-folded .esptb-ft-mn-links { row-gap: 0; }

.espt-block-footer .esptb-ft-midnight.is-folded .esptb-ft-mn-lead { padding-bottom: 30px; }
.espt-block-footer .esptb-ft-midnight.is-folded .esptb-ft-mn-links { border-top: 1px solid var(--ftc-line); }

.espt-block-footer .esptb-ft-midnight.is-folded .esptb-ft-mn-links > .esptb-ft-col:not(.is-foldable) {
	border-bottom: 1px solid var(--ftc-line);
	padding: 16px 0 18px;
}

/* ------------------------------------------------------------------ rail */

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-rail {
	background: color-mix(in srgb, var(--ftc-heading) 3%, transparent);
	border-top: 1px solid var(--ftc-line);
	padding: 22px 0;
}

/* Nothing above the rail: the horizon line is the only edge. */
.espt-block-footer .esptb-ft-midnight > .esptb-ft-mn-rail:first-child { border-top: 0; }

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-rail-in {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-reach,
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-follow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	min-width: 0;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-follow { justify-content: space-between; }

/* The small captions: the contact title and the social label. */
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-k,
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-follow .esptb-ft-social-h {
	color: var(--ftc-muted);
	flex: none;
	font-size: calc(var(--ft-link-size, var(--fk-link-size)) * 0.86);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	opacity: 1;
	text-transform: none;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-k { flex-basis: 100%; }

/* Contact chips: hairline pills; on phones each row fills the width. */
.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips {
	flex: 1 1 100%;
	gap: 10px;
	min-width: 0;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips .esptb-ft-crow {
	background: color-mix(in srgb, var(--ftc-heading) 4%, transparent);
	border: 1px solid var(--ftc-line);
	border-radius: 22px;
	flex: 1 1 auto;
	gap: 10px;
	min-height: 44px;
	padding: 5px 16px 5px 5px;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips .esptb-ft-ic {
	background: var(--ftc-accent-soft);
	color: var(--ftc-accent-ink);
	height: 32px;
	width: 32px;
}

.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips a.esptb-ft-crow:hover {
	background: color-mix(in srgb, var(--ftc-accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--ftc-accent-ink) 55%, transparent);
}

/* ---------------------------------------------------------------- phones */

/* Thumb-sized targets: each list link gets an invisible tap area of at
   least 40px (and never less than the gap around it) without changing the
   rhythm or the hover effect; the address line and the bottom bar's links
   reach 40px too. */
@media (max-width: 767px) {
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links .esptb-ft-links a { position: relative; }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links .esptb-ft-links a::after {
		content: "";
		inset: min(calc(var(--ft-link-gap, var(--fk-link-gap)) / -2), calc((100% - 40px) / 2)) 0;
		position: absolute;
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-addr a.esptb-ft-crow { min-height: 40px; }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-bottom .esptb-ft-policy a,
	.espt-block-footer .esptb-ft-midnight .esptb-ft-bottom .esptb-ft-credit a { padding: 9px 0; }
}

/* --------------------------------------------------------------- ≥ 768px */

@media (min-width: 768px) {
	/* The brand block and the card side by side, the lists in one row
	   under a hairline. */
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-lead.is-pair {
		align-items: start;
		column-gap: calc(var(--ftc-gap) * 1.25);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-links.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split > .esptb-ft-mn-links {
		border-top: 1px solid var(--ftc-line);
		padding-top: calc(var(--ftc-gap) * 1.25);
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-community a.esptb-ft-btn {
		grid-column: 2;
		justify-self: start;
		min-height: 42px;
		padding: 9px 20px;
	}

	/* The rail: chips on the left, socials on the right (they drop under
	   the chips when the row runs out of room). */
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-rail-in {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 40px;
		justify-content: space-between;
	}

	/* The caption sits level with the first row of chips, even when they
	   wrap onto a second row. */
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-reach {
		align-items: flex-start;
		flex: 0 1 auto;
		flex-wrap: nowrap;
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-k {
		flex-basis: auto;
		padding-top: 12px;
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips { flex: 0 1 auto; }
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-chips .esptb-ft-crow { flex: 0 1 auto; }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-follow {
		flex: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------- ≥ 1024px */

@media (min-width: 1024px) {
	/* The signature split: brand + card on the left, a hairline, the lists
	   on the right. Fewer lists give the brand side more room. */
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split {
		column-gap: calc(var(--ftc-gap) * 1.5);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split.is-lists-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split.is-lists-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split > .esptb-ft-mn-lead.is-pair { grid-template-columns: minmax(0, 1fr); }

	.espt-block-footer .esptb-ft-midnight .esptb-ft-mn-grid.is-split > .esptb-ft-mn-links {
		border-left: 1px solid var(--ftc-line);
		border-top: 0;
		padding-left: calc(var(--ftc-gap) * 1.5);
		padding-top: 4px;
	}
}