/* ------------------------------------------------ */
/* Job Detail  (mirrors the /jobs search page design language) */
/* ------------------------------------------------ */

.job-detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* ===== Back link ===== */
.job-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 1.5rem 0 .25rem;
    color: #0066a4;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
}

.job-detail-back:hover,
.job-detail-back:focus {
    text-decoration: underline;
}

/* Location banner, shown at the top of the right (description) pane */
.job-detail-banner {
    margin: 0 0 1.5rem;
}

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

/* ===== Body: sidebar + main ===== */
.job-detail-body {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.job-detail-sidebar {
    flex: 0 0 300px;
}

.job-detail-main {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 1px solid #d5dde3;
    padding-left: 2.5rem;
}

.job-detail-main p {
    font-family: "Montserrat", sans-serif;
}

/* ===== Column headings ===== */
.job-detail-column-heading {
    font-size: 1.9rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d5dde3;
}

.job-detail-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.job-detail-main-header .job-detail-column-heading {
    flex: 1 1 auto;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.job-detail-main-rule {
    border: 0;
    border-top: 1px solid #d5dde3;
    margin: 1rem 0 2rem;
}

/* ===== Sidebar attributes ===== */
/* Note: label/value use dedicated class names (not `.label`/`.value`) to avoid
   Foundation's global `.label` badge, which adds padding/background. */
.job-attribute {
    margin-bottom: 1.5rem;
    font-family: "Lato", sans-serif;
}

.job-attribute .attr-label {
    display: block;
    color: #0066a4;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .25rem;
    padding: 0;
}

.job-attribute .attr-value {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.job-attribute .attr-value a {
    color: #0066a4;
    text-decoration: underline;
}

/* Location: address links to the map (no underline to keep the block calm),
   website sits below with a little breathing room. */
.job-attribute .location-address {
    display: block;
    text-decoration: none;
}

.job-attribute .location-address:hover,
.job-attribute .location-address:focus {
    text-decoration: underline;
}

.job-attribute .location-website {
    display: block;
    margin-top: .6rem;
    word-break: break-word;
}

/* ===== Share ===== */
.job-detail-share .attr-label {
    display: block;
    color: #0066a4;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    padding: 0;
}

/* Reset AddToAny's default button margins so the icons sit flush with the
   label's left edge. */
.job-detail-share .a2a_kit {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: left;
}

.job-detail-share .a2a_kit a {
    margin: 0;
    padding: 0;
    float: none;
}

/* ===== Main content ===== */
.job-detail-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin: 2rem 0 .75rem;
}

.job-detail-main .html-editor-content {
    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. Carried over from the
   original `#job-detail .html-editor-content p[style]` rule and extended to
   cover line-height and non-<p> elements (span/div/li). */
.job-detail-main .html-editor-content [style], .job-detail-main .html-editor-content p [style] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* ===== Buttons ===== */
.job-detail-apply-top {
    flex: 0 0 auto;
}

a.job-detail-button,
a.job-detail-button:hover,
a.job-detail-button:focus {
    display: inline-block;
    border: 2px solid #0066a4;
    border-radius: 2px;
    background: #0066a4;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    padding: .65rem 2.25rem;
    text-decoration: none;
    cursor: pointer;
}

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

a.job-detail-button.secondary,
a.job-detail-button.secondary:hover,
a.job-detail-button.secondary:focus {
    background: #fff;
    color: #0066a4;
}

a.job-detail-button.secondary:hover,
a.job-detail-button.secondary:focus {
    background: #eef4f8;
}

.job-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
}

/* ===== EEO ===== */
.job-detail-eeo {
    color: #777;
    font-size: .8rem;
    line-height: 1.6;
    border-top: 1px solid #d5dde3;
    padding-top: 1.5rem;
    margin-top: 1rem;
}

/* ===== Responsive (tablet + mobile use the stacked layout) ===== */
@media only screen and (max-width: 1024px) {
    .job-detail-body {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .job-detail-sidebar {
        flex-basis: auto;
        width: 100%;
        border-bottom: 1px solid #d5dde3;
        padding-bottom: 1rem;
    }

    .job-detail-main {
        border-left: none;
        padding-left: 0;
    }

    .job-detail-main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .job-detail-main-header .job-detail-apply-top {
        align-self: stretch;
        text-align: center;
    }

    .job-detail-actions a.job-detail-button {
        flex: 1 1 auto;
        text-align: center;
    }
}