/* ==========================================================================
   Contactformulier — opmaak voor Contact Form 7 op een YOOtheme Pro-site
   ==========================================================================

   Plak dit onderaan het stylesheet van het child theme.

   Contact Form 7 brengt zelf GEEN opmaak mee voor de velden: wat je in het
   veldsjabloon zet komt letterlijk in de pagina. Dat is precies het voordeel — hier
   staan alleen de klassen van deze site, en er hoeft niets van een plugin
   overschreven te worden.

   De verzendknop krijgt in het sjabloon de knopklassen van het thema mee
   (`class:uk-button class:uk-button-primary`) en ziet er daarmee vanzelf uit als elke
   andere knop. Voor de knop staat hieronder dus niets.

   AAN TE PASSEN PER KLANT: alleen de zes waarden in het blok hieronder. Neem ze over
   uit het child theme van die site; ze staan daar meestal al als custom properties.
   ========================================================================== */

:root {
    /* De accentkleur = de knopkleur van de site. */
    --form-accent: #17201D;
    --form-inkt: #17201D;
    --form-rand: rgba(23, 32, 29, 0.22);
    --form-rand-hover: rgba(23, 32, 29, 0.45);
    /* Radius en overgang: neem over wat de site elders gebruikt. */
    --form-radius: 4px;
    --form-overgang: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-formulier { display: flex; flex-direction: column; gap: 1.5rem; }

.mc-veldrij { display: grid; gap: 1.5rem; }

/* Twee kolommen vanaf tablet; daaronder gestapeld. Pas het breekpunt aan op dat van
   de site (UIkit staat standaard op 640px, YOOtheme-projecten zetten het vaak hoger). */
@media (min-width: 768px) {
    .mc-veldrij { grid-template-columns: 1fr 1fr; }
}

.mc-veld { display: flex; flex-direction: column; gap: 0.5rem; }

.mc-label {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--form-inkt);
}

/* De optionele velden worden gemarkeerd, niet de verplichte. Dat leest prettiger dan
   een sterretje achter vier van de zes labels, en het is duidelijker. */
.mc-optioneel { font-weight: 400; opacity: 0.78; }  /* 0,55 haalde maar 3,7:1 */
.uk-light .mc-optioneel { opacity: 0.92; }

/* Eén regel voor input, select én textarea: ze horen er hetzelfde uit te zien.

   `font: inherit` is niet optioneel. Zonder die regel pakt een formulierveld de letter
   van het besturingssysteem in plaats van die van de site, en dan staat er ineens een
   ander lettertype midden op de pagina.

   `font-size: 1rem` = 16px, en dat is een ondergrens: onder 16px zoomt Safari op de
   iPhone in zodra iemand een veld aantikt, en dan is de rest van de pagina weg. */
.mc-invoer {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--form-inkt);
    background-color: #fff;
    border: 1px solid var(--form-rand);
    border-radius: var(--form-radius);
    transition: border-color var(--form-overgang), box-shadow var(--form-overgang);
}

textarea.mc-invoer { min-height: 9rem; resize: vertical; }

/* Een select heeft een eigen pijltje nodig zodra `appearance` uit staat. Als
   achtergrondbeeld, niet als extra element: dan blijft de hele opmaak binnen deze ene
   regel en hoeft er niets aan de HTML te veranderen. De kleur in de SVG (%231A2226)
   is `--form-inkt`; pas die mee aan als de inktkleur anders is. */
select.mc-invoer {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%231A2226' stroke-width='1.5' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.mc-invoer:hover { border-color: var(--form-rand-hover); }

.mc-invoer:focus {
    outline: none;
    border-color: var(--form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent), transparent 82%);
}

/* De zichtbare focusring blijft leidend voor wie met Tab werkt. */
.mc-invoer:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--form-accent), transparent 25%);
    outline-offset: 4px;
}

.mc-verzenden { margin-top: 0.5rem; }

/* ------------------------------------------------------------------ meldingen
   Contact Form 7 zet zijn meldingen in eigen elementen met vaste klassen. Ze krijgen
   hier de vorm van de site in plaats van de rode standaardkaders van de plugin. */

.wpcf7 form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border: 1px solid var(--form-rand);
    border-radius: var(--form-radius);
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--form-accent), transparent 55%);
    background-color: color-mix(in srgb, var(--form-accent), transparent 94%);
    color: var(--form-accent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: rgba(160, 32, 20, 0.35);
    background-color: rgba(160, 32, 20, 0.05);
    color: #7a1a10;
}

.wpcf7-not-valid-tip {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #7a1a10;
}

.mc-invoer.wpcf7-not-valid { border-color: rgba(160, 32, 20, 0.55); }

/* De draaiende stip tijdens het versturen. */
.wpcf7 .wpcf7-spinner { margin: 0 0 0 0.75rem; }

/* ------------------------------------------------------------- lokaasveld
   Het onzichtbare veld dat bots vangt (zie wp/lokaasveld.php).

   BEWUST GEEN `display: none` en geen `visibility: hidden`: de eenvoudigste bots slaan
   verborgen velden over, en juist die wil je vangen. Buiten beeld schuiven werkt wel, en
   `aria-hidden` + `tabindex="-1"` in de HTML houden een schermlezer en de tabtoets weg.

   Dit is exact het patroon dat een "skip link" ook gebruikt, alleen zonder de
   :focus-regel die hem terugbrengt. */
.mc-lokaas {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------------------------- de keuzelijst als plaatshouder
   Wil je de select er "nog niets gekozen" uit laten zien (grijzer, als een
   plaatshouder), dan is de voor de hand liggende regel `select:invalid`. DIE WERKT NIET
   bij Contact Form 7.

   NAGEMETEN op een echt CF7-formulier, 31-08-2026: CF7 zet op een verplicht veld GEEN
   `required` maar `aria-required="true"`. Het valideert zelf, op de server. Voor de
   browser is een leeg verplicht veld dus gewoon geldig:

       veld          required   aria-required   :invalid
       mc-naam       false      true            false
       mc-mail       false      true            false
       mc-bericht    false      true            false

   HETZELFDE GELDT VOOR `:required`. Wil je verplichte velden met CSS markeren, dan doet
   `.mc-invoer:required` niets. Gebruik een eigen klasse, of markeer de OPTIONELE velden
   zoals deze kit doet.

   Wat wél werkt voor de select is kijken welke optie er gekozen is. Zet daarvoor een
   lege eerste optie in het sjabloon: [select onderwerp id:... "" "Optie A" "Optie B"] */
select.mc-invoer:has(option[value=""]:checked) {
    color: color-mix(in srgb, var(--form-inkt), transparent 45%);
}

/* De keuzelijst en een datumveld hoeven niet zo breed te zijn als een berichtveld. Een
   select over de volle kolombreedte met drie woorden erin oogt onbeholpen. */
@media (min-width: 768px) {
    select.mc-invoer,
    input[type="date"].mc-invoer {
        max-width: 24rem;
    }
}

/* ---------- Fort Buitensluis: aanvullingen */
.mc-formulier .wpcf7-list-item { display: block; margin: 0 0 6px; }
.mc-formulier .wpcf7-list-item label { display: flex; gap: 10px; align-items: center; font-size: 1rem; cursor: pointer; }
.mc-formulier input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--form-accent); }  /* WCAG 2.5.8: 24 x 24 */
.uk-light .mc-label { color: #fff; }
.uk-light .mc-invoer { border-color: transparent; }
.uk-light .wpcf7 form.sent .wpcf7-response-output { background: #fff; color: #17201D; }

/* lege wikkels (Turnstile zonder sleutels) niet meetellen in de tussenruimte */
.mc-formulier > .mc-veld:not(:has(*)) { display: none; }
/* getallen en datums zijn kort; niet over de volle breedte */
@media (min-width: 768px) {
    input[type="number"].mc-invoer { max-width: 12rem; }
}
/* vinkjes */
.mc-keuzes { display: block; }
.uk-light .mc-formulier .wpcf7-list-item label { color: #fff; }
/* verzendknop: op de telefoon over de volle breedte, daarboven zo breed als de tekst */
@media (min-width: 640px) {
    .mc-verzenden { flex-direction: row; align-items: center; flex-wrap: wrap; }
}