/* Het aanvraagformulier. De velden komen uit WPForms; deze regels geven ze
   exact de opmaak van het originele design: labels in mono-kapitalen, velden
   met alleen een onderlijn, en een brede zwarte verzendknop met pijl.

   WPForms levert een eigen stylesheet mee die met vrij zware selectors werkt
   (bv. div.wpforms-container-full .wpforms-form .wpforms-field). Daarom staat
   hier overal hetzelfde zware voorvoegsel: anders winnen hun maten.

   De inhoud van het formulier - velden, teksten, ontvanger - pas je aan onder
   WPForms -> Alle formulieren -> Aanvraag Nura. */

/* WPForms tekent zichzelf met CSS-variabelen die het op :root zet. In de
   Elementor-editor laadt hun stylesheet ná die van het thema, dus dan wonnen
   hun kleuren en was de verzendknop blauw. Door dezelfde variabelen hier op de
   formulierkaart te zetten, tekent WPForms zichzelf in het Nura-ontwerp,
   ongeacht in welke volgorde de stylesheets binnenkomen. */
.elementor .nura-formcard div.wpforms-container {
  --wpforms-field-background-color: transparent;
  --wpforms-field-border-color: var(--ink, #0a0a0a);
  --wpforms-field-border-color-spare: var(--ink, #0a0a0a);
  --wpforms-field-border-size: 0px;
  --wpforms-field-border-radius: 0px;
  --wpforms-field-text-color: var(--ink, #0a0a0a);
  --wpforms-field-menu-color: var(--paper, #f4f2ed);
  --wpforms-field-size-font-size: 15px;
  --wpforms-field-size-line-height: normal;
  --wpforms-field-size-padding-h: 0px;
  --wpforms-field-size-input-height: 37px;
  --wpforms-field-size-input-spacing: 16px;
  --wpforms-field-size-sublabel-spacing: 0px;

  --wpforms-label-color: var(--muted, #6e6c66);
  --wpforms-label-sublabel-color: var(--muted, #6e6c66);
  --wpforms-label-error-color: #b3261e;
  --wpforms-label-size-font-size: 10px;
  --wpforms-label-size-line-height: 13px;

  --wpforms-button-background-color: var(--ink, #0a0a0a);
  --wpforms-button-border-color: var(--ink, #0a0a0a);
  --wpforms-button-text-color: var(--paper, #f4f2ed);
  --wpforms-button-border-size: 0px;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-border-style: none;
  --wpforms-button-size-font-size: 13px;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-padding-h: 24px;
  --wpforms-button-size-margin-top: 14px;

  --wpforms-container-padding: 0px;
  --wpforms-container-border-width: 0px;
  --wpforms-container-border-radius: 0px;
  --wpforms-background-color: transparent;
}

.elementor .nura-formcard div.wpforms-container {
  margin: 0; padding: 0; --nura-arrow:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.elementor .nura-formcard div.wpforms-container .wpforms-form {
  display: flex; flex-direction: column; gap: 16px; margin-block-start: 8px;
}
.elementor .nura-formcard div.wpforms-container .wpforms-head-container,
.elementor .nura-formcard div.wpforms-container .wpforms-required-label,
.elementor .nura-formcard div.wpforms-container .wpforms-field-sublabel { display: none; }

/* twee kolommen, net als de rijen in het origineel; het tekstvak over de volle breedte */
.elementor .nura-formcard div.wpforms-container .wpforms-field-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.elementor .nura-formcard div.wpforms-container .wpforms-field {
  padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.elementor .nura-formcard div.wpforms-container .wpforms-field-textarea { grid-column: 1 / -1; }

.elementor .nura-formcard div.wpforms-container .wpforms-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #6e6c66); font-weight: 500;
  margin: 0; padding: 0; line-height: normal; display: block;
}

.elementor .nura-formcard div.wpforms-container .wpforms-field input[type=text],
.elementor .nura-formcard div.wpforms-container .wpforms-field input[type=email],
.elementor .nura-formcard div.wpforms-container .wpforms-field textarea,
.elementor .nura-formcard div.wpforms-container .wpforms-field select {
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 500;
  line-height: normal;
  border: none; border-block-end: 1px solid var(--ink, #0a0a0a);
  background: transparent; padding: 10px 0; color: var(--ink, #0a0a0a);
  outline: none; border-radius: 0; width: 100%; max-width: none;
  box-shadow: none; min-height: 0; height: auto;
}
.elementor .nura-formcard div.wpforms-container .wpforms-field textarea {
  resize: none; min-height: 80px;
}
.elementor .nura-formcard div.wpforms-container .wpforms-field select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink, #0a0a0a) 50%),
                    linear-gradient(135deg, var(--ink, #0a0a0a) 50%, transparent 50%);
  background-position: right 4px top 20px, right 0 top 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 18px;
}
/* WPForms geeft de klassieke keuzelijst 14px inspringing mee met precies
   dezelfde specificiteit als de regel hierboven. Deze regel is één klasse
   zwaarder, zodat de tekst net als in het origineel links uitlijnt. */
.elementor .nura-formcard div.wpforms-container .wpforms-field.wpforms-field-select-style-classic select {
  padding: 10px 0; padding-inline-end: 18px; text-indent: 0;
}

.elementor .nura-formcard div.wpforms-container .wpforms-field input::placeholder,
.elementor .nura-formcard div.wpforms-container .wpforms-field textarea::placeholder {
  color: var(--muted, #6e6c66); opacity: .7;
}

.elementor .nura-formcard div.wpforms-container .wpforms-submit-container {
  padding: 0; margin: 14px 0 0;
}
.elementor .nura-formcard div.wpforms-container button.wpforms-submit {
  width: 100%; margin: 0; min-height: 0; height: auto;
  background: var(--ink, #0a0a0a); color: var(--paper, #f4f2ed);
  padding: 18px 24px; border: none; border-radius: 0;
  font-family: 'Archivo', sans-serif; font-size: 13px; line-height: normal;
  letter-spacing: .04em; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .3s var(--ease);
}
.elementor .nura-formcard div.wpforms-container button.wpforms-submit:hover {
  background: var(--ink-hover, #1a1a1a);
}

/* de pijl uit het design, als masker zodat hij de tekstkleur volgt */
.elementor .nura-formcard div.wpforms-container button.wpforms-submit::after {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  background: currentColor;
  transition: transform .3s var(--ease);
  -webkit-mask: var(--nura-arrow) center / contain no-repeat;
  mask: var(--nura-arrow) center / contain no-repeat;
}
.elementor .nura-formcard div.wpforms-container button.wpforms-submit:hover::after {
  transform: translateX(4px);
}

.elementor .nura-formcard div.wpforms-container .wpforms-confirmation-container-full {
  background: transparent; border: none; padding: 0; margin: 0;
  font-size: 15px; line-height: 1.55; color: var(--ink, #0a0a0a);
}
.elementor .nura-formcard div.wpforms-container .wpforms-error {
  font-size: 11px; color: #b3261e; margin-block-start: 4px;
}

@media (max-width: 520px) {
  .elementor .nura-formcard div.wpforms-container .wpforms-field-container {
    grid-template-columns: 1fr;
  }
}