/* =====================================================================
   jboumans.nl 2026 · het Elementor Pro-formulier in de vorm van .jb-form (site/css/blocks.css, Plan 2 Task 8).
   Alleen in .jb-letter (de contactsectie). Getoetst met test_formulier.py: dezelfde berekende stijlen
   als het prototypeformulier. LET OP (staging): de DOM van Pro 4.3 nalopen met vergelijk.py.
   ===================================================================== */
.jb-letter .elementor-form { position: relative; max-width: 44rem; padding: 1.5rem; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink);
  --ground-text: var(--ink); --ground-soft: var(--graphite); color: var(--ink); }
.jb-letter .elementor-form .elementor-form-fields-wrapper { display: grid; gap: 1rem 1.5rem; margin: 0; }
@media (min-width: 48em) {
  .jb-letter .elementor-form .elementor-form-fields-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-letter .elementor-form .elementor-form-fields-wrapper > .elementor-col-100 { grid-column: 1 / -1; }
}
.jb-letter .elementor-form .elementor-field-group { display: grid; gap: 0.25rem; width: auto; max-width: none; margin: 0; padding: 0; }
.jb-letter .elementor-form .elementor-field-group > .elementor-field-label { padding: 0; color: inherit; cursor: auto;
  font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-weight: 700; }
/* Het potlood van base.css: Elementors .elementor-field-label { cursor: pointer } wint van zijn label-regel. */
@media (pointer: fine) {
  .jb-letter .elementor-form .elementor-field-group > .elementor-field-label { cursor: url("../assets/svg/pencil-tilt.svg") 3 29, pointer; }
}
.jb-letter .elementor-form .elementor-field-group .elementor-field:is(input, textarea),
.jb-letter .elementor-form .elementor-select-wrapper select { font: inherit; width: 100%; min-height: 48px; padding: 0.5rem 0.75rem;
  border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); line-height: 1.5; }
.jb-letter .elementor-form .elementor-field-group .elementor-select-wrapper { padding: 0; border: 0; min-height: 0; background: none; }
/* De gewone keuzelijst van de browser, zoals het prototype: Elementor zet appearance:none en tekent een pijltje (::before
   met eicons, of het svg in .select-caret-down-wrapper van Pro). */
.jb-letter .elementor-form .elementor-select-wrapper select { -webkit-appearance: auto; appearance: auto; }
.jb-letter .elementor-form .elementor-select-wrapper::before { content: none; }
.jb-letter .elementor-form .elementor-select-wrapper .select-caret-down-wrapper { display: none; }
.jb-letter .elementor-form .elementor-field-group textarea.elementor-field { resize: vertical; line-height: var(--line);
  padding-block: 0; background-attachment: local; /* de lijnen liggen onder de regels tekst, zoals in blocks.css */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)); }
/* De honeypot vangt bots en verder niemand: niet op het scherm, niet in de tabvolgorde en niet voor hulpsoftware. Pro zet
   display:none !important op het veld zelf (LET OP (staging)); hier verdwijnt de hele groep, ook een label van Pro. */
.jb-letter .elementor-form .elementor-field-type-honeypot { display: none !important; }
.jb-letter .elementor-form .elementor-field-type-submit { grid-column: 1 / -1; display: block; }
.jb-letter .elementor-form .elementor-button { font: inherit; line-height: inherit; width: auto; }
.jb-letter .elementor-form .elementor-message { margin: 1rem 0 0; font-family: var(--font-hand); font-weight: 700; color: var(--ink-deep); }
.jb-letter .elementor-form .elementor-message::before { content: none; }
.jb-letter .elementor-form .elementor-error .elementor-field,
.jb-letter .elementor-form .elementor-error select { border-color: var(--ink-deep); }
.jb-letter .elementor-form .elementor-form-help-inline { color: var(--ink-deep); }

/* "(verplicht)" en "(required)" staan als gewone tekst in het label van Pro: dan horen ze bij de toegankelijke naam
   (Plan 2 Task 8 koos dat boven een ::after). Het label van Pro is gewone tekst zonder span, dus het woord heeft hier
   de letter van het label en niet die van .jb-form__req: correct gaat voor mooi. Geen mark_required, dus geen sterretje.
   Gemeten: zo'n label is 2px lager dan in het prototype (daar maakt de kleinere letter van de span de regel hoger), dus
   de velden eronder staan 2 tot 6px hoger. Verder dezelfde plek en maat. */

/* De knop is .jb-button uit blocks.css; brug.py zet die regels hier neer bij elke bouw. */
/* jb:knop:begin */
.jb-letter .elementor-form .elementor-button{display:inline-flex;align-items:center;min-height:48px;padding:0.4rem 1.2rem;border:2.5px solid var(--ink);border-radius:14px 18px 12px 20px;background:var(--highlight);color:var(--ink-deep);font-family:var(--font-hand);font-variation-settings:var(--infm-label);font-weight:700;line-height:1.3;text-decoration:none;box-shadow:3px 3px 0 var(--ink);}
.jb-letter .elementor-form .elementor-button:hover{color:var(--ink-deep);transform:translate(-1px, -1px) rotate(-1deg);box-shadow:5px 5px 0 var(--ink);text-decoration:none;}
.jb-letter .elementor-form .elementor-button:active{transform:translate(2px, 2px);box-shadow:1px 1px 0 var(--ink);}
@media (prefers-reduced-motion: no-preference){.jb-letter .elementor-form .elementor-button{transition:transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);}}
@media (prefers-reduced-motion: reduce){.jb-letter .elementor-form .elementor-button:hover,.jb-letter .elementor-form .elementor-button:active{transform:none;}}
/* jb:knop:eind */