/*
 * Contact form (WPForms), replacing SureForms.
 *
 * Themed through WPForms' own custom properties rather than by overriding its rules. Its
 * modern stylesheet sets things like border-radius through `var(--wpforms-field-border-radius)`
 * on selectors more specific than anything sensible a theme would write, so competing on
 * specificity means an escalating fight that the next plugin update wins. Setting the
 * properties on the container sidesteps that entirely.
 *
 * The confirmation tick is drawn here rather than stored in the form's confirmation HTML:
 * WPForms filters that HTML, and a tick that lives in the theme survives SureForms being
 * deleted in plan 07.
 */

.nx-contact-form {
  margin-top: 32px;
}

.nx-contact-form #wpforms-1628 {
  /* The form shares the page surface. */
  --wpforms-container-padding: 0;
  --wpforms-container-border-width: 0;
  --wpforms-container-border-radius: 0;

  /* Fields */
  --wpforms-field-border-radius: 3px;
  --wpforms-field-border-color: var(--nx-border);
  --wpforms-field-border-size: 1px;
  --wpforms-field-background-color: var(--nx-surface);
  --wpforms-field-text-color: var(--nx-text);
  --wpforms-field-size-font-size: var(--nx-type-form);
  --wpforms-field-size-padding-h: 14px;

  /* Labels */
  --wpforms-label-color: var(--nx-heading);
  --wpforms-label-size-font-size: var(--nx-type-label);
  --wpforms-label-sublabel-color: var(--nx-muted);
  --wpforms-label-error-color: #b3261e;

  /* Solid brand colour for the primary action. */
  --wpforms-button-border-radius: 3px;
  --wpforms-button-border-size: 0;
  --wpforms-button-background-color: var(--nx-brand);
  --wpforms-button-text-color: var(--nx-surface);
  --wpforms-button-size-font-size: var(--nx-type-form);
  --wpforms-button-size-padding-h: 28px;
}

/*
 * The three things with no custom property behind them. These carry the container class as
 * well, because WPForms sets font and height on `div.wpforms-container-full <element>` and a
 * bare `.nx-contact-form <element>` loses to it.
 */
.nx-contact-form .wpforms-container-full .wpforms-submit {
  background-image: none;
  background-color: var(--nx-brand);
  font-family: var(--nx-font-heading);
  font-weight: 600;
}

.nx-contact-form .wpforms-container-full .wpforms-submit:hover,
.nx-contact-form .wpforms-container-full .wpforms-submit:focus {
  filter: brightness(1.08);
}

/*
 * No height override here on purpose. WPForms sizes the textarea from
 * `--wpforms-field-size-input-height` on a selector one element more specific than anything
 * this file can reasonably write, and its medium size already renders a 120px message box.
 * A min-height here looked like it worked and did nothing.
 */
.nx-contact-form .wpforms-container-full textarea {
  resize: vertical;
}

/*
 * Confirmation: green tick above the thank-you line, replacing the form -- the state
 * visitors see today. The tick is the same mark SureForms drew, as a background image so
 * no markup has to survive the plugin swap.
 */

/*
 * The confirmation panel keeps WPForms' pale-green success styling. An attempt to restyle it
 * as a white theme card sat here and silently did nothing -- WPForms sets it from
 * `div.wpforms-container-full .wpforms-confirmation-container-full`, one class more specific.
 * Green reads as success, the contrast is strong, and a dead rule is worse than an honest
 * default. Only the tick and the typography below are ours.
 */
.nx-contact-form .wpforms-confirmation-container-full {
  text-align: center;
}

.nx-form-confirmation::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='31' viewBox='0 0 32 31' fill='none'%3E%3Cpath d='M21.0268 12.2729L14.1996 19.1001L11.8724 16.7729M15.9996 1.1001C8.04671 1.1001 1.59961 7.5472 1.59961 15.5001C1.59961 23.453 8.04671 29.9001 15.9996 29.9001C23.9525 29.9001 30.3996 23.453 30.3996 15.5001C30.3996 7.5472 23.9525 1.1001 15.9996 1.1001Z' stroke='%2316A34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nx-form-confirmation p {
  margin: 0;
  font-family: var(--nx-font-heading);
  font-weight: 600;
  font-size: 26px;
  color: var(--nx-heading);
}

/*
 * Newsletter sign-up form (Brevo plugin, shortcode [sibwp_form]).
 *
 * The plugin form is set to "Current Theme", so Brevo prints no CSS of its own and the style
 * lives here, versioned and deployed with the theme. Ported from brevo/anmeldeformular.css.
 * The plugin's success and error panel (.sib_msg_disp) keeps its own look.
 */

form.sib_signup_form p { margin: 0 0 16px; }
form.sib_signup_form label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--nx-heading, #0f172a); }
form.sib_signup_form input[type=email],
form.sib_signup_form input[type=text] { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--nx-text, #374151); background: #ffffff; border: 1px solid var(--nx-border, #dce0e5); border-radius: 3px; }
form.sib_signup_form input[type=email]:focus,
form.sib_signup_form input[type=text]:focus { outline: 2px solid var(--nx-brand, #3200ff); outline-offset: 2px; border-color: var(--nx-brand, #3200ff); }
form.sib_signup_form .sib-compliance { font-size: 15px; line-height: 1.5; color: var(--nx-muted, #4a5568); }
form.sib_signup_form .sib-compliance a { color: var(--nx-brand, #3200ff); text-decoration: underline; }
form.sib_signup_form .sib-default-btn { display: inline-block; padding: 14px 28px; font: inherit; font-size: 18px; font-weight: 600; color: #ffffff; background: var(--nx-brand, #3200ff); border: 0; border-radius: 3px; cursor: pointer; }
form.sib_signup_form .sib-default-btn:hover,
form.sib_signup_form .sib-default-btn:focus { background: var(--nx-heading, #0f172a); }
form.sib_signup_form .sib-default-btn:focus-visible { outline: 2px solid var(--nx-brand, #3200ff); outline-offset: 4px; }
form.sib_signup_form .sib_msg_disp { margin-bottom: 16px; }