/**
 * wyg-css-contact
 *
 * WHAT: The Contact page's own residue -- the information cards' label and body
 * treatment, the mono form labels, and an auto-width submit button. Everything
 * else on that page is set through Elementor: the containers' boxed width,
 * padding, flex direction, gap, wrap and per-breakpoint column widths; the card
 * backgrounds and borders, each bound to a Global Color; the heading
 * typography, bound to WYG / Display and WYG / Heading; the social icons' size,
 * shape, spacing, border and both color states; and every form field's
 * typography, color, border, radius and padding, which live in Site Settings ->
 * Theme Style -> Form Fields and therefore serve any future form as well as
 * this one.
 *
 * WHY: architecture.md section 8 -- custom CSS lives in Fluent Snippets, one
 * snippet per concern, never in the child theme. This is the component snippet
 * for one page; wyg-css-masthead holds the part every page shares.
 *
 * 🚨 FIRST RULE: if Elementor has a control for it, set it on the widget, not
 * here. Anything styled from this file that the UI could have expressed will render
 * correctly on the front end and WRONGLY IN THE EDITOR -- the editor injects each
 * widget's default as an inline per-element rule at 0,3,0, which ties a two-class
 * component rule and wins on source order. Measured 2026-08-19: the accent card's
 * body text was correct on the site and unreadable dark-on-dark in the editor.
 * That is why the card colors and sizes moved onto the widgets and only the
 * residue is left below.
 *
 * SECOND RULE: every selector that remains doubles its own class, and that is
 * load-bearing.
 * Measured on this install 2026-08-19: the generated post-<id>.css emits
 * `.elementor-widget-heading .elementor-heading-title { font-family: var(
 * --e-global-typography-primary-font-family ), Sans-serif; font-size: var(
 * --e-global-typography-primary-font-size ) }` on every page that contains a
 * heading widget. That is specificity 0,2,0 -- identical to a component rule
 * written as `.wyg-card__label .elementor-heading-title` -- and the per-post
 * stylesheet is enqueued after the snippet stylesheets, so at equal specificity
 * it wins on source order. The first build of this file was written the obvious
 * way and every card label rendered in Nunito Sans at 19px instead of mono at
 * 13px. Doubling the class takes the component rule to 0,3,0 and it holds.
 * The ceiling is 0,6,0. A form widget with any style control set emits a
 * per-element rule like `.elementor-<page> .elementor-element.elementor-element-<id>
 * .elementor-field-group .elementor-field:not(.elementor-select-wrapper)` -- six
 * classes -- which is why the locked field's background needed six classes plus an
 * element to override while its padding, contested only by the kit's 0,3,1 rule,
 * did not. Count the generated selector before choosing how many times to repeat
 * your own class; do not add repetitions blindly.
 *
 * This is the same trap as elementor-theme-builder-gotchas #3, reached from a
 * different direction: there the kit stylesheet outgunned a single class, here
 * it is the per-post stylesheet tying every heading to the Primary global.
 *
 * REJECTED: setting the form labels' font family in Site Settings. IBM Plex
 * Mono is a Google font and the control would accept it, but Elementor emits
 * `font-family: "IBM Plex Mono", Sans-serif` -- so if the webfont fails the
 * labels fall back to a sans face and the design changes shape rather than
 * degrading. The --wyg-mono token in wyg-css-global carries a real monospace
 * fallback chain. Same reasoning as the footer copyright, wyg-css-footer 2b.
 *
 * REJECTED: giving the submit button a percentage width. Elementor's button
 * width control offers 20 through 100 percent and nothing else -- there is no
 * auto. A fixed percentage on a button whose label is translated into Hebrew
 * and Arabic is a button that will be the wrong size in two of three languages.
 *
 * REJECTED: setting the two columns' proportions here. The first build used
 * flex-grow ratios with a flex-basis correction in CSS, which lost to
 * Elementor's own per-element rules and left the columns stacked. The design's
 * real rule is simpler than a ratio -- the information column is 380px and the
 * form takes what is left -- and both halves of that are container controls.
 * No CSS is needed and none is here.
 *
 * GOTCHAS: the card label and body classes sit on Elementor's widget wrapper,
 * not on the heading or the paragraph, so both are reached through a descendant
 * selector. The accent card's overrides are scoped under .wyg-card--accent and
 * must stay more specific than the base card rules above them.
 */

/* --------------------------------------------------------------------------
   1. Information cards -- residue only
   Color, size, weight, line-height and letter-spacing are set on the widgets
   themselves, not here. See the note at the top of this file: anything Elementor
   has a control for MUST be set through that control, or the editor and the front
   end disagree.
   -------------------------------------------------------------------------- */

/* The mono stack is the one part of the label the UI cannot express: Elementor's
   font control emits `font-family: "X", Sans-serif`, so a failed webfont would
   land on a sans face and change the design's shape rather than degrade it.
   --wyg-mono carries a real monospace fallback chain. Revisit once HO-36 self-
   hosts the fonts and the failure mode goes away. */

.wyg-card__label.wyg-card__label .elementor-heading-title {
	margin: 0;
	font-family: var( --wyg-mono );
	/* HO-39: see wyg-css-global section 5e for the token. */
	font-weight: var( --wyg-label-weight, 600 );
}

/* HO-40: he/ar font-size bump ("mono text items too small") -- see
   wyg-css-global section 5g for --wyg-label-size-scale. Scoped under the
   language attribute for extra specificity: this element's font-size is set
   by post-120.css at 0,4,0 (.elementor-120 .elementor-element.elementor-
   element-wygctk1 .elementor-heading-title), so a same-page doubled-class
   rule alone ties there and loses to source order (post-<id>.css loads after
   the snippet stylesheets). The lang attribute adds the extra c-tier needed
   to win outright; in English, undefined here, post-120.css's own 0.8125rem
   stands untouched. */

html[lang^="he"] .wyg-card__label.wyg-card__label .elementor-heading-title,
html[lang^="ar"] .wyg-card__label.wyg-card__label .elementor-heading-title {
	font-size: calc( 0.8125rem * var( --wyg-label-size-scale, 1 ) );
}

/* Elementor's text editor has no control for the spacing between paragraphs
   inside it, nor for link color within its content. */

.wyg-card__body.wyg-card__body p {
	margin: 0 0 0.55rem;
}

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

.wyg-card__body.wyg-card__body a {
	color: var( --e-global-color-accent );
	text-decoration: none;
	border-block-end: 1px solid var( --e-global-color-5f8039f0 );
}

.wyg-card__body.wyg-card__body a:hover {
	border-block-end-color: var( --e-global-color-accent );
}

.wyg-card--accent .wyg-card__body.wyg-card__body a {
	color: var( --e-global-color-a5f61243 );
	border-block-end-color: rgba( 225, 194, 154, .55 );
}

/* --------------------------------------------------------------------------
   2. Form
   The kit's Theme Style -> Form Fields carries the inputs. It does not carry
   the labels: Elementor Pro's own form stylesheet sets those at a specificity
   the kit's bare `label` rule cannot reach, so the label treatment is repeated
   here rather than split across two places where only half of it would apply.
   -------------------------------------------------------------------------- */

/* Elementor exposes no label-spacing control, and its own default puts the label
   flush against its field. The mockup sets 0.4rem of flex gap between them. */

.wyg-contact__form.wyg-contact__form .elementor-field-label {
	font-family: var( --wyg-mono );
	/* HO-39: this form label's own baseline is 400, lighter than the heading
	   components -- the fallback preserves that, only he/ar bump it. */
	font-weight: var( --wyg-label-weight, 400 );
}

/* HO-40: he/ar font-size bump, same reasoning as the card label above.
   post-120.css sets this field's font-size at 0,4,1 (.elementor-120
   .elementor-element.elementor-element-wygctffm .elementor-field-group >
   label), so a doubled .wyg-contact__form class plus [lang^=] ties at 0,4,1
   and still loses on source order -- one more repetition of the form class is
   the load-bearing part here, not just the lang attribute. */

html[lang^="he"] .wyg-contact__form.wyg-contact__form.wyg-contact__form .elementor-field-label,
html[lang^="ar"] .wyg-contact__form.wyg-contact__form.wyg-contact__form .elementor-field-label {
	font-size: calc( 0.8125rem * var( --wyg-label-size-scale, 1 ) );
}

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

/* Firefox applies its own opacity to ::placeholder; without the reset the
   placeholder renders lighter there than in the approved design. */

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

.wyg-contact__form.wyg-contact__form .elementor-field-type-textarea .elementor-field-textual {
	min-block-size: 132px;
	line-height: 1.55;
	resize: vertical;
}

.wyg-contact__form.wyg-contact__form .elementor-field-type-submit.elementor-field-type-submit .elementor-button {
	flex-basis: auto;
	inline-size: auto;
}

/* Elementor Pro puts `elementor-button-align-stretch` on the form widget whenever
   the Button Width control is left at its default, and that class carries
   `flex-basis: 100%` on the submit button at specificity 0,3,0. Setting the
   control to a real percentage does not remove the class -- measured on this
   install 2026-08-19, the class survived Button Width = 100 -- so the stretch
   has to be answered here, and answering `inline-size` alone is not enough
   because the width the button ends up with comes from the basis. */

/* The mockup's submit button carries a trailing arrow. It is decorative and
   must not be announced, so it is a pseudo-element with aria-hidden implied
   rather than a character in the button's label -- and it points with a logical
   property, so it turns to face inline-end under Hebrew and Arabic without a
   second rule. Elementor's own button icon control would put a real element in
   the accessible name instead. */

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

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

/* --------------------------------------------------------------------------
   4. Field sizing, and the focus ring Elementor removes
   Added 2026-08-19 after Todd compared the build against the mockup.
   -------------------------------------------------------------------------- */

/* 4a. One size for every control.
   The kit's Theme Style -> Form Fields sets 0.9375rem and it lands on the text
   inputs, but the select and the textarea were both computing 19px -- they were
   inheriting the body size through a rule the kit's cannot outrank. Measured
   2026-08-19: text 15px, email 15px, select 19px, textarea 19px, against a
   design where all four are 0.9375rem. */

.wyg-contact__form.wyg-contact__form .elementor-field-group .elementor-field-textual,
.wyg-contact__form.wyg-contact__form .elementor-field-group select.elementor-field-textual,
.wyg-contact__form.wyg-contact__form .elementor-field-group textarea.elementor-field-textual {
	font-size: 0.9375rem;
	line-height: normal;
}

/* line-height is `normal`, not a number: the mockup leaves it unset on the
   fields, so they render at the browser's own ratio and measure 47px. Any
   explicit ratio moves them -- 1.3 gave 46px, and inheriting the body's 1.6
   gave 50px. Matching the design here means matching the absence of a value.

   The mockup's fields are 44px minimum: 0.75rem of padding top and bottom on a
   15px line. Without the line-height above they inherit the body's 1.6 and come
   out 50px, which is where the "tighter overall" impression came from -- the
   fields were taller and the gaps between them smaller. */

.wyg-contact__form.wyg-contact__form .elementor-field-group .elementor-field-textual {
	min-block-size: 44px;
}

.wyg-contact__form.wyg-contact__form .elementor-field-type-textarea .elementor-field-textual {
	min-block-size: 132px;
	line-height: 1.55;
}

/* 4b. The focus ring Elementor removes now lives in wyg-css-global, because it
   is not a Contact concern -- Elementor Pro zeroes the outline on every form
   field on the site. Moved there 2026-08-19 at Todd's call. */

/* The field-group class is in these selectors purely for specificity. post-<id>.css
   emits `.elementor-widget-form .elementor-field-group .elementor-field { line-height:
   var( --e-global-typography-text-line-height ) }` at 0,3,0 and loads after the snippet
   stylesheets, so a three-class component rule ties and loses on source order -- the
   text inputs stayed at 24px line-height and 50px tall while the select, which that
   rule does not reach, correctly measured 47px. Measured 2026-08-19. This is the third
   place on this page where Elementor's generated CSS had to be outranked; see the
   warning at the top of this file. */

/* --------------------------------------------------------------------------
   5. The locked subject field
   Rendered by wyg-contact-subject-deeplink when a page links in with a subject
   that is not one of the dropdown's options. Two pieces: the field itself, and
   the link back to the ordinary dropdown.
   -------------------------------------------------------------------------- */

.wyg-contact__form.wyg-contact__form.wyg-contact__form .elementor-field-group input.elementor-field.wyg-subject-locked {
	background-color: #EDE7DC;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234C5A61'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: left 0.9rem center;
	padding-inline-start: 2.1rem;
	cursor: default;
}

/* The lock is drawn as a background image rather than a ::before, because the
   element is an <input> and replaced elements have no pseudo-elements. Drawn
   rather than typed as an emoji: a character in the field would be read out by
   a screen reader as part of the value, and the field already carries
   aria-readonly. */

[dir="rtl"] .wyg-contact__form.wyg-contact__form.wyg-contact__form .elementor-field-group input.elementor-field.wyg-subject-locked {
	background-position: right 0.9rem center;
}

.wyg-contact__form.wyg-contact__form .wyg-subject-reset {
	display: inline-block;
	margin-block-start: 0.55rem;
	font-family: var( --wyg-mono );
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var( --e-global-color-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
	min-block-size: 36px;
}

.wyg-contact__form.wyg-contact__form .wyg-subject-reset:hover {
	color: #7C432F;
}

/* --------------------------------------------------------------------------
   6. Submission messages
   The success, error and validation messages Elementor prints after a submit.
   -------------------------------------------------------------------------- */

/* Measured 2026-08-19: these rendered at 19px, the body size, inside a form
   whose every other element is 15px -- so the confirmation arrived visibly
   larger than the labels and fields it sits under. The mockup never designed a
   success state, since its form was inert, so the reference here is the form's
   own scale rather than a mockup value. */

.wyg-contact__form.wyg-contact__form .elementor-message {
	margin-block-start: 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --e-global-color-text );
}

/* Elementor draws the tick and the warning mark as SVG rather than as text, so
   they scale from font-size and need no separate rule. The colors it gives them
   -- green for success, red for failure -- are deliberately left alone: they are
   status indicators, not brand surfaces, and recoloring them into the palette
   would cost the one signal that distinguishes the two states at a glance. */

.wyg-contact__form.wyg-contact__form .elementor-message-danger {
	color: var( --e-global-color-accent );
}

/* --------------------------------------------------------------------------
   The newsletter opt-in checkbox
   Elementor applies the form's label typography to labels inside a field
   subgroup as well as to real field labels, so the acceptance text rendered
   UPPERCASE at 19px -- reading as a section heading rather than as an option
   beside a checkbox. Measured 2026-08-31.

   This is option text, not a label, so it takes the field text treatment
   instead: 0.9375rem, sentence case, Body Ink, the same as what someone types
   into the inputs above it.

   align-items is flex-start rather than center because the sentence wraps to
   two lines on a narrow screen, and centering would then float the box
   against the middle of the block instead of the first line.
   -------------------------------------------------------------------------- */

.wyg-contact__form.wyg-contact__form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.wyg-contact__form.wyg-contact__form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 17px;
	block-size: 17px;
	margin-block-start: 0.12rem;
	accent-color: var( --e-global-color-primary );
	cursor: pointer;
}

/* Tripled, like the rules above it: the widget's own label typography is
   emitted per-post and loads after this file. */
.wyg-contact__form.wyg-contact__form.wyg-contact__form .elementor-field-type-acceptance label {
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	/* No color here. The widget's own label color (Muted Ink, bound to a global)
	   is emitted per-post and wins even against this tripled selector -- tested
	   2026-08-31. It is the right color anyway, and matches the form's other
	   secondary text, so the declaration is left out rather than fought for. */
	cursor: pointer;
}