/**
 * sm/pre-footer-1 — "Still need a hand?" support band.
 *
 * Near-black, full-bleed, copy on the left, a 340 px contact panel on the
 * right. It is the last thing on the page, so it is stuck to the footer: no
 * margin, no rule, no light strip between the two.
 *
 * Values are the policy band's, unchanged, so both surfaces read as one
 * component.
 */

.sm-pf {
	--pf-ink: #0a0a0a;
	--pf-green: #86efac;
	--pf-line: rgba(255, 255, 255, 0.14);
	position: relative;
	background: #16181a;
	color: #fff;
	padding: 56px 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.sm-pf *,
.sm-pf *::before,
.sm-pf *::after {
	box-sizing: border-box;
}

.sm-pf__in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: center;
}

/*
 * On a content page the band sits directly on the footer, so it has to share
 * the footer's content edge — the 1240 column, whatever the page gutter is —
 * not the policy document's 40 px reading gutter.
 */
.sm-pf.alignfull .sm-pf__in {
	max-width: 1276px;
	padding: 0 18px;
}

.sm-pf__copy {
	max-width: 52ch;
}

.sm-pf__title {
	font-family: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(30px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	color: #fff;
	text-wrap: balance;
}

.sm-pf__desc {
	margin: 14px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------- contact panel */

.sm-pf__panel {
	border: 1px solid var(--pf-line);
	background: rgba(255, 255, 255, 0.035);
	border-radius: 14px;
	padding: 18px;
}

.sm-pf__phone {
	display: inline-block;
	/*
	 * The number is the panel's anchor: 16px made the card read as a footnote
	 * next to the 36px title. Two steps up the theme scale (16 -> 18 -> 20).
	 */
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
}

.sm-pf__phone:hover {
	color: var(--pf-green);
}

.sm-pf__hours {
	/*
	 * One step up (11.5 -> 13) so the hours stay a qualifier of the number,
	 * not a caption under it.
	 */
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.sm-pf__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	/*
	 * The rule is the panel's mid-line, so it needs air on both sides, and
	 * more above than below: 26px above the HR, 18px below it. This is also
	 * what gives the panel its height against the copy column.
	 */
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sm-pf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #fff;
	color: var(--pf-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sm-pf__btn:hover {
	background: #f0f0f2;
	border-color: #f0f0f2;
	color: var(--pf-ink);
}

.sm-pf__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.sm-pf__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.sm-pf__btn:focus-visible,
.sm-pf__phone:focus-visible {
	outline: 2px solid var(--pf-green);
	outline-offset: 3px;
}

/* ------------------------------------------------- stuck to the footer */

/*
 * The band is the footer's intro, not a page section with air after it. The
 * theme's 72 px pre-footer gap and the empty paragraph the footer shortcode
 * leaves behind are both removed while a flush band is on the page.
 *
 * A band rendered with flush=false (the policy pages) keeps the page's own
 * pause before the footer.
 */
body:has(.sm-pf--flush) .sm-ftr {
	margin-top: 0;
}

body:has(.sm-pf--flush) footer.wp-block-template-part > p {
	display: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.sm-pf {
		padding: 40px 0 52px;
	}

	.sm-pf__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 0 24px;
	}

	.sm-pf__copy {
		max-width: none;
	}

	.sm-pf__panel {
		width: 100%;
	}

	.sm-pf__title {
		font-size: 32px;
	}

	.sm-pf__desc {
		font-size: 16px;
		line-height: 1.6;
	}
}

@media (max-width: 420px) {
	.sm-pf__actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-pf__btn {
		transition: none;
	}
}