/* Asbestverwijdering.be — /contact/, /offerte-aanvragen/ en /onze-werking/.
   Aanvulling op /site/site.css en /site/paginas.css. Alle maten zijn gemeten
   op het live origineel op 390 / 768 / 1000 / 1366 / 1920 px. Het
   markup-contract met de backend staat in scripts/herbouw/FORMULIEREN.md. */

/* =========================================================================
   1. Secties van de drie pagina's
   ========================================================================= */

/* /contact/ en /offerte-aanvragen/: één brede sectie met 53px boven- en
   150px onderopvulling (vast, op elke breedte). Op desktop schuift de sectie
   nog een stuk naar beneden (contact) of net iets omhoog (offerte). */
.sectie-formulier { padding: 53px 0 150px; }
@media (min-width: 981px) {
    .sectie-contact { margin-top: 145px; }
    .sectie-offerte { margin-top: -4px; }
}

/* /onze-werking/: gewone sectie-opvulling, en een CTA-sectie zonder opvulling. */
.sectie-werking { padding: min(4vw, 54px) 0; }
@media (max-width: 980px) { .sectie-werking { padding: 50px 0; } }

/* Divi-rij 2/3 + 1/3 (tekst + video op /onze-werking/). */
.kolommen-werking { display: flex; gap: 5.5%; }
.kolommen-werking > .werking-tekst { width: 64.833%; }
.kolommen-werking > .werking-video { width: 29.667%; }
@media (max-width: 980px) {
    .kolommen-werking { flex-direction: column; gap: 30px; }
    .kolommen-werking > .werking-tekst,
    .kolommen-werking > .werking-video { width: 100%; }
}

/* Staande clip (480x848). Het origineel plette hem in een vak van 150px hoog;
   hier houdt hij zijn eigen 9:16, gecentreerd in de kolom. Boven 980px is de
   kolom smal genoeg om de video niet te laten overheersen; daaronder staat hij
   onder de tekst en krijgt hij een maximum zodat hij het scherm niet vult. */
.werking-video video {
    display: block; width: 100%; aspect-ratio: 9 / 16; height: auto;
    object-fit: cover; background: var(--inkt);
}
@media (max-width: 980px) {
    .werking-video video { max-width: 280px; margin: 0 auto; }
}

/* =========================================================================
   2. Tekstblokken en zijbalk
   ========================================================================= */

/* Kop van de introtekst op /contact/ (origineel: h4 21px). */
.tekstblok .intro-kop { font-size: 21px; line-height: 21px; }
/* Kop van de introtekst op /onze-werking/ (origineel: h3 25px). */
.tekstblok .werking-kop { font-size: 25px; line-height: 25px; }
/* Twee lege alinea's uit het origineel, als opvulling onder het blok. */
.intro-tekst { padding-bottom: 70.4px; }
.tekstblok p.ruimte { padding-bottom: 32px; }

/* De zijbalk begint op desktop lager dan de hoofdkolom; het origineel doet dat
   met een marge in vh (gemeten: contact 15vh, offerte 10vh). */
@media (min-width: 981px) {
    .zijbalk-contact { margin-top: 15vh; }
    .zijbalk-offerte { margin-top: 10vh; }
}
/* Telefoon- en mailkoppelingen in de zijbalk (600, gele onderlijn). */
.zijbalk-bedrijf p a {
    font-weight: 600; color: var(--inkt);
    text-decoration: underline; text-decoration-color: var(--geel);
}
/* Modulemarge van een 2/5-kolom: 7,493% van de kolombreedte. */
.zijbalk-bedrijf .sociale-iconen { margin-top: 7.493%; }

/* =========================================================================
   3. Vragenblok-varianten
   ========================================================================= */

/* Het vragenblok in de smalle kolom op /contact/ heet .vragenblok.offerte en
   staat sinds de afwerkingsronde in /site/paginas.css §6. */

/* =========================================================================
   4. Formulier: onderdelen die bovenop /site/paginas.css komen
   ========================================================================= */

.formulier fieldset { border: 0; min-width: 0; }
.formulier form { margin: 0; }
.formulier + .vragenblok { margin-top: 25px; }

/* '"*" indicates required fields' — gewone bodytekst met een rode ster. */
.formulier .vereiste-uitleg { margin: 16px 0 0; font-size: 16px; line-height: 19.2px; font-weight: 300; }
.formulier .vereiste-uitleg .ster,
.formulier .vereist { color: #c02b0a; }
.formulier .vereist { font-size: 12px; line-height: 17.16px; font-weight: 500; }
.formulier .ster { color: #c02b0a; font-weight: 500; }

/* Een label dat geen <label> kan zijn (captcha-widget, uploadvak). */
.formulier .veldkop {
    display: block; margin: 0 0 8px;
    font-size: 14px; line-height: 20.02px; font-weight: 500; color: #112337;
}

/* Tussenkop binnen het formulier ("Jouw gegevens"). */
.formulier .formulier-sectiekop {
    grid-column: 1 / -1;
    margin: 0; padding-bottom: 8px;
    border-bottom: 1px solid rgba(17, 35, 55, .18);
}
.formulier .formulier-sectiekop h3 {
    margin: 0; padding-bottom: 10px;
    font-size: 25px; line-height: 25px; font-weight: 700; color: var(--inkt);
}

/* Beschrijving onder een veld (op /offerte-aanvragen/ staat die eronder). */
.formulier .hulptekst-onder {
    margin: 8px 0 0;
    font-size: 13px; line-height: 18.59px; font-weight: 400; color: #585e6a;
}
.formulier .hulptekst { margin: 0 0 8px; }

/* Adresblok: straatnaam over de volle breedte, daaronder twee kolommen. */
.formulier .adresrooster { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 11.5px; }
.formulier .adresrooster .vol { grid-column: 1 / -1; }
.formulier .adresrooster .subveld + .subveld { margin-top: 0; }
@media (max-width: 767px) { .formulier .adresrooster { grid-template-columns: 1fr; row-gap: 12px; } }

/* Legenda boven een lijst met aankruisvakjes staat iets ruimer. */
.formulier .legenda-ruim { margin-bottom: 12px; }

/* Halfbrede invoer (Divi/GF-klasse "medium"). */
.formulier input.halve-invoer, .formulier select.halve-invoer { width: calc(50% - 6px); }
@media (max-width: 767px) { .formulier input.halve-invoer, .formulier select.halve-invoer { width: 100%; } }

/* Keuzelijst: eigen pijltje, want appearance:none. */
.formulier select {
    appearance: none; -webkit-appearance: none;
    padding: 0 32px 0 12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.293.293a1 1 0 0 1 1.414 0L5 3.586 8.293.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z' fill='rgba(17,35,55,.65)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Aankruisvakjes en het toestemmingsvakje. */
.formulier .keuzes { display: flex; flex-direction: column; gap: 12px; }
.formulier .keuze { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 20px; }
.formulier .keuze input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 20px; height: 20px; margin: 0; padding: 0;
    background: var(--wit); border: 1px solid #686e77; border-radius: 2px;
    line-height: normal; cursor: pointer;
}
.formulier .keuze input[type=checkbox]:checked {
    background: var(--geel); border-color: #686e77;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 11.6 2.9 8.3l1.2-1.2 2.1 2.1 5-5 1.2 1.2z' fill='%23030303'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}
.formulier .keuze input[type=checkbox]:focus-visible { outline: 2px solid var(--geel); outline-offset: 2px; }
.formulier .keuze label {
    margin: 0; font-size: 14px; line-height: 20.02px; font-weight: 400; color: #112337;
    cursor: pointer;
}

/* Tekenteller onder de textarea (origineel: "0 of 600 max characters"). */
.formulier .tekenteller {
    margin: 8px 0 0;
    font-size: 13px; line-height: 18.59px; font-weight: 400; color: #585e6a;
}

/* Honeypot: heet input_99 zodat de server hem als bot-veld herkent. */
.formulier .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   5. Meldingen en veldfouten
   Staan sinds de afwerkingsronde in /site/paginas.css (contract met
   App\Services\SchoonFormulierRenderer, FORMULIEREN.md §2): .veldfout,
   .formulier-melding(.is-fout|.is-bevestiging) en .heeft-fout.
   ========================================================================= */

/* =========================================================================
   6. Stappenbalk (/onze-werking/, twee stappen)
   ========================================================================= */

.stapbalk { margin-bottom: 24px; }
.stapbalk-titel {
    margin: 0 0 16px;
    font-size: 14px; line-height: 14px; font-weight: 600; color: #585e6a;
}
.stapbalk-baan { height: 10px; background: rgba(17, 35, 55, .1); }
.stapbalk-vulling { height: 10px; width: 50%; background: var(--geel); transition: width .3s ease; }
.formulier form:has([data-stap="2"]:not([hidden])) .stapbalk-vulling { width: 100%; }

.formulier-voet { display: flex; flex-wrap: wrap; gap: 12px; }
.formulier-voet .knop-vorige {
    background: var(--wit); color: #112337; border: 1px solid #686e77;
}
.formulier-voet .knop-vorige:hover { background: #353535; color: var(--wit); }

/* =========================================================================
   7. Uploadvak (offerte veld 9, sollicitatie veld 13)
   ========================================================================= */

.upload-vak {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 190px; padding: 40px;
    background: var(--wit); border: 1px dashed #686e77; border-radius: 3px;
    text-align: center;
}
.upload-vak.sleep-over { border-color: var(--inkt); background: #fffdf0; }
.upload-icoon { width: 32px; height: 32px; margin-bottom: 9px; color: var(--geel); display: block; }
.upload-tekst {
    margin: 0 0 12px;
    font-size: 14px; line-height: 14px; font-weight: 500; color: rgba(17, 35, 55, .725);
}
.upload-knop {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
    background: var(--geel); color: #000;
    border: 1px solid transparent; border-radius: 3px;
    font-family: inherit; font-size: 14px; line-height: 14px; font-weight: 500;
    cursor: pointer;
}
.upload-knop:hover { background: #353535; color: var(--geel); }
.upload-regels {
    margin: 8px 0 0;
    font-size: 13px; line-height: 18.59px; font-weight: 400; color: #585e6a;
}
.upload-lijst { list-style: none; margin: 0; padding: 0; }
.upload-lijst:not(:empty) { margin-top: 12px; }
.upload-lijst li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 14px; line-height: 20.02px; color: #112337;
}
.upload-lijst .upload-naam { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.upload-lijst .upload-stand { color: #585e6a; font-size: 13px; }
.upload-lijst .upload-mislukt { color: #c02b0a; font-size: 13px; }
.upload-lijst .upload-weg {
    flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
    background: none; border: 0; color: #112337; cursor: pointer;
    font-size: 18px; line-height: 24px;
}
.upload-lijst .upload-weg:hover { color: #c02b0a; }

/* =========================================================================
   8. Captcha-vak (/contact/)
   ========================================================================= */

.captcha-vak { min-height: 78px; }

/* =========================================================================
   9. Zichtbare toetsenbordfocus op de knoppen van deze pagina's
   ========================================================================= */

.formulier-voet button:focus-visible,
.upload-knop:focus-visible,
.upload-weg:focus-visible,
.vragenblok .knop-pijl:focus-visible {
    outline: 3px solid var(--inkt);
    outline-offset: 2px;
}