/* DGS careers page - the "View details" job briefs.
   ---------------------------------------------------------------------------
   Loaded ONLY by pages/career-form.html. It lives here rather than in
   css/style.css because that file is shared by 81 pages: adding to it means
   bumping ?v= on every one of them to bust the cache, which is a lot of churn
   for a panel that exists on a single page. assets/applications.css already
   sets this precedent.

   The panel opens with :target - no JavaScript at all. Each "View details" is
   an ordinary link to the brief's id, and the brief is hidden until the URL
   points at it. That matters here more than it usually would: these are job
   adverts, and a candidate whose browser blocked a script would otherwise be
   looking at a table with four dead buttons. A small script alongside adds
   Escape-to-close, but nothing depends on it.

   Closing links back to #openings rather than to bare "#", so dismissing a
   brief returns to the table instead of throwing the reader to the top. */

/* ---- the trigger in the table ----
   The selector has to name the table, not just the link.
   style.css gives every plain link in a data-table cell a finger-sized tap
   area with "padding: 4px 0" - correct for the email and phone links it was
   written for, but it also zeroed the SIDE padding on this pill, so the words
   sat flush against the border on both edges and looked broken. That rule is
   .data-table td a:not(.btn), which outranks a lone class, so matching its
   weight here is what actually settles it - and being later in the cascade
   wins the tie. */
.data-table td a.job-details-link {
    display: inline-flex;          /* centres the label on both axes, which a
                                      plain inline-block leaves to line-height */
    align-items: center;
    justify-content: center;
    min-width: 124px;              /* every pill the same width, so the column
                                      reads as one control repeated, not four
                                      buttons of slightly different sizes */
    padding: 9px 20px;
    border: 1px solid rgba(28, 79, 50, .22);
    border-radius: 999px;
    background: rgba(28, 79, 50, .07);
    color: var(--primary, #1C4F32);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
}
.data-table td a.job-details-link:hover,
.data-table td a.job-details-link:focus-visible {
    background: var(--primary, #1C4F32);
    border-color: var(--primary, #1C4F32);
    color: #fff;
}

/* ---- the brief ---- */
.job-modal {
    display: none;
    position: fixed;
    inset: 0;
    /*
     * Above the navbar, which is position:fixed at z-index 10020.
     *
     * At 1000 this sat UNDER it: the bar stayed bright while everything else
     * dimmed, so the panel read as part of the page rather than on top of it -
     * and worse, scrolling a long brief slid its text underneath an opaque bar
     * where it could not be read at all. A dialog has to cover the furniture.
     */
    z-index: 10050;
    padding: 20px;
    /* Centres the panel and lets a long brief scroll as one block, so the page
       behind never scrolls in sympathy on a phone. */
    overflow-y: auto;
}
.job-modal:target { display: flex; align-items: flex-start; justify-content: center; }

/* A link, not a div: it is the click-anywhere-outside dismiss, and making it a
   real link means it works without script and is reachable from a keyboard. */
.job-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 26, 18, .58);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}

.job-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    /*
     * The top margin is the "space above" - it keeps the panel clear of the
     * navbar it now covers, so the heading never opens hard against the top
     * edge of the window. The bottom is smaller because the container scrolls.
     */
    margin: 72px auto 56px;
    padding: 38px 40px 34px;
    /*
     * Frosted glass, the same treatment as the Lead Desk.
     *
     * Kept at .88 rather than the .72 used there: this panel floats over
     * photographs of the campus, and a thinner white lets a bright sky push the
     * body text down toward the contrast floor. At .88 over a 28px blur the
     * green text holds comfortably above AA whatever is behind it, and the
     * glass still reads as glass.
     */
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    box-shadow: 0 32px 90px rgba(11, 26, 18, .38);
}

.job-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-light, #4D5E55);
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
    transition: background .18s, color .18s;
}
.job-modal__close:hover,
.job-modal__close:focus-visible { background: rgba(28, 79, 50, .1); color: var(--primary, #1C4F32); }

.job-modal__panel h3 {
    margin: 0 0 6px;
    padding-right: 44px;      /* clear of the close button */
    color: var(--primary, #1C4F32);
}
.job-modal__meta {
    margin: 0 0 14px;
    color: var(--text-light, #4D5E55);
    font-size: 0.92rem;
    line-height: 1.6;
}
.job-modal__panel h4 {
    margin: 18px 0 2px;
    color: var(--primary, #1C4F32);
    font-size: 1.05rem;
}
/* The bullet styling from style.css keys off .content-text, so the panel wears
   that class and inherits the site's tick marks rather than redefining them.

   What it should NOT inherit is that file's spacing. Those numbers - 1.8 line
   height, 1.2rem between paragraphs, 1.5rem around every list - are set for
   full-width page sections where text runs the width of the screen and needs
   the air. In a 720px panel holding a dozen bullets they turn a job advert into
   something you have to scroll twice to finish. Tightened here, and nowhere
   else: the same rules keep their original spacing on every other page.

   These selectors carry the same specificity as the .content-text ones they
   override, so what settles it is source order - careers.css is linked after
   style.css in the page head. Moving that link above style.css would silently
   undo all of this. */
.job-modal__panel p { line-height: 1.6; margin-bottom: .7rem; }
.job-modal__panel ul { margin: .45rem 0 .3rem; }
.job-modal__panel ul li { padding: 3px 0 3px 26px; line-height: 1.5; }
/* The tick is absolutely positioned, so it has to follow the line it marks:
   with the padding and line height reduced, 11px left it sitting low against
   the first line of every bullet. */
.job-modal__panel ul li::before { top: 8px; }

@media (max-width: 640px) {
    .job-modal { padding: 0; }
    .job-modal__panel {
        margin: 0; padding: 30px 22px 26px;
        border: 0; border-radius: 0; min-height: 100%;
        /* Edge to edge on a phone, so the glass would have no rim to catch the
           light - opaque is the honest choice at this size, and it keeps the
           text crisp on the smallest screens. */
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .data-table td a.job-details-link { padding: 6px 14px; font-size: 0.8rem; }
}