/* ------------------------------------------------ */
/* Job Application                                     */
/* Mirrors the design language of the /jobs search      */
/* page (search.css) and the job detail page            */
/* (job-detail.css): Open Sans, #0066a4 brand blue,     */
/* #d5dde3 rules, 2px radii, generous spacing.          */
/* ------------------------------------------------ */

/* ===== Page shell ===== */
/* The apply steps are a single wide form, so give them more room than the
   920px default shell without going to the full 1200px of the two-column
   job detail page. */
.apply-page .main-wrap {
    max-width: 1100px;
}

#job-application {
    position: relative;
    color: #333;
    padding-bottom: 3rem;
}

/* Foundation's global `h1, h2, h3, h4, h5, h6` rule sets font-family: Oswald.
   None of the heading rules below override font-family (only color/size/weight),
   so without this, any heading tag in the apply flow (like the "Would you like to
   apply for additional positions" fieldset h4) silently renders in Oswald - a
   different, chunkier display face - instead of inheriting Open Sans. */
#job-application h1,
#job-application h2,
#job-application h3,
#job-application h4,
#job-application h5,
#job-application h6 {
    font-family: inherit;
}

#job-application #top-left h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0066a4;
    margin: 2rem 0 0;
}

#job-application #top-left hr {
    color: #d5dde3;
    background: #d5dde3;
    height: 1px;
    margin: 1rem 0 0;
}

/* ===== Location banner + highlights ===== */
#job-application .apply-banner {
    margin: 1.5rem 0 0;
}

#job-application .apply-banner img {
    display: block;
    max-width: 100%;
    max-height: 250px;
}

#job-application .apply-highlights {
    margin: 1.5rem 0 0;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* Neutralize inline CKEditor styling (custom fonts, sizes, colors, line-heights)
   on authored content so it matches the page stylesheet. Same treatment the job
   detail page gives its location highlights. */
#job-application .apply-highlights [style] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* ===== "You are applying to" header ===== */
#job-application #form {
    margin-top: 2rem;
}

#job-application .applying-to {
    display: block;
    color: #6b7c88;
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0;
    margin: 0 0 .35rem;
}

/* Same tier as .job-title below - both are the "job you're applying to"
   heading, just on different steps (this one only appears on the first page,
   paired with the "You are applying to" eyebrow above it). They were 1.5rem vs
   1.75rem; unified so the same piece of information doesn't change size
   depending which step you're on. */
#job-application .applying-to-value {
    display: block;
    color: #1a1a1a;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

#job-application .job-title {
    color: #1a1a1a;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

#job-application .job-location {
    color: #4a4a4a;
    font-size: 1.05rem;
    margin-top: .35rem;
}

/* Closes out the "what you're applying to" header. Without the rule the job
   title ran straight into the stepper and the first section heading below it.
   These are the last element of that header on each step - `.job-location` on
   the continuation steps, `.applying-to-value` on the first one. */
#job-application .job-location,
#job-application .applying-to-value {
    padding-bottom: 1.6rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid #d5dde3;
}

/* ===== Layout: sidebar stepper + fields ===== */
#job-application .apply-layout {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

#job-application .apply-fields {
    flex: 1 1 auto;
    min-width: 0;
    /* optical alignment: nudges the first heading's text down so it lines up
       with the label inside the first step box, which is inset by its padding */
    padding-top: .35rem;
}

/* the view opens this column with a 25px spacer that would push the first
   heading well below the top of the stepper */
#job-application .apply-fields > .spacer:first-child {
    display: none;
}

/* ===== Stepper ===== */
/* The view emits inline pixel widths on every tab (and a pixel-width fill bar)
   that were sized for the old fixed 920px shell. They're neutralized here so the
   steps distribute evenly at any width; progress now reads off each step's own
   accent rule via the `on` / `complete` classes the view already applies, which
   makes the separate fill bar redundant. */
#job-application #progress-wrapper {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
}

#job-application #progress-wrapper > .spacer,
#job-application #progress-bar-wrapper {
    display: none;
}

#job-application a.progress-tab,
#job-application a.progress-tab:hover,
#job-application a.progress-tab.first,
#job-application a.progress-tab.single-line {
    display: block;
    float: none;
    width: auto !important;
    height: auto;
    min-height: 0;
    padding: .85rem 1rem;
    margin: 0 0 .35rem;
    border: none;
    border-left: 4px solid #e3e9ee;
    border-radius: 0 2px 2px 0;
    background: transparent;
    color: #a3b0ba;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: default;
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

/* Three distinct treatments so the current step is unmistakable at a glance:
   upcoming is a faint rule with muted text, done is a muted blue rule with grey
   text, and the step you're on is the only one filled solid brand blue with
   white text - it reads as "you are here", not just "highlighted". */
#job-application a.progress-tab.on {
    border-left-color: #0066a4;
    background: #0066a4;
    color: #fff;
    font-weight: 700;
}

#job-application a.progress-tab.complete {
    border-left-color: #a8cbe2;
    background: transparent;
    color: #6b7c88;
    font-weight: 600;
    cursor: pointer;
}

#job-application a.progress-tab.complete:hover,
#job-application a.progress-tab.complete:focus {
    border-left-color: #0066a4;
    background: #eef4f8;
    color: #0066a4;
}

/* ===== Sections ===== */
/* No box around each section: a short, chunky accent bar under the heading is
   the divider, rather than a full-width rule. */
#job-application fieldset {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0 3rem;
}

/* Floating the legend takes it out of the fieldset's top-border notch so it can
   run the full width as a heading. `legend + *` then clears the float, which is
   what keeps the block content that follows from overlapping it. */
#job-application legend {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 1.35rem;
    color: #1a1a1a;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Accent bar under each section heading. Parked rather than deleted so it's an
   easy change to bring back - drop the `display: none` and restore
   `padding: 0 0 1.15rem` on the legend above to make room for it. */
#job-application legend::after {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: #0066a4;
}

#job-application legend + * {
    clear: left;
}

#job-application legend .small {
    color: #6b7c88;
    font-size: .8rem;
    font-weight: 400;
}

/* the field rows inside a section float; this keeps the section wrapped
   around them so the next heading can't ride up into it */
#job-application fieldset::after {
    content: "";
    display: block;
    clear: both;
}

/* Same tier as .label below (a question/prompt) - just an h4 instead of a span
   in these two spots. Matched to it exactly (was 1.05rem/#1a1a1a vs .label's
   1rem/#333) so a question reads the same size and weight everywhere it
   appears on these pages. */
#job-application fieldset h4 {
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .6rem;
}

/* ===== Form controls ===== */
#job-application input[type="text"],
#job-application input[type="password"],
#job-application textarea,
#job-application select {
    box-sizing: border-box;
    height: auto;
    padding: .7rem .85rem;
    border: 1px solid #b9c2ca;
    border-radius: 2px;
    background: #fff;
    color: #333;
    font-size: .95rem !important; /* beats the global `font-size: 12px !important` */
    line-height: 1.4;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Safety net for the narrowest columns: a placeholder that's still too long for
   its field trails off with an ellipsis instead of getting hard-clipped
   mid-word. (Native <select> support for this varies by browser/OS, but it's a
   harmless no-op where it isn't honored.) */
#job-application input[type="text"],
#job-application input[type="password"],
#job-application select {
    text-overflow: ellipsis;
}

#job-application select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.2rem;
    cursor: pointer;
    /* chevron, inlined so it needs no extra asset */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234a4a6a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 12px 8px;
}

#job-application option {
    padding: .35rem;
    font-size: .95rem;
}

#job-application textarea {
    min-height: 6rem;
    resize: vertical;
}

#job-application input[type="text"]:focus,
#job-application input[type="password"]:focus,
#job-application textarea:focus,
#job-application select:focus {
    border-color: #0066a4;
    box-shadow: 0 0 0 3px rgba(0, 102, 164, .12);
    outline: none;
}

#job-application ::placeholder {
    color: #8a8a8a !important;
}

#job-application .input-wrapper {
    vertical-align: top;
}

/* Free-text fields that should run the width of the card. The wrapper has to be
   a block for the percentage width to resolve against the card rather than the
   inline-block's shrink-to-fit width. */
#job-application .input-wrapper:has(textarea),
#job-application .input-wrapper:has(.info),
#job-application .input-wrapper.obligations,
#job-application .input-wrapper.crime-label {
    display: block;
    width: 100%;
    margin-right: 0;
}

/* `#job-application .education-info` in site-public.css hardcodes width:854px
   (a pixel value from the old fixed-width shell) - a class selector, so it
   out-specifies the plain `textarea` type selector below regardless of load
   order. Named explicitly here to win on specificity instead. */
#job-application textarea,
#job-application .info,
#job-application .obligations,
#job-application .crime-label,
#job-application .education-info {
    width: 100%;
}

/* ===== Labels, radios, checkboxes ===== */
/* `.label` is also Foundation's badge class, so these need to out-specify
   `body.no-banner #job-application .label` from the site stylesheet. */
#job-application .label,
body.no-banner #job-application .label {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    vertical-align: center;
    padding-right: 1rem;
}

#job-application span.label label {
    font-size: inherit;
}

#job-application label {
    font-weight: inherit;
    color: inherit;
}

/* Both are now real <label> elements wrapping their radio/checkbox (clicking the
   text toggles the control, no `for`/id matching needed). Foundation's global
   `label { display: block }` would otherwise drop each one onto its own line -
   same bug as the SMS opt-out label above, same fix. */
#job-application .input-value,
#job-application .custom-label {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    font-size: .95rem;
    cursor: pointer;
}

/* Flex row rather than two inline-block wrappers: Html.LabelFor emits a bare
   <label> with no class, so Foundation's global `label { display: block }`
   applied unopposed and dropped the text onto its own line below the checkbox.
   A flex row sidesteps that entirely regardless of the label's own display
   value. */
#job-application .sms-optout {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

#job-application .sms-optout label {
    display: inline;
    color: #4a4a4a;
    font-size: .9rem;
    line-height: 1.5;
    cursor: pointer;
}

#job-application input[type="radio"],
#job-application input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    margin: 0 .4rem 0 0;
    accent-color: #0066a4;
    vertical-align: middle;
    cursor: pointer;
}

/* Every checkbox on these pages used to hide the real input and render a
   13x13px sprite image via custom-form-elements.js instead - fixed size, grey,
   unrelated to the brand palette. They're native now (the `custom-styled` class
   that triggered that swap has been removed from the views), which is what lets
   the sizing and `accent-color` above finally reach them, matching the radios.
   (.custom-label's own display/cursor styling lives with .input-value above -
   both are wrap-in-label controls now, sharing the same fix.) */

/* General Information's Yes/No rows previously sat beside the question when it
   was short and wrapped below it when it was long, purely by accident of text
   length. Always stacking them keeps every question on this page reading the
   same way regardless of how long it is. */
#job-application .over18-choices,
#job-application .previous-employee-choices,
#job-application .relative-choices,
#job-application .attendance-choices,
#job-application .transportation-choices,
#job-application .obligations-choices {
    display: block;
    width: 100%;
    margin: .5rem 0 .5rem;
}

#job-application .license-limitations-choices {
    margin-bottom: .5rem;
}

/* ===== Field sizing =====
   The field column is ~820px beside the stepper (and narrower still between
   1024px and 1100px), so the fixed pixel widths in site-public.css no longer
   packed into rows - fields dropped to their own lines. Each field now takes a
   share of the column instead, so rows hold together at any width.

   The width goes on `.input-wrapper` rather than the control: the wrapper is an
   inline-block, and a percentage-width child of a shrink-to-fit box resolves
   against the box's intrinsic size, which would collapse the field. Subtracting
   1rem leaves room for the wrapper's right margin plus the whitespace gap
   between inline-blocks. */

#job-application .qualify-questions,
#job-application #resume-upload-wrapper {
    width: 100%;
}

/* the month / year pairs sit inside the narrow From / To groups, so they keep
   intrinsic widths rather than a share of the column */
#job-application .employment-month {
    width: 120px;
}

#job-application .employment-year {
    width: 100px;
}

/* controls fill whichever wrapper/grid-cell sizes them */
#job-application .first-name,
#job-application .middle-name,
#job-application .last-name,
#job-application .application-email,
#job-application .phone,
#job-application .country,
#job-application .address,
#job-application .address2,
#job-application .city,
#job-application .state,
#job-application .postal-code,
#job-application .pay-desired,
#job-application .pay-desired-rate,
#job-application .desired-start-date input,
#job-application .notice,
#job-application .referral,
#job-application .school,
#job-application .school-location,
#job-application .years-completed,
#job-application .graduated,
#job-application .standing,
#job-application .degree,
#job-application .employer-name,
#job-application .employer-address,
#job-application .employer-city,
#job-application .employer-state,
#job-application .employer-postal,
#job-application .employer-phone,
#job-application .employer-job-title,
#job-application .job-duties,
#job-application .job-supervisor,
#job-application .job-reason,
#job-application .employer-salary,
#job-application .employer-salary-rate,
#job-application .reference-name,
#job-application .reference-address,
#job-application .reference-phone,
#job-application .reference-title,
#job-application .reference-known,
#job-application .license-name,
#job-application .license-number,
#job-application .license-expires {
    width: 100%;
}

/* Small on purpose - this holds 2-4 initials, not a name. Left out of the
   fill-the-wrapper list above so it doesn't stretch to match its column share. */
#job-application .signature {
    width: 110px;
}

/* ===== Field rows (CSS Grid) =====
   Replaces the old approach of computing each field's width as a percentage
   by hand and making sure a row's fields summed to ~100% - error-prone, and
   easy to leave subtly wrong after a row's field count changed (which is
   exactly what kept happening). Each row of fields is wrapped in a `.field-row`
   grid container with a named column-ratio class below it. `fr` units divide
   100% of the row's width automatically - a row can't fail to add up to 100%,
   because that's not something that needs computing anymore. Grid items
   stretch to fill their column by default, so the fields themselves (still
   `width: 100%` above) just fill whatever cell they land in - no per-field
   width rule needed at all. */
#job-application .field-row {
    display: grid;
    align-items: start;
    gap: .75rem 1rem;
    margin-bottom: .85rem;
}

/* Direct children still carry `.input-wrapper`'s own inline-block spacing
   (margin-right/margin-bottom) from site-public.common.css - redundant once
   `gap` is doing that job, and left in place it would just add uneven extra
   space on top of the gap. */
#job-application .field-row > * {
    min-width: 0; /* lets a cell shrink below its content's natural width instead of overflowing the row */
    margin: 0;
}

#job-application .field-row-2 {
    grid-template-columns: 1fr 1fr;
}

#job-application .field-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Personal Information: first / middle / last */
#job-application .field-row-name {
    grid-template-columns: 2fr 1fr 2fr;
}

/* Personal Information: email / phone / secondary phone */
#job-application .field-row-contact {
    grid-template-columns: 2fr 1.5fr 1.5fr;
}

/* Personal Information: city / state / postal (the floated .city-wrapper /
   #apply-state / .postal-wrapper trio - float and margin-right are no longer
   needed once they're grid items, so both are cleared below) */
#job-application .field-row-city {
    grid-template-columns: 2fr 1.4fr 1fr;
}

#job-application .field-row-city > .city-wrapper,
#job-application .field-row-city > #apply-state,
#job-application .field-row-city > .postal-wrapper {
    float: none;
}

#job-application .city-wrapper .input-wrapper,
#job-application #apply-state .input-wrapper,
#job-application .postal-wrapper .input-wrapper {
    display: block;
    width: 100%;
    margin-right: 0;
}

/* Personal Information: pay desired / pay rate / start date */
#job-application .field-row-job {
    grid-template-columns: 1fr 1fr 1.6fr;
}

/* Single-field "rows": Notice, the referral dropdown (its "please specify"
   answer box, shown conditionally, shares the same wrapper class and gets the
   same treatment), and Country (only shown at all when the job allows
   multiple countries, in which case it sits alone above the Address row).
   Only one field, so no grid needed - just make the wrapper block-level and
   full width instead of shrink-to-fit inline-block. */
#job-application .input-wrapper:has(> .notice),
#job-application .input-wrapper:has(> .referral),
#job-application .input-wrapper:has(> .country) {
    display: block;
    width: 100%;
    margin-right: 0;
}

/* Education: school / location / years / graduated */
#job-application .field-row-edu {
    grid-template-columns: 1.1fr 1.1fr 1fr 1.3fr;
}

/* Employment history: city / state / postal / phone */
#job-application .field-row-city4 {
    grid-template-columns: 1.3fr .8fr 1fr 1.3fr;
}

/* Supervisor Name: alone on its row (the "may we contact" question that used
   to share it with 50/50 now always stacks below - a separate fix), so no
   grid needed here either - full width instead of shrink-to-fit. */
#job-application .input-wrapper:has(> .job-supervisor) {
    display: block;
    width: 100%;
    margin-right: 0;
}

/* Employment history: salary / pay rate / reason for leaving */
#job-application .field-row-salary {
    grid-template-columns: 1fr 1fr 2.2fr;
}

/* References: row number / name / address / phone / title / years known.
   The row number ("1.", "2.") is a couple of characters, so it gets `auto`
   (sized to content) instead of a share of the row. */
#job-application .field-row-ref {
    grid-template-columns: auto 1.3fr 1.4fr 1.4fr 1.7fr 1fr;
}

/* ===== Row helpers ===== */
#job-application .separator {
    font-size: 1px;
    line-height: 1px;
    height: 2rem;
}

/* "Dates of Employment:" + the From group + the To group already run right up
   against the column width, so `.employment-present` (floated per
   site-public.css) only fit beside them when the To dropdowns were hidden -
   otherwise it wrapped below, visibly jumping position depending on whether
   "Present" was checked. A flex row keeps it inline with the others whenever
   there's room and, when there genuinely isn't, wraps the whole row as one
   predictable unit instead of a float snagging mid-row.

   "Dates of Employment:" itself sits on its own line above the row rather
   than as a fourth flex item - at ~160-180px it was the difference between
   From + To + Present fitting on one line or not, and pulling it out of the
   competition is a bigger, more reliable win than trimming the other three. */
#job-application .employment-dates-label {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
}

#job-application .employment-dates-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-bottom: .5rem;
    width: 100%;
}

#job-application .employment-dates-row > .employment-dates-from,
#job-application .employment-dates-row > .employment-dates-to,
#job-application .employment-dates-row > .employment-present {
    float: none;
    margin: 0;
}

#job-application .employment-present {
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

/* "May we contact this employer?" used to sit on the same row as Supervisor
   Name, top-aligned against that field's ~44px-tall box while its own content
   was a single short line - it read as floating high, off-center. Stacking it
   on its own full-width row below matches the pattern used for every other
   Yes/No question on these pages. */
#job-application .contact-label,
#job-application .contact-choices {
    display: block;
    width: 100%;
}

#job-application .contact-label {
    margin-top: .25rem;
}

#job-application .contact-choices {
    margin-bottom: .5rem;
}

/* These prompts and their checkboxes were floated side by side, which left the
   choices crammed against a long question. Unfloating the prompt drops the
   choices onto their own line underneath it. */
#job-application .type-of-employment,
#job-application .days-available,
#job-application .days-available-choices {
    float: none;
    margin: 0;
}

#job-application .type-of-employment,
#job-application .days-available {
    margin-bottom: .65rem;
    line-height: 1.5;
}

#job-application .days-available-choice-label {
    float: left;
    width: 60px;
    text-align: left;
    line-height: 1.9;
}

#job-application .days-available-choice,
#job-application .type-of-employment-choice {
    margin: 0 1.5rem .35rem 0;
    line-height: 1.9;
}

#job-application .job-only-employer-label {
    line-height: 1.5;
}

#job-application .add-employer {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    text-align: center;
}

#job-application .add-employer a {
    color: #0066a4;
    font-weight: 600;
    text-decoration: none;
}

#job-application .add-employer a:hover,
#job-application .add-employer a:focus {
    text-decoration: underline;
}

/* the datepicker button rides the right edge of the (now taller) date field */
#job-application .desired-start-date .ui-datepicker-trigger {
    position: absolute;
    left: auto;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* the error icon is absolutely positioned inside the wrapper; recentre it on
   the taller controls */
#job-application .field-validation-error {
    top: 50%;
    margin-top: -10px;
}

#job-application .validation-message-radio.field-validation-error,
#job-application .validation-message-radio-left.field-validation-error {
    top: 0;
    margin-top: 0;
}

/* ===== Questions table ===== */
#job-application table.qualify-questions {
    border-collapse: collapse;
    margin: 0;
}

#job-application table.qualify-questions tr {
    background-color: #d4e6f1;
    border: none;
    border-bottom: 1px solid #d5dde3;
}

#job-application table.qualify-questions tr:nth-child(odd) {
    background-color: #fff;
}

#job-application table.qualify-questions td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.5;
}

#job-application table.qualify-questions td.question {
    width: auto;
}

#job-application table.qualify-questions td.separator {
    width: 1.5rem;
    height: auto;
    font-size: inherit;
    line-height: inherit;
}

#job-application table.qualify-questions td.answer {
    width: 150px;
    white-space: nowrap;
}

/* ===== Resume upload ===== */
#job-application #resume-upload-wrapper {
    box-sizing: border-box;
    height: auto;
    min-height: 5.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px dashed #b9c2ca;
    border-radius: 2px;
    background: #f7fafc;
}

#job-application #resume-upload-wrapper #file-upload-default {
    position: static;
    margin: 0;
    padding: 0;
    color: #6b7c88;
    font-size: .95rem;
    line-height: 1.5;
}

#job-application #resume-upload-wrapper #file-upload-error {
    position: static;
    margin-top: .5rem;
    color: #d35051;
    font-style: italic;
}

#job-application #resume-upload-wrapper #file-list {
    position: static;
    font-size: .95rem !important;
}

#job-application #resume-upload-wrapper a#file-select,
#job-application #resume-upload-wrapper a#file-select:hover {
    position: static;
    display: inline-block;
    margin: .75rem 0 0;
    padding: 0;
    border: none;
    color: #0066a4;
    font-size: .95rem !important;
    font-weight: 600;
}

#job-application #file-list .file-upload-progress {
    background-color: #0066a4;
}

/* ===== SumoSelect (Verification's "apply to other jobs" multiselects) =====
   Mirrors `.filter .SumoSelect` in search.css so the /jobs filter dropdowns and
   these multiselects look like the same widget. */
#job-application .SumoSelect,
#job-application .SumoSelect .SelectBox {
    width: 100%;
}

#job-application .SumoSelect .SelectBox {
    box-sizing: border-box;
    border: 1px solid #b9c2ca;
    border-radius: 2px;
    padding: .7rem .85rem;
    background: #fff;
    color: #333;
    font-size: .95rem;
}

/* The caption text sits in a bare <label>, which picks up Foundation's global
   `label { display: block; color: #4d4d4d; font-size: 0.875rem; }` unopposed -
   same bug fixed elsewhere on these pages for other unclassed labels. */
#job-application .SumoSelect .SelectBox label {
    display: inline;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* The plugin hard-codes the open list at a fixed top offset sized for its
   default ~28px box, which overlaps our taller padded box - `top: initial`
   (auto) drops the absolutely positioned list to its natural spot just below
   the caption, at any box height. Same fix as search.css's filter dropdowns. */
#job-application .SumoSelect > .optWrapper,
#job-application .SumoSelect.open > .optWrapper {
    top: initial;
}

#job-application .SumoSelect.open {
    z-index: 30;
}

/* checkmarks use the brand blue when selected, matching the filter dropdowns */
#job-application .SumoSelect > .optWrapper > .options li.opt.selected span i,
#job-application .SumoSelect .select-all.selected > span i,
#job-application .SumoSelect .select-all.partial > span i {
    background-color: #0066a4;
    box-shadow: none;
}

/* Every option row and the "select all" row are also bare <label> elements
   (the plugin never sets their display, relying on the browser default of
   `inline`) - Foundation's global block default would otherwise stack each
   option's checkbox above its text instead of beside it. */
#job-application .SumoSelect > .optWrapper > .options li.opt label,
#job-application .SumoSelect .select-all > label {
    display: inline;
    color: #333;
    font-size: .95rem;
    cursor: pointer;
}

/* ===== Notes, disclaimers, support ===== */
#job-application .application-note {
    color: #6b7c88;
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

#job-application .application-note-small {
    color: #6b7c88;
    font-size: .85rem;
    line-height: 1.7;
}

#job-application ul.associate-expectations li {
    color: #6b7c88;
    font-size: .9rem;
    line-height: 1.7;
}

#job-application .application-support {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #d5dde3;
    color: #777;
    font-size: .85rem;
    line-height: 1.7;
    text-align: center;
}

#job-application .application-support a {
    color: #0066a4;
}

/* ===== Errors ===== */
#job-application .error-message {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e6b8b9;
    border-left: 4px solid #d35051;
    border-radius: 2px;
    background: #fdf4f4;
    color: #a33b3c;
    font-size: 1rem;
    line-height: 1.6;
}

#job-application #validation-error-help,
#job-application .validation-summary-errors {
    margin: 1rem 0 0;
    padding: .85rem 1rem .85rem 2.25rem;
    border: 1px solid #e6b8b9;
    border-radius: 2px;
    background-color: #fdf4f4;
    background-position: .75rem .9rem;
    color: #a33b3c;
    font-size: .95rem;
    line-height: 1.6;
}

/* ===== Buttons ===== */
#job-application .button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

#job-application .button-wrapper-offset {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
}

#job-application .button,
#job-application input[type="submit"] {
    box-sizing: border-box;
    float: none;
    height: auto;
    margin: 0;
    padding: .8rem 2.5rem;
    border: 2px solid #0066a4;
    border-radius: 2px;
    background: #0066a4;
    color: #fff !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.4;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}

#job-application .button:hover,
#job-application .button:focus,
#job-application input[type="submit"]:hover,
#job-application input[type="submit"]:focus {
    background: #005283;
    border-color: #005283;
    color: #fff !important;
}

/* Prev / Back to details read as secondary next to the primary submit */
#job-application a.previous,
#job-application a.previous:hover,
#job-application a.return,
#job-application a.return:hover {
    float: none;
    margin: 0;
    background: #fff;
    color: #0066a4 !important;
}

#job-application a.previous:hover,
#job-application a.previous:focus,
#job-application a.return:hover,
#job-application a.return:focus {
    background: #eef4f8;
    border-color: #0066a4;
    color: #0066a4 !important;
}

#job-application .button-wrapper-offset .clear {
    display: none;
}

/* ===== Success page ===== */
.apply-success {
    color: #333;
    padding: 2rem 0 3rem;
}

.apply-success h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #0066a4;
    line-height: 1.25;
    margin: 0;
}

.apply-success hr {
    color: #d5dde3;
    background: #d5dde3;
    height: 1px;
    margin: 1.25rem 0 2rem;
}

.apply-success p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.apply-success a.apply-success-button,
.apply-success a.apply-success-button:hover,
.apply-success a.apply-success-button:focus {
    display: inline-block;
    margin: 1rem 0 0;
    padding: .8rem 2.5rem;
    border: 2px solid #0066a4;
    border-radius: 2px;
    background: #0066a4;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.4;
    text-transform: none;
    text-decoration: none;
}

.apply-success a.apply-success-button:hover,
.apply-success a.apply-success-button:focus {
    background: #005283;
    border-color: #005283;
}

/* ===== Responsive (tablet + mobile use the stacked layout) ===== */
@media only screen and (max-width: 1024px) {
    #job-application #top-left h1 {
        font-size: 2rem;
    }

    #job-application fieldset {
        margin-bottom: 2.25rem;
    }

    #job-application legend {
        font-size: 1.15rem;
    }

    /* the sidebar stepper doesn't fit next to the fields at this width, so it
       drops above them */
    #job-application .apply-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* nothing to align against once the stepper sits above the fields */
    #job-application .apply-fields {
        padding-top: 0;
    }

    /* Segmented progress bar: one equal-width bar per section, filled for the
       ones already done and brand blue for the current one. The names are
       collapsed away - eight stacked names would take more vertical space than
       the fields they introduce, and the section heading directly below the
       bars already names the current one. */
    #job-application #progress-wrapper {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: .3rem;
    }

    #job-application a.progress-tab,
    #job-application a.progress-tab:hover,
    #job-application a.progress-tab.first,
    #job-application a.progress-tab.single-line {
        position: relative;
        flex: 1 1 0;
        min-width: 10px;
        min-height: 0;
        height: 6px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 3px;
        background: #e3e9ee;
        font-size: 0; /* collapses the section name away */
        line-height: 0;
    }

    #job-application a.progress-tab.complete {
        border: none;
        background: #a8cbe2;
    }

    #job-application a.progress-tab.complete:hover,
    #job-application a.progress-tab.complete:focus {
        background: #0066a4;
        text-decoration: none;
    }

    /* a 6px bar is well under a comfortable tap target, so the completed steps
       get an invisible one that reaches above and below the bar */
    #job-application a.progress-tab.complete::after {
        content: "";
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: 0;
        right: 0;
    }

    /* same bar as the rest, just filled */
    #job-application a.progress-tab.on {
        border: none;
        background: #0066a4;
    }

    /* One field per line. Every `.field-row` shape (name, contact, city, edu,
       etc.) is driven by a single `grid-template-columns` on the shape class;
       collapsing all of them to one column here - instead of the old approach
       of overriding every individual field's width back to 100% - is the
       actual payoff of moving to grid: one rule now does what used to take a
       dozen. Same specificity tier as the shape classes, so source order alone
       (this comes later in the file) makes it win. */
    #job-application .field-row {
        grid-template-columns: 1fr;
    }

    #job-application .employment-month,
    #job-application .employment-year {
        width: 100%;
    }

    /* checkbox / radio rows stay inline so they don't become a tall column */
    #job-application .apply-fields .input-wrapper.employment-present,
    #job-application .apply-fields .days-available-choice,
    #job-application .apply-fields .type-of-employment-choice {
        display: inline-block;
        width: auto;
    }

    #job-application .days-available-choice,
    #job-application .type-of-employment-choice {
        margin-left: 0;
        margin-right: 1.25rem;
    }

    #job-application table.qualify-questions td {
        padding: .85rem;
    }

    #job-application .button-wrapper-offset {
        flex-direction: column-reverse;
        width: 100%;
    }

    #job-application .button-wrapper-offset .button,
    #job-application .button-wrapper-offset input[type="submit"] {
        width: 100%;
        text-align: center;
    }
}