/* RHSC contact form — layout.

   Deliberately small. Almost everything is inherited:
     - controls (inputs, textarea, the 32px pill) from assets/css/forms.css
     - fields, errors, buttons, nav and the honeypot from
       assets/css/pattern-styles/membership-form.css, whose rules are scoped
       either bare (.rhsc-field, .rhsc-error, .rhsc-btn, .rhsc-nav,
       .rhsc-section-title) or to .rhsc-form.

   Both are declared as dependencies in functions.php, so this file only holds
   what those two cannot give a form that is NOT .rhsc-membership-form.

   Markup contract: patterns/contact-form.php.
   Behaviour: assets/js/contact-form.js. */

/* The membership form's own cap is scoped to .rhsc-membership-form, which this
   form deliberately does not carry (see the class-name contract in the
   pattern). Without this the fields stretch to the full width of the column
   they sit in. */
.rhsc-contact-form {
	max-width: 720px;
}

/* The success panel and the hidden form are both collapsed with the `hidden`
   attribute so the accessibility tree matches the visual state.
   membership-form.css carries the equivalent rule but scopes its !important to
   .rhsc-membership-form, so it does not reach this form. The !important is not
   decoration: css-framework.css loads site-wide and its display utilities would
   otherwise win over the UA's [hidden] rule, leaving the thank-you panel
   visible underneath the form from the moment the page loads. */
.rhsc-contact-form [hidden] {
	display: none !important;
}

/* membership-form.css hardcodes .rhsc-membership-form and .rhsc-subscribe-form
   in its disabled-button rule, so a third wrapper gets the enabled styling
   while the button is genuinely disabled mid-send. Kept identical to that rule
   rather than invented — if it changes there, change it here. */
.rhsc-contact-form .rhsc-btn:disabled,
.rhsc-contact-form .rhsc-btn[aria-disabled='true'] {
	background: var(--wp--preset--color--neutral-50, #B5B3B8);
	border-color: var(--wp--preset--color--neutral-50, #B5B3B8);
	color: var(--wp--preset--color--neutral-05, #F6F6F6);
	cursor: not-allowed;
}

/* Form-level failure — the message no other form in this theme can show,
   because the Capsule forms cannot read their own response. Matches .rhsc-error
   so a form-level failure and a field-level one read as the same kind of thing.

   :empty is load-bearing: the slot is always in the DOM (role="alert" only
   announces content added to an element that is already there), so without this
   it would reserve a blank line under the button on every page load. */
.rhsc-form__error {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--error-400, #FF2632);
}

.rhsc-form__error:empty {
	display: none;
}

/* Success panel. Reuses the .rhsc-card treatment from membership-form.css
   rather than inventing a second confirmation style, but sets it directly:
   .rhsc-card is a class on that page's markup, not something this panel can
   inherit by nesting. */
.rhsc-contact__thankyou {
	padding: 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--neutral-10, #EDECEE);
}

/* .rhsc-section-title carries a 32px top margin to separate sections inside a
   form. As the first thing in the panel it would push the text off the padding. */
.rhsc-contact__thankyou .rhsc-section-title {
	margin-top: 0;
}

.rhsc-contact__thankyou p {
	margin: 8px 0 0;
}

/* The panel takes focus when revealed so a screen reader lands on the
   confirmation. tabindex="-1" gives it a focus ring it should not display, as
   the visitor did not tab there. */
.rhsc-contact__thankyou:focus {
	outline: none;
}