/**
 * Netlify Contact Form Styles
 * 
 * CSS-first architecture with comprehensive custom properties for theming.
 * This CSS file is fully functional standalone and can be used in any project.
 * 
 * STANDALONE USAGE:
 * 1. Include this CSS file in your HTML
 * 2. Override any custom properties in :root to customize appearance
 * 3. Use the provided HTML class structure (see examples below)
 * 
 * CUSTOM PROPERTY EXAMPLES:
 * :root {
 *   --nlcf-primary-color: #your-brand-color;      // Buttons, focus states
 *   --nlcf-form-font-size: 18px;                  // All text sizing
 *   --nlcf-form-max-width: 800px;                 // Form container width
 *   --nlcf-input-padding: 1rem;                   // Field spacing (spacious)
 *   --nlcf-form-shadow: 0 4px 8px rgba(0,0,0,0.1); // Add depth
 *   --nlcf-button-border-radius: 50px;            // Pill-shaped buttons
 * }
 * 
 * HTML STRUCTURE EXAMPLE:
 * <section class="nlcf-wrapper">
 *   <h2 class="nlcf-title">Contact Us</h2>
 *   <form class="nlcf-form" data-netlify="true">
 *     <div class="nlcf-field">
 *       <label for="name">Name *</label>
 *       <input type="text" name="name" id="name" required>
 *       <span class="nlcf-field-error" id="name-error" style="display: none;"></span>
 *     </div>
 *     <div class="nlcf-field">
 *       <label for="email">Email *</label>
 *       <input type="email" name="email" id="email" required>
 *       <span class="nlcf-field-error" id="email-error" style="display: none;"></span>
 *     </div>
 *     <div class="nlcf-field">
 *       <label for="message">Message *</label>
 *       <textarea name="message" id="message" required></textarea>
 *       <span class="nlcf-field-error" id="message-error" style="display: none;"></span>
 *     </div>
 *     <div class="nlcf-field">
 *       <button type="submit" class="nlcf-submit-btn">Send Message</button>
 *     </div>
 *   </form>
 * </section>
 */

:root {
  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /** Base font size for all form text */
  --nlcf-form-font-size: 16px;

  /** Font weight for field labels (400=normal, 500=medium, 600=semi-bold, 700=bold) */
  --nlcf-label-font-weight: 600;

  /* ========================================
   * LAYOUT & SPACING
   * ======================================== */

  /** Maximum width of the form container */
  --nlcf-form-max-width: 600px;

  /** Vertical spacing between form fields */
  --nlcf-field-spacing: 1.5rem;

  /** Internal padding inside input fields and buttons */
  --nlcf-input-padding: 0.75rem;

  /** Minimum height for input fields (auto, 44px, 52px for mobile-friendly) */
  --nlcf-input-height: auto;

  /* ========================================
   * BORDERS & SHAPES
   * ======================================== */

  /** Border radius for the form container */
  --nlcf-form-border-radius: 8px;

  /** Border radius for input fields */
  --nlcf-input-border-radius: 4px;

  /** Border radius for buttons (calculated based on button style) */
  --nlcf-button-border-radius: var(--nlcf-input-border-radius);

  /* ========================================
   * VISUAL EFFECTS
   * ======================================== */

  /** Drop shadow for the form container (none, or CSS box-shadow value) */
  --nlcf-form-shadow: none;

  /* ========================================
   * FORM CONTAINER COLORS
   * ======================================== */

  /** Background color of the form container */
  --nlcf-form-background-color: #ffffff;

  /** Border color of the form container */
  --nlcf-form-border-color: #e1e1e1;

  /* ========================================
   * TEXT COLORS
   * ======================================== */

  /** Color of the form title */
  --nlcf-form-title-color: #333333;

  /** Color of field labels */
  --nlcf-label-color: #555555;

  /* ========================================
   * INPUT FIELD COLORS
   * ======================================== */

  /** Border color of input fields in normal state */
  --nlcf-input-border-color: #dddddd;

  /* ========================================
   * INTERACTIVE COLORS
   * ======================================== */

  /** Primary color used for buttons, focus states, and form accents */
  --nlcf-primary-color: #007cba;

  /** Text color for buttons */
  --nlcf-submit-text-color: #ffffff;

  /* ========================================
   * SUCCESS MESSAGE COLORS
   * ======================================== */

  /** Text color of success messages */
  --nlcf-success-text-color: #155724;

  /** Background color of success messages */
  --nlcf-success-background-color: #d4edda;

  /** Border color of success messages */
  --nlcf-success-border-color: #c3e6cb;

  /* ========================================
   * ERROR & VALIDATION COLORS
   * ======================================== */

  /** Color for error states (borders, text, focus) */
  --nlcf-error-color: #dc3545;

  /** Background color for error focus shadows */
  --nlcf-error-background: rgba(220, 53, 69, 0.2);

  /** Color for valid field indicators */
  --nlcf-success-indicator-color: #28a745;

  /** Color for disabled form elements */
  --nlcf-disabled-color: #ccc;

  /* ========================================
   * SPACING SYSTEM
   * ======================================== */

  /** Padding inside the form container */
  --nlcf-form-padding: 2rem;

  /** Margin around the form container */
  --nlcf-form-margin: 2rem;

  /** Spacing below form title */
  --nlcf-title-spacing: 2rem;

  /** Spacing below field labels */
  --nlcf-label-spacing: 0.5rem;

  /** Spacing above error messages */
  --nlcf-error-spacing: 0.25rem;

  /* ========================================
   * BORDER & OUTLINE SYSTEM
   * ======================================== */

  /** Width of borders (form container, inputs) */
  --nlcf-border-width: 1px;

  /** Width of focus outlines */
  --nlcf-outline-width: 2px;

  /** Distance of focus outlines from elements */
  --nlcf-outline-offset: 2px;

  /* ========================================
   * RESPONSIVE DESIGN VALUES
   * ======================================== */

  /** Breakpoint for mobile responsive design */
  --nlcf-mobile-breakpoint: 768px;

  /** Padding for form container on mobile */
  --nlcf-mobile-padding: 1rem;

  /** Minimum touch target size for mobile accessibility */
  --nlcf-touch-target-size: 44px;

  /* ========================================
   * COMPUTED/DERIVED COLORS
   * ======================================== */

  /** Darker shade of primary color for hover states */
  --nlcf-primary-hover: color-mix(
    in srgb,
    var(--nlcf-primary-color) 80%,
    black
  );

  /** Transparent primary color for focus shadows */
  --nlcf-primary-focus: color-mix(
    in srgb,
    var(--nlcf-primary-color) 20%,
    transparent
  );

  /* Fallbacks for older browsers that don't support color-mix() */
  --nlcf-primary-hover: #005a85;
  --nlcf-primary-focus: rgba(0, 124, 186, 0.2);

  /* Modern browsers will use color-mix(), older browsers will use the fallbacks above */
  --nlcf-primary-hover: color-mix(
    in srgb,
    var(--nlcf-primary-color) 80%,
    black
  );
  --nlcf-primary-focus: color-mix(
    in srgb,
    var(--nlcf-primary-color) 20%,
    transparent
  );
}

/* ========================================
 * ACCESSIBILITY UTILITIES
 * ======================================== */

/** Screen reader only content - visually hidden but accessible to assistive technology */
.nlcf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================
 * FORM CONTAINER
 * ======================================== */

.nlcf-wrapper {
  max-width: var(--nlcf-form-max-width);
  margin: var(--nlcf-form-margin) auto;
  padding: var(--nlcf-form-padding);
  border: var(--nlcf-border-width) solid var(--nlcf-form-border-color);
  border-radius: var(--nlcf-form-border-radius);
  background: var(--nlcf-form-background-color);
  box-shadow: var(--nlcf-form-shadow);
  font-size: var(--nlcf-form-font-size);
}

.nlcf-title {
  text-align: center;
  margin-bottom: var(--nlcf-title-spacing);
  color: var(--nlcf-form-title-color);
  font-size: var(--nlcf-form-font-size);
}

.nlcf-form {
  display: flex;
  flex-direction: column;
  gap: var(--nlcf-field-spacing);
}

/* ========================================
 * FORM FIELDS
 * ======================================== */

.nlcf-field {
  display: flex;
  flex-direction: column;
}

.nlcf-field label {
  margin-bottom: var(--nlcf-label-spacing);
  font-weight: var(--nlcf-label-font-weight);
  color: var(--nlcf-label-color);
  font-size: var(--nlcf-form-font-size);
}

.nlcf-field input,
.nlcf-field textarea {
  padding: var(--nlcf-input-padding);
  border: var(--nlcf-border-width) solid var(--nlcf-input-border-color);
  border-radius: var(--nlcf-input-border-radius);
  font-size: var(--nlcf-form-font-size);
  min-height: var(--nlcf-input-height);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ========================================
 * FOCUS STATES
 * ======================================== */

.nlcf-field input:focus,
.nlcf-field textarea:focus {
  outline: var(--nlcf-outline-width) solid var(--nlcf-primary-color);
  outline-offset: var(--nlcf-outline-offset);
  border-color: var(--nlcf-primary-color);
  box-shadow: 0 0 0 2px var(--nlcf-primary-focus);
}

/* High contrast focus for accessibility */
@media (prefers-contrast: high) {
  .nlcf-field input:focus,
  .nlcf-field textarea:focus {
    outline: calc(var(--nlcf-outline-width) * 1.5) solid
      var(--nlcf-primary-color);
    outline-offset: calc(var(--nlcf-outline-offset) * 1.5);
  }
}

/* ========================================
 * VALIDATION STATES
 * ======================================== */

.nlcf-field input.nlcf-field-invalid,
.nlcf-field textarea.nlcf-field-invalid {
  border-color: var(--nlcf-error-color);
  box-shadow: 0 0 0 var(--nlcf-outline-width) var(--nlcf-error-background);
}

.nlcf-field input.nlcf-field-invalid:focus,
.nlcf-field textarea.nlcf-field-invalid:focus {
  outline: var(--nlcf-outline-width) solid var(--nlcf-error-color);
  outline-offset: var(--nlcf-outline-offset);
  border-color: var(--nlcf-error-color);
  box-shadow: 0 0 0 var(--nlcf-outline-width)
    color-mix(in srgb, var(--nlcf-error-color) 30%, transparent);
}

.nlcf-field-error {
  color: var(--nlcf-error-color);
  font-size: calc(var(--nlcf-form-font-size) * 0.875);
  margin-top: var(--nlcf-error-spacing);
  font-weight: 500;
}

/* Valid field indicators */
.nlcf-field input:valid:not(:placeholder-shown),
.nlcf-field textarea:valid:not(:placeholder-shown) {
  border-color: var(--nlcf-success-indicator-color);
}

.nlcf-field input:valid:not(:placeholder-shown):not(.nlcf-field-invalid),
.nlcf-field textarea:valid:not(:placeholder-shown):not(.nlcf-field-invalid) {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--nlcf-input-padding) * 1) center;
  background-size: 1rem;
  padding-right: calc(var(--nlcf-input-padding) * 2 + 1rem);
}

/* ========================================
 * BUTTONS
 * ======================================== */

.nlcf-submit-btn {
  padding: var(--nlcf-input-padding) 2rem;
  background: var(--nlcf-primary-color);
  color: var(--nlcf-submit-text-color);
  border: none;
  border-radius: var(--nlcf-button-border-radius);
  font-size: var(--nlcf-form-font-size);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-height: var(--nlcf-input-height);
}

.nlcf-submit-btn:hover {
  background: var(--nlcf-primary-hover);
}

.nlcf-submit-btn:focus {
  outline: var(--nlcf-outline-width) solid var(--nlcf-primary-color);
  outline-offset: var(--nlcf-outline-offset);
  box-shadow: 0 0 0 calc(var(--nlcf-outline-width) * 1.5)
    var(--nlcf-primary-focus);
}

.nlcf-submit-btn:disabled {
  background: var(--nlcf-disabled-color);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Button style variations */
.nlcf-submit-btn[data-style='flat'],
.nlcf-success-btn[data-style='flat'] {
  border-radius: 0;
}

.nlcf-submit-btn[data-style='pill'],
.nlcf-success-btn[data-style='pill'] {
  border-radius: 50px;
}

/* Enhanced button accessibility */
@media (prefers-contrast: high) {
  .nlcf-submit-btn:focus {
    outline: calc(var(--nlcf-outline-width) * 1.5) solid
      var(--nlcf-primary-color);
    outline-offset: calc(var(--nlcf-outline-offset) * 1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlcf-submit-btn {
    transition: none;
  }
}

/* ========================================
 * SUCCESS MESSAGES
 * ======================================== */

.nlcf-success-message {
  max-width: var(--nlcf-form-max-width);
  margin: var(--nlcf-mobile-padding) auto;
  padding: var(--nlcf-mobile-padding);
  border-radius: var(--nlcf-form-border-radius);
  text-align: center;
}

.nlcf-success-message p {
  margin: 0;
  color: var(--nlcf-success-text-color);
  background: var(--nlcf-success-background-color);
  padding: var(--nlcf-mobile-padding);
  border-radius: var(--nlcf-input-border-radius);
  border: var(--nlcf-border-width) solid var(--nlcf-success-border-color);
  font-size: var(--nlcf-form-font-size);
}

.nlcf-success-btn {
  display: inline-block;
  margin-top: var(--nlcf-mobile-padding);
  padding: var(--nlcf-input-padding) 2rem;
  background: var(--nlcf-primary-color);
  color: var(--nlcf-submit-text-color);
  text-decoration: none;
  border-radius: var(--nlcf-button-border-radius);
  font-size: var(--nlcf-form-font-size);
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.nlcf-success-btn:hover {
  background: var(--nlcf-primary-hover);
  color: var(--nlcf-submit-text-color);
  text-decoration: none;
}

/* ========================================
 * SPECIAL FIELDS
 * ======================================== */

/** Honeypot field - hidden from users but visible to bots */
.nlcf-honeypot {
  display: none !important;
}

/** Error messages for network/submission failures */
.nlcf-error-message {
  color: var(--nlcf-error-color);
  margin-top: calc(var(--nlcf-error-spacing) * 2);
  font-size: calc(var(--nlcf-form-font-size) * 0.875);
}

/* ========================================
 * RESPONSIVE DESIGN
 * ======================================== */

@media (max-width: var(--nlcf-mobile-breakpoint)) {
  .nlcf-wrapper {
    margin: var(--nlcf-mobile-padding);
    padding: var(--nlcf-mobile-padding);
  }

  /* Ensure minimum touch target size on mobile */
  .nlcf-field input,
  .nlcf-field textarea,
  .nlcf-submit-btn {
    min-height: var(--nlcf-touch-target-size);
  }
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .nlcf-field input,
  .nlcf-field textarea,
  .nlcf-submit-btn,
  .nlcf-success-btn {
    transition: none;
  }
}