/* ============================================================
   contact.html + bedankt.html — paginaspecifieke stijl
   Bouwt op het blok "DESIGNSYSTEEM v2" in assets/css/style.css.
   ============================================================ */

/* Alleen voor schermlezers */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Page-hero: compact, zodat het formulier snel in beeld komt ── */
.page-hero--contact { padding-bottom: var(--space-l); }
.page-hero--contact h1 { max-width: none; }
.page-hero .contact-hero__direct {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
}
.contact-hero__direct a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding-block: .3rem;   /* tikdoel ≥ 24px */
}
.contact-hero__direct a:hover { color: var(--action); }
@media (max-width: 768px) {
  .page-hero--contact { padding-top: calc(var(--nav-h) + var(--space-m)); padding-bottom: var(--space-m); }
  .page-hero--contact .breadcrumb { display: none; }   /* ruimte sparen; 1 niveau diep */
  .page-hero--contact p:not(.contact-hero__direct) { font-size: var(--step-0); }
}

/* ── Indeling: formulier (breed) + contactkolom ── */
.contact-section { padding-top: var(--space-l); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}
.contact-layout > * { min-width: 0; }
@media (min-width: 960px) {
  .contact-layout { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-xl); }
  .contact-aside { position: sticky; top: calc(var(--nav-h) + var(--space-s)); }
}

/* ── Formulierkaart ── */
.contact-form.card { box-shadow: var(--shadow); padding: var(--space-l); }
@media (max-width: 600px) { .contact-form.card { padding: var(--space-m) var(--space-s); } }
.contact-form__title { font-size: var(--step-2); margin-bottom: var(--space-3xs); }
.contact-form__intro { font-size: var(--step--2); color: var(--text-muted); margin-bottom: var(--space-m); }
/* style.css kleurt elke <span> in een label groen; hier alleen de markeringen */
.contact-form .form-group label span { color: inherit; }
.contact-form .form-group label .optional { color: var(--text-muted); font-weight: 400; }
.contact-form .form-group label .req,
.contact-form__intro span[aria-hidden] { color: #B42318; }

.form-fieldset {
  border: 0; margin: 0 0 var(--space-s); padding: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.form-legend {
  display: flex; align-items: center; gap: .6rem;
  float: left; width: 100%;                      /* legend binnen de rand, niet erop */
  padding: var(--space-s) 0 0; margin-bottom: var(--space-s);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: #256B42;
}
.form-legend__num {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: rgba(46,125,79,.1); color: #256B42;
  font-size: var(--step--2); letter-spacing: 0;
}
.form-legend + * { clear: both; }
.form-fieldset__hint { margin: 0 0 var(--space-s); }

.contact-form .form-group label { font-size: var(--step--1); }
.contact-form .form-hint { font-size: var(--step--2); line-height: 1.5; margin-top: .4rem; }
.contact-form .form-group textarea { min-height: 96px; }
.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea { min-height: 48px; }
.contact-form .form-row { gap: 0 var(--space-s); }

/* Adres: postcode | huisnummer | toevoeging; op smal scherm postcode volle breedte */
.form-row--adres { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 var(--space-s); }
@media (max-width: 600px) {
  .form-row--adres { grid-template-columns: 1fr 1fr; }
  .form-group--postcode { grid-column: 1 / -1; }
}
@media (max-width: 768px) and (min-width: 601px) {
  .contact-form .form-row:not(.form-row--adres) { grid-template-columns: 1fr 1fr; }
}

/* Statusregel bij de dienstkeuze */
.contact-status { margin-top: var(--space-2xs); display: flex; }

/* Foutmeldingen: tekst + icoon, niet alleen kleur */
.contact-form .field-error { display: flex; gap: .35rem; align-items: flex-start; font-weight: 600; }
.contact-form .field-error svg { flex-shrink: 0; margin-top: .15em; }
.contact-form [aria-invalid="true"] { background: #FFF8F7; }
.form-errors {
  margin-bottom: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid #F1B8B2; border-left: 4px solid #B42318;
  border-radius: var(--radius-sm);
  background: #FFF4F2;
  font-size: var(--step--1);
}
.form-errors:focus { outline: 3px solid var(--green-light); outline-offset: 2px; }
.form-errors__title { font-family: var(--font-head); font-weight: 700; color: #8A1C12; margin-bottom: .35rem; }
.form-errors ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.form-errors a { color: #8A1C12; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: .15rem; }

/* Eerlijke afspraken bij de verzendknop */
.form-promises {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-s);
  margin: 0 0 var(--space-s); padding: var(--space-s);
  background: rgba(46,125,79,.06); border-radius: var(--radius-sm);
  font-size: var(--step--2); color: var(--ink);
}
.form-promises li { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.45; }
.form-promises svg { color: var(--action); flex-shrink: 0; margin-top: .1em; }
@media (max-width: 480px) { .form-promises { grid-template-columns: 1fr; } }

.contact-form .form-submit { white-space: normal; text-align: center; min-height: 52px; }
.contact-form .form-privacy { font-size: var(--step--2); }
.contact-form .form-privacy a { color: #256B42; text-decoration: underline; text-underline-offset: 2px; }
.form-noscript { margin-top: var(--space-s); font-size: var(--step--2); color: var(--text-muted); }

/* ── Contactkolom ── */
.contact-aside { display: grid; gap: var(--space-m); }
.contact-person__head { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-s); }
.contact-person__photo { width: 76px; flex-shrink: 0; border-radius: var(--radius); }
.contact-person__photo .photo-slot__initials { font-size: var(--step-2); }
.contact-person__title { font-size: var(--step-1); margin: 0; }
.contact-person__name { font-size: var(--step--1); color: var(--text-muted); margin: .15rem 0 0; }
.contact-person__text { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-s); }
.contact-person__btns { display: grid; gap: var(--space-2xs); }
.contact-person__btns .btn { justify-content: center; width: 100%; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2B2F38; color: #fff; }
.btn--wa svg { color: #1A8F47; }

.contact-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; }
.contact-list__item { display: flex; gap: var(--space-xs); align-items: flex-start; }
.contact-list__item > svg { color: var(--action); flex-shrink: 0; margin-top: .2rem; }
.contact-list__item > div { min-width: 0; display: flex; flex-direction: column; }
.contact-list__label {
  font-family: var(--font-head); font-weight: 700; font-size: var(--eyebrow);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.contact-list__value { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
a.contact-list__value { text-decoration: underline; text-decoration-color: rgba(22,24,29,.25); text-underline-offset: 3px; padding-block: .3rem; }
a.contact-list__value:hover { color: var(--action); }
.contact-list__sub { font-size: var(--step--2); color: var(--text-muted); }

.contact-company { font-size: var(--step--2); color: var(--text-muted); line-height: 1.7; padding: var(--space-m); }
.contact-company__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin-bottom: .25rem; }

.contact-reads__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step--1); margin-bottom: var(--space-2xs); }
.contact-reads ul { margin: 0; padding: 0; display: grid; }
.contact-reads a { font-size: var(--step--1); padding-block: .45rem; }

/* ── Vervolgstappen (contact + bedankt) ── */
.next-steps { display: grid; gap: var(--space-m); margin: 0; padding: 0; counter-reset: none; }
@media (min-width: 900px) { .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.next-steps__item {
  display: flex; gap: var(--space-s); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-m);
}
.next-steps__item > div { min-width: 0; }
.next-steps__num {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--action); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step--1);
}
.next-steps h3 { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.next-steps p { font-size: var(--step--1); color: var(--text-muted); }
.next-steps__status { margin-top: var(--space-m); max-width: 62ch; }

/* ── Bedankpagina ── */
.thanks-hero__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(46,125,79,.12); color: var(--action);
  margin-bottom: var(--space-s);
}
.thanks-grid { display: grid; gap: var(--space-l); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .thanks-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.thanks-grid > * { min-width: 0; }
.thanks-prep h2, .thanks-reads h2 { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.thanks-prep > p { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-s); }
.prep-list { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-s); padding: 0; }
.prep-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--step--1); }
.prep-list svg { color: var(--action); flex-shrink: 0; margin-top: .15em; }
.thanks-prep__note { font-size: var(--step--2); color: var(--text-muted); }
.thanks-reads ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; }
.thanks-reads .card--link { padding: var(--space-m); }
.thanks-reads .card--link strong { font-family: var(--font-head); color: var(--ink); font-size: var(--step-0); }
.thanks-reads .card--link span.meta { display: block; margin-top: .2rem; }
.thanks-reads .card__arrow { padding-top: var(--space-2xs); font-weight: 600; font-family: var(--font-head); font-size: var(--step--1); display: inline-flex; gap: .35rem; align-items: center; }
.thanks-contact {
  margin-top: var(--space-l);
  display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between;
}
.thanks-contact p { font-size: var(--step--1); color: var(--text-muted); margin: 0; flex: 1 1 18rem; }
.thanks-contact__btns { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
@media (max-width: 480px) { .thanks-contact__btns, .thanks-contact__btns .btn { width: 100%; justify-content: center; } }
.thanks-home { margin-top: var(--space-m); }

@media (prefers-reduced-motion: reduce) {
  .btn--link svg, .card--link { transition: none; }
}