/* ---------------------------------------------------------------------------
   "Join us" — the recruitment landing page, its three application forms and the
   thank-you card.  Loaded per page from the views, not from a bundle: this is a
   low-traffic marketing surface and bundling it would put it on every request.

   Class prefix `jn-`.  LOGICAL PROPERTIES ONLY — margin-inline, padding-block,
   inset-inline-start, border-start-*.  The storefront runs Hebrew and Arabic as
   first-class languages, so a physical `left` here is a bug on two thirds of the
   site, not a rounding error.
   --------------------------------------------------------------------------- */

.jn-page {
    --jn-ink: var(--body-color, #1f2233);
    --jn-muted: var(--text-muted, #6c757d);
    --jn-line: var(--border-color, #e8e8ec);
    --jn-surface: var(--body-bg, #fff);
    --jn-brand: var(--primary, #4f46e5);
    --jn-brand-deep: #3525cd;
    --jn-brand-wash: #eef0ff;
    --jn-radius: 18px;

    color: var(--jn-ink);
}

.jn-shell {
    max-inline-size: 1100px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.jn-hero {
    background: linear-gradient(135deg, var(--jn-brand) 0%, var(--jn-brand-deep) 100%);
    color: #fff;
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    text-align: center;
}

.jn-hero-title {
    font-size: clamp(1.7rem, 4.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin-block-end: .75rem;
}

.jn-hero-lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-inline-size: 46rem;
    margin-inline: auto;
    margin-block-end: 1.25rem;
    opacity: .92;
}

.jn-hero-cta {
    display: inline-block;
    font-weight: 700;
    font-size: .95rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    margin: 0;
}

/* ── the three lanes ────────────────────────────────────────────────────── */

.jn-lanes {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin-block: clamp(-2.5rem, -4vw, -1.5rem) 3rem;
    position: relative;
    z-index: 1;
}

.jn-lane {
    display: flex;
    flex-direction: column;
    background: var(--jn-surface);
    border: 1px solid var(--jn-line);
    border-radius: var(--jn-radius);
    padding: 1.6rem 1.4rem;
    box-shadow: 0 18px 44px -32px rgba(0, 0, 0, .55);
}

.jn-lane-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 16px;
    background: var(--jn-brand-wash);
    color: var(--jn-brand-deep);
    font-size: 1.5rem;
    margin-block-end: 1rem;
}

.jn-lane-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-block-end: .4rem;
}

.jn-lane-lead {
    color: var(--jn-muted);
    font-size: .95rem;
    margin-block-end: 1rem;
}

.jn-lane-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: grid;
    gap: .5rem;
}

.jn-lane-list li {
    position: relative;
    /* The tick sits in the inline-start gutter, so it swaps sides with the text. */
    padding-inline-start: 1.6rem;
    font-size: .92rem;
    line-height: 1.45;
}

.jn-lane-list li::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    color: var(--jn-brand);
    font-weight: 700;
}

.jn-lane-btn {
    margin-block-start: auto;
    align-self: stretch;
    text-align: center;
    border-radius: 12px;
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 0;
    background: linear-gradient(135deg, var(--jn-brand), var(--jn-brand-deep));
}

.jn-lane-closed {
    margin-block-start: auto;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a5b0a;
    font-size: .88rem;
    margin-block-end: 0;
}

/* ── how it works ───────────────────────────────────────────────────────── */

.jn-steps {
    background: var(--jn-brand-wash);
    padding-block: 2.5rem;
}

.jn-steps-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.jn-step-n {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: var(--jn-brand);
    color: #fff;
    font-weight: 800;
    margin-block-end: .7rem;
}

.jn-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-block-end: .3rem;
}

.jn-step-text {
    color: var(--jn-muted);
    font-size: .92rem;
    margin: 0;
}

/* ── faq ────────────────────────────────────────────────────────────────── */

.jn-faq {
    padding-block: 2.5rem 3.5rem;
    max-inline-size: 46rem;
}

.jn-faq-item {
    border-block-end: 1px solid var(--jn-line);
    padding-block: .95rem;
}

.jn-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.jn-faq-item summary::-webkit-details-marker { display: none; }

.jn-faq-item summary::after {
    content: "+";
    margin-inline-start: auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--jn-brand);
}

.jn-faq-item[open] summary::after { content: "\2212"; }

.jn-faq-item p {
    color: var(--jn-muted);
    margin: .6rem 0 0;
    font-size: .93rem;
    line-height: 1.6;
}

/* ── the closing call to action ─────────────────────────────────────────── */

.jn-closing {
    text-align: center;
    padding-block: 2.5rem 3rem;
}

.jn-closing-title {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 800;
    margin-block-end: 1.25rem;
}

.jn-closing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* The buttons size to their words here rather than stretching, which is what .jn-lane-btn does inside
   a card. Without this they would each fill the row and stack into three full-width bars. */
.jn-closing-actions .jn-lane-btn {
    align-self: auto;
    margin-block-start: 0;
    padding-inline: 1.5rem;
}

/* ── the application form ───────────────────────────────────────────────── */

.jn-form-page { padding-block: 1.5rem 3rem; }

.jn-form-shell { max-inline-size: 640px; }

.jn-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    margin-block-end: .9rem;
    color: var(--jn-muted);
    text-decoration: none;
}

.jn-back:hover { color: var(--jn-brand); }

/* The chevron points "back" along the reading direction in both scripts. */
[dir="rtl"] .jn-back > i { transform: scaleX(-1); }

.jn-card {
    background: var(--jn-surface);
    border: 1px solid var(--jn-line);
    border-radius: var(--jn-radius);
    padding: 1.7rem 1.5rem;
    box-shadow: 0 14px 40px -30px rgba(0, 0, 0, .5);
}

.jn-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-block-end: .3rem;
}

.jn-card-sub {
    color: var(--jn-muted);
    font-size: .95rem;
    margin-block-end: 1.4rem;
}

.jn-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.4rem;
}

.jn-legend {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jn-muted);
    margin-block-end: .7rem;
    padding: 0;
    border-block-end: 1px solid var(--jn-line);
    padding-block-end: .4rem;
    inline-size: 100%;
}

.jn-field { margin-block-end: .9rem; }

.jn-field > label {
    display: block;
    font-weight: 600;
    font-size: .87rem;
    margin-block-end: .25rem;
}

.jn-grid-2 {
    display: grid;
    gap: 0 .9rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.jn-form .form-control {
    border-radius: 12px;
    min-block-size: 46px;
}

.jn-form textarea.form-control {
    min-block-size: 0;
    padding-block: .6rem;
}

.jn-hint {
    display: block;
    color: var(--jn-muted);
    font-size: .8rem;
    margin-block-start: .25rem;
}

.jn-account {
    background: var(--jn-brand-wash);
    border-radius: 14px;
    padding: 1.1rem 1rem .6rem;
}

.jn-account .jn-legend { border-block-end-color: rgba(79, 70, 229, .25); }

.jn-account-why { margin-block-end: .8rem; }

.jn-consent { margin-block: .5rem; }

.jn-signedin {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--jn-brand-wash);
    border-radius: 12px;
    padding: .7rem .9rem;
    font-size: .9rem;
    margin-block-end: 1.2rem;
}

.jn-captcha { margin-block-end: 1rem; }

.jn-submit {
    inline-size: 100%;
    border-radius: 12px;
    min-block-size: 50px;
    font-weight: 800;
    border: 0;
    background: linear-gradient(135deg, var(--jn-brand), var(--jn-brand-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.jn-errors:empty { display: none; }

/* ── notices (pending / closed / thanks) ────────────────────────────────── */

.jn-note {
    text-align: center;
    padding-block: 1.2rem .4rem;
}

.jn-note i {
    font-size: 2.6rem;
    display: block;
    margin-block-end: .7rem;
}

.jn-note strong {
    display: block;
    font-size: 1.08rem;
    margin-block-end: .3rem;
}

.jn-note p {
    color: var(--jn-muted);
    margin: 0;
}

.jn-note--wait i { color: #b45309; }
.jn-note--closed i { color: var(--jn-muted); }

.jn-thanks { text-align: center; }

.jn-thanks-ic {
    display: block;
    font-size: 3rem;
    color: #16a34a;
    margin-block-end: .8rem;
}

/* ── the promo block on the sign-in / registration pages ────────────────── */
/* Not inside .jn-page — this one is injected into a stock layout zone, so it
   carries its own colours rather than inheriting the landing page's tokens. */

.jn-promo {
    max-inline-size: 46rem;
    margin-inline: auto;
    margin-block: 1.5rem 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-color, #e8e8ec);
    border-radius: 16px;
    background: #eef0ff;
}

.jn-promo-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-block-end: .9rem;
}

.jn-promo-head > i {
    font-size: 1.5rem;
    color: #3525cd;
    margin-block-start: .1rem;
}

.jn-promo-head strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
}

.jn-promo-head span {
    display: block;
    font-size: .88rem;
    color: var(--text-muted, #6c757d);
}

.jn-promo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.jn-promo-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .3);
    color: #3525cd;
    font-size: .87rem;
    font-weight: 700;
    text-decoration: none;
}

.jn-promo-chip:hover,
.jn-promo-chip:focus {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
    text-decoration: none;
}

/* ── the homepage band ──────────────────────────────────────────────────── */

.jn-band {
    background: linear-gradient(135deg, #4f46e5 0%, #3525cd 100%);
    color: #fff;
    border-radius: 18px;
    padding: clamp(1.4rem, 4vw, 2.25rem);
    margin-block: 1.5rem;
}

.jn-band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.jn-band-text {
    flex: 1 1 20rem;
    min-inline-size: 0;
}

.jn-band-text h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    font-weight: 800;
    margin-block-end: .35rem;
}

.jn-band-text p {
    margin: 0;
    opacity: .9;
    font-size: .95rem;
}

.jn-band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.jn-band-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.jn-band-chip:hover,
.jn-band-chip:focus {
    background: #fff;
    color: #3525cd;
    text-decoration: none;
}