/* ==========================================================
   CONTACT.CSS — Dedicated Message Page
   Matches landonw.dev portfolio styling
   ========================================================== */


/* ---------- Page Layout ---------- */

.contact-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: calc(var(--nav-height) + 4rem) 2rem 4rem;

  position: relative;
  z-index: 1;
}


/* ---------- Main Contact Card ---------- */

.contact-card {
  width: min(1500px, calc(100vw - 4rem));

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 1.5rem;

  padding: 3rem;

  backdrop-filter: blur(12px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35);

}


/* ---------- Header ---------- */

.contact-header {
  text-align: center;

  max-width: 650px;

  margin: 0 auto 2.5rem;
}


.contact-header .eyebrow {
  display: inline-block;

  margin-bottom: 1rem;
}


.contact-header h1 {

  font-size: clamp(2rem, 4vw, 3rem);

  margin-bottom: 1rem;

}


.contact-header p {

  color: var(--color-text-muted);

  line-height: 1.7;

}



/* ---------- Form ---------- */

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}



.form-row {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.25rem;

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: .5rem;

}



.form-group label {

  font-size: .85rem;

  color: var(--color-text-primary);

}



.form-group input,
.form-group textarea {


  width: 100%;


  padding: .9rem 1rem;


  background: rgba(255,255,255,.04);


  border: 1px solid rgba(255,255,255,.12);


  border-radius: .75rem;


  color: var(--color-text-primary);


  font-family: var(--font-body);


  font-size: .95rem;


  transition:
    border-color .2s ease,
    background .2s ease;

}



.form-group input::placeholder,
.form-group textarea::placeholder {

  color: var(--color-text-muted);

}



.form-group input:focus,
.form-group textarea:focus {

  outline: none;

  border-color: var(--color-accent);

  background: rgba(255,255,255,.06);

}



.form-group textarea {

  resize: vertical;

  min-height: 150px;

}



/* ---------- Button ---------- */

.contact-form .btn {

  align-self: center;

  margin-top: .75rem;

}



/* ---------- Back Link ---------- */

.contact-back {

  display: block;

  text-align: center;

  margin-top: 2rem;


  color: var(--color-text-muted);

  text-decoration: none;

  font-size: .9rem;


  transition: color .2s ease;

}



.contact-back:hover {

  color: var(--color-accent);

}



/* ---------- Mobile ---------- */

@media (max-width: 768px) {


  .contact-page {

    padding:
      calc(var(--nav-height) + 2rem)
      1rem
      2rem;

  }


  .contact-card {

    padding: 1.75rem;

  }


  .form-row {

    grid-template-columns: 1fr;

  }


}