/**
 * WebFX Ashby job detail page.
 *
 * Styles the WebFX-controlled page chrome (hero band, tags, description,
 * apply section) around the Ashby embed. The application form itself is
 * rendered inside an Ashby iframe and can only be styled via the
 * allowlisted custom CSS URL configured in Ashby admin / Ashby Settings.
 */

.fx-ashby-job {
    background: var(--Core-Blue-blue-00, #F9FBFF);
}

/* -------------------------------------------------------------------------
 * Hero band (light-blue, full-width) with decorative polaroid photos.
 * ---------------------------------------------------------------------- */
 .fx-ashby-job__hero-container {
    background: linear-gradient(0deg, rgba(204, 228, 255, 0.30) 0%, rgba(204, 228, 255, 0.30) 100%), #FFF;
 }
.fx-ashby-job__hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--s10, 80px);
    padding-bottom: var(--s10, 80px);
}

.fx-ashby-job__hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s5, 40px); /* content group ↔ apply button */
}
.fx-ashby-job__hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3, 24px); /* heading block ↔ tags */
    width: 100%;
}
.fx-ashby-job__hero-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2, 16px); /* breadcrumb ↔ title */
    width: 100%;
}

/*
 * Decorative tilted polaroid photos.
 *
 * Anchored to the edges of the centered 900px content column (via 50% +
 * negative margin) rather than the viewport. As the viewport narrows, the
 * centered column shifts inward, so each polaroid slides progressively
 * off-screen; the hero's `overflow: hidden` clips the bleed (no horizontal
 * scroll). Math: half column = 450px, so a ~24px gap from the column edge
 * puts the polaroid's inner edge at 474px from center.
 */
.fx-ashby-job__hero-deco {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 359px; /* 520 * 701/1015 to match polaroid-card-left-v3 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.fx-ashby-job__hero-deco--left {
    left: 50%;
    margin-left: -1030px; /* 510 (inner edge) + 520 (width) */
}
.fx-ashby-job__hero-deco--right {
    left: auto;
    right: 50%;
    width: 520px;
    height: 370px; /* 520 * 734/1033 to match polaroid-card-right-v3 */
    margin-right: -1030px; /* 510 (inner edge) + 520 (width) */
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 * ---------------------------------------------------------------------- */
.fx-ashby-job__breadcrumbs {
    font-size: 16px;
    line-height: 24px;
    color: var(--copy-color, #6e7b81);
}
.fx-ashby-job__breadcrumbs a {
    color: var(--Primary-Blue, #207de9);
    text-decoration: none;
}
.fx-ashby-job__breadcrumbs a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Title
 * ---------------------------------------------------------------------- */
.fx-ashby-job__title {
    color: var(--copy-dark-color, #222);
    font-family: var(--font-inter, "Inter", sans-serif);
    font-size: 48px;
    font-weight: 800;
    line-height: 56px;
    letter-spacing: -1.728px;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Tags (icon + text)
 * ---------------------------------------------------------------------- */
.fx-ashby-job__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2, 16px) var(--s3, 24px);
}
.fx-ashby-job__tag {
    display: flex;
    align-items: center;
    gap: var(--s1, 8px);
    padding-left: 0; /* spacing between tags is handled by the flex gap */
    color: var(--heading-color, #374046);
}
.fx-ashby-job__tag-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--heading-color, #374046);
}
.fx-ashby-job__tag-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}
.fx-ashby-job__tag-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.081px;
}

/* -------------------------------------------------------------------------
 * Apply CTA (hero)
 * ---------------------------------------------------------------------- */
.fx-ashby-job__apply-cta {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Main content (white) — description + apply form
 * ---------------------------------------------------------------------- */
.fx-ashby-job__inner {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--s8, 64px);
    padding-bottom: var(--s10, 80px);
}

.fx-ashby-job__description {
    color: var(--copy-dark-color, #222);
    font-size: 18px;
    line-height: 1.7;
}
.fx-ashby-job__description h2,
.fx-ashby-job__description h3,
.fx-ashby-job__description h4 {
    color: var(--heading-color, #374046);
    margin-top: var(--s5, 40px);
    margin-bottom: var(--s2, 16px);
}
.fx-ashby-job__description h2 {
    font-size: 28px;
    font-weight: 800;
}
.fx-ashby-job__description p {
    margin: 0 0 var(--s2, 16px);
}
.fx-ashby-job__description ul,
.fx-ashby-job__description ol {
    margin-top: 0px;
    margin-bottom: var(--s2, 16px);
    padding-left: var(--s2, 16px);
}
/*
 * global.css `ul li, ol li` forces `list-style-position: inside`, which makes
 * wrapped lines slide back under the bullet. Force `outside` (with the list
 * padding above providing room) so the bullet hangs and wrapped lines align
 * with the first line's text.
 */
.fx-ashby-job__description li {
    list-style-position: outside;
    margin-bottom: var(--s1, 8px);
    padding: 0px;
    padding-left: 4px!important;
}
.fx-ashby-job__description li > p {
    display: inline;
}
.fx-ashby-job__description a {
    color: var(--Primary-Blue, #207de9);
}

.fx-ashby-job__description div + div {
    /* Add your styles here for the div immediately following a .fx-ashby-job__description div */
    display: none!important;
}


/* -------------------------------------------------------------------------
 * Apply section + Ashby embed
 * ---------------------------------------------------------------------- */
.fx-ashby-job__apply {
    margin-top: var(--s6, 48px);
    border-top: 1px solid var(--Primary-Blue-Lightest, #eaf3fe);
    padding-top: var(--s5, 40px);
}
.fx-ashby-job__apply-heading {
    color: var(--heading-color, #374046);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--s3, 24px);
}

.fx-ashby-job__embed {
    min-height: 400px;
    background-color: white;
    padding-left: 24px;
    padding-right: 24px;
}
.fx-ashby-job__embed iframe {
    width: 100%;
    border: 0;
}

.fx-ashby-job__fallback {
    margin-top: var(--s2, 16px);
    font-size: 16px;
    color: var(--copy-color, #6e7b81);
}
.fx-ashby-job__fallback a {
    color: var(--Primary-Blue, #207de9);
}

/* -------------------------------------------------------------------------
 * Floating apply bar
 * Fixed below the site nav at the top of the viewport, revealed after the
 * hero scrolls out of view and hidden again once the application form is
 * reached. Visibility is toggled via the .is-visible class from
 * assets/js/careers/job-single.js.
 * ---------------------------------------------------------------------- */
.fx-ashby-job__floating-bar {
    position: fixed;
    left: 50%;
    /* Sit just below the fixed 100px site navigation. */
    top: calc(100px + var(--s1, 8px));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s3, 24px);
    width: calc(100% - var(--s4, 32px));
    max-width: 900px;
    padding: var(--s2, 16px) var(--s3, 24px);
    background: var(--White, #fff);
    border-radius: var(--s2, 16px);
    box-shadow: 0 0 12px rgba(34, 34, 34, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.15s ease, visibility 0.15s;
}
.fx-ashby-job__floating-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* Logged-in admins get the 32px WP admin bar (46px on small screens). */
.admin-bar .fx-ashby-job__floating-bar {
    top: calc(100px + var(--s1, 8px) + 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .fx-ashby-job__floating-bar {
        top: calc(100px + var(--s1, 8px) + 46px);
    }
}
.fx-ashby-job__floating-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-inter, "Inter", sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.081px;
    color: var(--copy-dark-color, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-ashby-job__floating-bar-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s1, 8px);
    font-family: var(--font-inter, "Inter", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.144px;
    color: var(--Primary-Blue, #207de9);
    text-decoration: none;
    white-space: nowrap;
}
.fx-ashby-job__floating-bar-cta:hover,
.fx-ashby-job__floating-bar-cta:focus {
    color: var(--Primary-Blue-Darkest, #083a74);
    text-decoration: none;
}
.fx-ashby-job__floating-bar-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    /* Hide the decorative edge polaroids on tablet/mobile. */
    .fx-ashby-job__hero-deco {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .fx-ashby-job__hero {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .fx-ashby-job__title {
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -1px;
    }
    .fx-ashby-job__tags {
        gap: var(--s1, 8px) var(--s2, 16px);
    }
    .fx-ashby-job__tag-label {
        font-size: 16px;
    }
    .fx-ashby-job__inner {
        padding-top: var(--s5, 40px);
        padding-bottom: var(--s6, 48px);
    }
    .fx-ashby-job__apply-heading {
        font-size: 26px;
    }
    .fx-ashby-job__floating-bar {
        top: calc(100px + var(--s5, 40px));
        gap: var(--s2, 16px);
        padding: var(--s2, 16px);
    }
    .admin-bar .fx-ashby-job__floating-bar {
        top: calc(100px + var(--s5, 40px) + 46px);
    }
    .fx-ashby-job__floating-bar-title,
    .fx-ashby-job__floating-bar-cta {
        font-size: 16px;
    }
}