/**
 * wyg-css-newsletter
 *
 * WHAT: The newsletter strip's residue -- the mono field labels, the placeholder
 * color, the field minimum height, the trailing arrow on the submit button, and
 * the focus ring on the Tan surface. Everything Elementor exposes -- the Tan
 * background, the boxed width, the padding, the flex row, the gap, the heading
 * and blurb typography and color, the button fill -- is set on the containers
 * and widgets, not here.
 *
 * WHY: the same four gaps as wyg-css-contact. Elementor's font control offers no
 * generic monospace and no way to enter a stack, so the mono label cannot be set
 * on the widget; there is no control for ::placeholder; and a pseudo-element
 * arrow is not expressible in the UI at all.
 *
 * RTL: every property with a side is logical. The arrow flips to a left arrow
 * under [dir="rtl"], matching wyg-css-contact.
 *
 * COLOR NOTE, measured 2026-08-30: on Tan #E1C29A the site's Muted Ink #4C5A61
 * gives 4.21 and fails AA for the 13px label, so labels and blurb use Body Ink
 * #26363F (7.36). The sitewide Dark Red focus ring gives only 3.61 on Tan, so
 * this component uses Dark Blue (4.97) instead -- the same substitution, for the
 * same reason, that wyg-css-footer section 5 makes with Tan on the dark footer.
 * No compliance claim; this is a legibility fix.
 *
 * GOTCHA: every selector is at least two classes deep, because the kit emits
 * .elementor-kit-6 a / label / input at 0,1,1 and a single-class rule loses to
 * it silently. Same reason as wyg-css-header and wyg-css-footer.
 */

.wyg-newsletter__form.wyg-newsletter__form .elementor-field-label {
	font-family: var( --wyg-mono );
}

.wyg-newsletter__form.wyg-newsletter__form .elementor-field-group .elementor-field-textual {
	min-block-size: 44px;
	font-size: 0.9375rem;
	line-height: normal;
}

.wyg-newsletter__form.wyg-newsletter__form .elementor-field-textual::placeholder {
	color: #8B948F;
	opacity: 1;
}

.wyg-newsletter__form.wyg-newsletter__form .elementor-field-textual:hover {
	border-color: var( --e-global-color-d89acb7d );
}

/* An auto-width submit, so the button sits beside the fields rather than
   stretching to the form's full width. */
.wyg-newsletter__form.wyg-newsletter__form .elementor-field-type-submit.elementor-field-type-submit .elementor-button {
	flex-basis: auto;
	inline-size: auto;
}

.wyg-newsletter__form.wyg-newsletter__form .elementor-button-content-wrapper::after {
	content: "\2192";
	margin-inline-start: 0.5rem;
	font-size: 1.05em;
	line-height: 1;
}

[dir="rtl"] .wyg-newsletter__form.wyg-newsletter__form .elementor-button-content-wrapper::after {
	content: "\2190";
}

/* Stacked, the button takes the full width like the fields above it. */
@media ( max-width: 767px ) {

	.wyg-newsletter__form.wyg-newsletter__form .elementor-field-type-submit.elementor-field-type-submit .elementor-button {
		inline-size: 100%;
	}
}

.wyg-newsletter a:focus-visible,
.wyg-newsletter button:focus-visible,
.wyg-newsletter input:focus-visible {
	outline: 3px solid var( --e-global-color-primary );
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. The two columns
   NOT set here, deliberately. The column split is native: the text container
   carries width 46% with Flex Grow 0, and the form widget takes the remainder.
   The trap worth recording -- Elementor's container width control emits
   `--width` but pairs it with `--flex-grow: 1` by default, so a column set to
   36% rendered at 51%. `_flex_grow: 0` is the fix, and it is a real control
   (`_flex_size: custom` exposes `_flex_grow` and `_flex_shrink`), not CSS.
   Wrapping the form in its own container to get the same control is NOT the
   answer: it rendered 480px tall against its own 93px of content.
   -------------------------------------------------------------------------- */


/* The form widget cannot take a container's width control, so its basis is set
   here. The text column beside it is native (width 46%, Flex Grow 0). Removing
   this line collapsed the form to 407px against the design's 664px. */

@media ( min-width: 768px ) {

	.wyg-newsletter .wyg-newsletter__form {
		flex: 1 1 30rem;
	}
}

/* --------------------------------------------------------------------------
   7. The supporting line
   A measure, so the sentence breaks where the design broke it rather than
   running the full width of the column, and no trailing margin on the
   paragraph the editor wraps it in -- the column is bottom-aligned, so a
   14.4px margin under the text pushed the whole block up off the baseline it
   shares with the form.
   -------------------------------------------------------------------------- */

/* Doubled class: Elementor's own `max-width: 100%` on a container's widget
   child is 0,2,0 and loads after this file, so 0,2,0 here loses silently.
   Measured 2026-08-30. */
/* The measure sits on the paragraph, not on the widget wrapper. Elementor
   holds max-width: 100% on the wrapper and wins there against 0,4,0 and
   against both the logical and physical property -- measured 2026-08-30.
   The paragraph carries no competing declaration, and constraining it gives
   the same two-line break the design was approved on. */
.wyg-newsletter .wyg-newsletter__blurb.wyg-newsletter__blurb p {
	max-width: 46ch;
}

.wyg-newsletter .wyg-newsletter__blurb.wyg-newsletter__blurb.wyg-newsletter__blurb p:last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   8. The form row sits on one baseline
   Elementor stretches every field group to the row's height, so the submit --
   which has no label above it -- rendered 56px tall against the fields' 46px
   and floated off their line. Bottom-align the row and hold the button to the
   fields' height.
   -------------------------------------------------------------------------- */

.wyg-newsletter__form.wyg-newsletter__form .elementor-form-fields-wrapper {
	align-items: flex-end;
}

.wyg-newsletter__form.wyg-newsletter__form .elementor-field-type-submit.elementor-field-type-submit .elementor-button {
	min-block-size: 46px;
	padding-block: 0;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   9. Not on the Contact page
   The Contact form now carries its own newsletter opt-in, so the strip below
   it would be a second sign-up on the same page. Hidden rather than
   conditionally rendered: Elementor Pro Display Conditions offer no "this
   specific page" condition (only page title, parent, categories, and a From
   URL condition that actually tests the HTTP referrer), so three page IDs
   cannot be expressed natively. display:none also removes it from the
   accessibility tree, and it is cache-safe -- the footer is a Theme Builder
   template whose rendered HTML Elementor caches per template, so conditional
   rendering would have to fight that cache. EN 120, HE 760, AR 757.
   -------------------------------------------------------------------------- */

body.page-id-120 .wyg-newsletter,
body.page-id-760 .wyg-newsletter,
body.page-id-757 .wyg-newsletter {
	display: none;
}

/* --------------------------------------------------------------------------
   10. The submit sizes to its own text, and the fields share what is left
   Measured 2026-08-30 at 1497px: with the submit group on a 20% column the
   button, which is auto-width, was 159px inside a 132px content box and
   overflowed it by 27px. It finished 21px from the band edge while the
   heading sat 49px from the other one, so the strip read as lopsided.
   Elementor offers no column value that fits a button of arbitrary width,
   so the submit is sized to its content and the two fields take the rest.
   Direction-agnostic, so it mirrors under RTL unchanged.
   -------------------------------------------------------------------------- */

@media ( min-width: 768px ) {

	.wyg-newsletter__form.wyg-newsletter__form .elementor-field-type-submit {
		flex: 0 0 auto;
		inline-size: auto;
	}

	/* .elementor-field-group is doing real work in these two selectors: the
	   honeypot's wrapper also carries .elementor-field-type-text but NOT
	   .elementor-field-group, so without it the hidden field became a fourth
	   flex item and took an equal share of the row -- the visible fields
	   dropped from 263px to 190px. Measured 2026-08-30. */
	.wyg-newsletter__form.wyg-newsletter__form .elementor-field-group.elementor-field-type-text,
	.wyg-newsletter__form.wyg-newsletter__form .elementor-field-group.elementor-field-type-email {
		flex: 1 1 0;
		inline-size: auto;
	}
}