/*
 * ══════════════════════════════════════════════════════
 *  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)
 *
 *  Laden via functions.php of Customizer → Aanvullende CSS
 *  Vereist: Google Font Titillium Web
 * ══════════════════════════════════════════════════════
 */


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


/* ──────────────────────────────────────
   SECTIETITELS
   ────────────────────────────────────── */
.cf7-wrapper .cf7-section-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Titillium Web', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0090e3;
  border: none;
  border-bottom: 2px solid #0090e3;
  text-decoration: none;
  background: none;
  padding: 0 0 .35rem 0;
  margin: 1.8rem 0 .9rem;
}

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


/* ──────────────────────────────────────
   GRID RIJEN
   ────────────────────────────────────── */
.cf7-wrapper .cf7-row {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: .9rem;
  margin-bottom: .9rem;
}

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

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


/* ──────────────────────────────────────
   VELDEN
   ────────────────────────────────────── */
.cf7-wrapper .cf7-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
}


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

.cf7-wrapper .cf7-req {
  color: #ff6600;
  margin-left: 2px;
}


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

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

.cf7-wrapper input::placeholder,
.cf7-wrapper textarea::placeholder {
  color: #aab0b8;
  font-style: italic;
}

.cf7-wrapper textarea {
  min-height: 130px;
  resize: vertical;
}


/* ──────────────────────────────────────
   SUBMIT-KNOP
   ────────────────────────────────────── */
.cf7-wrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #70cc0a;
  color: #ffffff;
  border: none;
  padding: .8rem 2.2rem;
  border-radius: 5px;
  font-family: 'Titillium Web', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  margin-top: .6rem;
  line-height: 1;
}

.cf7-wrapper input[type="submit"]:hover {
  background: #5fad08;
}

.cf7-wrapper input[type="submit"]:active {
  background: #5fad08;
}


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


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

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


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

.cf7-wrapper .wpcf7-mail-sent-ok {
  background: #eaffd6;
  color: #2d6a00;
  border-left: 4px solid #70cc0a;
}

.cf7-wrapper .wpcf7-validation-errors,
.cf7-wrapper .wpcf7-spam-blocked {
  background: #fff3eb;
  color: #7a3000;
  border-left: 4px solid #ff6600;
}

.cf7-wrapper p {
  float: none !important;
}

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

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