/*
 * The Careers page.
 *
 * Loaded on /careers only, after apiit.css so it builds on the site rather
 * than fighting it. Everything here is a component the site has no equivalent
 * of - the vacancy card, the search box, the pagination. Anything the site
 * already has (the banner, the section heading, the tab buttons, the black and
 * white buttons) is used as it is and is NOT restyled here.
 *
 * No font-family anywhere in this file, on purpose. The page inherits URW DIN
 * from apiit.css like every other page; XpressJobs' own stylesheet sets three
 * faces this site does not load, which is one of the reasons it is not used.
 *
 * The palette is the site's, named once so a change is one edit:
 *
 *   --cr-red    #C40000  the APIIT red, from apiit.css
 *   --cr-navy   #002366  the APIIT navy, from apiit.css
 *   --cr-teal   #00B1A5  the highlight in .blue_text
 *
 * No dark-mode block: apiit.lk has one appearance and this page is part of it.
 */

.careers_board,
.careers_closing {
    --cr-red: #C40000;
    --cr-navy: #002366;
    --cr-teal: #00B1A5;
    --cr-ink: #212529;
    --cr-muted: #5b6570;
    --cr-rule: #e3e6ea;
}

/* ----------------------------------------------------------------- the band */

.careers_board {
    padding: 70px 0 60px;
}

.careers_board_head {
    max-width: 860px;
    margin: 0 auto 34px;
}

.careers_intro {
    color: var(--cr-ink);
    font-size: 18px;
    line-height: 1.6;
}

.careers_intro p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- the tabs */

/*
 * .tab_btn is the site's. Two things differ from /staff and only those two are
 * set: ten sectors is more buttons than the staff page has faculties, so they
 * sit a little closer; and these are <button>s, which bring a focus ring the
 * site's links do not show.
 */
.careers_tabs {
    margin-bottom: 30px;
}

.careers_tabs .tab_btn {
    margin: 4px 3px;
    padding: 24px 18px !important;
    border-color: var(--cr-rule);
}

.careers_tabs .tab_btn:focus-visible {
    outline: 2px solid var(--cr-teal);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- the toolbar */

.careers_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--cr-navy);
}

.careers_count {
    color: var(--cr-ink);
    font-size: 17px;
    min-height: 1.5em;
}

.careers_count strong {
    color: var(--cr-red);
    font-size: 22px;
}

.careers_search {
    position: relative;
    flex: 0 1 360px;
}

.careers_search .form-control {
    height: 46px;
    padding-right: 48px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    font-size: 16px; /* 16, or iOS zooms the page when the box is tapped */
}

.careers_search .form-control:focus {
    border-color: var(--cr-navy);
    box-shadow: 0 0 0 2px rgba(0, 35, 102, .18);
}

.careers_search_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    border: 0;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.careers_search_btn:hover,
.careers_search_btn:focus-visible {
    background: var(--cr-navy);
}

.careers_board_intro {
    margin: 16px 0 0;
    color: var(--cr-muted);
    font-size: 15px;
}

/* ---------------------------------------------------------------- the cards */

.careers_results {
    margin-top: 22px;
    min-height: 240px;
    transition: opacity .2s;
}

.careers_results[aria-busy="true"] {
    opacity: .45;
    pointer-events: none;
}

.careers_job {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 190px;
    gap: 22px;
    align-items: center;
    padding: 20px 22px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--cr-rule);
    border-left: 4px solid var(--cr-navy);
    color: var(--cr-ink);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.careers_job:hover,
.careers_job:focus-visible {
    color: var(--cr-ink);
    border-left-color: var(--cr-red);
    box-shadow: 0 8px 24px rgba(0, 35, 102, .12);
    transform: translateY(-2px);
    outline: none;
}

.careers_job_logo {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cr-rule);
    overflow: hidden;
}

.careers_job_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* An employer with no logo, or one the policy would not let load. */
.careers_job_initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cr-navy);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

.careers_job_main,
.careers_job_side,
.careers_job_title,
.careers_job_meta,
.careers_job_overview,
.careers_job_expiry,
.careers_job_go {
    display: block;
}

.careers_job_main {
    min-width: 0;
}

.careers_job_title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}

.careers_job:hover .careers_job_title {
    color: var(--cr-navy);
}

.careers_job_meta {
    margin-top: 4px;
    font-size: 15px;
    color: var(--cr-muted);
}

.careers_job_employer {
    color: var(--cr-ink);
    font-weight: 600;
}

.careers_job_employer + .careers_job_location::before {
    content: "|";
    margin: 0 8px;
    color: var(--cr-rule);
}

.careers_job_overview {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cr-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.careers_job_side {
    text-align: right;
}

.careers_job_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.careers_tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--cr-navy);
}

.careers_tag_teal {
    background: var(--cr-teal);
}

.careers_tag_red {
    background: var(--cr-red);
}

.careers_job_expiry {
    margin-top: 8px;
    font-size: 14px;
    color: var(--cr-muted);
}

.careers_job_go {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cr-red);
}

/* ------------------------------------------------------ nothing, or an error */

.careers_notice {
    padding: 34px 26px;
    background: #fff;
    border: 1px solid var(--cr-rule);
    border-left: 4px solid var(--cr-teal);
    text-align: center;
    font-size: 17px;
}

.careers_notice a {
    color: var(--cr-navy);
    font-weight: 600;
}

/* ----------------------------------------------------------- the pagination */

.careers_pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.careers_pagination:empty {
    display: none;
}

.careers_page_btn {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    transition: background .2s, color .2s;
}

.careers_page_btn:hover:not([disabled]),
.careers_page_btn:focus-visible {
    background: var(--cr-navy);
    border-color: var(--cr-navy);
    color: #fff;
}

.careers_page_btn[aria-current="page"] {
    background: #000;
    color: #fff;
}

.careers_page_btn[disabled] {
    opacity: .35;
    cursor: default;
}

.careers_page_gap {
    align-self: center;
    padding: 0 4px;
    color: var(--cr-muted);
}

/* "Powered by XpressJobs", the lockup they supplied. Their blue is the one
   colour on this page that is not the site's - it is theirs, and that is the
   point of an attribution. */
.careers_powered {
    margin: 34px 0 0;
    text-align: center;
}

.careers_powered_brand {
    display: inline-block;
    line-height: 0;
}

.careers_powered_brand img {
    width: 260px;
    height: auto;
    transition: opacity .2s;
}

.careers_powered_brand:hover img {
    opacity: .85;
}

.careers_powered_note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--cr-muted);
}

/* ------------------------------------------- load more, and "search all" */

.careers_more {
    margin-top: 22px;
    text-align: center;
}

.careers_more:empty {
    display: none;
}

.careers_more_note {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--cr-muted);
}

.careers_more_small {
    margin: 10px 0 0;
    font-size: 13px;
}

/* custom_black_btn is the site's, and is display:flex - which a centred
   block needs to be inline. Nothing else about it is touched. */
.careers_more_btn {
    display: inline-flex !important;
    justify-content: center;
    min-width: 230px;
}

.careers_more_btn[disabled] {
    opacity: .5;
    cursor: default;
}

/* --------------------------------------------------------- the closing band */

.careers_closing {
    padding: 70px 0;
}

.careers_closing_copy {
    max-width: 760px;
    margin: 0 auto 26px;
    font-size: 18px;
    line-height: 1.6;
}

.careers_btn_link {
    display: inline-block;
    text-decoration: none;
}

/* -------------------------------------------------------------- small screens */

@media (max-width: 991.98px) {
    .careers_job {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 14px 16px;
        padding: 16px;
    }

    .careers_job_logo {
        width: 60px;
        height: 60px;
    }

    /* Under the words rather than beside them, reading left to right. */
    .careers_job_side {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        text-align: left;
    }

    .careers_job_tags {
        justify-content: flex-start;
    }

    .careers_job_expiry,
    .careers_job_go {
        margin-top: 0;
    }

    .careers_job_go {
        margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    .careers_board {
        padding: 46px 0 40px;
    }

    .careers_intro {
        font-size: 16px;
    }

    /*
     * Ten full-width buttons is a screen and a half of tabs before a single
     * vacancy. On a phone they become one row that scrolls sideways, which is
     * what a row of ten tabs is on every phone app anybody has used.
     */
    /*
     * width: 100% is the important line. mediaquery.css already turns
     * .tab_section_con .d-grid into a sideways-scrolling row - and gives it
     * width: 900px, which makes the PAGE 900px wide on a 375px phone rather
     * than the row scrollable. Measured here; /staff has it today. Same idea,
     * held to the width of the screen.
     */
    .careers_tabs .tab_btn_section {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 8px;
        text-align: left !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .careers_tabs .tab_btn {
        flex: 0 0 auto;
        width: auto; /* mediaquery.css says 220px; a name sets its own width */
        margin: 0;
        padding: 20px 16px !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .careers_toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .careers_search {
        flex: 1 1 auto;
    }

    .careers_job_title {
        font-size: 18px;
    }

    .careers_closing {
        padding: 46px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .careers_job,
    .careers_results {
        transition: none;
    }

    .careers_job:hover {
        transform: none;
    }
}