/*
 * ══════════════════════════════════════════════════════
 *  CONTACTFORMULIER — WORDPRESS / CONTACT FORM 7
 *  Huisstijl stylesheet
 *
 *  Font:    Titillium Web (Google Fonts)
 *  Kleuren: #0090e3 (blauw accent)
 *           #0242a3 (donkerblauw)
 *           #70cc0a (groen — buttons)
 *           #ff6600 (oranje — validatie)
 *           #efefef (achtergrond wrapper)
 *           #24292e (tekst)
 *
 *  Plak deze CSS in:
 *  Weergave → Customizer → Aanvullende CSS
 *  of in je child-theme stylesheet.
 *
 *  Vereist Google Font in je theme of functions.php:
 *  https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700
 * ══════════════════════════════════════════════════════
 */


/* ──────────────────────────────────────
   WRAPPER
   ────────────────────────────────────── */
.cf7-wrapper {
  max-width: 680px !important;
  margin: 0 auto !important;
  font-family: 'Titillium Web', sans-serif !important;
  background: #efefef !important;
  padding: 2rem !important;
  border-radius: 8px !important;
}


/* ──────────────────────────────────────
   SECTIETITELS
   ────────────────────────────────────── */
.cf7-section-title {
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #0090e3 !important;
  border-bottom: 2px solid #0090e3 !important;
  padding-bottom: .35rem !important;
  margin: 1.8rem 0 .9rem !important;
}

.cf7-section-title:first-child {
  margin-top: 0 !important;
}


/* ──────────────────────────────────────
   GRID RIJEN
   ────────────────────────────────────── */
.cf7-row {
  display: grid !important;
  gap: .9rem !important;
  margin-bottom: .9rem !important;
}

.cf7-col-2 {
  grid-template-columns: 1fr 1fr !important;
}

.cf7-col-3 {
  grid-template-columns: 2fr 1fr 1fr !important;
}


/* ──────────────────────────────────────
   LABELS
   ────────────────────────────────────── */
.cf7-wrapper label,
.cf7-field label {
  display: block !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #24292e !important;
  margin-bottom: .3rem !important;
}


/* ──────────────────────────────────────
   INVOERVELDEN (input + textarea)
   ────────────────────────────────────── */
.wpcf7 .cf7-wrapper input[type="text"],
.wpcf7 .cf7-wrapper input[type="email"],
.wpcf7 .cf7-wrapper input[type="tel"],
.wpcf7 .cf7-wrapper textarea {
  width: 100% !important;
  padding: .65rem .9rem !important;
  border: 1.5px solid #c8cdd2 !important;
  border-radius: 5px !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .9rem !important;
  color: #24292e !important;
  background: #ffffff !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  outline: none !important;
  appearance: none !important;
}

/* Focus-state */
.wpcf7 .cf7-wrapper input[type="text"]:focus,
.wpcf7 .cf7-wrapper input[type="email"]:focus,
.wpcf7 .cf7-wrapper input[type="tel"]:focus,
.wpcf7 .cf7-wrapper textarea:focus {
  border-color: #0090e3 !important;
  box-shadow: 0 0 0 3px rgba(0, 144, 227, 0.15) !important;
  background: #fff !important;
}

/* Placeholder tekst */
.wpcf7 .cf7-wrapper input::placeholder,
.wpcf7 .cf7-wrapper textarea::placeholder {
  color: #aab0b8 !important;
  font-style: italic !important;
  font-family: 'Titillium Web', sans-serif !important;
}

/* Textarea specifiek */
.wpcf7 .cf7-wrapper textarea {
  min-height: 130px !important;
  resize: vertical !important;
}


/* ──────────────────────────────────────
   SUBMIT-KNOP
   ────────────────────────────────────── */
.wpcf7 .cf7-wrapper input[type="submit"] {
  background: #70cc0a !important;
  color: #ffffff !important;
  border: none !important;
  padding: .8rem 2.2rem !important;
  border-radius: 5px !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
  margin-top: .6rem !important;
  display: inline-block !important;
}

.wpcf7 .cf7-wrapper input[type="submit"]:hover {
  background: #5fad08 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(112, 204, 10, 0.35) !important;
}

.wpcf7 .cf7-wrapper input[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}


/* ──────────────────────────────────────
   VERPLICHT-NOOT
   ────────────────────────────────────── */
.cf7-required-note {
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .78rem !important;
  color: #6b7280 !important;
  margin: .3rem 0 .7rem !important;
}


/* ──────────────────────────────────────
   VALIDATIE — FOUTKLEUR (oranje)
   ────────────────────────────────────── */
.wpcf7 .cf7-wrapper .wpcf7-not-valid {
  border-color: #ff6600 !important;
  background: #fff5ef !important;
}

.wpcf7-not-valid-tip {
  font-family: 'Titillium Web', sans-serif !important;
  color: #ff6600 !important;
  font-size: .78rem !important;
  margin-top: .25rem !important;
  display: block !important;
}


/* ──────────────────────────────────────
   RESPONS-UITVOER (succes / foutbericht)
   ────────────────────────────────────── */
.wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: .75rem 1rem !important;
  border-radius: 5px !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .875rem !important;
  border: none !important;
}

/* Succes */
.wpcf7 .wpcf7-mail-sent-ok {
  background: #eaffd6 !important;
  color: #2d6a00 !important;
  border-left: 4px solid #70cc0a !important;
}

/* Fout / spam */
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-spam-blocked {
  background: #fff3eb !important;
  color: #7a3000 !important;
  border-left: 4px solid #ff6600 !important;
}


/* ──────────────────────────────────────
   RESPONSIVE — mobiel
   ────────────────────────────────────── */
@media (max-width: 580px) {
  .cf7-col-2,
  .cf7-col-3 {
    grid-template-columns: 1fr !important;
  }

  .cf7-wrapper {
    padding: 1.2rem !important;
  }
}