/* =============================================================================
   TinySpacer — newsletter.css
   -----------------------------------------------------------------------------
   The homepage Newsletter CTA band (template-parts/home/newsletter.php).

   Scope: this file styles ONLY the .ts-home-newsletter section band and a few
   section-specific tweaks. The centered card itself (fill, radius, title, text,
   inline form, note) comes from the shared .ts-newsletter component in
   components.css — this file does NOT redefine it.

   Mobile-first. Min-width media queries only. No framework.

   Contents:
     1. Section band (soft sage)
     2. Card spacing rhythm
     3. Static-form helpers (submit + honeypot)
     4. Plugin form wrapper
   ========================================================================== */

/* =============================================================================
   1. SECTION BAND
   -----------------------------------------------------------------------------
   Soft sage background as specified (#F5F8F4 == --ts-color-surface-alt, which
   resolves to --ts-sage-050). Uses the token so it stays in sync with the
   design system.
   ========================================================================== */

.ts-home-newsletter {
	background-color: var(--ts-color-surface-alt);
}

/* =============================================================================
   2. CARD SPACING RHYTHM
   -----------------------------------------------------------------------------
   The base .ts-newsletter is a flex column with a uniform gap. Group the
   heading + copy together and let the form/note breathe a little more.
   ========================================================================== */

.ts-home-newsletter__card .ts-newsletter__content {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
}

.ts-home-newsletter__card .ts-newsletter__title {
	margin: 0;
}

.ts-home-newsletter__card .ts-newsletter__text {
	margin: 0;
}

/* Slightly more separation before the form on this larger, standalone band. */
.ts-home-newsletter__form {
	margin-block-start: var(--ts-space-2);
}

.ts-home-newsletter__card .ts-newsletter__note {
	margin: 0;
}

/* =============================================================================
   3. STATIC-FORM HELPERS
   ========================================================================== */

/* Keep the submit button from shrinking below its label width. */
.ts-home-newsletter__form .ts-newsletter__submit {
	flex: 0 0 auto;
}

/* Visually hide the honeypot without removing it from the DOM (bots still
   fill it, humans and AT never reach it). */
.ts-home-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =============================================================================
   4. PLUGIN FORM WRAPPER
   -----------------------------------------------------------------------------
   When a newsletter plugin renders its own form, give it the same centered
   measure as the static form so either path looks consistent.
   ========================================================================== */

.ts-home-newsletter__plugin {
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
}