/* 
   get-started.css

   Styles to make your existing HTML match the 
   screenshot's 2x2 form layout, with a full-width 
   background, and responsive behavior.
*/

/* FULL-WIDTH BACKGROUND */
.get-started-wrapper {
  min-height: calc(100vh - 70px); /* Subtract header height */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: url("../images/intake_back.png") no-repeat center center;
  background-size: cover;
  padding: 20px;
  margin-top: -15px; /* Remove top gap */
  margin-bottom: -20px; /* Remove bottom gap */
  box-sizing: border-box;
  position: relative;
}

/* WRAPPER FOR YOUR FORM SECTION */
.services-form-container-intake {
  padding: 40px 20px;
}

/*
  The .intake-form is your white "card" container. 
  Adjust as you like to add a white box, shadows, etc.
*/
.intake-form {
  max-width: 700px;          /* limit width to keep it centered */
  margin: 0 auto;
  background-color: #fff;    /* white card look */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.intake-form h1,
.intake-form .subtitle {
  text-align: center;
}

/* GRID LAYOUT FOR THE FORM */
#intake-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns on larger screens */
  gap: 20px;                      /* space between items */
}

/* STYLING FOR TEXT/SELECT/DATE FIELDS */
#intake-form input,
#intake-form select,
#intake-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* MAKE THE TEXTAREA SPAN BOTH COLUMNS */
#intake-form textarea {
  grid-column: 1 / 3;  /* force it to span 2 columns */
  min-height: 120px;
}

/* SUBMIT BUTTON ALSO SPANS BOTH COLUMNS */
#intake-form button {
  grid-column: 1 / 3;
  padding: 12px;
  font-size: 1rem;
  background-color: #073763;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* HOVER EFFECT FOR BUTTON (OPTIONAL) */
#intake-form button:hover {
  background-color: #064289;
}


.whats-next-section {
  max-width: 700px;
  margin: 10px auto 0 auto;   /* 30px top margin for spacing above, auto left/right to center */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 15px;
  text-align: center;

}


#form-status {
  text-align: center;
  position: relative;
  grid-column: 1 / 3;
  width: 100%;
  margin: 10px auto;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #28a745;
}

@media (max-width: 768px) {
  #form-status {
    grid-column: 1;
    margin: 10px 0;
  }
}

/* MOBILE RESPONSIVE: SWITCH TO SINGLE COLUMN */
@media (max-width: 768px) {
  #intake-form {
    grid-template-columns: 1fr; /* single column on small screens */
  }
  #intake-form textarea,
  #intake-form button {
    grid-column: 1; /* full width in the single-column layout */
  }

  .services-form-container-intake {
    padding: 0px;
  }
}