/* --------------------------------------------------
   Wizard navigation buttons
-------------------------------------------------- */
.form-actions.webform-actions {
  display: flex;
  justify-content: space-between; /* left + right */
  align-items: center;
}

form.webform-submission-form .js-form-type-select > label {
  display: block;
  margin-bottom: 0.5rem;  /* adjust this if you want tighter/looser spacing */
}

/* Previous button stays on the left (default) */
.form-actions.webform-actions .webform-button--previous {
  margin-right: auto; /* push everything else to the right */
}

/* Next button snaps to the right */
.form-actions.webform-actions .webform-button--next {
  margin-left: auto; /* push it all the way right */
}


/* --------------------------------------------------
   Wizard progress tracker
-------------------------------------------------- */

/* Let progress tracker labels wrap and stop hiding text */
.webform-progress-tracker .progress-text,
.webform-progress-tracker .progress-title {
  white-space: normal;   /* allow wrapping */
  overflow: visible;     /* don't clip text */
  text-overflow: clip;   /* no ellipsis / truncation */
}

/* Make sure each step doesn't clip its contents */
.webform-progress-tracker .progress-step {
  overflow: visible;
}

/* Slightly smaller, tighter labels so 2-line titles fit nicely */
.webform-progress-tracker .progress-title {
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
}


/* --------------------------------------------------
   Global font for this webform
-------------------------------------------------- */
form.webform-submission-form,
form.webform-submission-form * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}


/* --------------------------------------------------
   Select styling: match text inputs
-------------------------------------------------- */
form.webform-submission-form select.form-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  height: calc(2.25rem + 2px);       /* match input height incl. borders */
  padding: 0.375rem 0.75rem;         /* match input padding */
  border: 1px solid #ced4da;         /* same border as inputs */
  border-radius: 4px;                /* same rounding as inputs */
  background-color: #fff;
  line-height: 1.5;
}

/* Ensure State label stacks above its select */
form.webform-submission-form .school-state-wrapper > label {
  display: block;
  margin-bottom: 0.5rem;
}


/* --------------------------------------------------
   Multiple colleges composite: visual divider
-------------------------------------------------- */
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr + tr {
  border-top: 4px solid #6b7280;   /* darker gray divider */
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}


/* --------------------------------------------------
   Colleges composite: side-by-side fields (City/State,
   Major/Minor, Start/End)
-------------------------------------------------- */

/* Make each composite "row" a flex container */
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* space between fields */
}

/* Default: each field takes full width */
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .js-form-item {
  flex: 1 1 100%;
}

/* Pairs that should share a line: two per row */
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-city,
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-state,
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-major,
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-minor,
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-start,
form.webform-submission-form
  .form-item-colleges-universities-trade
  .webform-multiple-table tbody tr > td > .edu-end {
  flex: 1 1 calc(50% - 0.5rem);   /* two fields per row */
  min-width: 0;
}

/* On small screens, stack them again (one per line) */
@media (max-width: 640px) {
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-city,
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-state,
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-major,
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-minor,
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-start,
  form.webform-submission-form
    .form-item-colleges-universities-trade
    .webform-multiple-table tbody tr > td > .edu-end {
    flex: 1 1 100%;
  }
}

/* Specialized Training composite: side-by-side Start/End dates */

/* Make each composite "row" a flex container */
form.webform-submission-form
  .form-item-specialized-training
  .webform-multiple-table tbody tr > td {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* space between fields */
}

/* Default: each field takes full width */
form.webform-submission-form
  .form-item-specialized-training
  .webform-multiple-table tbody tr > td > .js-form-item {
  flex: 1 1 100%;
}

/* Start and End share a line (two per row) */
form.webform-submission-form
  .form-item-specialized-training
  .webform-multiple-table tbody tr > td > .training-start,
form.webform-submission-form
  .form-item-specialized-training
  .webform-multiple-table tbody tr > td > .training-end {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 0;
}

/* On small screens, stack them (full width) */
@media (max-width: 640px) {
  form.webform-submission-form
    .form-item-specialized-training
    .webform-multiple-table tbody tr > td > .training-start,
  form.webform-submission-form
    .form-item-specialized-training
    .webform-multiple-table tbody tr > td > .training-end {
    flex: 1 1 100%;
  }
}
/* -------------------------------------------------------------
   Employment History composite: multi-column responsive layout
------------------------------------------------------------- */

/* Make each composite "row" a flex container */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Default: all fields full width unless grouped below */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .js-form-item {
  flex: 1 1 100%;
}

/* ---------- 2-column pairs ---------- */

/* Start + End date */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-start,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-end {
  flex: 1 1 calc(50% - 0.5rem);
}

/* Employer Name + Phone */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-name,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-phone {
  flex: 1 1 calc(50% - 0.5rem);
}

/* Address 1 + Address 2 */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-addr1,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-addr2 {
  flex: 1 1 calc(50% - 0.5rem);
}

/* ---------- 3-column rows ---------- */

/* City + State + ZIP */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-city,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-state,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-zip {
  flex: 1 1 calc(33.333% - 0.5rem);
}

/* Salary + Hours + Supervisors */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-salary,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-hours,
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr > td > .emp-supervise {
  flex: 1 1 calc(33.333% - 0.5rem);
}

/* ---------- Mobile: stack fields ---------- */
@media (max-width: 640px) {
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-start,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-end,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-name,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-phone,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-addr1,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-addr2,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-city,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-state,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-zip,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-salary,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-hours,
  form.webform-submission-form
    .form-item-employment-history
    .webform-multiple-table tbody tr > td > .emp-supervise {
    flex: 1 1 100%;
  }
}

/* Thick dividers between Employment History entries */
form.webform-submission-form
  .form-item-employment-history
  .webform-multiple-table tbody tr + tr {
  border-top: 4px solid #6b7280;  /* solid, obvious divider */
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}