/**
 * Pattern: Newsletter Inset  (patterns/newsletter-inset.php)
 *
 * Figma node 6:1016 — Sky Tint, radius-16 inset card. Heading left, inline
 * form right (email pill + Sky Cyan "Subscribe" pill).
 *
 * ENGINE: Gravity Forms since 2026-08-21 (afternoon-r1) — embeds GF form 3
 * ("Newsletter"). The CF7 rules are kept below and are inert on a GF page;
 * delete them in the pass that deactivates contact-form-7.
 *
 * ✅ RESOLVED — the content gap this file used to carry a warning about. The
 * old CF7 form (870) had a Name field and its own <h2> baked into the form
 * template, against a Figma node that shows an email-only field, and editing
 * a CF7 form's content was outside a theme-only build's lane. Owning the form
 * in GF removed that constraint: form 3 is now a single email field with a
 * hidden label and a "you@company.com" placeholder, exactly 6:1016. The flex
 * row still wraps, so it survives a second field being added later.
 *
 * Auto-enqueued by inc/enqueue.php glob (dep on kd-global only).
 */

.blg-newsletter-inset {
	padding-block: var(--blg-space-lg); /* 40px */
}

.blg-newsletter-inset__card {
	background-color: var(--blg-color-tint);
	border-radius: var(--blg-radius-card); /* 16px */
	padding: var(--blg-space-lg) var(--blg-space-xl); /* 40px / 64px */
	gap: var(--blg-space-lg) !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.blg-newsletter-inset__heading {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: 1.5rem; /* 24px — Heading/H3 */
	color: var(--blg-color-contrast);
	margin: 0 !important;
	flex: 0 1 auto;
}

.blg-newsletter-inset__form {
	flex: 1 1 auto;
	max-width: 28rem;
	margin: 0 !important;
}

/* ── Gravity Forms (current engine) ────────────────────────────────────────
   The inset needs GF laid out as ONE inline row — email pill + Subscribe pill
   — not GF's default stacked block. Orbital's own spacing comes from its grid
   on .gform_fields, so the row is rebuilt here rather than variable-tuned:
   this is a layout override, not a skin, and GF exposes no "be inline"
   variable. The colour/size skin still goes through the --gf-* properties.  */

.blg-newsletter-inset__form .gform_wrapper.gform-theme {
	--gf-ctrl-bg-color: var(--blg-color-base);
	--gf-ctrl-border-width: 0;
	--gf-ctrl-radius: var(--blg-radius-pill);
	--gf-ctrl-color: var(--blg-color-contrast);
	--gf-ctrl-font-family: var(--blg-font-body);
	--gf-ctrl-size: var(--blg-size-body);
	--gf-ctrl-btn-bg-color-primary: var(--blg-color-accent); /* Sky Cyan */
	--gf-ctrl-btn-bg-color-hover-primary: var(--blg-color-secondary);
	--gf-ctrl-btn-color-primary: var(--blg-color-contrast); /* petrol on cyan */
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-font-family: var(--blg-font-heading);
	--gf-ctrl-btn-font-size: 0.9375rem; /* 15px */
	--gf-ctrl-btn-font-weight: var(--blg-fw-heading);
	--gf-ctrl-btn-radius: var(--blg-radius-pill);
	--gf-ctrl-btn-padding-x: 1.75em;
	--gf-ctrl-btn-padding-y: 0.75em;
}

/* One row: field grid and footer sit side by side instead of stacking. */
.blg-newsletter-inset__form .gform_wrapper form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-sm); /* 16px */
}

.blg-newsletter-inset__form .gform_wrapper .gform-body {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
}

.blg-newsletter-inset__form .gform_wrapper .gform_fields {
	display: block; /* single field — the grid would add a row gap for nothing */
}

.blg-newsletter-inset__form .gform_wrapper .gfield {
	margin: 0;
}

.blg-newsletter-inset__form .gform_wrapper .gfield input[type="email"] {
	width: 100%;
	padding: 0.75rem 1.25rem;
}

.blg-newsletter-inset__form .gform_wrapper .gform_footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.blg-newsletter-inset__form .gform_wrapper .gform_footer .gform_button {
	text-transform: uppercase;
	letter-spacing: 0.2px;
	white-space: nowrap;
	cursor: pointer;
}

/* GF's hidden_label placement already visually hides the label while keeping
   it as the control's accessible name (.gform-field-label is clipped, not
   display:none) — nothing to do here, stated so it isn't "fixed" into
   display:none, which WOULD strip the accessible name. */

/* Validation + the ajax confirmation take the full row rather than squeezing
   in beside the pills. */
.blg-newsletter-inset__form .gform_wrapper .gform_validation_errors,
.blg-newsletter-inset__form .gform_wrapper .gfield_validation_message,
.blg-newsletter-inset__form .gform_confirmation_message {
	flex: 1 1 100%;
	margin: 0;
	border-radius: var(--blg-radius-md);
	font-family: var(--blg-font-body);
	font-size: 0.875rem;
	box-shadow: none;
}

.blg-newsletter-inset__form .gform_confirmation_message {
	color: var(--blg-color-contrast);
}

@media (max-width: 768px) {
	.blg-newsletter-inset__form .gform_wrapper .gform_footer .gform_button {
		width: 100%;
	}
}

/* ── Contact Form 7 (legacy — inert while GF is the engine) ──────────────── */

.blg-newsletter-inset__form .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-sm); /* 16px */
}

.blg-newsletter-inset__form .wpcf7-form p {
	margin: 0;
	display: contents; /* the <p> wrapper shouldn't force a line-break between fields */
}

.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-text,
.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-email {
	background-color: var(--blg-color-base);
	border: none;
	border-radius: var(--blg-radius-pill);
	color: var(--blg-color-contrast);
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* explicit — the parent <label> zeroes its
		own font-size to visually hide its bare text node; this input must
		restate its own size so it isn't inherited down to 0 too. */
	padding: 0.75rem 1.25rem;
	flex: 1 1 12rem;
	min-width: 0;
}

.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-text:focus,
.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-email:focus {
	outline: 2px solid var(--blg-color-secondary);
	outline-offset: 2px;
}

.blg-newsletter-inset__form label {
	display: contents; /* CF7 wraps each field in a <label>text</label> — hide the
		text-label chrome here (placeholder carries the affordance) without
		hiding it from assistive tech; screen readers still read the label
		text as part of the control's accessible name. */
	color: transparent;
	font-size: 0;
}

.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-submit {
	display: inline-block;
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 0.9375rem; /* 15px */
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--blg-color-contrast); /* petrol text on Sky Cyan */
	background-color: var(--blg-color-accent);
	border: none;
	border-radius: var(--blg-radius-pill);
	padding: 0.75em 1.75em;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
	transition: background-color var(--blg-transition-base);
}

.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--blg-color-secondary);
	color: var(--blg-color-base);
}

.blg-newsletter-inset__form .wpcf7-response-output {
	flex: 1 1 100%;
	margin: 0;
	border-radius: var(--blg-radius-md);
}

/* ── Mobile (≤768px) — stack heading above the form ────────────────────────── */

@media (max-width: 768px) {
	.blg-newsletter-inset__card {
		flex-direction: column !important;
		align-items: stretch !important;
		text-align: center;
		padding: var(--blg-space-lg) var(--blg-space-md);
	}

	.blg-newsletter-inset__heading {
		text-align: center;
	}

	.blg-newsletter-inset__form {
		max-width: 100%;
	}

	.blg-newsletter-inset__form .wpcf7-form .wpcf7-form-control.wpcf7-submit {
		flex: 1 1 100%;
	}
}