/* contact.css */

/* =========================================================
   1)  REMOVE ANY EXTRA TOP/BOTTOM GAP ON CONTACT PAGE
   ========================================================= */
header + .contact-section {
  padding-top: 0 !important;
}
footer {
  margin-top: 0; /* ensure no white gap above footer */
}

/* =========================================================
   2)  CONTACT SECTION GRID (LEFT BEIGE, RIGHT NAVY)
   ========================================================= */
.contact-section {
  display: flex;
  width: 100%;
}
.contact-container {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 124px); /* approx. header+footer height */
}

/* Left half (beige) */
.contact-left {
  background-color: #F2F1E5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.contact-info {
  max-width: 400px;
  text-align: center;
}
.contact-info h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #171C32;
}
.contact-info p {
  font-size: 1rem;
  line-height: 1.7;
  color: #232949;
  margin-bottom: 1.5rem;
}
.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 300px;
}
.contact-info ul li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #171C32;
}

/* Right half (navy + form) */
.contact-right {
  background-color: #232949;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.contact-form {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* FORM ROWS: two‐column on desktop, single on mobile */
.contact-row {
  display: flex;
  gap: 1rem;
}
.contact-row.single {
  flex-direction: column;
}
.contact-row.recaptcha-row {
  justify-content: center;
}
.contact-row.submit-row {
  justify-content: center;
}

/* Each form group takes up half the row on desktop */
.contact-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Labels */
.form-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #F2F1E5; /* beige text on navy */
}

/* Inputs and textarea */
.form-input {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #ececec;
  border-radius: 6px;
  background-color: #fff;
  color: #232949;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-input:focus {
  outline: none;
  border-color: #171C32;
  box-shadow: 0 2px 8px rgba(23, 28, 50, 0.15);
}
.textarea-input {
  resize: vertical;
  min-height: 100px;
}

/* reCAPTCHA centering/scale */
.g-recaptcha {
  transform: scale(0.92);
  transform-origin: center;
}

/* Submit button */
.submit-button {
  background-color: #F2F1E5; /* beige */
  color: #171C32;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 1rem 2.4rem;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.submit-button:hover {
  background-color: #ffffff;
  transform: translateY(-2px) scale(1.02);
}

/* =========================================================
   3)  RESPONSIVE ADJUSTMENTS (≤ 840px)
   ========================================================= */
@media (max-width: 840px) {
  .contact-container {
    flex-direction: column;
  }
  .contact-left,
  .contact-right {
    width: 100%;
    padding: 1.5rem;
  }
  .contact-row {
    flex-direction: column;
  }
  .g-recaptcha {
    transform: scale(0.8);
  }
}
/* 1) Make sure the root elements span the full viewport */
html,
body {
  height: 100%;
  margin: 0;
}

/* 2) Turn .site-wrapper into a column flex so content can expand */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 3) Let the contact section itself stretch to fill available vertical space */
.contact-section {
  flex: 1;
  margin-bottom: 0;    /* remove any default margin that might push content up */
  padding-bottom: 0;   /* remove any extra bottom padding */
}

/* 4) Also ensure the container inside does not add extra gap */
.contact-container {
  flex: 1;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 5) If the “section” class adds padding, override it specifically here */
.section.contact-section {
  /* (you already have no top padding, so just ensure no bottom padding) */
  padding-bottom: 0 !important;
}