/* /contact/ — ontwerpsysteem v2. Alleen tokens uit site.css. */

/* Telefoonnummer groot in de hero: de primaire actie van deze pagina */
.contact-tel { display: inline-flex; flex-direction: column; gap: .35rem; margin-top: var(--sp-xl); color: var(--op-nacht); text-decoration: none; }
.contact-tel__label { font: 500 .76rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--op-nacht-2); }
.contact-tel__nr { font: 500 clamp(2.2rem, 1.2rem + 4.2vw, 4.4rem)/1 var(--mono); letter-spacing: -.045em; color: var(--goud); font-variant-numeric: tabular-nums; border-bottom: 2px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); }
.contact-tel:hover .contact-tel__nr { border-color: var(--oranje); color: var(--oranje); }
.page-hero .hero__actions { margin-top: var(--sp-lg); }

/* Formulier naast de gegevens */
.contact-opzet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact-opzet { grid-template-columns: minmax(0, 1fr); } }
.contact-form h2 { margin-bottom: var(--sp-md); }
.contact-regel { font-size: 1.08rem; color: var(--ink-2); margin-bottom: var(--sp-lg); min-height: 3.2em; }
.contact-form .formkaart { padding: clamp(20px, 3.4vw, 40px); }
.contact-form .field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317140F' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.contact-form .optioneel { font-weight: 400; color: var(--muted); }
.contact-form .veld-fout, .veld-fout { color: #B3261E; font-weight: 600; font-size: .88rem; }
.contact-form .field input[aria-invalid="true"], .contact-form .field textarea[aria-invalid="true"] { box-shadow: 0 0 0 1px #B3261E; }
.contact-form .btn--block { margin-top: var(--sp-md); }
.contact-form .sent__tekst { font-weight: 600; font-size: 1.15rem; }

/* Gegevens als werkbon-achtige lijst */
.contact-gegevens { padding-top: clamp(0px, 5vw, 88px); }
.contact-gegevens__kop { font: 500 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--ink); }
.contact-lijst { margin: 0 0 var(--sp-xl); }
.contact-lijst > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-md); padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.contact-lijst dt { font: 500 .78rem/1.8 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.contact-lijst dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.contact-lijst a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.contact-lijst a:hover { color: var(--oranje-tekst); text-decoration-color: currentColor; }
.contact-lijst address { font-style: normal; }
.contact-gegevens .specs { margin-bottom: var(--sp-lg); }
.contact-gegevens .specs li { font-size: .98rem; }
.contact-gegevens__noot { font-size: .9rem; color: var(--muted); }

/* Meldingen na versturen zonder JavaScript (aanvraag.php stuurt terug naar #verstuurd) */
.contact-melding { display: none; margin: 0 0 var(--sp-lg); padding: 1.2rem 1.3rem; background: var(--kaart); border: 1px solid var(--rule-2); border-radius: var(--r); }
.contact-melding:target { display: block; }
.contact-melding--fout { border-left: 3px solid #B3261E; }
.contact-melding p:last-child { margin-bottom: 0; }

.contact-verder { margin-top: var(--sp-xl); }
#contact-formulier.is-sent:focus { outline: none; }