@import url("Brand/CRCareersBrand.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");   /* the page no longer needs its own Google Fonts links */
/* ==========================================================================
   CRCareersPage.css  (proposed standard, v2 draft)
   Controls Careers.aspx: job browsing, job search, featured jobs, job description.

   HOW BRANDING WORKS
   - Do NOT edit this file for a customer. All customer branding lives in the
     Brand folder: Brand/CRCareersBrand.css plus the customer's logo file.
   - The upgrade package must never contain a Brand folder, so an upgrade can
     replace this file without touching the customer's branding.
   - If Brand/CRCareersBrand.css is missing, the defaults below are used and
     the logo falls back to whatever the page's <img> points to.

   The defaults are declared with :where(:root) so ANY :root rule in the
   brand file wins, regardless of load order.
   ========================================================================== */

:where(:root) {
    /* Brand colors */
    --cr-primary:        #234360;   /* header band, buttons, links */
    --cr-primary-hover:  #1a3249;   /* button hover (a little darker than primary) */
    --cr-on-primary:     #ffffff;   /* text on header band and buttons */
    --cr-link:           var(--cr-primary);        /* link color */
    --cr-link-visited:   var(--cr-link);           /* link already clicked */
    --cr-link-hover:     var(--cr-primary-hover);  /* mouse over a link */
    /* Main buttons (Next, Save Changes, Search, Apply Now, Login...) and the
       careers page banner. They follow --cr-primary unless set separately. */
    --cr-button:         var(--cr-primary);
    --cr-button-hover:   var(--cr-primary-hover);
    --cr-button-text:    var(--cr-on-primary);
    --cr-banner:         var(--cr-primary);
    --cr-banner-text:    var(--cr-on-primary);
    --cr-header-bg:      var(--cr-page-bg);   /* bar behind the logo and menu (white unless set) */
    --cr-header-text:    var(--cr-link);      /* menu links on that bar */
    --cr-button-radius:  var(--cr-radius);        /* main buttons' corners, e.g. 2em for pill-shaped buttons */
    --cr-action-radius:  var(--cr-button-radius); /* small buttons (Add/Edit/Delete, Start/Yes, Withdraw...) match the main buttons */

    /* Neutrals */
    --cr-text:           #4d4d4d;   /* body text; same as CRCareers.css */
    --cr-heading:        #4a4a4a;
    --cr-page-bg:        #ffffff;
    --cr-row-alt:        #f1f1f1;   /* alternating rows in the job list */
    --cr-border:         #dcdcdc;

    /* Type and layout */
    --cr-font:           "Open Sans", Verdana, Geneva, sans-serif;   /* same as CRCareers.css */
    --cr-heading-font:   var(--cr-font);   /* banner, page titles and section headings */
    --cr-button-font:    var(--cr-font);   /* main buttons */
    --cr-logo-height:    4.375em;
    --cr-logo-width:     auto;      /* the brand file sets this when it supplies a logo */
    --cr-page-width:     95%;        /* content width, same as the old file */
    --cr-page-max:       none;       /* optional cap on very wide screens, e.g. 90em */
    --cr-radius:         0.3125em;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--cr-page-bg);
    font-family: var(--cr-font);
    font-size: 1em;
    line-height: 1.5;
    color: var(--cr-text);
}

h1, h2, h3 { color: var(--cr-heading); line-height: 1.25; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; margin: 1.25em 0 .5em; }
b, strong { font-weight: bold; }
li { list-style-type: disc; }
img { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }
td { font-size: 1em; }

/* Form controls do not inherit fonts by default */
input, select, textarea, button { font: inherit; color: inherit; }

/* ---------- Links ----------
   Same structure as the old file: the first set is the rule for every link,
   the named sets below are exceptions. Each set has link / visited / hover.
   Empty sets are left in on purpose so services can add to them.          */

/* Hyperlinks (all links) */
a:link {
    color: var(--cr-link);
    text-decoration: none;
}
a:visited {
    color: var(--cr-link-visited);
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--cr-link-hover);
    text-decoration: underline;
}

/* Links inside paragraphs need more than color to stand out (accessibility) */
.MainBodyText a:link, .MainBodyText a:visited,
.cr-main p a:link, .cr-main p a:visited { text-decoration: underline; }

/* Featured job links */
a.HotJobsStyle:link { }
a.HotJobsStyle:visited { }
a.HotJobsStyle:hover { }

/* "Apply" links (Apply, Apply to Additional Positions, Start over with job
   search...): shown as main buttons, same color as Search / Next */
a.ApplyNowStyle:link, a.ApplyNowStyle:visited, a.ApplyNowStyle:hover {
    display: inline-block;
    font-family: var(--cr-button-font) !important;   /* beats the job-text font rule */
    min-height: 2.75em;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.75em 1.25em;
    border-radius: var(--cr-button-radius);
    font-weight: bold;
    line-height: 1.25;
    text-decoration: none !important;
    color: var(--cr-button-text) !important;
}
a.ApplyNowStyle:link { background: var(--cr-button); }
a.ApplyNowStyle:visited { background: var(--cr-button); }
a.ApplyNowStyle:hover { background: var(--cr-button-hover); }

/* Job title link to the job description */
a.JobLink:link { font-weight: bold; }
a.JobLink:visited { font-weight: bold; }
a.JobLink:hover { font-weight: bold; }

/* Column headers on the job list (sort links) */
a.ReqSort:link {
    font-weight: bold;
    color: var(--cr-heading);
}
a.ReqSort:visited {
    font-weight: bold;
    color: var(--cr-heading);
}
a.ReqSort:hover {
    font-weight: bold;
    color: var(--cr-link-hover);
}

/* Keyboard focus ring for everything clickable */
a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 3px solid var(--cr-primary);
    outline-offset: 2px;
}

/* ---------- Page layout ----------
   Careers.aspx:  header.cr-header > .cr-wrap > img.cr-logo + nav.cr-menu
                  div.cr-banner > .cr-wrap > h1 + .cr-subheader
                  main.cr-main.cr-wrap > form#frmCRSS
                  footer.cr-footer > .cr-wrap > p
   .cr-wrap gives the header, banner, content and footer one shared width. */
.cr-wrap {
    width: var(--cr-page-width);
    max-width: var(--cr-page-max);
    margin: 0 auto;
}
/* The page layout grid (Telerik, loaded after this file) caps content at 1280px
   and centers it, which left wide side margins. Let it fill the page width. */
.cr-main .t-container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Header: logo left, menu right ---------- */
.cr-header { padding: 0.75em 0; background-color: var(--cr-header-bg); }
.cr-header > .cr-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em 1.5em;
}
img.cr-logo {
    display: block;
    height: var(--cr-logo-height);
    width: var(--cr-logo-width);
    max-width: 60vw;
    object-fit: contain;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Menu: items show left to right in the order Careers.aspx lists them */
.cr-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.25em;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cr-menu li { list-style: none; margin: 0; padding: 0; }
.cr-menu a:link, .cr-menu a:visited {
    display: inline-block;
    padding: 0.5em 0;
    font-size: .8em;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cr-header-text);
}
.cr-menu a:hover, .cr-menu a:focus-visible { color: var(--cr-header-text); text-decoration: underline; }
.cr-header a:focus-visible { outline-color: var(--cr-header-text); }

/* ---------- Banner ---------- */
.cr-banner {
    background-color: var(--cr-banner);
    color: var(--cr-banner-text);
    margin-bottom: 1.5em;
}
.cr-main h1, .cr-main h2, .cr-main h3 { font-family: var(--cr-heading-font); }
.cr-banner h1 {
    font-family: var(--cr-heading-font);
    margin: 0;
    padding: 1.25em 0;
    color: var(--cr-banner-text);
    font-size: clamp(1.5em, 1em + 2.5vw, 2.5em);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}
/* Optional line under the heading */
.cr-banner .cr-subheader {
    display: block;
    margin-top: -0.75em;
    padding-bottom: 1.25em;
    color: var(--cr-banner-text);
}
.cr-banner .cr-subheader:empty { display: none; }

/* ---------- Intro and search ---------- */
.cr-main hr { border: 0; border-top: 1px solid var(--cr-border); margin: 1.5em 0; }

label.CaptionStyle,
label.labelSBox1, label.labelSBox2, label.labelSBox3 {
    display: block;
    margin: 1em 0 .35em;
    font-weight: bold;
    color: var(--cr-heading);
}

#lstSBox1, #lstSBox2, #lstSBox3 {
    width: 100%;
    height: auto !important;        /* overrides inline height:140px */
    min-height: 6.5em;
    padding: 0.25em;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    background: #fff;
    font-weight: normal;            /* the search sits inside bold text in the page */
}
input#CareersKeyword {
    width: 75%;
    font-weight: normal;
    padding: 0.625em 0.75em;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
}

/* ---------- Buttons: Search, Apply Now, Refer a Friend ---------- */
.CareersButton {
    font-family: var(--cr-button-font);
    display: inline-block;
    min-height: 2.75em;                /* comfortable tap target */
    margin: 1em .5em .5em 0;
    padding: 0.75em 1.25em;
    border: 0;
    border-radius: var(--cr-button-radius);
    background: var(--cr-button);
    color: var(--cr-button-text);
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .15s ease;
}
.CareersButton:hover, .CareersButton:focus { background: var(--cr-button-hover); }
.MainBodyText .CareersButton { font-family: var(--cr-button-font) !important; }   /* the Search button sits inside the intro text */

/* ---------- Job list ---------- */
#CRCareers1_tblTableDetail2 th.HeaderRow {
    padding: 0.625em 0.5em;
    text-align: left;
    font-weight: bold;
    border-top: 2px solid var(--cr-primary);
    border-bottom: 1px solid var(--cr-border);
    white-space: nowrap;
}
td.MainRow, td.AltRow {
    padding: 0.625em 0.5em;
    vertical-align: top;
    border-bottom: 1px solid var(--cr-border);
}
td.MainRow { background-color: var(--cr-page-bg); }
td.AltRow  { background-color: var(--cr-row-alt); }

/* ---------- Job description ---------- */
td.HeaderStyle { font-weight: bold; text-transform: uppercase; font-size: 1.15em; color: var(--cr-heading); padding-top: 1em; }
td.JDHeaderStyle, td.CaptionStyle, span.CaptionStyle { font-weight: bold; color: var(--cr-heading); }
td.CaptionStyle { padding: 0.25em 1em 0.25em 0; white-space: nowrap; vertical-align: top; width: 1%; }

/* Job text pasted from Word/web brings its own fonts and fixed widths.
   Force it to use the site font and fit the screen. */
.MainBodyText, .MainBodyText * {
    font-family: var(--cr-font) !important;
    max-width: 100%;
}
.MainBodyText :is(h1, h2, h3, h4) { font-family: var(--cr-heading-font) !important; }   /* intro headings keep the heading font */
.MainBodyText span, .MainBodyText p, .MainBodyText td, .MainBodyText li { font-size: inherit !important; }
/* Skip the search table: the page puts it inside the intro text too */
.MainBodyText table:not(:has(select, input)) { width: auto !important; table-layout: auto; }
/* Single-choice dropdowns stop at 40em. In Chrome on Windows a dropdown as
   wide as the screen opens with a blank list (confirmed 2026-10-28 on the
   application pages). The State/City lists are list boxes and aren't affected. */
#frmCRSS select:not([multiple]):not([size]) { max-width: min(100%, 40em) !important; }
.MainBodyText ul, .MainBodyText ol { padding-left: 1.5em; }

/* ---------- Footer ---------- */
.cr-footer { font-size: .75em; padding: 1.5em 0; color: var(--cr-text); }
.cr-footer p { margin: 0; }

/* ==========================================================================
   PHONES AND SMALL TABLETS
   ========================================================================== */
@media (max-width: 47.9375em) {
    .cr-wrap { width: 100%; padding-left: 1em; padding-right: 1em; }

    .cr-header > .cr-wrap { justify-content: center; text-align: center; }
    img.cr-logo { margin: 0 auto; height: calc(var(--cr-logo-height) * .8); background-position: center; }

    #lstSBox1, #lstSBox2, #lstSBox3, input#CareersKeyword { width: 100%; }
    .CareersButton { width: 100%; margin-right: 0; }

    /* Job list becomes stacked cards: title first, other details below */
    #CRCareers1_tblTableDetail2,
    #CRCareers1_tblTableDetail2 > tbody,
    #CRCareers1_tblTableDetail2 tr { display: block; width: 100%; }
    #CRCareers1_tblTableDetail2 tr:has(> th.HeaderRow) { display: none; }   /* column headers */
    #CRCareers1_tblTableDetail2 tr:has(> td.MainRow),
    #CRCareers1_tblTableDetail2 tr:has(> td.AltRow) {
        padding: 0.75em;
        border-bottom: 1px solid var(--cr-border);
    }
    #CRCareers1_tblTableDetail2 tr:has(> td.AltRow) { background: var(--cr-row-alt); }
    td.MainRow, td.AltRow {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        font-size: .9em;
    }
    td.MainRow:first-child, td.AltRow:first-child { font-size: 1.05em; margin-bottom: 0.25em; }
    td.MainRow:empty, td.AltRow:empty { display: none; }

    /* Job description label/value table stacks */
    tr:has(> td.CaptionStyle), tr:has(> td.CaptionStyle) > td { display: block; width: auto; }
    td.CaptionStyle { padding: 0.5em 0 0; }
}

/* Respect users who turn off animation */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}