/* ============================================================================
   LOONBEDRIJF VAN KLEEF — FORMULIEREN (formulieren.css)
   Contact Form 7: het offerte- en contactformulier. Basis: sectie 8 van de
   Grastotaal-huisstijllaag v2.0 en sectie 19/30h van de eigen CSS (velden met
   label erboven, werkzaamheden als aanklikbare tegels, leesbare
   foutmeldingen). Kleuren en maten uit de --gt-variabelen in style.css; de
   verstuurknop is daar al als .gt-knop opgemaakt.

   Opbouw van het formulier (in de CF7-editor):

     <div class="gt-formrij">
       <label for="naam">Naam</label>
       [text* naam id:naam]
     </div>
     <div class="gt-formrij gt-formrij--2">   (twee velden naast elkaar)
       <div><label for="tel">Telefoon</label>[tel* telefoon id:tel]</div>
       <div><label for="mail">E-mail</label>[email* email id:mail]</div>
     </div>
     <fieldset class="gt-tegels">
       <legend>Wat moet er gebeuren?</legend>
       [radio werk use_label_element "Bomen rooien" "Bomen verplanten" "Anders"]
     </fieldset>
     <div class="gt-formrij"><label for="foto">Foto's <span class="gt-optioneel">niet verplicht</span></label>[file foto id:foto filetypes:jpg|jpeg|png|webp|pdf limit:8mb]</div>
     <div class="gt-akkoord">[acceptance akkoord] Ik ga akkoord met het <a href="/privacybeleid/">privacybeleid</a>. [/acceptance]</div>
     [submit "Verstuur de aanvraag"]

   Inhoud
    1. Formulier en rijen
    2. Labels
    3. Velden (tekst, e-mail, telefoon, getal, select, textarea)
    4. Bestand uploaden
    5. Keuzetegels (fieldset.gt-tegels: radio en checkbox)
    6. Akkoordregel (acceptance)
    7. Foutmeldingen en terugkoppeling
    8. Verstuurknop
    9. Mobiel
   10. Beweging en hoog contrast
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. FORMULIER EN RIJEN
   ------------------------------------------------------------------------- */
.wpcf7 { max-width: 720px; }
.wpcf7-form { font-family: var(--gt-font-body); font-size: 17px; color: var(--gt-tekst); }
.wpcf7-form > p { margin-bottom: 20px; }
.gt-formrij { display: block; margin: 0 0 20px; }
.gt-formrij--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.gt-formrij--2 > div { min-width: 0; }
/* Tussenkopjes in het formulier ("Over de klus", "Je gegevens") */
.wpcf7-form h3 { font-size: clamp(20px, 2.2vw, 24px); margin: 36px 0 12px; }
.wpcf7-form h3:first-child { margin-top: 0; }
.wpcf7-form h4 { font-size: 16px; margin: 0 0 8px; }
.gt-hint { margin: -4px 0 14px; font-size: 15px; color: var(--gt-tekst-zacht); }

/* ----------------------------------------------------------------------------
   2. LABELS — boven het veld, duidelijk vet; "niet verplicht" klein erachter
   ------------------------------------------------------------------------- */
.gt-formrij label,
.gt-formrij--2 label,
.gt-tegels legend {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  font-family: var(--gt-font-kop);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gt-tekst);
}
.gt-optioneel {
  font-family: var(--gt-font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--gt-tekst-zacht);
}
.gt-optioneel::before { content: '('; }
.gt-optioneel::after { content: ')'; }
/* Een sterretje als enige markering van "verplicht" is onduidelijk; zet
   "niet verplicht" bij de uitzonderingen. Een eventueel sterretje in de
   labeltekst krijgt de merkkleur. */
.gt-formrij label .gt-verplicht { color: var(--gt-rood); font-weight: 600; }
/* Contact Form 7 zet een <br> tussen label en veld (automatische alinea's).
   Daardoor stond het label 35px boven zijn eigen veld en maar 20px onder het
   vorige: het leek bij het verkeerde veld te horen. Zonder die regelafbreking
   zit het label 7px boven zijn veld. (.gt-formrij--2 heeft altijd ook .gt-formrij.) */
.gt-formrij label + br { display: none; }

/* ----------------------------------------------------------------------------
   3. VELDEN
   8px hoeken, 1px rand in de lijnkleur, focus diepgroen (rand + ring).
   De selectors zijn specifieker dan die van GeneratePress (input[type="text"])
   en van Contact Form 7, dus zonder !important.
   ------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-form-control-wrap { display: block; position: relative; }
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--gt-font-body);
  font-size: 16px;            /* 16px: geen inzoomen op iPhone bij focus */
  line-height: 1.5;
  color: var(--gt-tekst);
  background: var(--gt-wit);
  border: 1px solid var(--gt-lijn-veld);
  border-radius: var(--gt-radius-klein);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--gt-overgang), box-shadow var(--gt-overgang);
}
.wpcf7-form .wpcf7-form-control::placeholder { color: #767675; opacity: 1; } /* 4,5:1 op wit */
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):hover,
.wpcf7-form textarea.wpcf7-form-control:hover,
.wpcf7-form select.wpcf7-form-control:hover { border-color: var(--gt-tekst-zacht); }
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):focus,
.wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus {
  border-color: var(--gt-groen-diep);
  box-shadow: 0 0 0 1px var(--gt-groen-diep);
  outline: 3px solid var(--gt-groen-diep);
  outline-offset: 2px;
}
.wpcf7-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
/* Keuzelijst met eigen pijltje (de standaardpijl verdwijnt door appearance: none) */
.wpcf7-form select.wpcf7-form-control {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232c6a28' d='M12 15.5 5.3 8.8l1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px;
}
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):disabled,
.wpcf7-form textarea.wpcf7-form-control:disabled { background: var(--gt-zandwit); color: var(--gt-tekst-zacht); cursor: not-allowed; }
/* Getalveld zonder spinknopjes (ze zijn te klein om aan te tikken) */
.wpcf7-form input[type="number"].wpcf7-form-control { -moz-appearance: textfield; }
.wpcf7-form input[type="number"].wpcf7-form-control::-webkit-inner-spin-button,
.wpcf7-form input[type="number"].wpcf7-form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ----------------------------------------------------------------------------
   4. BESTAND UPLOADEN — foto's van de klus
   Het veld oogt als een zandwit vlak met stippellijn; de kiesknop is een
   kleine omlijnde knop. Focus op het veld toont de ring.
   ------------------------------------------------------------------------- */
.wpcf7-form input[type="file"].wpcf7-form-control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  font-family: var(--gt-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gt-tekst);
  background: var(--gt-zandwit);
  border: 1px dashed var(--gt-tekst-zacht);
  border-radius: var(--gt-radius-klein);
  cursor: pointer;
}
.wpcf7-form input[type="file"].wpcf7-form-control:hover { border-color: var(--gt-groen-diep); }
.wpcf7-form input[type="file"].wpcf7-form-control:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; border-style: solid; }
.wpcf7-form input[type="file"].wpcf7-form-control::file-selector-button {
  margin: 0 12px 0 0;
  padding: 8px 16px;
  min-height: 40px;
  font-family: var(--gt-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gt-groen-diep);
  background: var(--gt-wit);
  border: 2px solid var(--gt-groen-diep);
  border-radius: var(--gt-radius-knop);
  cursor: pointer;
  transition: background-color var(--gt-overgang), color var(--gt-overgang);
}
.wpcf7-form input[type="file"].wpcf7-form-control:hover::file-selector-button { background: var(--gt-groen-diep); color: var(--gt-wit); }
.gt-formrij .gt-bestand-hint { display: block; margin-top: 6px; font-size: 14px; color: var(--gt-tekst-zacht); }

/* ----------------------------------------------------------------------------
   5. KEUZETEGELS — fieldset.gt-tegels
   De vraag is de legend; elke optie (radio of checkbox) is een tegel die je
   helemaal kunt aanklikken. Het rondje of vinkje blijft zichtbaar (geen
   verborgen input), zodat de gekozen staat ook zonder kleur duidelijk is en
   het toetsenbord gewoon werkt: Tab naar de groep, pijltjes voor de keuze.
   De tegel kleurt mee bij :has(input:checked) en :has(input:focus-visible);
   browsers zonder :has tonen nog steeds het native rondje.
   ------------------------------------------------------------------------- */
.wpcf7-form fieldset.gt-tegels { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.wpcf7-form .gt-tegels legend { float: none; width: auto; margin-bottom: 8px; }
.wpcf7-form .gt-tegels .wpcf7-form-control-wrap { display: block; }
.wpcf7-form .gt-tegels .wpcf7-radio,
.wpcf7-form .gt-tegels .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
}
.wpcf7-form .gt-tegels .wpcf7-list-item { display: flex; margin: 0; }
.wpcf7-form .gt-tegels .wpcf7-list-item label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  font-family: var(--gt-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gt-tekst);
  background: var(--gt-wit);
  border: 1px solid var(--gt-lijn-veld);
  border-radius: var(--gt-radius-klein);
  cursor: pointer;
  transition: border-color var(--gt-overgang), background-color var(--gt-overgang), box-shadow var(--gt-overgang);
}
.wpcf7-form .gt-tegels .wpcf7-list-item-label { flex: 1 1 auto; }
.wpcf7-form .gt-tegels .wpcf7-list-item label:hover { border-color: var(--gt-groen-diep); background: var(--gt-zandwit); }
.wpcf7-form .gt-tegels .wpcf7-list-item input[type="radio"],
.wpcf7-form .gt-tegels .wpcf7-list-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--gt-groen-diep);
  cursor: pointer;
}
/* Gekozen: diepgroene rand (dubbel), lichtgroen vlak, vette tekst */
.wpcf7-form .gt-tegels .wpcf7-list-item label:has(input:checked) {
  border-color: var(--gt-groen-diep);
  background: #eaf3e8;
  box-shadow: inset 0 0 0 1px var(--gt-groen-diep);
  font-weight: 600;
}
/* Toetsenbordfocus: de ring staat om de hele tegel, niet alleen om het rondje */
.wpcf7-form .gt-tegels .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--gt-groen-diep);
  outline-offset: 2px;
}
.wpcf7-form .gt-tegels .wpcf7-list-item input:focus-visible { outline: none; }
/* Zonder :has (oudere browsers): ring om het rondje zelf */
@supports not selector(:has(a)) {
  .wpcf7-form .gt-tegels .wpcf7-list-item input:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
}
/* Tegels met "exclusive" checkbox of een vrij tekstveld ("Anders, namelijk") */
.wpcf7-form .gt-tegels + .gt-formrij { margin-top: -8px; }

/* ----------------------------------------------------------------------------
   6. AKKOORDREGEL — [acceptance]
   Eén regel in een zandwit vlak: vinkje links, tekst met link naar het
   privacybeleid. Geen tegel, wel een groot tikdoel (het hele vlak).
   ------------------------------------------------------------------------- */
.gt-akkoord { margin: 26px 0 18px; }
.wpcf7-form .gt-akkoord .wpcf7-form-control-wrap { display: block; }
.wpcf7-form .gt-akkoord .wpcf7-acceptance,
.wpcf7-form .gt-akkoord .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .gt-akkoord .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  min-height: 52px;
  font-family: var(--gt-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gt-tekst);
  background: var(--gt-zandwit);
  border: 1px solid transparent;
  border-radius: var(--gt-radius-klein);
  cursor: pointer;
}
.wpcf7-form .gt-akkoord .wpcf7-list-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--gt-groen-diep);
}
.wpcf7-form .gt-akkoord .wpcf7-list-item label:has(input:focus-visible) { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
.wpcf7-form .gt-akkoord .wpcf7-list-item input:focus-visible { outline: none; }
.wpcf7-form .gt-akkoord .wpcf7-list-item label:has(input:checked) { border-color: var(--gt-groen-diep); }
.gt-akkoord a { color: var(--gt-groen-diep); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.gt-akkoord a:hover { color: var(--gt-groen-diep-hv); text-decoration-color: var(--gt-rood); }
/* Belofte onder de knop ("Je hoort binnen twee werkdagen van ons") */
.gt-belofte { margin: 14px 0 0; font-size: 15px; color: var(--gt-tekst-zacht); }

/* ----------------------------------------------------------------------------
   7. FOUTMELDINGEN EN TERUGKOPPELING
   Leesbaar, niet alleen rood: tekst + pictogram + rand. Het rood #b3251a
   haalt 6,2:1 op wit; #7a1810 op #fdf2f1 ruim 10:1. Groen #17400f op #eef5ec
   ruim 11:1. (Grastotaal-review: de CF7-standaard mat 2,4:1.)
   ------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-not-valid-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #b3251a;
}
.wpcf7-form .wpcf7-not-valid-tip::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: #b3251a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 1.5 19 18H1zm-.9 6v5h1.8v-5zm0 6.3v1.8h1.8v-1.8z'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 1.5 19 18H1zm-.9 6v5h1.8v-5zm0 6.3v1.8h1.8v-1.8z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* Het veld zelf: dikkere rode rand, zodat het fout gaat waar je kijkt */
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-radio):not(.wpcf7-checkbox):not(.wpcf7-acceptance) {
  border-color: #b3251a;
  box-shadow: 0 0 0 1px #b3251a;
}
.wpcf7-form .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item label,
.wpcf7-form .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item label,
.wpcf7-form .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item label { border-color: #b3251a; }
/* De samenvatting onder het formulier */
.wpcf7 form .wpcf7-response-output {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 2px solid var(--gt-lijn);
  border-radius: var(--gt-radius-klein);
  background: var(--gt-zandwit);
  color: var(--gt-tekst);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.wpcf7 form .wpcf7-response-output::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 1.5 19 18H1zm-.9 6v5h1.8v-5zm0 6.3v1.8h1.8v-1.8z'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 1.5 19 18H1zm-.9 6v5h1.8v-5zm0 6.3v1.8h1.8v-1.8z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #b3251a;
  background: #fdf2f1;
  color: #7a1810;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--gt-groen-diep);
  background: #eef5ec;
  color: #17400f;
}
.wpcf7 form.sent .wpcf7-response-output::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E");
}
/* Niet tonen zolang er niets te melden is (CF7 zet dan display: none; dit vangt
   een leeg element op dat toch zichtbaar is) */
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------------------
   8. VERSTUURKNOP — de .gt-knop uit style.css; hier alleen maat en wachtstand
   ------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-submit {
  min-width: 240px;
  min-height: 50px;
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form .wpcf7-submit:disabled { opacity: 0.8; cursor: wait; transform: none; box-shadow: none; }
.wpcf7-form .wpcf7-submit:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 3px; }
.wpcf7-form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
.wpcf7-form p:has(> .wpcf7-submit) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ----------------------------------------------------------------------------
   9. MOBIEL — getest in gedachten op 375px: velden vol breed, tegels onder
   elkaar, knop vol breed
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wpcf7 { max-width: none; }
  .gt-formrij--2 { grid-template-columns: 1fr; gap: 16px; }
  .wpcf7-form .gt-tegels .wpcf7-radio,
  .wpcf7-form .gt-tegels .wpcf7-checkbox { grid-template-columns: 1fr; }
  .wpcf7-form .wpcf7-submit { width: 100%; min-width: 0; }
  .wpcf7-form h3 { margin-top: 28px; }
  .wpcf7-form input[type="file"].wpcf7-form-control::file-selector-button { display: block; margin: 0 0 8px; width: 100%; }
}

/* ----------------------------------------------------------------------------
   10. BEWEGING EN HOOG CONTRAST
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpcf7-form .wpcf7-form-control,
  .wpcf7-form .gt-tegels .wpcf7-list-item label,
  .wpcf7-form input[type="file"].wpcf7-form-control::file-selector-button { transition: none; }
}
@media (forced-colors: active) {
  .wpcf7-form .gt-tegels .wpcf7-list-item label:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .wpcf7-form .wpcf7-not-valid-tip::before, .wpcf7 form .wpcf7-response-output::before { background-color: CanvasText; }
  .wpcf7-form input[type="file"].wpcf7-form-control { border-color: CanvasText; }
}

/* ============================================================================
   EINDE formulieren.css
   ========================================================================= */