/* Contact Form 7 styling to match existing contact form design */

/* Base */
.wpcf7 {
  font-family: var(--font-geist-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji");
}

.wpcf7 form {
  margin: 0;
}

/* Spacing between fields (replicates space-y-6) */
.wpcf7 form p {
  margin: 0 0 1.5rem; /* 24px */
}

/* Labels */
.wpcf7 form p > label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #374151; /* gray-700 */
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Text inputs, selects, textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0; /* square corners like Tailwind default inputs here */
  background-color: #ffffff;
  color: #111827; /* gray-900 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #9CA3AF; /* gray-400 */
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #000000; /* focus:border-black */
  box-shadow: inset 0 0 0 1px #000000; /* focus:ring-1 focus:ring-black */
}

/* Textarea height */
.wpcf7 textarea {
  min-height: 10rem; /* ~160px, close to rows=6 */
}

/* Checkbox area */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
  margin: 0.5rem 0; /* my-2 */
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* 12px */
  cursor: pointer;
}

.wpcf7 .wpcf7-checkbox input[type="checkbox"] {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  margin-top: 0.125rem; /* mt-0.5 to align with text */
  border: 1px solid #D1D5DB;
  accent-color: #000000; /* match black theme accent */
}

.wpcf7 .wpcf7-list-item-label {
  font-size: 0.875rem; /* text-sm */
  color: #374151; /* gray-700 */
}

/* Submit button */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 2rem; /* py-3 px-8 */
  font-weight: 500; /* font-medium */
  color: #ffffff;
  background-color: #000000; /* bg-black */
  border: 1px solid #000000;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  .wpcf7 input[type="submit"],
  .wpcf7 button[type="submit"] {
    width: auto; /* md:w-auto */
    margin-left: auto;
    margin-right: auto; /* center align */
  }
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background-color: #1F2937; /* hover:bg-gray-800 */
  border-color: #1F2937;
}

.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Validation states */
.wpcf7 .wpcf7-not-valid {
  border-color: #EF4444; /* red-500 */
  box-shadow: inset 0 0 0 1px #EF4444;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 0.5rem; /* mt-2 */
  font-size: 0.875rem; /* text-sm */
  color: #B91C1C; /* red-700 */
}

/* Response message */
.wpcf7 .wpcf7-response-output {
  margin-top: 1rem; /* mt-4 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0;
  background-color: #F9FAFB; /* gray-50 */
  color: #111827; /* gray-900 */
}

/* Sent / Invalid / Failed states based on data-status on form */
.wpcf7 form[data-status="sent"] .wpcf7-response-output {
  border-color: #10B981; /* green-500 */
  background-color: #ECFDF5; /* green-50 */
  color: #065F46; /* green-700 */
}

.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 form[data-status="failed"] .wpcf7-response-output {
  border-color: #EF4444; /* red-500 */
  background-color: #FEF2F2; /* red-50 */
  color: #B91C1C; /* red-700 */
}

/* Spinner positioning */
.wpcf7 .wpcf7-spinner {
  margin-left: 0.75rem; /* ml-3 */
}

/* ------------------------------------------------------------
   Scroll reveal animations (reuse existing system)
   - Animate CF7 fields in when the surrounding section (with
     data-scroll-reveal) becomes .revealed via existing JS
------------------------------------------------------------- */

/* Initial state for fields inside any scroll-reveal container */
[data-scroll-reveal] .wpcf7 form > p,
[data-scroll-reveal] .wpcf7 .wpcf7-response-output {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Revealed state */
[data-scroll-reveal].revealed .wpcf7 form > p,
[data-scroll-reveal].revealed .wpcf7 .wpcf7-response-output {
  opacity: 1;
  transform: none;
}

/* Staggered delays for a smooth cascade */
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(1) { transition-delay: 0.00s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(2) { transition-delay: 0.05s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(3) { transition-delay: 0.10s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(4) { transition-delay: 0.15s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(5) { transition-delay: 0.20s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(6) { transition-delay: 0.25s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(7) { transition-delay: 0.30s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(8) { transition-delay: 0.35s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(9) { transition-delay: 0.40s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(10) { transition-delay: 0.45s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] .wpcf7 form > p,
  [data-scroll-reveal] .wpcf7 .wpcf7-response-output {
    transition: none;
    transform: none;
    opacity: 1;
  }
}