/* ============================================================
   SwissHelios — Contact Form 7 Styles
   File: assets/css/cf7-form.css

   Enqueue this file in functions.php (see snippet below).
   These styles are scoped to .wpcf7 so they don't bleed
   into other CF7 forms on the site.
   ============================================================ */


/* ── Kill CF7's own stylesheet — add this in functions.php:
      add_filter( 'wpcf7_load_css', '__return_false' );
   ── ────────────────────────────────────────────────────── */


/* ============================================================
   FORM WRAPPER
   ============================================================ */

.wpcf7 {
  font-family: 'Switzer', system-ui, sans-serif;
}

/* Remove default CF7 paragraph wrapping gaps */
.wpcf7 .wpcf7-form p {
  margin: 0;
}

/* Stack fields with consistent spacing — matches space-y-5 */
.wpcf7 .sh-cf7-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.25rem; /* = space-y-5 */
}
.wpcf7 .sh-cf7-field:last-of-type {
  margin-bottom: 0;
}


/* ============================================================
   LABEL — font-mono text-[11px] uppercase tracking-widest text-paper/60
   ============================================================ */

.wpcf7 .sh-cf7-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);  /* text-paper/60 */
  margin-bottom: 0.5rem;            /* mb-2 */
  line-height: 1;
}


/* ============================================================
   INPUTS & TEXTAREA
   Matches: w-full bg-transparent border-b border-paper/30
            py-3 text-paper placeholder:text-paper/30
            focus:outline-none focus:border-swiss transition-colors
   ============================================================ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
  width: 100%;
  background: transparent;

  /* Only bottom border, no box */
  border: none;
  border-bottom: 1px solid rgba(247, 245, 240, 0.3); /* border-paper/30 */
  border-radius: 0;
  box-shadow: none;
  outline: none;

  padding: 0.75rem 0;   /* py-3, no horizontal padding */
  color: #F7F5F0;        /* text-paper */

  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;

  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Placeholder colour */
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 input[type="url"]::placeholder,
.wpcf7 input[type="number"]::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(247, 245, 240, 0.3); /* placeholder:text-paper/30 */
}

/* Focus state — focus:border-swiss */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus {
  border-bottom-color: #D63D2C; /* swiss */
  outline: none;
  box-shadow: none;
}

/* Textarea — matches rows="3" resize-none */
.wpcf7 textarea {
  resize: none;
  min-height: calc(1.5rem * 3 + 1.5rem); /* approx rows="3" + padding */
}

/* Autofill background fix (browsers force a white/yellow bg) */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset !important;
  -webkit-text-fill-color: #F7F5F0 !important;
  caret-color: #F7F5F0;
}


/* ============================================================
   SUBMIT BUTTON
   Matches: w-full bg-swiss text-paper py-4 font-medium
            hover:bg-paper hover:text-ink transition-colors mt-6
   ============================================================ */

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: block;
  width: 100%;

  background: #D63D2C;       /* bg-swiss */
  color: #F7F5F0;             /* text-paper */
  border: none;
  border-radius: 0;
  box-shadow: none;

  padding: 1rem 0;            /* py-4 */
  margin-top: 1.5rem;         /* mt-6 */

  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;           /* font-medium */
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  line-height: 1;

  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: #F7F5F0;        /* hover:bg-paper */
  color: #0A0A0A;              /* hover:text-ink */
}

/* Disabled / processing state */
.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   CF7 SPINNER — hide (the submit button state is enough)
   ============================================================ */

.wpcf7-spinner {
  display: none !important;
}


/* ============================================================
   VALIDATION — error tips below invalid fields
   ============================================================ */

.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #D63D2C;
  margin-top: 0.375rem;
}

/* Red bottom border on invalid field */
.wpcf7 .wpcf7-not-valid {
  border-bottom-color: #D63D2C !important;
}


/* ============================================================
   RESPONSE OUTPUT (success / error message after submit)
   ============================================================ */

.wpcf7 .wpcf7-response-output {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: none !important;
  padding: 0.75rem 0 0 !important;
  margin: 0 !important;
  color: rgba(247, 245, 240, 0.7);
}

.wpcf7 .wpcf7-mail-sent-ok {
  color: #4ade80 !important; /* green */
}

.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-aborted,
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
  color: #D63D2C !important; /* swiss red */
}