/* ==========================================================================
   Public welcome / landing page  (view: portal/welcome.php)

   Ported from the supplied static landing page
   (careerconnect-landing-page/index.html) onto the portal's markup:

     - pill eyebrow + "Find the Right Job or Candidate" headline
     - job search bar that submits to /jobs?q=
     - two role cards side by side, each with icon tile, label, blurb, arrow
     - four trust items in a row with hairline separators
     - the cityscape illustration on the right with a soft glow behind it
     - the two sweeps along the bottom of the page

   Colour: the reference uses blue for the job card and orange for the
   employer card. Both are rendered in the portal red here, so the page keeps
   a single accent, as requested.

   Scoped entirely under .jp-welcome so it cannot leak into any other page.
   ========================================================================== */

body.portal-body.jp-welcome-body {
    margin: 0;
    padding: 0;
    background: #f7faff !important;
    background-image: none !important;
    min-height: 100%;
}

/* The portal paints a fixed dark canvas behind every route:
     html { background: var(--lm-canvas) !important }        (mission-control.css)
     .ss-theme-motion  -> full-screen video + dark veil       (injected by theme.js)
     .ss-theme-atmosphere -> dark light fields                (partials/atmosphere.php)
   That is correct for the app shells, but it showed through on the landing page
   on phones, where the visual column is short and the page stops covering it —
   the light hero then sat inside a black frame. The landing page is a public
   marketing surface and must read light on every screen size, so the dark
   layers are switched off here only. Scoped to .jp-welcome-body, so no other
   page is affected.
   NOTE: no source file for this stylesheet exists under assets/css/, so
   .jp-welcome-body ends up on <html>, not <body>; both selectors below cover
   both placements. */
html:has(> body.jp-welcome-body),
body.jp-welcome-body {
    background: #f7faff !important;
    background-image: none !important;
}

body.jp-welcome-body .ss-theme-motion,
body.jp-welcome-body .ss-theme-atmosphere,
body.jp-welcome-body .ss-atmosphere {
    display: none !important;
}

.jp-welcome {
    --jp-w-navy: #101d3b;
    --jp-w-muted: #56647e;
    --jp-w-line: #e3eaf5;
    /* One accent across the page: the reference orange (and its blue job
       card) both become this red. */
    --jp-w-red: #e2483c;
    --jp-w-red-deep: #cf3227;
    --jp-w-red-soft: #fff0ea;

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    flex: 1 1 auto;
    padding: clamp(20px, 2.6vw, 34px) 0 clamp(24px, 3vw, 40px);
    overflow: hidden;
    /* The page paints its own light surface. On desktop it spans the full
       viewport height and hid the portal's dark canvas; on phones the content
       is taller than the screen, so the dark canvas showed below and around it.
       Painting the same light field here guarantees the welcome page reads
       light on every screen size, with or without the dark layers removed. */
    background:
        radial-gradient(ellipse at 80% 15%, rgba(142, 199, 255, 0.34), transparent 32%),
        radial-gradient(ellipse at 8% 85%, rgba(99, 169, 255, 0.12), transparent 30%),
        linear-gradient(120deg, #ffffff 0%, #f8fbff 55%, #edf6ff 100%) !important;
    color: var(--jp-w-navy);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The two faint sweeps along the bottom of the reference page. */
.jp-welcome::before,
.jp-welcome::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: rotate(-16deg);
}

.jp-welcome::before {
    width: 68vw;
    height: 210px;
    right: -15vw;
    bottom: -85px;
    border: 34px solid rgba(226, 72, 60, 0.07);
}

.jp-welcome::after {
    width: 58vw;
    height: 150px;
    left: -18vw;
    bottom: -80px;
    border: 24px solid rgba(226, 72, 60, 0.06);
}

/* The portal's global anchor colour must not leak into these elements. */
.jp-welcome a,
.jp-welcome a:hover,
.jp-welcome a:focus,
.jp-welcome a:active {
    text-decoration: none;
}

/* --------------------------------------------------------------- stage ---- */

.jp-welcome__stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    width: min(1440px, 92%);
    margin: 0 auto;
}

/* ---------------------------------------------------------------- copy ---- */

.jp-welcome__copy {
    position: relative;
    z-index: 2;
    max-width: 660px;
    text-align: left;
}

/* Kicker pill + the home shortcut on the same line. */
.jp-welcome__kicker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jp-welcome__kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 9px 14px;
    color: #465c7d;
    background: #fff;
    border: 1px solid #e5edf8;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(30, 75, 129, 0.06);
    font-size: clamp(0.78rem, 0.9vw, 0.86rem);
    font-weight: 750;
    letter-spacing: 0.03em;
}

.jp-welcome__kicker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jp-w-red);
    box-shadow: 0 0 0 4px var(--jp-w-red-soft);
}

/* Home icon button. */
.jp-welcome__home {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--jp-w-red) !important;
    background: #fff;
    border: 1px solid #e5edf8;
    box-shadow: 0 6px 20px rgba(30, 75, 129, 0.07);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jp-welcome__home:hover,
.jp-welcome__home:focus-visible {
    color: #fff !important;
    background: var(--jp-w-red);
    border-color: var(--jp-w-red);
    transform: translateY(-2px);
}

.jp-welcome__title {
    margin: clamp(18px, 2vw, 25px) 0 0;
    color: var(--jp-w-navy);
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.1rem, 4.1vw, 3.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.05em;
    max-width: 15ch;
}

/* The accent line: "Job or Candidate" in red, as in the reference. */
.jp-welcome__title-line {
    display: block;
    color: var(--jp-w-red) !important;
    -webkit-text-fill-color: var(--jp-w-red);
}

.jp-welcome__title-line em,
.jp-welcome__title-or {
    font-style: normal;
    color: var(--jp-w-red) !important;
    -webkit-text-fill-color: var(--jp-w-red);
}

.jp-welcome__lead {
    max-width: 560px;
    margin: clamp(14px, 1.6vw, 20px) 0 clamp(20px, 2.2vw, 28px);
    color: var(--jp-w-muted);
    font-size: clamp(0.94rem, 1.2vw, 1.12rem);
    font-weight: 500;
    line-height: 1.6;
}

/* --------------------------------------------------------------- search ---- */

.jp-welcome__search {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    /* Fuller width than the card row below it, for a more prominent search. */
    max-width: 720px;
    margin: 0 0 clamp(20px, 2.4vw, 30px);
    padding: 10px 10px 10px 18px;
    background: #fff;
    border: 1px solid var(--jp-w-line);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(30, 67, 117, 0.08);
}

.jp-welcome__search-icon {
    flex: 0 0 auto;
    color: #5b6d89;
}

.jp-welcome__search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--jp-w-navy);
    font: inherit;
    font-size: 1rem;
}

.jp-welcome__search input::placeholder {
    color: #8b97aa;
}

.jp-welcome__search input:focus-visible {
    box-shadow: none;
}

.jp-welcome__search button {
    flex: 0 0 auto;
    padding: 15px 30px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--jp-w-red);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.jp-welcome__search button:hover,
.jp-welcome__search button:focus-visible {
    background: var(--jp-w-red-deep);
    transform: translateY(-1px);
}

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

/* Two role cards side by side, as in the reference. */
.jp-welcome__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 620px;
}

.jp-welcome__card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 140px;
    padding: 18px 18px 16px;
    border-radius: 19px;
    background: #fff;
    border: 1px solid #e4ebf5;
    box-shadow: 0 12px 32px rgba(21, 62, 108, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.jp-welcome__card:hover,
.jp-welcome__card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(226, 72, 60, 0.35);
    box-shadow: 0 18px 38px rgba(21, 62, 108, 0.11);
}

/* Both cards carry the one red accent. */
.jp-welcome__card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--jp-w-red-soft);
    color: var(--jp-w-red) !important;
    font-size: 1.05rem;
}

.jp-welcome__card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jp-welcome__card-eyebrow {
    margin: 1px 0 6px;
    color: #62718a !important;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.jp-welcome__card-title {
    color: var(--jp-w-navy) !important;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(1.02rem, 1.35vw, 1.24rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.16;
}

.jp-welcome__card-blurb {
    display: block;
    margin: 7px 0 0;
    color: #68758a !important;
    font-size: 0.79rem;
    line-height: 1.5;
}

.jp-welcome__card-arrow {
    display: inline-block;
    margin-top: 10px;
    color: var(--jp-w-red) !important;
    font-size: 0.82rem;
    font-weight: 800;
}

.jp-welcome__card:hover .jp-welcome__card-arrow span { display: inline-block; transform: translateX(3px); }

/* ------------------------------------------------------------ features ---- */

.jp-welcome__features {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: clamp(20px, 2.2vw, 28px) 0 0;
    padding: 0;
    list-style: none;
}

.jp-welcome__feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Never shrink below the caption width, or the labels run together. */
    flex: 0 0 auto;
    padding: 0 clamp(9px, 1.1vw, 13px);
    color: #43536f;
    font-size: clamp(0.63rem, 0.76vw, 0.76rem);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.jp-welcome__feature:first-child { padding-left: 0; }

.jp-welcome__feature + .jp-welcome__feature {
    border-left: 1px solid #d8e2f0;
}

.jp-welcome__feature:last-child { border-right: 0; }

/* Reference icons are bare line icons, not tiles. */
.jp-welcome__feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--jp-w-red) !important;
    font-size: 0.95rem;
    line-height: 1;
}

.jp-welcome__feature-icon--job,
.jp-welcome__feature-icon--companies,
.jp-welcome__feature-icon--connect,
.jp-welcome__feature-icon--trust {
    color: var(--jp-w-red) !important;
}

/* ------------------------------------------------------ legal links ---- */

/* Information and policy links (About, FAQ, Terms, Privacy, ...). Same width as
   the card row above; wraps to extra lines on narrow screens rather than being
   cut off, and each link keeps a comfortable tap target. */
.jp-welcome__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    width: 100%;
    max-width: 620px;
    margin: clamp(14px, 1.6vw, 18px) 0 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.3;
}

.jp-welcome__legal-label {
    margin-right: 4px;
    color: #8a97ab;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.66rem;
}

.jp-welcome__legal a {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #e3eaf5;
    border-radius: 999px;
    color: #475569 !important;
    background: #fff;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.jp-welcome__legal a:hover,
.jp-welcome__legal a:focus-visible {
    color: var(--jp-w-red) !important;
    border-color: rgba(226, 72, 60, 0.32);
    background: var(--jp-w-red-soft);
}

@media (prefers-reduced-motion: reduce) {
    .jp-welcome__legal a { transition: none; }
}

/* -------------------------------------------------------------- visual ---- */

/* The illustration sits inside its column. It previously ran 16% past its
   container, which pushed a sliver of the image's own artwork (an orange
   arrow-shaped shape) over the empty space beside the cards. */
.jp-welcome__visual {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: clamp(420px, 66vh, 660px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Decorative glow behind the illustration — removed: it rendered as a stray
   orange rounded block poking out beside the photo. The visual wrapper keeps
   the class in the markup, but it no longer paints anything. */
.jp-welcome__art-glow {
    display: none;
}

.jp-welcome__visual img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    max-width: 100%;
    /* The frame fills the column; contain keeps the whole photograph inside
       it, so nothing can spill past the edges and paint a shape beside it. */
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    /* The frames are opaque PNG photographs on a near-white field. On the light
       page background, multiplying drops that field so the subject sits directly
       on the page rather than inside a visible rectangle. */
    mix-blend-mode: multiply;
    /* The source files are opaque PNGs, so a shape-following drop-shadow would
       trace a visible rectangle. A soft box shadow would be clipped by the
       container's overflow:hidden, so the separation comes from the dissolve
       alone, matching how the page looked with the JPG frames. */
    filter: none;
    /* The PNG frames are full-bleed photographs, so without a mask they sit on
       the page as hard-edged rectangles. Feathering every frame into an ellipse
       lets the corners dissolve into the page gradient, so the photo reads as
       part of the same surface instead of a pasted block. The centre stays fully
       opaque, so the subject, framing and cross-fade are unchanged. */
    -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 68% 68% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
    /* The photographs are larger than the illustration they replace; backing
       off slightly keeps the layout and balance of the JPG frames. */
    scale: 1;

    /* Cross-fade: every frame is stacked; only .is-active is opaque. The
       transition is long enough to read as a dissolve rather than a cut,
       and short enough to finish well inside the 2s rotation interval. */
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 0.85s ease-in-out, transform 0.85s ease-in-out;
    will-change: opacity;
}

.jp-welcome__visual img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* Phones keep the same behaviour; the crop is handled by the container. */

/* Visitors who ask for less motion get a plain, instant swap. */
@media (prefers-reduced-motion: reduce) {
    .jp-welcome__visual img {
        transform: none;
        transition: opacity 0.2s linear;
    }
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
    .jp-welcome__stage {
        grid-template-columns: 1fr 0.85fr;
    }

    .jp-welcome__visual img { width: 100%; max-width: 100%; }

    .jp-welcome__card { padding: 16px 14px; gap: 11px; }

    .jp-welcome__feature { padding: 0 clamp(7px, 1vw, 10px); }
}

/* Below this width the copy takes the full width and the illustration moves
   under it, cropped, exactly as the reference does on small screens. */
@media (max-width: 820px) {
    .jp-welcome {
        justify-content: flex-start;
        padding: 20px 0 24px;
    }

    /* The visual spans the full 16px gutter used by the stage. The image is
       scaled up from a centred origin instead of being pinned 35px right of
       the box, which is what pushed it against the right edge on phones. */
    .jp-welcome__visual {
        margin-left: -16px;
        margin-right: -16px;
    }

    .jp-welcome__stage {
        grid-template-columns: 1fr;
        /* One gutter value for the whole column: the stage width, the visual's
           negative margin below and the search bar all line up on it, so the
           search field never runs past the cards underneath it. */
        width: min(100% - 32px, 560px);
        gap: 0;
    }

    .jp-welcome__copy { max-width: none; }

    .jp-welcome__title {
        font-size: clamp(2.05rem, 8.6vw, 3rem);
        max-width: 100%;
    }

    .jp-welcome__choices { max-width: none; gap: 11px; }

    .jp-welcome__card { min-height: 0; padding: 15px 14px; }

    .jp-welcome__card-icon { width: 42px; height: 42px; }

    .jp-welcome__search button { padding: 13px 18px; }

    .jp-welcome__visual {
        min-height: 0;
        height: 330px;
        margin: 6px -16px 0;
        overflow: hidden;
    }

    .jp-welcome__visual img {
        inset: 0;
        width: 100%;
        min-width: 0;
        max-height: none;
        transform: scale(1.08);
        transform-origin: center center;
    }

    .jp-welcome__visual img.is-active {
        transform: scale(1);
    }

}

@media (max-width: 560px) {
    .jp-welcome__title { letter-spacing: -0.045em; }

    .jp-welcome__choices { grid-template-columns: 1fr; }

    .jp-welcome__card { align-items: center; }

    /* Two items per row on phones, separators dropped. */
    .jp-welcome__features {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .jp-welcome__legal { font-size: 0.72rem; }
    .jp-welcome__legal a { padding: 4px 7px; }

    .jp-welcome__feature {
        flex: 0 0 50%;
        padding: 0;
        white-space: normal;
    }

    .jp-welcome__feature + .jp-welcome__feature { border-left: 0; }

    .jp-welcome__visual { height: 260px; }
}

/* Font Awesome is loaded as the "7 Free" families; the icons need the solid
   weight to render. */
.jp-welcome .jp-welcome__card-icon i,
.jp-welcome .jp-welcome__feature-icon i {
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome", sans-serif;
    font-weight: 900;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .jp-welcome__card,
    .jp-welcome__card-arrow,
    .jp-welcome__home,
    .jp-welcome__search button { transition: none; }

    .jp-welcome__card:hover,
    .jp-welcome__home:hover,
    .jp-welcome__search button:hover { transform: none; }
}

/* ------------------------------------------------- header & footer ---- */

/* This page is rendered full-bleed, so the shared header and footer are
   included from the view itself. They keep the portal's own markup, links and
   redirects; only spacing is set here so the hero sits directly under the
   header and the footer follows it. */
.jp-welcome-body .tpl-header {
    position: relative;
    z-index: 20;
}

.jp-welcome__site-foot {
    background: #0f1b26;
}

/* On phones the shared header sat as a dark bar above the light hero, which
   read as a different page stacked on top of this one. Inside the landing page
   only, and only at the mobile breakpoint, the bar is given the same white
   surface as the cards so the header and the hero read as one page. Desktop is
   left exactly as it was. */
@media (max-width: 820px) {
    .jp-welcome-body .tpl-header,
    .jp-welcome-body .tpl-header .main-navbar {
        background: #fff !important;
        border-color: var(--jp-w-line) !important;
        box-shadow: 0 6px 20px rgba(30, 75, 129, 0.07) !important;
    }

    .jp-welcome-body .tpl-header .navbar-toggler {
        border-color: var(--jp-w-line) !important;
        color: var(--jp-w-navy) !important;
    }

    .jp-welcome-body .tpl-header .navbar-toggler-icon {
        filter: invert(1) !important;
        opacity: 0.85;
    }
}

.jp-welcome__site-foot .footerWrap {
    padding-top: clamp(32px, 4vw, 56px);
}