/* Employment application. One white band holding the four-step form.
   The form is visual only in this version: see the comment in the page source. */

.application {
  background: var(--white);
  padding: 50px;
  display: flex; justify-content: center; align-items: center;
}
.app-form { width: 70%; }
/* Live reserves 14px above the progress bar for the invisible reCAPTCHA badge container. */
.app-form::before { content: ""; display: block; height: 14px; }

/* ---------- step counter + progress bar ---------- */
.app-step { margin: 0 0 5px; font: 400 13px / 31px var(--font-serif); color: #767676; }
.app-progress {
  height: 21px; margin-bottom: 16px; border-radius: 10.5px; overflow: hidden;
  background: #d2d6dc;
}
.app-progress-bar {
  /* Step 1 of 4; assets/js/pages/application.js moves it. */
  width: 25%; height: 100%; border-radius: 10.5px 0 0 10.5px; background: #1e7ac4;
  display: flex; align-items: center; justify-content: flex-end;
  color: var(--white); font: 400 13px / 21px var(--font-serif);
}
.app-progress-bar span { margin: 0 8px; }

/* ---------- field grid ---------- */
/* Live's field grid is 12 columns with a 2% gap: a half field is 49%, a quarter 23.5%. */
.app-fields { display: flex; flex-wrap: wrap; column-gap: 2%; row-gap: 16px; }
.app-field { width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.app-half { width: 49%; }
.app-quarter { width: 23.5%; }

.app-section {
  width: 100%; margin: 0 0 14px; padding: 0 16px 8px 0; border-bottom: 1px solid #ccc;
  font: 700 28px / 1.1 var(--font-display); color: var(--navy);
}

.app-label {
  display: block; margin: 0 0 8px; padding: 0 0 21px;
  font: 300 22px / 22px var(--font-display); letter-spacing: 1.3px; color: #0c2d4a;
}
.app-fields legend.app-label { line-height: 31px; padding-bottom: 25px; }
.app-required {
  margin-left: 5px; font: italic 300 13px / 1 var(--font-display); letter-spacing: 1.3px; color: #c02b0a;
}
.app-desc {
  margin: 9px 0 0; padding: 13px 0 16px;
  font: 400 15px / 31px var(--font-serif); color: var(--text);
}

/* ---------- inputs ---------- */
.app-field input[type="text"],
.app-field input[type="tel"],
.app-field input[type="email"],
.app-field input[type="number"],
.app-field textarea,
.app-select {
  width: 100%; background: var(--white); color: var(--text);
  border: 3px solid #0c2d4a; border-radius: 7px; padding: 5px; margin: 14px 0 18px;
  font: 400 22px / 33px var(--font-serif);
}
.app-field input[type="text"],
.app-field input[type="tel"],
.app-field input[type="email"],
.app-field input[type="number"] { height: 49px; }
.app-field textarea { min-height: 160px; resize: vertical; }
.app-field input::placeholder { color: #767676; }

/* Live's select is calc(50% - 8px) of the field, and its top margin collapses with the label's. */
.app-select {
  display: block; width: calc(50% - 8px); max-width: 100%; height: 69px;
  padding: 15px 60px 15px 15px; color: #0c2d4a;
  font: 400 22px / 33px var(--font-display);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><polygon points='6,9 18,9 12,15' fill='%23E13F3F'/></svg>");
  background-repeat: no-repeat; background-position: calc(100% - 16px) center; background-size: 34px 34px;
}
.app-half .app-select, .app-quarter .app-select { width: 100%; }

/* Name / address sub-fields keep their own small labels above each box.
   Live's three-part name row is a float layout: two 32.32% boxes 2.05% apart and a third
   flushed to the right edge, so the gaps are deliberately uneven. */
.app-subgrid { display: flex; flex-wrap: wrap; }
.app-subgrid > .app-sub { width: 32.32%; }
.app-subgrid > .app-sub:nth-child(2) { margin-left: 2.05%; }
.app-subgrid > .app-sub:last-child { margin-left: auto; }
.app-subgrid-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2%; row-gap: 8px; }
.app-subgrid-address > .app-sub, .app-subgrid-address > .app-sub:nth-child(2),
.app-subgrid-address > .app-sub:last-child { width: auto; margin-left: 0; }
.app-subgrid-street .app-sub:first-child { grid-column: 1 / -1; }
.app-sub label { display: block; font: 400 18px / 18px var(--font-serif); color: #0c2d4a; }

/* ---------- choices ---------- */
.app-choices { display: flex; flex-wrap: wrap; gap: 0 32px; }
.app-choices .app-choice { margin-bottom: 8px; }
.app-choices-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 250px; }
.app-choice { display: flex; align-items: center; }
.app-choices input {
  flex: 0 0 auto; margin: 0; width: 22px; height: 22px;
  appearance: none; -webkit-appearance: none;
  background: var(--white); border: 1px solid #bdc3c7; border-radius: 4px;
}
.app-choices-radio input { width: 18px; height: 18px; border-radius: 50%; }
.app-choices input:checked { border-color: var(--navy); background: var(--navy); }
.app-choices label { font: 400 22px / 22px var(--font-serif); color: #0c2d4a; padding-left: 28px; }
.app-choices-radio label { color: var(--text); padding-left: 7px; }

/* ---------- list fields (availability, references, military) ---------- */
.app-list { margin: 14px 0 18px; }
.app-list-head, .app-list-row { display: grid; gap: 10px; }
.app-list-4 .app-list-head, .app-list-4 .app-list-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-list-5 .app-list-head, .app-list-5 .app-list-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app-list-7 .app-list-head, .app-list-7 .app-list-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.app-list-head span { font: 400 18px / 22px var(--font-serif); color: #0c2d4a; }
.app-list-row input {
  width: 100%; height: 49px; margin-top: 6px; padding: 5px;
  background: var(--white); border: 3px solid #0c2d4a; border-radius: 7px;
  font: 400 22px / 33px var(--font-serif);
}

/* ---------- job-description links (shown once a position is picked) ---------- */
.app-joblinks { margin: 46px 0 0; font: 400 20px / 31px var(--font-serif); }
.app-joblinks a { display: block; color: var(--red); }

.app-eeo-title { margin: 0 0 10px; font: 400 28px / 1.1 var(--font-display); color: var(--navy); }

/* ---------- footer buttons ---------- */
.app-footer { margin-top: 6px; padding: 16px 0; display: flex; gap: 16px; }
.app-btn { font-size: 18.6667px; line-height: 28px; margin-bottom: 8px; }
.app-prev { background: var(--navy); }
.app-prev:hover { background: #0c3f6f; }

/* ---------- job-description popups ---------- */
.app-popup { align-items: flex-start; }
.app-popup .popup-box { width: 640px; max-width: 90%; margin: 100px 0 40px; }
.app-popup .popup-content { font: 400 16px / 1.5 var(--font-sans); }
.app-popup .popup-content ul, .app-popup .popup-content ol { margin: 0 0 1em; padding-left: 30px; }
.app-popup .popup-content ul { list-style: disc; }
.app-popup .popup-content ol { list-style: decimal; }
.app-popup .popup-content li { margin-bottom: .5em; }
.app-popup .popup-content h2 { font-size: 22px; margin: 0 0 .5em; }

@media (max-width: 1024px) {
  .app-quarter { width: 49%; }
}
@media (max-width: 767px) {
  /* Live keeps the 50px band padding and the 70% form column, so on a 390px screen the whole
     form is squeezed into 203px: every field goes full width, the sub-fields stack, and the
     select is left at half of that. Match it. */
  .app-half, .app-quarter { width: 100%; }
  .app-subgrid > .app-sub, .app-subgrid > .app-sub:nth-child(2), .app-subgrid > .app-sub:last-child {
    width: 100%; margin: 0 0 8px;
  }
  .app-subgrid-address { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .app-list-row, .app-list-head { grid-template-columns: minmax(0, 1fr); }
  /* Radio and checkbox choices stack one per row in the narrow column, inside a box that
     clears 5px above and below. */
  .app-choices { flex-direction: column; padding: 5px 0; }
  .app-choices-checkbox { grid-template-columns: minmax(0, 1fr); }
  /* Gravity Forms' mobile rules give the text inputs a 44px line box. */
  .app-field input[type="text"],
  .app-field input[type="tel"],
  .app-field input[type="email"],
  .app-field input[type="number"],
  .app-list-row input { height: 60px; line-height: 44px; }
  .app-popup .popup-box { margin-top: 60px; }
}