/**
 * Sierra at Tahoe - Newsletter Input Styles
 * Custom styling for newsletter subscription forms based on Figma designs
 * Targets Gravity Forms HTML structure
 */

/* =============================================================================
   Newsletter Input Field Styles
   ============================================================================= */

/* Base input styling for newsletter forms */
.gform_wrapper.newsletter-form input[type="email"],
.gform_wrapper.newsletter-form input[type="text"],
.newsletter-input {
  border: 1px solid var(--wp--preset--color--sugar-pine-green-20);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--wp--preset--font-size--body-small); /* Prevents iOS zoom */
  font-family: var(--wp--preset--font-family--gt-standard);
  font-weight: var(--wp--preset--font-weight--regular);
  background-color: var(--wp--preset--color--snowcap-sage);
  color: var(--wp--preset--color--body-copy);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
}

/* Light theme variant (default) */
.newsletter-form--light input[type="email"],
.newsletter-form--light input[type="text"] {
  background-color: var(--wp--preset--color--snowcap-sage);
  border-color: var(--wp--preset--color--sugar-pine-green-10);
  color: var(--wp--preset--color--body-copy);
}

/* Dark theme variant */
.newsletter-form--dark input[type="email"],
.newsletter-form--dark input[type="text"] {
  background-color: var(--wp--preset--color--deep-alpine);
  border-color: var(--wp--preset--color--sugar-pine-green-40);
  color: var(--wp--preset--color--snowcap-sage);
}

/* Placeholder styling */
.newsletter-form input::placeholder {
  color: var(--wp--preset--color--sugar-pine-green-40);
  font-size: var(--wp--preset--font-size--small);
  opacity: 1;
}

.newsletter-form--dark input::placeholder {
  color: var(--wp--preset--color--sugar-pine-green-23);
}

/* Focus states */
.newsletter-form input:focus {
  border-color: var(--wp--preset--color--sugar-pine-green);
  box-shadow: 0 0 0 3px rgba(10, 106, 88, 0.1);
}

.newsletter-form--dark input:focus {
  border-color: var(--wp--preset--color--shoreline);
  box-shadow: 0 0 0 3px rgba(114, 216, 204, 0.15);
}

/* =============================================================================
   Subscribe Button Styles
   ============================================================================= */

/* Base button styling */
.newsletter-form .gform_button,
.newsletter-form input[type="submit"],
.newsletter-subscribe-btn {
  background-color: var(--wp--preset--color--deep-alpine);
  color: var(--wp--preset--color--snowcap-sage);
  border: 2px solid var(--wp--preset--color--deep-alpine);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: var(--wp--preset--font-family--mont);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--preset--font-weight--medium);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

/* Light theme button */
.newsletter-form--light .gform_button,
.newsletter-form--light input[type="submit"] {
  background-color: var(--wp--preset--color--deep-alpine);
  color: var(--wp--preset--color--snowcap-sage);
  border-color: var(--wp--preset--color--deep-alpine);
}

/* Dark theme button */
.newsletter-form--dark .gform_button,
.newsletter-form--dark input[type="submit"] {
  background-color: var(--wp--preset--color--sugar-pine-green);
  color: var(--wp--preset--color--snowcap-sage);
  border-color: var(--wp--preset--color--sugar-pine-green);
}

/* Button hover states */
.newsletter-form .gform_button:hover,
.newsletter-form input[type="submit"]:hover {
  background-color: var(--wp--preset--color--sugar-pine-green);
  border-color: var(--wp--preset--color--sugar-pine-green);
  transform: translateY(-1px);
  box-shadow: var(--wp--preset--shadow--natural);
}

.newsletter-form--dark .gform_button:hover,
.newsletter-form--dark input[type="submit"]:hover {
  background-color: var(--wp--preset--color--shoreline);
  border-color: var(--wp--preset--color--shoreline);
  color: var(--wp--preset--color--deep-alpine);
}

/* Button focus states */
.newsletter-form .gform_button:focus,
.newsletter-form input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 106, 88, 0.3);
}

/* Button active states */
.newsletter-form .gform_button:active,
.newsletter-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--wp--preset--shadow--outlined);
}

/* =============================================================================
   Form Layout Styles
   ============================================================================= */

/* Inline form layout (input + button side by side) */
.newsletter-form.inline-layout {
  display: flex;
  gap: var(--wp--preset--spacing--small);
  align-items: center;
  flex-wrap: wrap;
}

.newsletter-form.inline-layout .gfield {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.newsletter-form.inline-layout .gform_button,
.newsletter-form.inline-layout input[type="submit"] {
  flex-shrink: 0;
  margin: 0;
}

/* Stacked form layout (input above button) */
.newsletter-form.stacked-layout .gfield {
  margin-bottom: var(--wp--preset--spacing--medium);
}

.newsletter-form.stacked-layout .gform_button,
.newsletter-form.stacked-layout input[type="submit"] {
  width: 100%;
}

/* =============================================================================
   Gravity Forms Specific Overrides
   ============================================================================= */

/* Remove default Gravity Forms styling */
.newsletter-form .gform_wrapper .gform_body {
  margin: 0;
}

.newsletter-form .gform_wrapper .gfield {
  margin: 0 0 var(--wp--preset--spacing--medium) 0;
  padding: 0;
}

.newsletter-form .gform_wrapper .ginput_container {
  margin: 0;
}

.newsletter-form .gform_wrapper .gfield_label {
  display: none; /* Hide labels for newsletter forms */
}

.newsletter-form .gform_wrapper .gform_footer {
  margin: 0;
  padding: 0;
}

.newsletter-form .gform_wrapper .validation_error {
  display: none; /* Handle validation differently for newsletter forms */
}

/* Custom validation styling */
.newsletter-form .gfield_error input {
  border-color: var(--wp--preset--color--error);
  background-color: rgba(221, 85, 70, 0.05);
}

.newsletter-form .gfield_error input:focus {
  box-shadow: 0 0 0 3px rgba(221, 85, 70, 0.1);
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

/* Tablet and below */
@media (max-width: 768px) {
  .newsletter-form.inline-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-form.inline-layout .gfield {
    min-width: unset;
    width: 100%;
  }

  .newsletter-form.inline-layout .gform_button,
  .newsletter-form.inline-layout input[type="submit"] {
    width: 100%;
    margin-top: var(--wp--preset--spacing--small);
  }

  .newsletter-form input[type="email"],
  .newsletter-form input[type="text"] {
    padding: 14px 16px; /* Slightly larger touch target */
  }

  .newsletter-form .gform_button,
  .newsletter-form input[type="submit"] {
    padding: 14px 24px; /* Larger touch target */
  }
}

/* Mobile */
@media (max-width: 480px) {
  .newsletter-form input[type="email"],
  .newsletter-form input[type="text"] {
    font-size: var(--wp--preset--font-size--body-small); /* Ensure no zoom on iOS */
    padding: 16px;
  }

  .newsletter-form .gform_button,
  .newsletter-form input[type="submit"] {
    padding: 16px 24px;
    font-size: var(--wp--preset--font-size--medium);
  }
}

/* =============================================================================
   Accessibility Enhancements
   ============================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .newsletter-form input[type="email"],
  .newsletter-form input[type="text"] {
    border-width: 2px;
  }

  .newsletter-form .gform_button,
  .newsletter-form input[type="submit"] {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .newsletter-form input,
  .newsletter-form .gform_button,
  .newsletter-form input[type="submit"] {
    transition: none;
  }

  .newsletter-form .gform_button:hover,
  .newsletter-form input[type="submit"]:hover {
    transform: none;
  }
}

/* Focus-visible for better keyboard navigation */
.newsletter-form input:focus-visible,
.newsletter-form .gform_button:focus-visible,
.newsletter-form input[type="submit"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--sugar-pine-green);
  outline-offset: 2px;
}

/* =============================================================================
   Usage Examples & Component Classes
   ============================================================================= */

/*
Example HTML structure for Gravity Forms:

Light theme newsletter form:
<div class="gform_wrapper newsletter-form newsletter-form--light inline-layout" id="gform_wrapper_1">
  <!-- Gravity Forms fields will be inserted here -->
</div>

Dark theme newsletter form:
<div class="gform_wrapper newsletter-form newsletter-form--dark inline-layout" id="gform_wrapper_2">
  <!-- Gravity Forms fields will be inserted here -->
</div>

For stacked layout, replace "inline-layout" with "stacked-layout"
*/