/* Contactpagina (/contact, Pro-omlijsting). Laadt BOVENOP style.css: de tokens, knoppen en
   sectie-opmaak komen daarvandaan; hier staan alleen de contact-eigen blokken.
   De .lawbot-gf-regels kleden het Gravity Forms-formulier aan zodra de plugin actief is
   (tot die tijd rendert de mailknop-terugval). Zelfde aanpak als litic.ai/contact. */

/* ── Kop ─────────────────────────────────────────────────────────────── */
.contact-kop h1 { font-size:clamp(2rem,3.4vw,2.6rem); margin-bottom:.7rem; }

/* ── Tweeluik: direct contact naast het berichtformulier ─────────────── */
.contact-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:1.4rem; align-items:start; }
@media (max-width:920px) { .contact-split { grid-template-columns:1fr; } }

.contact-meta { padding:1.7rem 1.8rem; }
.contact-meta > p { color:var(--inkt-zacht); font-size:.95rem; }
.contact-lijst { list-style:none; display:flex; flex-direction:column; gap:.9rem; margin-top:1.3rem; }
.contact-lijst li { display:flex; align-items:center; gap:.85rem; font-weight:600; }
.contact-lijst a { color:var(--inkt); }
.contact-lijst a:hover { color:var(--groen-donker); }
.ci { display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem;
  border-radius:50%; background:var(--groen-tint); color:var(--groen-donker); flex:none; }
.ci .ic { width:1.15rem; height:1.15rem; }

.contact-faq { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--beige); }
.contact-faq p { color:var(--inkt-zacht); font-size:.95rem; }
.contact-faq ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-top:.8rem; }
.contact-faq a { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; }
.contact-faq a .ic { color:var(--groen); }

.contact-form { padding:1.7rem 1.8rem; }
.cf-kop h3 { font-size:1.2rem; }
.cf-kop p { color:var(--inkt-zacht); font-size:.95rem; margin-bottom:1.2rem; }
.contact-form .klein { margin-top:1.1rem; }

/* Terugval zonder formulierplugin: mailknop in plaats van een leeg kader. */
.contact-terugval p { color:var(--inkt-zacht); margin-bottom:1.1rem; }

/* ── Gravity Forms in de quiet library-huisstijl (zoals litic.ai dat doet) ── */
/* GF's Orbital-thema (GF 3.x) rekent voor vrijwel alles met eigen CSS-variabelen en print
   die met een ID-selector per formulier (#gform_wrapper_N[data-form-index].gform-theme).
   Daar verliest elke class-selector van, dus deze variabelen staan bewust op !important:
   zo volgen knop, velden, focusringen, consent-vinkje en foutkleuren de quiet library. */
.lawbot-gf .gform_wrapper.gform-theme {
  --gf-color-primary: var(--groen) !important;
  --gf-color-primary-rgb: 95, 111, 98 !important;
  --gf-color-primary-contrast: #fff !important;
  --gf-color-primary-contrast-rgb: 255, 255, 255 !important;
  --gf-color-primary-darker: var(--groen-donker) !important;
  --gf-color-primary-lighter: #6f7f72 !important;
  --gf-color-in-ctrl-primary: var(--groen) !important;
  --gf-color-in-ctrl-primary-rgb: 95, 111, 98 !important;
  --gf-color-in-ctrl-primary-contrast: #fff !important;
  --gf-color-in-ctrl-primary-darker: var(--groen-donker) !important;
  --gf-color-in-ctrl-primary-lighter: #6f7f72 !important;
  --gf-color-in-ctrl-contrast: var(--inkt) !important;
  --gf-color-out-ctrl-dark: var(--inkt-zacht) !important;
  --gf-color-out-ctrl-dark-rgb: 111, 97, 85 !important;
  --gf-color-out-ctrl-dark-darker: var(--inkt) !important;
  --gf-color-out-ctrl-dark-lighter: rgba(84, 72, 63, .65) !important;
  --gf-color-danger: var(--fout) !important;
  --gf-color-danger-rgb: 164, 69, 59 !important;
  --gf-radius: 10px !important;
  --gf-ctrl-border-color: var(--beige) !important;
  --gf-ctrl-color: var(--inkt) !important;
  --gf-ctrl-placeholder-color: var(--salie) !important;
}
/* Losse regels: ook hier wint GF's framework-CSS op specificiteit, dus de kernwaarden
   (typografie, maat, kleur) staan op !important. Alles netjes afgebakend tot .lawbot-gf. */
.lawbot-gf .gform_wrapper { margin:0; }
.lawbot-gf .gform_required_legend { display:none !important; }
.lawbot-gf .gfield { margin-bottom:1.05rem; }
.lawbot-gf .gfield_label { display:block; font-size:.86rem !important; font-weight:600 !important;
  color:var(--inkt-zacht) !important; margin:0 0 .35rem !important; }
.lawbot-gf .gfield_required { color:var(--groen-donker) !important; margin-left:2px; }
.lawbot-gf input[type=text], .lawbot-gf input[type=email], .lawbot-gf textarea {
  width:100%; font-family:inherit !important; font-size:1rem !important; color:var(--inkt) !important;
  background:#fff !important; border:1px solid var(--beige) !important; border-radius:10px !important;
  padding:.7rem .95rem !important; height:auto !important; }
.lawbot-gf textarea { min-height:170px !important; max-height:320px; resize:vertical; }
.lawbot-gf ::placeholder { color:var(--salie) !important; }
.lawbot-gf .gfield--type-consent .gchoice, .lawbot-gf .ginput_container_consent {
  display:flex; gap:.6rem; align-items:flex-start; }
.lawbot-gf .gfield--type-consent input { width:auto; margin-top:.3rem; }
.lawbot-gf .gfield_consent_label, .lawbot-gf .gfield--type-consent label {
  font-size:.88rem !important; font-weight:500 !important; color:var(--inkt-zacht) !important; margin:0; }
.lawbot-gf .gform_footer { margin-top:.5rem; }
.lawbot-gf .gform_button { display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border:0; cursor:pointer; font-family:inherit !important; font-weight:700 !important;
  font-size:1rem !important; color:#fff !important; background:var(--groen);
  padding:.8rem 1.35rem !important; height:auto !important;
  transition:background .15s ease, transform .15s ease; }
.lawbot-gf .gform_button:hover { background:var(--groen-donker); transform:translateY(-1px); }
.lawbot-gf .validation_message, .lawbot-gf .gfield_validation_message {
  color:var(--fout) !important; font-size:.85rem !important; margin-top:.35rem; }
.lawbot-gf .gform_validation_errors { border:1px solid rgba(164,69,59,.35) !important;
  background:rgba(164,69,59,.08) !important; border-radius:12px !important;
  padding:.9rem 1.1rem !important; margin-bottom:1.1rem; }
.lawbot-gf .gform_confirmation_message { font-size:1.05rem; color:var(--inkt); padding:1.2rem 0; }

/* ── Onboarding-agenda (zelfde bouwsteen als success/account, quiet library-jasje) ── */
.onboarding { background:var(--kaart); border:1px solid var(--beige); border-radius:16px;
  padding:1.7rem 1.8rem; }
.onboarding h2 { font-size:1.35rem; margin-bottom:.4rem; }
.onboarding p { color:var(--inkt-zacht); max-width:44rem; }
.onboarding button { display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem; color:#fff; background:var(--groen);
  border-radius:12px; padding:.85rem 1.35rem; margin-top:1.1rem;
  transition:background .15s ease, transform .15s ease; }
.onboarding button:hover { background:var(--groen-donker); transform:translateY(-1px); }
.onboarding .klein { margin-top:.9rem; }
.agenda { margin-top:1.1rem; }
.agenda iframe { width:100%; height:640px; border:0; border-radius:10px; background:#fff; }
@media (max-width:600px) { .agenda iframe { height:560px; } }

/* ── Kantoren (kaart pas laden na een klik, zie assets/contact.js) ───── */
.kantoren { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:860px) { .kantoren { grid-template-columns:1fr; } }
.kantoor { background:var(--kaart); border:1px solid var(--beige); border-radius:16px; overflow:hidden; }
.kaart-vak { position:relative; aspect-ratio:16/10; background:var(--papier-2);
  border-bottom:1px solid var(--beige); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.7rem; padding:1rem; text-align:center; }
.kaart-vak iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.kaart-knop { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:.95rem; color:var(--inkt);
  background:var(--kaart); border:1px solid var(--beige); border-radius:10px; padding:.6rem 1.05rem;
  transition:border-color .15s ease, color .15s ease; }
.kaart-knop:hover { border-color:var(--groen); color:var(--groen-donker); }
.kaart-knop .ic { color:var(--groen); }
.kaart-noot { font-size:.78rem; color:var(--salie); max-width:17rem; }
.kantoor-info { padding:1.2rem 1.4rem; }
.kantoor-info h3 { font-size:1.15rem; }
.kantoor-info p { color:var(--inkt-zacht); font-size:.95rem; }
.kantoor-info .route { display:inline-flex; align-items:center; gap:.45rem; margin-top:.75rem;
  font-weight:600; font-size:.95rem; }
.kantoor-info .route .ic { color:var(--groen); }