/* ────────────────────────────────────────────────────────
   1) Make only the “form card” narrower (not the entire
      contact‐content wrapper). Keeps nav‐content‐wrapper
      at its normal width.
   ──────────────────────────────────────────────────────── */

body.contact-page .styled-contact-form {
  max-width: 600px;       /* ← adjust this value to taste */
  margin: 0 auto 2rem;    /* center horizontally and give bottom space */
}


/* If you want a slightly larger container on desktop: */
@media (min-width: 1024px) {
  body.contact-page .contact-content {
    max-width: 900px;
    padding: 0 1.5rem;
  }
}
/* ---------------------------------------------------
   2) Style the page title and intro text
   --------------------------------------------------- */
body.contact-page #section-heading {
  text-align: left;
  font-size: 2rem;               /* larger heading */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

body.contact-page .contact-content p {
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
/* ---------------------------------------------------
   3) Error banner styling
   --------------------------------------------------- */
body.contact-page .form-error {
  background-color: #ffe6e6;      /* very light red/pink */
  border: 1px solid #ff4c4c;      /* bold red border */
  color: #990000;                 /* dark red text */
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  text-align: center;
  font-weight: 500;
}
/* ---------------------------------------------------
   4) Form “card” styling
   --------------------------------------------------- */
body.contact-page .styled-contact-form {
  background-color: #ffffff;      /* white background */
  border: 1px solid #b3d7f0;      /* light blue border */
  border-radius: 8px;             /* rounded corners */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;               /* clip the header */
  margin-bottom: 2rem;
}

/* The light‐blue header bar */
body.contact-page .styled-contact-form form::before {
  content: "Send Me a Message";
  display: block;
  background: #b6ddff;   /* same light blue as Guestbook header */
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* Slight spacing inside the card */
body.contact-page .styled-contact-form form {
  padding: 1.25rem 1rem;
  box-sizing: border-box;
}
/* ---------------------------------------------------
   5) Style each label/input “row”
   --------------------------------------------------- */
body.contact-page .styled-contact-form .form-group {
  margin-bottom: 1rem;
}

/* Label + icon alignment */
body.contact-page .styled-contact-form label {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: .95rem;
  
  margin-bottom: 0.375rem;
}

/* Icon to the left of the label text */
body.contact-page .styled-contact-form label i {
  margin-right: 0.5rem;
  color: #0066a2;   /* a medium‐blue tone */
}

/* Text input and textarea styling */
body.contact-page .styled-contact-form input[type="text"],
body.contact-page .styled-contact-form input[type="email"],
body.contact-page .styled-contact-form textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #b3d7f0;    /* light blue border */
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

/* On focus, highlight the border */
body.contact-page .styled-contact-form input:focus,
body.contact-page .styled-contact-form textarea:focus {
  border-color: #0066a2;        /* medium blue when focused */
}

/* So textarea doesn’t resize crazy: */
body.contact-page .styled-contact-form textarea {
  resize: vertical;
}
/* ---------------------------------------------------
   6) Center the reCAPTCHA widget
   --------------------------------------------------- */
/* Remove “auto” centering and force left alignment */
body.contact-page .styled-contact-form .g-recaptcha {
  margin: 1rem 0 1.25rem 0; /* top / right / bottom / left */
  max-width: 320px;        /* keep the same max-width if you like */
}

/* Ensure the iframe inside also sits flush left */
body.contact-page .styled-contact-form .g-recaptcha iframe {
  display: block !important;
  margin: 0 !important;
}

/* ---------------------------------------------------
   7) Submit button styling
   --------------------------------------------------- */
body.contact-page .styled-contact-form .cf-submit {
background: #b3d7f0;
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 1rem auto ;	
}
	
 

/* Hover state */
body.contact-page .styled-contact-form .cf-submit:hover {
  background-color: #004d80;    /* darker blue on hover */
  color: #fff;
}


/* ---------------------------------------------------
   9) Responsive: mobile adjustments
   --------------------------------------------------- */
@media (max-width: 767px) {
  body.contact-page .styled-contact-form {
    margin: 0 1rem 2rem 1rem;
  }

  body.contact-page .styled-contact-form form::before {
    font-size: 1rem;         /* slightly smaller header on small screens */
    padding: 0.6rem 0.8rem;
  }

  /* Shrink inputs/font slightly on very small screens */
  body.contact-page .styled-contact-form input,
  body.contact-page .styled-contact-form textarea {
    font-size: 0.95rem;
    padding: 0.45rem 0.7rem;
  }

  /* recaptcha fits a bit better on narrow viewports */
  body.contact-page .styled-contact-form .g-recaptcha {
    max-width: 290px;
  }
}
/* • Push the entire form “card” down ~1 inch (≈6 rem) */
body.contact-page .styled-contact-form {
  margin: 6rem auto 3rem; /* top / left-auto/right-auto / bottom */
  max-width: 600px;       /* whatever width you already had */
}

/* • Ensure there’s extra gap between the bottom of the card and the Top-of-Page link */
body.contact-page .toplink {
  margin-top: 10rem; /* add 2rem of space above the button */
}