/* =============================================================================
   CONTACT PAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles specific to the contact page (contact.html). This page focuses on
   creating an inviting, accessible contact form while maintaining the
   professional aesthetic of the site.
   
   Key design principles:
   - Accessible form design with clear labels and feedback
   - Professional appearance encouraging communication
   - Mobile-first responsive design for form usability
   - Clear visual hierarchy and logical flow
   - Consistent with overall site branding
   ============================================================================= */

/* =============================================================================
   PAGE HEADER SECTION
   =============================================================================
   
   Welcoming header that sets a friendly but professional tone for contact.
   Encourages visitors to reach out while maintaining site consistency.
   ============================================================================= */

.page-header {
  padding: 4rem 0 3rem; /* Generous top padding, moderate bottom */
  background-color: #ffffff; /* Clean white background */
  border-bottom: 1px solid #d4d4d4; /* Subtle section separator */
  text-align: center; /* Center align header content */
}

/* Main page title */
.page-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font for impact */
  font-size: 3rem; /* Large, welcoming heading */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text for high contrast */
  margin-bottom: 0.75rem; /* Space below title */
  line-height: 1.1; /* Tight line height for display text */
}

/* Page subtitle */
.page-subtitle {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.25rem; /* Larger than body text but smaller than title */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Original sandstone accent color - artistic spark preserved */
  text-transform: uppercase; /* Uppercase for distinction */
  letter-spacing: 0.1em; /* Spaced tracking for readability */
}

/* =============================================================================
   CONTACT INTRODUCTION SECTION
   =============================================================================
   
   Sets expectations and encourages visitors to reach out. Friendly tone
   while maintaining professionalism.
   ============================================================================= */

.contact-intro {
  padding: 4rem 0; /* Comfortable section padding */
  background-color: #fafafa; /* Very light grey background for subtle contrast */
}

/* Introduction content container */
.intro-content {
  max-width: 700px; /* Comfortable reading width */
  margin: 0 auto; /* Center content */
  text-align: center; /* Center align introductory content */
  padding: 0 1rem; /* Side padding for mobile */
}

/* Introduction title */
.intro-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2rem; /* Prominent heading */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 1.5rem; /* Space below title */
}

/* Introduction text paragraphs */
.intro-text {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body for emphasis */
  line-height: 1.7; /* Comfortable line height for reading */
  color: #000000; /* Black text */
  margin-bottom: 1.5rem; /* Space between paragraphs */
}

/* =============================================================================
   CONTACT FORM SECTION
   =============================================================================
   
   Main contact form with accessible design. Clear labels, helpful descriptions,
   and proper validation feedback for optimal user experience.
   ============================================================================= */

.contact-form-section {
  padding: 5rem 0; /* Generous section padding */
  background-color: #ffffff; /* Clean white background */
}

/* Form section title */
.form-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2rem; /* Prominent heading */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  text-align: center; /* Center align title */
  margin-bottom: 3rem; /* Space below title */
}

/* Main contact form container */
.contact-form {
  max-width: 600px; /* Optimal form width for usability */
  margin: 0 auto; /* Center form */
  padding: 0 1rem; /* Side padding for mobile */
}

/* Form fields container */
.form-fields {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack fields vertically */
  gap: 2rem; /* Space between form groups */
}

/* Individual form groups (label + input + help) */
.form-group {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack elements vertically */
  gap: 0.5rem; /* Space between elements */
}

/* Form labels */
.form-label {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard size */
  font-weight: 600; /* Semi-bold for emphasis */
  color: #000000; /* Black text */
  margin-bottom: 0.25rem; /* Small space before input */
}

/* Required field indicator */
.required {
  color: #c6a98d; /* Sandstone color for required asterisk */
  font-weight: 700; /* Bold asterisk */
}

/* Form input fields */
.form-input {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard size */
  padding: 0.75rem; /* Comfortable padding */
  border: 2px solid #d4d4d4; /* Light grey border */
  border-radius: 0; /* No border radius for clean aesthetic */
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Form input focus state */
.form-input:focus {
  outline: none; /* Remove default outline */
  border-color: #c6a98d; /* Sandstone border on focus */
  box-shadow: 0 0 0 3px rgba(198, 169, 141, 0.2); /* Subtle focus shadow */
}

/* Form input validation states */
.form-input:valid {
  border-color: #d4d4d4; /* Keep neutral border for valid fields */
}

.form-input:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #cc0000; /* Red border for invalid fields */
}

/* Textarea specific styling */
.form-textarea {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard size */
  padding: 0.75rem; /* Comfortable padding */
  border: 2px solid #d4d4d4; /* Light grey border */
  border-radius: 0; /* No border radius */
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
  resize: vertical; /* Allow vertical resize only */
  min-height: 120px; /* Minimum height for usability */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Textarea focus state */
.form-textarea:focus {
  outline: none; /* Remove default outline */
  border-color: #c6a98d; /* Sandstone border on focus */
  box-shadow: 0 0 0 3px rgba(198, 169, 141, 0.2); /* Subtle focus shadow */
}

/* Form help text */
.form-help {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Smaller text for help */
  color: #666666; /* Grey for secondary information */
  line-height: 1.4; /* Comfortable line height */
}

/* Form submit button */
.form-submit {
  margin-top: 1rem; /* Extra space above submit button */
  width: 100%; /* Full width for mobile-friendly design */
  max-width: 200px; /* But not too wide */
  align-self: center; /* Center the button */
  padding: 1rem 2rem; /* Generous padding for touch targets */
  font-size: 1.125rem; /* Slightly larger text */
  font-weight: 600; /* Semi-bold for emphasis */
}

/* =============================================================================
   FORM SUCCESS MESSAGE
   =============================================================================
   
   Success message shown after form submission. Positive, confirming tone
   while maintaining site aesthetic.
   ============================================================================= */

.form-success {
  max-width: 600px; /* Match form width */
  margin: 0 auto; /* Center content */
  padding: 2rem; /* Comfortable padding */
  background-color: #f0f8f0; /* Very light green background */
  border: 2px solid #c6a98d; /* Sandstone border */
  text-align: center; /* Center align success content */
}

/* Success message title */
.success-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.5rem; /* Prominent but not overwhelming */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 1rem; /* Space below title */
}

/* Success message text */
.success-text {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard size */
  line-height: 1.6; /* Comfortable line height */
  color: #000000; /* Black text */
  margin: 0; /* Remove default margin */
}

/* =============================================================================
   ALTERNATIVE CONTACT SECTION
   =============================================================================
   
   Additional ways to connect beyond the main form. Provides options while
   maintaining focus on the primary contact method.
   ============================================================================= */

.alt-contact {
  padding: 5rem 0; /* Generous section padding */
  background-color: #fafafa; /* Light grey background for contrast */
  border-top: 1px solid #d4d4d4; /* Subtle top border */
}

/* Alternative contact content container */
.alt-content {
  max-width: 800px; /* Wider than form for multiple columns */
  margin: 0 auto; /* Center content */
  padding: 0 1rem; /* Side padding for mobile */
}

/* Alternative contact section title */
.alt-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2rem; /* Prominent heading */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  text-align: center; /* Center align title */
  margin-bottom: 3rem; /* Space below title */
}

/* Alternative methods container */
.alt-methods {
  display: grid; /* CSS Grid for layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  /* Responsive grid - minimum 250px columns */
  gap: 2rem; /* Space between method cards */
}

/* Individual alternative contact methods */
.alt-method {
  text-align: center; /* Center align method content */
  padding: 1.5rem; /* Comfortable padding */
  background-color: #ffffff; /* White background for contrast */
  border: 1px solid #d4d4d4; /* Subtle border */
}

/* Method titles */
.method-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.25rem; /* Prominent method titles */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 1rem; /* Space below title */
}

/* Method descriptions */
.method-description {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard size */
  line-height: 1.6; /* Comfortable line height */
  color: #000000; /* Black text */
  margin-bottom: 1.5rem; /* Space before action button */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Mobile-first responsive design ensuring the contact form works well
   across all devices. Focus on touch-friendly form elements.
   ============================================================================= */

/* Tablet adjustments */
@media (min-width: 768px) {
  /* Page header adjustments */
  .page-header {
    padding: 5rem 0 4rem; /* More generous padding */
  }
  
  .page-title {
    font-size: 3.5rem; /* Larger title */
  }
  
  /* Section padding adjustments */
  .contact-intro, .contact-form-section, .alt-contact {
    padding: 6rem 0; /* More section padding */
  }
  
  /* Form adjustments */
  .contact-form {
    padding: 0 2rem; /* More side padding */
  }
  
  /* Alternative contact methods layout */
  .alt-methods {
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns on larger screens */
    gap: 2.5rem; /* More space between methods */
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  /* More generous spacing on large screens */
  .page-header {
    padding: 6rem 0 5rem;
  }
  
  .contact-intro, .contact-form-section, .alt-contact {
    padding: 7rem 0;
  }
  
  /* Larger form on very large screens */
  .contact-form {
    max-width: 700px; /* Slightly wider form */
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  /* Smaller page header on mobile */
  .page-header {
    padding: 3rem 0 2rem; /* Less padding */
  }
  
  .page-title {
    font-size: 2.5rem; /* Smaller title */
  }
  
  .page-subtitle {
    font-size: 1.125rem; /* Smaller subtitle */
  }
  
  /* Section padding for mobile */
  .contact-intro, .contact-form-section, .alt-contact {
    padding: 4rem 0; /* Less section padding */
  }
  
  /* Introduction content mobile adjustments */
  .intro-title {
    font-size: 1.75rem; /* Smaller intro title */
  }
  
  .intro-text {
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Form mobile adjustments */
  .form-title {
    font-size: 1.75rem; /* Smaller form title */
  }
  
  .form-fields {
    gap: 1.5rem; /* Smaller gaps between form groups */
  }
  
  /* Mobile-optimized form inputs */
  .form-input, .form-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 1rem; /* Larger padding for touch targets */
  }
  
  .form-submit {
    padding: 1rem; /* Comfortable touch target */
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Alternative contact mobile adjustments */
  .alt-title {
    font-size: 1.75rem; /* Smaller alt title */
  }
  
  .alt-methods {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 1.5rem; /* Smaller gaps */
  }
  
  .method-title {
    font-size: 1.125rem; /* Smaller method titles */
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================================================
   
   Additional styles to ensure the contact form is accessible to all users,
   including those using screen readers or keyboard navigation.
   ============================================================================= */

/* Enhanced focus states for form elements */
.form-input:focus, .form-textarea:focus {
  position: relative; /* For z-index */
  z-index: 1; /* Ensure focus shadow appears above other elements */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .form-input, .form-textarea {
    border-width: 3px; /* Thicker borders in high contrast mode */
  }
  
  .form-input:focus, .form-textarea:focus {
    box-shadow: 0 0 0 5px rgba(198, 169, 141, 0.5); /* More prominent focus */
  }
  
  .alt-method {
    border-width: 2px; /* Thicker borders for alternative methods */
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .form-input, .form-textarea {
    transition: none; /* Remove transitions */
  }
}

/* Error state styling for better accessibility */
.form-input:invalid:not(:focus):not(:placeholder-shown) + .form-help::after {
  content: ' Please check this field.'; /* Additional help text for errors */
  color: #cc0000; /* Red color for error text */
  font-weight: 600; /* Semi-bold for emphasis */
}