/* ============================================
   CONTACT SECTION
   Contact form with full-width background
   ============================================ */

.contact {
  /* Layout */
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0;
  margin-left: -50vw;
  
  /* Visual */
  background: var(--contact-bg);
}


/* ============================================
   SECTION HEADING
   ============================================ */

.contact h2 {
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: var(--heading-secondary-gradient);
  margin-bottom: 2.5rem;
}


/* ============================================
   CONTACT FORM
   Form layout and inputs
   ============================================ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 1rem;
}


/* ============================================
   FORM INPUTS
   Text inputs and textarea
   ============================================ */

.contact-form input,
.contact-form textarea {
  /* Layout */
  padding: 0.9375rem;
  
  /* Typography */
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-color);
  
  /* Visual */
  background-color: var(--contact-form-bg);
  border: 0.125rem solid transparent;
  border-radius: 0.625rem;
  outline: none;
  
  /* Animation */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form textarea {
  min-height: 9.375rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--contact-border);
  box-shadow: 
    0 0 0 0.1875rem var(--contact-border),
    0 0.625rem 1.25rem rgba(0, 0, 0, 0.1);
  transform: translateY(-0.125rem);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-text-light);
  opacity: 0.6;
}


/* ============================================
   SUBMIT BUTTON
   Form submission button
   ============================================ */

.contact-form button {
  /* Layout */
  padding: 1rem 2rem;
  cursor: pointer;
  
  /* Typography */
  font-size: 1.125rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--btn-text-color);
  
  /* Visual */
  background-color: var(--contact-form-bg);
  border: 0.125rem solid var(--contact-border);
  border-radius: 2rem;
  
  /* Animation */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form button:hover {
  background-color: var(--contact-border);
  color: var(--color-text-white);
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.contact-form button:active {
  transform: translateY(0);
}


/* ============================================
   RESPONSIVE DESIGN
   Mobile contact form adjustments
   ============================================ */

@media (max-width: 48rem) {
  .contact-form {
    padding: 1rem;
    gap: 1rem;
    max-width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 0.75rem;
    font-size: 0.9375rem;
  }

  .contact-form textarea {
    min-height: 7.5rem;
  }

  .contact-form button {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 36rem) {
  .contact h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 0.875rem;
  }
}