/*
  CSS Styles for Sign Up page
  In the web site BayITOutsourcing.com 
*/

/*
  Copyright (c) 2025 Bay IT Outsourcing
  All rights reserved.
  Created: 2025-09
*/

/* added to allow page to scroll up and down if it is taller than viewport */
body {
  overflow:auto;
}

/* for Comments textarea box at the bottom */
#message {
  resize: vertical; /* allow vertical resizing */
  overflow-y: auto; /* add scrollbar if text overflows */
  max-height: 200px; /* set maximum height */
  min-width: 0; /* prevents flex overflow in some browsers */
}

/* per-row layout: label then control, control fills remaining space */
#sign-up-form .field {
  display: flex;
  align-items: center;
  gap: 0.75rem;           /* space between label and control */
  margin-bottom: 0.75rem;
}

/* label keeps intrinsic width; use a comfortable min-width if desired */
#sign-up-form .field label {
  white-space: nowrap;
  flex: 0 0 auto;
  margin: 0;
  font-weight: 600;
}

/* inputs expand to fill remaining horizontal space */
#sign-up-form .field input,
#sign-up-form .field textarea {
  flex: 1 1 auto;
  width: auto;            /* don't force 100% here — flex handles width */
  min-width: 0;          /* prevents overflow in flex containers */
  box-sizing: border-box;
  padding: 0.5rem;
}

/* submit button aligned to right */
#sign-up-form .field--submit {
  justify-content: flex-end;
}

#sign-up-form .field--submit button {
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

/* small screens: stack label above control for each field */
@media (max-width:560px){
  #sign-up-form .field {
    flex-direction: column;
    align-items: stretch;
  }
  #sign-up-form .field label { margin-bottom: 0.4rem; }
  #sign-up-form .field--submit { justify-content: stretch; }
  #sign-up-form .field--submit button { font-size: 1.05rem; padding: 0.7rem 1rem; }
}