/**
 * UCF Contact Form — structural stylesheet
 *
 * Ships with the plugin and is enqueued by ContactFormShortcode::enqueueAssets
 * whenever the [ucf_contact_form] shortcode is present. Carries the complete
 * skin: layout, form states, responsive rules, spinner, character counter and
 * sidebar variant, driven entirely by the custom properties declared below.
 *
 * The token block uses brand-neutral defaults (grayscale primary). Themes
 * re-brand by shipping <active-theme>/assets/css/ucf-contact-form.css with a
 * token override scoped to .ucf-contact-wrapper; it is auto-enqueued after
 * this file (registered as a dependent style), so its values win the cascade.
 *
 * Tokens are scoped to .ucf-contact-wrapper (custom properties inherit to all
 * descendants) so nothing here leaks into the surrounding theme.
 * .ucf-contact-error shares the scope because the configuration-error notice
 * renders outside the wrapper.
 *
 * Browser floor: browserslist "baseline 2022 with downstream"
 * (Chrome/Edge 108+, Firefox 108+, Safari/iOS 16.0+, Samsung 21+).
 * Range media-query syntax needs Safari 16.4 — use classic min/max-width.
 */
.ucf-contact-wrapper,
.ucf-contact-error {
  /* Brand — neutral defaults; themes override these in their token file */
  --color-primary: #4b5563;
  --color-primary-hover: #374151;
  --color-primary-text: #374151;
  --color-primary-underline: rgba(75, 85, 99, 0.4);
  /* Field focus ring — defaults to the brand primary; a theme may soften it
     independently (e.g. a calmer hue) without changing the button/link color. */
  --color-focus-ring: var(--color-primary);
  --shadow-button-hover:
    0 4px 14px rgba(75, 85, 99, 0.15),
    0 2px 6px rgba(75, 85, 99, 0.12),
    0 0 0 1px rgba(75, 85, 99, 0.05);
  --shadow-button-active:
    0 2px 8px rgba(75, 85, 99, 0.18),
    0 1px 3px rgba(75, 85, 99, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Neutral scale */
  --color-background: #ffffff;
  --color-background-subtle: #f9fafb;
  --color-border-default: #e5e7eb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-300: #d1d5db;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-900: #111827;
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: #ffffff;

  --color-error: #ef4444;
  --color-error-background: #fee2e2;
  --color-error-border: #fca5a5;
  --color-error-text: #b91c1c;
  --color-success-background: #d1fae5;
  --color-success-border: #6ee7b7;
  --color-success-text: #047857;
  --color-warning-background: #fef3c7;
  --color-warning-text: #b45309;

  --spacing-sm: 0.25rem;
  --spacing-md: 0.5rem;
  --spacing-0_75: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;

  --font-size-caption: 0.75rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label: 0.875rem;
  --font-size-body: 1rem;
  --font-size-h5: 1.125rem;
  --font-size-h2: 1.875rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-normal: 1.5;

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-full: 50%;

  --input-border-width: 1px;
  --input-border-radius: var(--border-radius-md);
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;

  --button-border-radius: var(--border-radius-md);
  --button-height-lg: 3rem;
  --button-transform-hover: translateY(-1.5px) scale(1.02);
  --button-transform-active: translateY(-0.5px) scale(0.99);
  --button-transition: all 180ms var(--ease-premium);

  --duration-short: 200ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Container */
.ucf-contact-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(var(--spacing-xl), 1rem + 2vw, var(--spacing-2xl))
           clamp(var(--spacing-lg), 4vw - 0.5rem, var(--spacing-2xl));
}

/* Screen-reader-only text (required-fields note, submit status, char-count
   prefix). The markup depends on this class; the plugin sheet must carry it —
   themes ship token overrides only and may define no global .sr-only. */
.ucf-contact-wrapper .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ucf-contact-wrapper.ucf-with-sidebar {
  max-width: 1200px;
}

/* Two-column layout */
.ucf-layout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
}

@media (min-width: 768px) {
  .ucf-layout-container {
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-4xl);
  }
}

/* Header */
.ucf-contact-header {
  margin-bottom: var(--spacing-2xl);
  text-align: center;
}

.ucf-contact-title {
  font-size: clamp(1.5rem, 4vw + 0.5rem, var(--font-size-h2));
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.ucf-contact-subtitle {
  font-size: clamp(var(--font-size-body-sm), 0.8rem + 0.4vw, var(--font-size-body));
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Form */
.ucf-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-default);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-2xl);
}

.ucf-form-row {
  display: flex;
  gap: var(--spacing-lg);
}

.ucf-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ucf-form-group.ucf-full-width {
  flex: 1;
}

/* Labels */
.ucf-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.ucf-required {
  color: var(--color-error);
}

/* Inputs */
.ucf-input,
.ucf-select,
.ucf-textarea {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: 1rem; /* 16px at all widths; anything smaller triggers iOS auto-zoom on focus */
  font-family: inherit;
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  background-clip: padding-box;
  border: var(--input-border-width) solid var(--color-border-default);
  border-radius: var(--input-border-radius);
  transition: border-color var(--duration-short) var(--ease-premium),
              box-shadow var(--duration-short) var(--ease-premium),
              transform var(--duration-short) var(--ease-premium);
}

.ucf-input:hover:not(:focus):not(:disabled),
.ucf-contact-form .ucf-select:hover:not(:focus):not(:disabled),
.ucf-textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-neutral-300);
  box-shadow: var(--shadow-sm);
}

.ucf-textarea {
  resize: vertical;
  min-height: 120px;
}

.ucf-contact-form .ucf-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-0_75) center;
  background-size: 16px 12px;
  padding-right: var(--spacing-2xl);
}

.ucf-input:focus-visible,
.ucf-contact-form .ucf-select:focus-visible,
.ucf-textarea:focus-visible {
  border-color: var(--color-focus-ring);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--shadow-sm);
}

/* Error state — JS sets aria-invalid on validation (all browsers).
   Kept as its own rule: grouping it with :user-invalid below would drop the
   whole list on browsers that don't know that pseudo-class (Chrome 108-118,
   Safari 16.0-16.4 — inside our floor). */
.ucf-input[aria-invalid="true"],
.ucf-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* :user-invalid adds real-time feedback where supported (Chrome 119+, Safari 16.5+) */
.ucf-input:user-invalid,
.ucf-textarea:user-invalid {
  border-color: var(--color-error);
}

/* Character count */
.ucf-char-count {
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  text-align: right;
  opacity: 0;
  transition: opacity var(--duration-short) var(--ease-in-out),
              color var(--duration-short) var(--ease-in-out);
}

.ucf-textarea:focus ~ .ucf-char-count,
.ucf-char-count.ucf-visible {
  opacity: 1;
}

.ucf-char-count.ucf-warning {
  opacity: 1;
  color: var(--color-warning-text);
  font-weight: var(--font-weight-medium);
}

.ucf-char-count.ucf-danger {
  opacity: 1;
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

/* Error messages */
.ucf-error-message {
  font-size: var(--font-size-body-sm);
  color: var(--color-error);
  min-height: 1.25rem;
}

.ucf-error-message:empty {
  display: none;
}

/* Submit button */
.ucf-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md) clamp(var(--spacing-lg), 2.5vw, var(--spacing-2xl));
  min-height: var(--button-height-lg);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--button-transition);
}

.ucf-submit-btn:hover:not(:disabled) {
  /* Pin the inverse text color: a theme's global `button:hover { color }`
     (e.g. kickstart-pro-v2 sets it to the brand color) would otherwise win
     here and render the label the same hue as the button — invisible. */
  color: var(--color-text-inverse);
  background-color: var(--color-primary-hover);
  transform: var(--button-transform-hover);
  box-shadow: var(--shadow-button-hover);
}

.ucf-submit-btn:active:not(:disabled) {
  transform: var(--button-transform-active);
  box-shadow: var(--shadow-button-active);
  transition-duration: 75ms;
}

.ucf-submit-btn:focus-visible {
  outline: 3px solid var(--color-text-inverse);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-primary);
}

.ucf-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading state */
.ucf-submit-btn[aria-busy="true"] {
  opacity: 0.85;
  cursor: wait;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.ucf-contact-form.ucf-submitting {
  position: relative;
}

.ucf-contact-form.ucf-submitting::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 40%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: var(--border-radius-lg);
  z-index: 1;
  animation: ucf-fade-in var(--duration-short) var(--ease-out);
}

@keyframes ucf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spinner */
.ucf-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(255 255 255 / 30%);
  border-top-color: var(--color-text-inverse);
  border-radius: var(--border-radius-full);
  animation: ucf-spin 0.8s linear infinite;
}

@keyframes ucf-spin {
  to { transform: rotate(360deg); }
}

/* Form messages */
.ucf-form-messages {
  margin-top: var(--spacing-lg);
}

.ucf-success-message {
  padding: var(--spacing-lg);
  background-color: var(--color-success-background);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
  animation: ucf-slide-in-down 400ms var(--ease-out);
}

.ucf-error-message-global {
  padding: var(--spacing-lg);
  background-color: var(--color-error-background);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
  animation: ucf-shake 300ms var(--ease-in-out);
}

@keyframes ucf-slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ucf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Token override must live here too: the wrapper-scoped declarations above
     shadow any :root-level reduced-motion override a theme ships. */
  .ucf-contact-wrapper,
  .ucf-contact-error {
    --duration-short: 0ms;
  }

  .ucf-contact-form.ucf-submitting::before,
  .ucf-success-message,
  .ucf-error-message-global {
    animation: none;
  }

  /* --button-transition carries a literal 180ms, so zeroing --duration-short
     alone would leave the button hover lift/scale animating. */
  .ucf-contact-wrapper,
  .ucf-contact-error {
    --button-transition: none;
  }

  .ucf-spinner {
    animation-duration: 1.5s;
  }
}

@media (prefers-contrast: more) {
  .ucf-contact-wrapper,
  .ucf-contact-error {
    --color-border-default: var(--color-neutral-900);
  }
}

.ucf-contact-error {
  padding: var(--spacing-2xl);
  background-color: var(--color-warning-background);
  color: var(--color-warning-text);
  border-radius: var(--border-radius-md);
  text-align: center;
}

/* Sidebar */
.ucf-sidebar-column {
  padding: var(--spacing-2xl);
  background-color: var(--color-background-subtle);
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.ucf-info-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.ucf-info-item h3 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.ucf-info-item p {
  font-size: var(--font-size-body-sm);
  line-height: 1.5;
  color: var(--color-neutral-600);
  margin: 0;
}

.ucf-info-item a {
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-underline);
  text-underline-offset: 2px;
}

.ucf-info-item a:hover {
  text-decoration-color: var(--color-primary);
}

.ucf-info-item a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* ------------------------------------------------
   Responsive refinements — discrete switches only;
   value scaling is handled by clamp() above
   ------------------------------------------------ */

/* Mobile */
@media (max-width: 767.98px) {
  .ucf-contact-title {
    line-height: 1.3;
  }

  .ucf-contact-subtitle {
    line-height: 1.6;
  }

  .ucf-form-row {
    flex-direction: column;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ucf-input,
  .ucf-contact-form .ucf-select {
    height: 2.75rem; /* 44px touch target */
  }
}