/* ================================================
   Employment Form — employment.css
   Loaded last before </body> for highest priority
   ================================================ */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* ---- VARIABLES ---- */
.employment {
  --c:     #5d3a59;
  --c-mid: #7a4e75;
  --c-lt:  #f5eef4;
  --bd:    #d0d5db;
  --bg:    #ffffff;
  --bgs:   #f8f9fa;
  --bgh:   #f0eaf0;
  --tx:    #111827;
  --mu:    #4b5563;
  --r:     7px;
  --rl:    12px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx);
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  background: none;
  box-sizing: border-box;
}

.employment *, .employment *::before, .employment *::after {
  box-sizing: border-box !important;
}

/* ---- HEADER ---- */
.emp-header-meta {
  background: var(--c);
  border-radius: var(--rl) var(--rl) 0 0;
  padding: 20px 32px;
  display: flex;
  align-items: center;
}

.emp-header-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
}

.emp-header-meta .formNoError { display: none !important; }

/* ---- APPLICATION DATE BAR ---- */
.emp-date-bar {
  background: var(--bgh);
  border: 1px solid var(--bd);
  border-top: none;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.emp-date-bar .rsform-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--mu) !important;
  white-space: nowrap;
}

.emp-date-bar .cal-row {
  margin-top: 0 !important;
  width: 240px;
}

.emp-date-bar .formNoError { display: none !important; }

/* ---- FORM SECTIONS ---- */
.emp-section {
  padding: 24px 32px;
  border: 1px solid var(--bd);
  border-top: none;
  background: var(--bg);
}

.emp-section:last-child {
  border-radius: 0 0 var(--rl) var(--rl);
}

/* ---- SECTION HEADINGS ---- */
.employment h2 {
  display: flex !important;
  align-items: center;
  gap: 9px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase !important;
  color: var(--c) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-shadow: none !important;
  border: none !important;
  background: none !important;
}

.emp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px; min-width: 21px;
  background: var(--c);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.emp-hint {
  font-size: 12px;
  color: var(--mu);
  margin: -10px 0 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  display: block;
}

/* ---- GRID SYSTEM ---- */
.emp-grid {
  display: grid;
  gap: 14px 18px;
  margin-bottom: 14px;
  align-items: start;
  width: 100%;
}
.emp-grid:last-child { margin-bottom: 0; }

/* Desktop column layouts */
.emp-g2   { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.emp-g3   { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.emp-g4   { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.emp-g211 { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
.emp-span2 { grid-column: span 2; }

/* Force grid display over RSForm front.css */
.employment .emp-grid { display: grid !important; }

/* ---- FORM FIELD BLOCKS ---- */
.employment .rsform-block {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mu);
  line-height: 1.4;
}

.employment .formNoError { display: none !important; }

/* ---- TEXT INPUTS ---- */
/* box-sizing fix overrides RSForm front.css content-box */
.employment input[type="text"],
.employment input[type="email"],
.employment .rsform-input-box,
.formResponsive input[type="text"] {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  padding: 9px 11px !important;
  margin-top: 5px !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--tx) !important;
  background: var(--bg) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4 !important;
}

.employment input[type="text"]:focus,
.employment .rsform-input-box:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 3px rgba(93,58,89,.12) !important;
}

/* ---- CALENDAR ROW — input + button side by side ---- */
.employment .cal-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  width: 100% !important;
}

/* Calendar input takes remaining space, overrides width:100% */
.employment .cal-row input[type="text"],
.employment .cal-row input.rsform-calendar-box {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0 !important;
  height: 40px !important;
}

/* Calendar button */
.employment button.btnCal,
.employment .rsform-calendar-button {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  background: var(--bgs) !important;
  font-size: 13px !important;
  color: var(--mu) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.employment button.btnCal:hover {
  background: var(--c-lt) !important;
  color: var(--c) !important;
  border-color: var(--c) !important;
}

/* ---- TEXTAREA ---- */
/* Hide reCAPTCHA hidden textarea */
.employment textarea.g-recaptcha-response {
  display: none !important;
}

.employment textarea,
.employment .rsform-text-box {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 11px !important;
  margin-top: 5px !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--tx) !important;
  background: var(--bg) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 76px !important;
  height: auto !important;
  resize: vertical !important;
  outline: none !important;
}

.employment textarea:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 3px rgba(93,58,89,.12) !important;
}

/* ---- RADIO & CHECKBOX ---- */
.employment input[type="radio"],
.employment input[type="checkbox"],
.employment .rsform-radio,
.employment .rsform-checkbox {
  accent-color: var(--c);
  width: 14px !important;
  height: 14px !important;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

.employment label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tx) !important;
  cursor: pointer;
  margin: 4px 10px 0 0 !important;
  white-space: nowrap;
}

/* Radio options wrapper — row with wrap */
.employment .radio-options {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 5px !important;
  align-items: center !important;
}

.employment .radio-options label {
  margin-top: 0 !important;
  margin-right: 12px !important;
}

/* ---- AVAILABLE TO WORK — flex cards ---- */
/* ---- AVAILABLE TO WORK — integrated grid ---- */
.avail-table {
  display: grid;
  grid-template-columns: 80px repeat(8, minmax(0,1fr));
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}

.avail-hours-cell {
  background: var(--bgh);
  color: var(--tx);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-right: 1px solid var(--bd);
  text-align: center;
}

.avail-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-right: 1px solid var(--bd);
}
.avail-day:last-child { border-right: none; }

.avail-day-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mu);
  text-align: center;
  white-space: nowrap;
}

.avail-day .rsform-block {
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  width: 100%;
}

.avail-day input[type="text"],
.avail-day .rsform-input-box {
  width: 100% !important;
  padding: 6px 4px !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: 13px !important;
  height: 40px !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  display: block !important;
  box-sizing: border-box !important;
}

.avail-day input[type="text"]:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 3px rgba(93,58,89,.12) !important;
}

/* ================================================
   SHARED DIV-GRID STYLES
   (Former Employers, Education, References)
   ================================================ */
.emp-table-grid {
  width: 100%;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  font-size: 13px;
}

.etg-head { display: grid; }

.etg-hcell {
  background: var(--bgh);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mu);
  padding: 9px 10px;
  border-right: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
}
.etg-hcell:last-child { border-right: none; }

.etg-row {
  display: grid;
  border-bottom: 1px solid var(--bd);
}
.etg-row:last-child { border-bottom: none; }

.etg-cell {
  padding: 10px;
  border-right: 1px solid var(--bd);
  display: flex;
  align-items: center;
  min-width: 0;
}
.etg-cell:last-child { border-right: none; }

.etg-num {
  justify-content: center;
  font-weight: 700;
  color: var(--mu);
  background: var(--bgh);
  font-size: 12px;
}

.etg-level {
  font-weight: 700;
  font-size: 12px;
  color: var(--tx);
  background: var(--bgh);
  align-items: center;
}

.etg-na {
  justify-content: center;
  color: var(--mu);
  background: var(--bgs);
}

.etg-date {
  background: var(--bgh);
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

/* rsform-block inside grid cells */
.etg-cell .rsform-block {
  font-size: 13px !important;
  color: var(--tx) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  width: 100%;
  min-width: 0;
}

/* Text inputs inside grid cells */
.etg-cell input[type="text"],
.etg-cell .rsform-input-box {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  padding: 9px 11px !important;
  background: var(--bg) !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--tx) !important;
  height: 40px !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.etg-cell input[type="text"]:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 3px rgba(93,58,89,.12) !important;
}

/* ---- FORMER EMPLOYERS grid columns ---- */
.emp-emp-grid .etg-head,
.emp-emp-grid .etg-row {
  grid-template-columns: 210px minmax(0,1fr) 90px 100px 130px;
}

.emp-date-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.emp-date-row .rsform-block {
  flex: 1;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mu) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  min-width: 0;
}

.emp-emp-grid .cal-row { margin-top: 4px !important; }

/* ---- EDUCATION grid columns ---- */
.emp-edu-grid .etg-head,
.emp-edu-grid .etg-row {
  grid-template-columns: 110px minmax(0,2fr) 110px 200px minmax(0,1fr);
}

/* Radio buttons in education — always row, no wrap */
.emp-edu-grid .etg-cell .rsform-block {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
}

/* Labels in education cells — no wrap */
.emp-edu-grid .etg-cell label {
  white-space: nowrap !important;
  margin: 0 6px 0 0 !important;
}

/* School and Subject inputs — back to column layout */
.emp-edu-grid .rsform-block-school1,
.emp-edu-grid .rsform-block-school2,
.emp-edu-grid .rsform-block-school3,
.emp-edu-grid .rsform-block-school4,
.emp-edu-grid .rsform-block-subject1,
.emp-edu-grid .rsform-block-subject2,
.emp-edu-grid .rsform-block-subject3,
.emp-edu-grid .rsform-block-subject4 {
  flex-direction: column !important;
}

/* ---- REFERENCES grid columns ---- */
.emp-ref-grid .etg-head,
.emp-ref-grid .etg-row {
  grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 100px;
}

/* ---- VALIDATION ---- */
.employment input.formError,
.employment textarea.formError {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(185,28,28,.12) !important;
}

/* ---- DECLARATIONS ---- */
.emp-declarations .rsform-block {
  background: var(--bgs) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--tx) !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.emp-declarations label {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tx) !important;
  margin: 0 !important;
  white-space: normal !important;
}

.emp-declarations input[type="checkbox"],
.emp-declarations .rsform-checkbox {
  flex-shrink: 0;
  margin-top: 3px !important;
  width: 15px !important;
  height: 15px !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

.emp-required {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  display: block;
  margin-bottom: 4px;
}

/* ---- SUBMIT BUTTON ---- */
.rsform-block-submit {
  text-align: center !important;
  display: flex !important;
  justify-content: center;
  padding: 6px 0;
  text-transform: none !important;
  font-size: 14px !important;
}

.employment button.rsform-submit-button,
.formResponsive input[type="submit"] {
  display: inline-block !important;
  padding: 13px 52px !important;
  background: var(--c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 40px !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  margin: 14px auto 6px !important;
}

.employment button.rsform-submit-button:hover {
  background: var(--c-mid) !important;
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* data-label shown as field label on mobile — hidden on desktop */
.etg-cell[data-label]::before {
  display: none;
  content: attr(data-label);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mu);
  margin-bottom: 4px;
}

/* Tablet — max 700px */
@media (max-width: 700px) {
  .emp-header-meta { padding: 18px 24px; }
  .emp-date-bar { padding: 12px 24px; }
  .emp-section { padding: 20px 18px; }

  /* Standard grids — 2 columns */
  .emp-g2   { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .emp-g3   { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .emp-g4   { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .emp-g211 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .emp-span2 { grid-column: span 2; }

  /* General section — 1 column */
  #general .emp-g3 { grid-template-columns: minmax(0,1fr); }

  /* Available to Work — Hours spans full width, then 4 cols per row */
  .avail-table {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .avail-hours-cell {
    grid-column: span 4;
    border-right: none;
    border-bottom: 1px solid var(--bd);
    justify-content: flex-start;
    padding: 8px 12px;
  }
  .avail-day:nth-child(6),
  .avail-day:nth-child(7),
  .avail-day:nth-child(8),
  .avail-day:nth-child(9) {
    border-top: 1px solid var(--bd);
  }
  .avail-day:nth-child(5),
  .avail-day:nth-child(9) { border-right: none; }

  /* Show data-label on mobile cells */
  .etg-cell[data-label] {
    flex-direction: column;
    align-items: flex-start;
  }
  .etg-cell[data-label]::before { display: block; }

  /* Former Employers — 2 columns, cards layout */
  .emp-emp-grid .etg-head { display: none; }
  .emp-emp-grid .etg-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    border-bottom: 2px solid var(--bd);
  }
  .emp-emp-grid .etg-cell {
    border-right: none;
    border-bottom: 1px solid var(--bd);
    padding: 8px;
  }
  .emp-emp-grid .etg-date { grid-column: span 2; flex-direction: row; align-items: flex-start; }
  .emp-emp-grid .etg-cell:nth-child(2) { grid-column: span 2; }
  .emp-emp-grid .etg-cell:nth-child(3) { border-right: 1px solid var(--bd); }

  /* Education — card layout with table-like borders */
  .emp-edu-grid .etg-head { display: none; }

  /* Each row = one card with full border */
  .emp-edu-grid .etg-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .emp-edu-grid .etg-row:last-child { margin-bottom: 0; }

  .emp-edu-grid .etg-cell {
    border-right: none;
    border-bottom: 1px solid var(--bd);
    border-radius: 0;
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .emp-edu-grid .etg-cell:last-child { border-bottom: none; }

  /* Level label — full width header, top rounded corners only */
  .emp-edu-grid .etg-level {
    grid-column: span 2;
    background: var(--bgh);
    border-bottom: 1px solid var(--bd);
    border-radius: 0;
    font-size: 13px;
    padding: 10px 12px;
  }
  /* School name — full width */
  .emp-edu-grid .etg-cell:nth-child(2) {
    grid-column: span 2;
    border-bottom: 1px solid var(--bd);
  }
  /* Graduated | Last Year — side by side */
  .emp-edu-grid .etg-cell:nth-child(3) {
    border-right: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
  }
  .emp-edu-grid .etg-cell:nth-child(4) {
    border-bottom: 1px solid var(--bd);
  }
  /* Subjects — full width, no bottom border */
  .emp-edu-grid .etg-cell:nth-child(5) {
    grid-column: span 2;
    border-bottom: none;
  }

  /* References — 2 columns */
  .emp-ref-grid .etg-head { display: none; }
  .emp-ref-grid .etg-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    border-bottom: 2px solid var(--bd);
  }
  .emp-ref-grid .etg-cell {
    border-right: none;
    border-bottom: 1px solid var(--bd);
    padding: 8px;
  }
  .emp-ref-grid .etg-num { grid-column: span 2; background: var(--bgh); font-size: 11px; justify-content: flex-start; }
  .emp-ref-grid .etg-cell:nth-child(2) { grid-column: span 2; }
  .emp-ref-grid .etg-cell:nth-child(3) { border-right: 1px solid var(--bd); }
}

/* Mobile — max 480px */
@media (max-width: 480px) {
  .emp-header-meta { border-radius: 0; padding: 16px; }
  .emp-header-title { font-size: 17px; }
  .emp-date-bar { padding: 12px 16px; flex-wrap: wrap; }
  .emp-date-bar .cal-row { width: 100%; }
  .emp-section { padding: 14px; }

  /* All grids — 1 column */
  .emp-g2, .emp-g3, .emp-g4, .emp-g211 {
    grid-template-columns: minmax(0,1fr);
  }
  .emp-span2 { grid-column: span 1; }

  /* Available to Work — Hours full width, then 2 cols */
  .avail-table {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .avail-hours-cell {
    grid-column: span 2;
    border-right: none;
    border-bottom: 1px solid var(--bd);
    justify-content: flex-start;
    padding: 8px 12px;
  }
  .avail-day:nth-child(odd) { border-right: 1px solid var(--bd); }
  .avail-day:nth-child(even) { border-right: none; }

  /* All div-grids — 1 column */
  .emp-emp-grid .etg-row,
  .emp-edu-grid .etg-row,
  .emp-ref-grid .etg-row {
    grid-template-columns: minmax(0,1fr);
  }
  .emp-emp-grid .etg-cell,
  .emp-edu-grid .etg-cell,
  .emp-ref-grid .etg-cell {
    grid-column: span 1 !important;
    border-right: none;
  }
  .etg-date { flex-direction: column; }
  .emp-emp-grid .etg-date { flex-direction: column; }

  .employment button.rsform-submit-button,
  .formResponsive input[type="submit"] {
    width: 100% !important;
    padding: 13px 20px !important;
  }
}