/* ==========================================================================
   SmartPresent · Contact (SP-007)
   ========================================================================== */
.contact-hero{padding-bottom:clamp(24px,4vw,48px)}
.contact{padding-top:0}
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact__kop{font-family:var(--f-label);font-weight:800;font-size:clamp(1.2rem,1.6vw,1.45rem);margin-bottom:18px}

/* ---------- kanalen ---------- */
.kanalen{list-style:none;display:grid;gap:4px}
.kanaal{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-line)}
.kanaal__icoon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-ink);color:var(--c-bg)}
.kanaal__icoon svg{width:22px;height:22px}
.kanaal__label{font-family:var(--f-label);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.kanaal__waarde{font-weight:600;color:var(--c-ink);line-height:1.4}
a.kanaal__waarde{text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:.2em;overflow-wrap:anywhere}
a.kanaal__waarde:hover{text-decoration-color:var(--red)}
.contact__bedrijf{margin-top:18px;font-size:.88rem;color:var(--c-soft)}
.contact__dienst{margin-top:4px;font-size:.88rem;color:var(--c-muted)}

/* ---------- formulier ---------- */
.contact__formulier{background:var(--c-bg-2);border:1px solid var(--c-line);border-radius:14px;padding:clamp(20px,3vw,36px)}
.contact__zonder-js p{color:var(--c-soft);margin-bottom:16px}
.formulier{display:grid;gap:18px}
.formulier[hidden]{display:none}
.formulier__velden{display:grid;gap:18px;border:0;margin:0;padding:0;min-width:0}
.formulier__velden:disabled{opacity:.75}
.formulier__uitleg{font-size:.86rem;color:var(--c-muted)}
.veld{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.veld label,.veld legend{font-family:var(--f-label);font-weight:700;font-size:.92rem;color:var(--c-ink)}
.veld legend{margin-bottom:10px}
.veld__optioneel{font-weight:500;color:var(--c-muted)}
/* niet de radio's in de chips: die zijn onzichtbare klikvlakken */
.veld input:not([type="radio"]),.veld textarea{
  width:100%;min-height:48px;padding:.7em .9em;border-radius:8px;border:1px solid var(--c-muted);
  background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:1rem;
  transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out)
}
.veld textarea{resize:vertical;min-height:120px}
.veld input:not([type="radio"]):hover,.veld textarea:hover{border-color:var(--c-ink)}
.veld input:not([type="radio"]):focus-visible,.veld textarea:focus-visible{outline:none;border-color:var(--c-ink);box-shadow:0 0 0 3px var(--red)}
.veld input:not([type="radio"])[aria-invalid="true"],.veld textarea[aria-invalid="true"]{border-color:var(--red-text);border-width:2px}
.veld--keuze input[aria-invalid="true"] + span{border-color:var(--red-text);border-width:2px}
.veld__fout{font-size:.88rem;font-weight:600;color:var(--red-text);display:flex;gap:6px;align-items:flex-start}
.veld__fout::before{content:"!";display:inline-grid;place-items:center;flex:none;width:1.25em;height:1.25em;border-radius:50%;background:var(--red-text);color:#fff;font-size:.78em;margin-top:.15em}
/* honeypot: buiten beeld, niet voor mensen */
.veld--honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier__verstuur{justify-self:start;min-height:48px}
.formulier__verstuur:disabled{opacity:.6;cursor:progress}

/* ---------- melding ---------- */
.formulier__melding{margin-top:20px;padding:18px 20px;border-radius:10px;border:2px solid var(--c-line-strong);background:var(--c-bg)}
.formulier__melding:focus{outline:none}
.formulier__melding:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.formulier__melding[data-soort="fout"]{border-color:var(--red-text)}
.formulier__melding[data-soort="succes"]{border-color:#1E7A4C}
.formulier__melding-titel{font-family:var(--f-label);font-weight:800;font-size:1.1rem}
.formulier__melding-tekst{margin-top:6px;color:var(--c-soft)}
.formulier__alternatieven{margin-top:14px}

@media (max-width:899px){
  .contact__grid{grid-template-columns:minmax(0,1fr)}
}