/**
 * Promo Form Modal styles.
 *
 * Intentionally minimal. The modal container relies on Foundation 6's `.reveal`
 * component (loaded by the theme). The subscribe form inside keeps its original
 * classes (.form, .input__container, .btn-green, .grid-x, .large, etc.) so it
 * inherits your footer styling automatically -- no duplication needed.
 */

.gfpm-reveal {
	max-width: 40rem;
}

.gfpm-reveal__title {
	margin-top: 0;
}

.gfpm-reveal__intro {
	margin-bottom: 1rem;
}

/*
 * If your footer form styling is scoped to the footer only (e.g.
 * `.site-footer .form.white`), mirror those declarations here under
 * `.gfpm-reveal` so the modal copy matches, for example:
 *
 * .gfpm-reveal .form.white .input__container { ... }
 * .gfpm-reveal .button.btn-green { ... }
 */

/* ------------------------------------------------------------------
 * Position variants.
 *
 * Foundation Reveal sets inline `top` and centers the modal horizontally
 * via auto margins. For corner positions we pin the element to the
 * viewport with `position: fixed` and zero out the margins. The `!important`
 * flags are needed because Foundation writes the `top` value inline when
 * it opens the modal.
 * ------------------------------------------------------------------ */

.gfpm-reveal.gfpm-pos-top-left,
.gfpm-reveal.gfpm-pos-top-right,
.gfpm-reveal.gfpm-pos-bottom-left,
.gfpm-reveal.gfpm-pos-bottom-right {
	position: fixed !important;
	margin: 0 !important;
	max-width: 28rem;
	width: calc(100% - 2rem);
}

.gfpm-reveal.gfpm-pos-top-left {
	top: 1rem !important;
	left: 1rem !important;
	right: auto !important;
	bottom: auto !important;
}

.gfpm-reveal.gfpm-pos-top-right {
	top: 1rem !important;
	right: 1rem !important;
	left: auto !important;
	bottom: auto !important;
}

.gfpm-reveal.gfpm-pos-bottom-left {
	bottom: 1rem !important;
	left: 1rem !important;
	top: auto !important;
	right: auto !important;
}

.gfpm-reveal.gfpm-pos-bottom-right {
	bottom: 1rem !important;
	right: 1rem !important;
	top: auto !important;
	left: auto !important;
}

/* ------------------------------------------------------------------
 * In-content (blog post) newsletter block.
 *
 * Injected roughly halfway through single-post content. It reuses the
 * footer form's own classes (.form, .input__container, .btn-green, etc.)
 * so the fields inherit site styling; these rules only handle the block's
 * own framing so it sits cleanly between paragraphs.
 * ------------------------------------------------------------------ */

.gfpm-inline {
	margin: 2.5rem 0;
	padding: 2rem;
	border-radius: 8px;
	overflow: hidden;
}

.gfpm-inline__inner {
	max-width: 40rem;
	margin: 0 auto;
}

.gfpm-inline__title {
	margin-top: 0;
}

.gfpm-inline__intro {
	margin-bottom: 1.5rem;
}

/*
 * `.bg-navy-dark` and `.white` come from the theme, matching the footer
 * signup section. If your theme scopes the form field styling narrowly
 * (e.g. only under the footer), mirror those declarations here under
 * `.gfpm-inline .form.white` so the in-content copy matches.
 */

@media screen and (min-width: 40em) {
	.gfpm-inline {
		padding: 3rem;
	}
}