/*
 * Contact — Martha Kindercoaching
 * ----------------------------------------
 * Alleen op de Contact-template geladen (zie functions.php).
 * Links contactkaarten, rechts het formulierblok. De icon-chip is generiek
 * (components.css). De form-styling geldt voor zowel de voorbeeldweergave
 * (.martha-form) als een gekoppeld Gravity Forms-formulier (.gform_wrapper).
 */

.contact__inner {
  display:               grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:                   var(--space-12);
  align-items:           start;
}

/* ----------------------------------------
 * CONTACTKAARTEN (links)
 * ---------------------------------------- */

.contact__info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.contact-card {
  display:          flex;
  align-items:      center;
  gap:              var(--space-4);
  padding:          var(--space-5) var(--space-6);
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.contact-card:hover {
  border-color: color-mix(in oklab, var(--sage) 55%, var(--border));
  box-shadow:   var(--shadow-md);
}

.contact-card .icon-chip {
  flex-shrink: 0;
}

.contact-card__title {
  margin:      0 0 var(--space-1);
  font-size:   var(--text-lg);
  font-weight: var(--font-bold);
  color:       var(--ink);
}

.contact-card__text {
  margin:      0;
  font-style:  normal;
  color:       var(--muted-foreground);
  line-height: var(--leading-normal);
}

.contact-card__text a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.contact-card__text a:hover {
  color: var(--sage-deep);
}

/* ----------------------------------------
 * FORMULIERBLOK (rechts)
 * ---------------------------------------- */

.contact__form-card {
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-md);
  padding:          var(--space-10);
}

.contact__form-title {
  margin:    0 0 var(--space-2);
  font-size: var(--text-2xl);
}

.contact__form-intro {
  margin:     0 0 var(--space-8);
  color:      var(--muted-foreground);
}

/* ----------------------------------------
 * FORMULIER-VELDEN — geldt voor .martha-form (voorbeeld) én Gravity Forms
 * ---------------------------------------- */

.martha-form__field {
  display:        flex;
  flex-direction: column;
  margin-bottom:  var(--space-5);
}

.martha-form__row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-5);
}

.martha-form__label,
.contact__form-card .gform_wrapper .gfield_label {
  margin-bottom: var(--space-2);
  font-family:   var(--font-heading);
  font-size:     var(--text-sm);
  font-weight:   var(--font-medium);
  color:         var(--ink);
}

.martha-form__input,
.martha-form__textarea,
.contact__form-card .gform_wrapper input[type="text"],
.contact__form-card .gform_wrapper input[type="email"],
.contact__form-card .gform_wrapper input[type="tel"],
.contact__form-card .gform_wrapper input[type="url"],
.contact__form-card .gform_wrapper textarea {
  width:            100%;
  padding:          0.85rem 1.25rem;
  background-color: var(--background);
  border:           1px solid var(--border);
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--ink);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.martha-form__input,
.contact__form-card .gform_wrapper input[type="text"],
.contact__form-card .gform_wrapper input[type="email"],
.contact__form-card .gform_wrapper input[type="tel"],
.contact__form-card .gform_wrapper input[type="url"] {
  border-radius: var(--radius-full);
  padding:       1rem 1.5rem;   /* iets meer hoogte dan de basis */
}

.martha-form__textarea,
.contact__form-card .gform_wrapper textarea {
  border-radius: var(--radius-lg);
  min-height:    140px;
  resize:        vertical;
}

.martha-form__input:focus,
.martha-form__textarea:focus,
.contact__form-card .gform_wrapper input:focus,
.contact__form-card .gform_wrapper textarea:focus {
  outline:      none;
  border-color: var(--sage);
  box-shadow:   0 0 0 3px color-mix(in oklab, var(--sage) 30%, transparent);
}

/* Preview-submit (.martha-form__submit gebruikt .btn .btn-primary) volle breedte */
.martha-form__submit {
  width:      100%;
  margin-top: var(--space-2);
}

/* Gravity Forms primaire kleur gelijktrekken met de huisstijl (sage-deep).
   Hierdoor volgen ook focus-randen en accenten de huisstijl i.p.v. GF-blauw. */
.contact__form-card .gform_wrapper {
  --gf-color-primary:          var(--sage-deep);
  --gf-color-primary-darker:   color-mix(in oklab, var(--sage-deep) 88%, black);
  --gf-color-primary-lighter:  var(--sage);
  --gf-color-primary-contrast: #fff;
  --gf-color-primary-rgb:      104, 160, 84;   /* ~ sage-deep, voor rgba-glows */
}

/* Submit-knop: GF-orbital is sterk ge-encapsuleerd; daarom hier expliciet
   overschrijven naar de btn-primary-look, volle breedte. */
.contact__form-card .gform_wrapper .gform_footer input[type="submit"],
.contact__form-card .gform_wrapper .gform-footer input[type="submit"] {
  width:         100% !important;
  min-height:    var(--btn-height) !important;   /* gelijk aan .btn */
  height:        auto !important;
  padding:       0.5rem 1.5rem !important;
  border:        1px solid transparent !important;
  border-radius: var(--radius-full) !important;
  background:    var(--sage-deep) !important;
  color:         #fff !important;
  font-family:   var(--font-body) !important;
  font-size:     0.875rem !important;
  font-weight:   500 !important;
  line-height:   1 !important;                    /* gelijk aan .btn */
  cursor:        pointer;
  transition:    all 0.2s ease;
}

.contact__form-card .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact__form-card .gform_wrapper .gform-footer input[type="submit"]:hover {
  background: color-mix(in oklab, var(--sage-deep) 88%, black) !important;
}

/* Disabled preview-velden niet grijzen */
.martha-form--preview .martha-form__input,
.martha-form--preview .martha-form__textarea {
  opacity:          1;
  -webkit-text-fill-color: var(--ink);
  background-color: var(--background);
}

.martha-form--preview .btn[disabled] {
  opacity: 1;
  cursor:  default;
}

.martha-form__note {
  margin-top: var(--space-4);
  font-size:  var(--text-xs);
  color:      var(--muted-foreground);
}

/* Verplicht-asterisk (preview + Gravity Forms) in de huisstijl */
.martha-form__req,
.contact__form-card .gform_wrapper .gfield_required,
.contact__form-card .gform_wrapper .gfield_required_asterisk {
  color:       var(--sage-deep);
  font-weight: var(--font-semibold);
}

/* GF's eigen "* geeft vereiste velden aan"-melding bovenaan verbergen;
   we tonen onze eigen nettere notitie onder het formulier. */
.contact__form-card .gform_wrapper .gform_required_legend {
  display: none;
}

/* "* verplichte velden"-notitie onder het formulier */
.contact__form-note {
  margin-top: var(--space-5);
  font-size:  var(--text-sm);
  color:      var(--muted-foreground);
}

.contact__form-req {
  color:       var(--sage-deep);
  font-weight: var(--font-semibold);
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 860px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .martha-form__row {
    grid-template-columns: 1fr;
  }
  .contact__form-card {
    padding: var(--space-6);
  }
}