/* =========================================================
   CF7 - condensed & sleek, wired to Frost / WordPress tokens
   Paste into Frost's Additional/Custom CSS area.
   Scoped to .wpcf7-form so it won't leak into the rest of the site.
   ========================================================= */

.wpcf7-form {
  /* Map Frost palette slugs to local vars (with safe fallbacks).
     Frost's default slugs are base / contrast / primary / secondary / tertiary.
     If your accent lives under a different slug, change --form-accent below. */
  --form-accent:       var(--wp--preset--color--primary,  #3858e9);
  --form-accent-text:  var(--wp--preset--color--contrast, #1a1a1a);
  --form-text:         var(--wp--preset--color--base,     #ffffff);
  --form-bg:           var(--wp--preset--color--base,      #ffffff);

  /* Derived tones from the text color - subtle field bg + hairline border */
  --form-field-bg: color-mix(in srgb, var(--form-text)  3%, var(--form-bg));
  --form-border:   color-mix(in srgb, var(--form-text) 20%, transparent);

  --form-radius: 0px;
  --form-gap: 0.9rem;

  margin-inline: auto;
  color: var(--form-text);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Strip CF7's default paragraph spacing */
.wpcf7-form p { margin: 0 ;}

/* Hidden CF7 plumbing: kill the fieldset border/margin (inputs still submit) */
.wpcf7-form .hidden-fields-container { display: none; }

/* Labels: caption stacked above the field */
.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  font-weight: 500;
}

/* The theme uses line-break tags for layout - drop them, grid handles spacing */
.cf7-3col br,
.cf7-2col br,
.cf7-1col label br { display: none; }

/* --- Column layouts ------------------------------------------------------ */

/* 3-across: Name / Email / Phone. Auto-collapses on narrow screens. */
.cf7-3col p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--form-gap);
  margin-bottom: var(--form-gap);
}

/* 2-across variant (not currently used).
   Add class cf7-2col to a wrapper to use it. Explicit 2 columns on desktop,
   single column on phones. */
.cf7-2col p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--form-gap);
  margin-bottom: var(--form-gap);
}
@media (max-width: 480px) {
  .cf7-2col p { grid-template-columns: 1fr; }
}

/* 1-col: full-width single field (e.g. the message textarea). */
.cf7-1col p { margin-bottom: var(--form-gap); }

/* ------------------------------------------------------------------------- */

/* Control wrapper fills its cell */
.wpcf7-form-control-wrap { display: block; width: 100%; }

/* Inputs + textarea */
.wpcf7-form input.wpcf7-text,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--form-accent-text);
  background: var(--form-field-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wpcf7-form textarea {
  min-height: 100px;
  max-height: 100px;
  resize: none;
}

.wpcf7-form ::placeholder {
  color: color-mix(in srgb, var(--form-text) 45%, transparent);
}

/* Focus ring in the accent color */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent) 25%, transparent);
}

/* Submit button */
.wpcf7-form input.wpcf7-submit {
  appearance: none;
  display: inline-block;
  padding: 0.6rem 1.6rem;
  font: inherit;
  font-weight: 600;
  color: var(--form-text);
  background: var(--form-accent);
  border: none;
  border-radius: var(--form-radius);
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.wpcf7-form input.wpcf7-submit:hover  { filter: brightness(1.08); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(1px); }

/* Tighten the gap between the message field and the button */
.cf7-1col + p { margin-top: 0.2rem; }

/* Validation + response output */
.wpcf7-form .wpcf7-not-valid { border-color: #d63638 !important; }
.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #d63638;
}
.wpcf7-form .wpcf7-response-output {
  margin: 0.6rem 0 0 !important;
  padding: 0.6rem 0.8rem !important;
  font-size: 0.85rem;
  border-radius: var(--form-radius);
}

/* Spinner sits neatly beside the button */
.wpcf7-form .wpcf7-spinner { margin: 0 0 0 0.6rem; }

/* Keep the a11y status region visually hidden but present */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}