/* =====================================================================
   TandT Forms — front-end styles. PREMIUM ENTERPRISE REVISION.
   Uses the TandT LLC theme's CSS custom properties when available (with
   sensible fallbacks), so forms match the site automatically when the
   theme is active, and still look clean on any other theme.

   This replaces the previous single-column, 640px, uniform-bordered-box
   layout. The field markup from inc/forms/shortcode.php is unchanged
   (<p class="tandt-forms-field tandt-forms-field--{type}">) — everything
   below is a visual layer on top of the same working, secure form logic.
   ===================================================================== */

.tandt-forms-wrap {
  --_primary: var(--tandt-primary, #0E7CB5);
  --_navy: var(--tandt-navy, #0F172A);
  --_border: var(--tandt-border, #E2E8F0);
  --_text: var(--tandt-text, #1E293B);
  --_muted: var(--tandt-text-muted, #64748B);
  --_soft: var(--tandt-soft-blue, #E6F4FB);
  --_radius: var(--tandt-radius-md, 8px);
  --_error: var(--tandt-error, #DC2626);
  --_success: var(--tandt-success, #16A34A);
  --_success-bg: #F0FDF4;
  --_success-text: #14532D;
  --_error-bg: #FEF2F2;
  max-width: 720px;
}

.grid--2 .tandt-forms-wrap,
.tandt-forms-wrap--wide { max-width: none; }

.tandt-forms-card {
  background: var(--tandt-white, #fff);
  border: 1px solid var(--_border);
  border-radius: var(--tandt-radius-md, 8px);
  box-shadow: var(--tandt-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.tandt-forms-notice {
  padding: 0.9em 1.1em;
  border-radius: var(--_radius);
  margin-bottom: 1.4em;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
.tandt-forms-notice--success { background: var(--_success-bg); color: var(--_success-text); border: 1px solid #BBF7D0; }
.tandt-forms-notice--error { background: var(--_error-bg); color: var(--_error); border: 1px solid #FECACA; }

.tandt-forms-notice--success {
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5em 1.75em;
  font-size: 1rem;
}
.tandt-forms-notice--success::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 999px;
  background: var(--_success);
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.6em;
}

.tandt-forms-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
}
@media (min-width: 640px) {
  .tandt-forms-form { grid-template-columns: 1fr 1fr; }
}

.tandt-forms-field { margin-bottom: 1.35em; }
.tandt-forms-field--textarea,
.tandt-forms-field--checkbox,
.tandt-forms-field--select.tandt-forms-field--full,
.tandt-forms-honeypot {
  grid-column: 1 / -1;
}

.tandt-forms-field label {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.45em;
  color: var(--_navy);
}
.tandt-forms-field label span[aria-hidden="true"] { color: var(--_primary); }

.tandt-forms-field input[type="text"],
.tandt-forms-field input[type="email"],
.tandt-forms-field input[type="tel"],
.tandt-forms-field select,
.tandt-forms-field textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1.5px solid var(--_border);
  border-radius: var(--_radius);
  font-family: inherit;
  font-size: 1rem;
  background: var(--tandt-white, #fff);
  color: var(--_text);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.tandt-forms-field input::placeholder,
.tandt-forms-field textarea::placeholder { color: #94A3B8; }

.tandt-forms-field input:hover,
.tandt-forms-field select:hover,
.tandt-forms-field textarea:hover { border-color: #CBD5E1; }

.tandt-forms-field input:focus,
.tandt-forms-field select:focus,
.tandt-forms-field textarea:focus {
  outline: none;
  border-color: var(--_primary);
  box-shadow: 0 0 0 3px rgba(14, 124, 181, 0.15);
  background: var(--_soft);
}

.tandt-forms-field textarea { resize: vertical; min-height: 8.5em; }

.tandt-forms-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--_muted);
  background: var(--tandt-light-bg, #F8FAFC);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  padding: 0.85em 1em;
}
.tandt-forms-checkbox-label input { margin-top: 0.2em; accent-color: var(--_primary); }

.tandt-forms-field.has-error input,
.tandt-forms-field.has-error select,
.tandt-forms-field.has-error textarea {
  border-color: var(--_error);
  background: var(--_error-bg);
}
.tandt-forms-field-error {
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: var(--_error);
  font-size: 0.85rem;
  margin-top: 0.4em;
  font-weight: 500;
}
.tandt-forms-field-error::before { content: "!"; display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; border-radius:999px; background:var(--_error); color:#fff; font-size:0.7em; font-weight:700; flex-shrink:0; }

.tandt-forms-field.is-valid input,
.tandt-forms-field.is-valid select { border-color: var(--_success); }

.tandt-forms-honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.tandt-forms-submit {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--_primary);
  color: #fff;
  border: none;
  border-radius: var(--_radius);
  padding: 0.95em 2.25em;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 0.4em;
  box-shadow: 0 4px 14px rgba(14, 124, 181, 0.3);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.tandt-forms-submit:hover { background: var(--_navy); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28); }
.tandt-forms-submit:active { transform: translateY(0); }
.tandt-forms-submit:focus-visible { outline: 3px solid var(--_primary); outline-offset: 2px; }
.tandt-forms-submit:disabled {
  opacity: 0.85;
  cursor: progress;
  transform: none;
  background: var(--_navy);
  padding-left: 2.75em;
  position: relative;
}
.tandt-forms-submit:disabled::before {
  content: "";
  position: absolute;
  left: 1.1em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tandt-forms-spin 700ms linear infinite;
}
@keyframes tandt-forms-spin { to { transform: rotate(360deg); } }

.tandt-forms-admin-note {
  background: #FFF6DA;
  border: 1px solid #F0DDA0;
  color: #7A5B00;
  padding: 0.8em 1em;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Optional section grouping — add class="tandt-forms-section-label" divs
   in a future field-schema update to break long forms into labeled
   groups (Contact Information, Organization, Engagement Details,
   Message) instead of one undifferentiated stack. */
.tandt-forms-section-label {
  grid-column: 1 / -1;
  font-family: var(--tandt-font-heading, Georgia, serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--_navy);
  border-bottom: 1px solid var(--_border);
  padding-bottom: 0.5em;
  margin: 1.2em 0 0.6em;
}
.tandt-forms-section-label:first-child { margin-top: 0; }

.tandt-forms-trust-note {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--_muted);
  margin: 0.2em 0 0.8em;
  line-height: 1.5;
  max-width: 56ch;
}

/* ---------------------------------------------------------------------
   Email verification (OTP) step — see shortcode.php's
   tandt_forms_render_otp_step(). Reuses the .tandt-forms-card shell so
   it matches whatever form it's standing in for exactly.
   --------------------------------------------------------------------- */
.tandt-forms-otp-wrap h3 { margin-top: 0; }
.tandt-forms-otp-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 1em 0 0.6em;
}
.tandt-forms-otp-input {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.5em 0.4em;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
}
.tandt-forms-otp-resend { margin: 0; }
.tandt-forms-otp-resend-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--_primary);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.tandt-forms-otp-resend-btn:hover { color: var(--_navy); }

/* Cloudflare Turnstile widget — only ever rendered when an admin has
   actually configured keys (see captcha.php), so this has no visual
   effect on a form where it isn't in use. */
.cf-turnstile { grid-column: 1 / -1; margin: 0.4em 0 0.8em; }