/*====================================================
    CAREERS PAGE
====================================================*/

.careers{
    overflow:hidden;
}

/*====================================================
    SHARED SECTION HELPERS
====================================================*/

.section-tag{
    display:inline-block;
    margin-bottom:12px;
    padding:6px 16px;
    color:var(--blue);
    font-size:.76rem;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.section-title{
    font-family:var(--font-head);
    font-size:clamp(1.9rem, 4.4vw, 3rem);
    line-height:1.12;
    letter-spacing:-.01em;
    color:var(--text);
    margin:0 0 18px;
}
.section-description{
    max-width:720px;
    margin:0 auto;
    font-size:1.05rem;
    color:var(--muted);
    line-height:1.7;
}

.section-header{
    max-width:760px;
    margin:0 auto clamp(36px, 5vw, 56px);
    text-align:center;
}

/*====================================================
    HERO
====================================================*/

.career-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(14px, 9vw, 20px) 0;
    text-align:center;
    background:
        radial-gradient(circle at top left,rgba(52,63,192,.10),transparent 40%),
        radial-gradient(circle at bottom right,rgba(245,177,51,.12),transparent 40%),
        var(--surface);
}

.career-hero .container{
    position:relative;
    z-index:1;
    max-width:900px;
    margin:auto;
    padding:0 24px;
}

.career-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:36px;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.btn-primary{
    background:var(--blue);
    color:#fff;
    box-shadow:0 10px 24px rgba(52,63,192,.25);
}

.btn-primary:hover{
    background:var(--blue-dk);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(52,63,192,.32);
}

.btn-secondary{
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
}

.btn-secondary:hover{
    border-color:var(--blue);
    color:var(--blue);
    transform:translateY(-3px);
}

/*====================================================
    SECTION SPACING
====================================================*/

.why-join,
.open-positions{
    padding:clamp(18px, 7vw, 17px) max(24px, 5vw);
}

.why-join .container,
.open-positions .container{
    max-width:1160px;
    margin:0 auto;
}

/*====================================================
    WHY JOIN GRID
====================================================*/

.join-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.join-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    text-align:left;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}


.join-ic{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--blue-soft);
    color:var(--blue);
    font-size:1.15rem;
    transition:background .25s ease, color .25s ease, transform .25s ease;
}



.join-copy h3{
    margin:0 0 6px;
    color:var(--text);
    font-size:1.08rem;
    font-family:var(--font-head);
}

.join-copy p{
    margin:0;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.6;
}

/*====================================================
    OPEN POSITIONS — HEADER & SEARCH
====================================================*/

.jobs{
    padding:clamp(24px, 6vw, 56px) max(24px, 5vw);
}

.jobs .container{
    max-width:1160px;
    margin:0 auto;
}

.jobs-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.jobs-head .kicker{
    display:inline-block;
    margin-bottom:12px;
    color:var(--blue);
    font-size:.76rem;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.jobs-head .section-title{
    margin:0 0 12px;
}

.jobs-head p{
    max-width:560px;
    margin:0;
    color:var(--muted);
    font-size:1rem;
    line-height:1.6;
}

.job-search{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:1 1 260px;
    min-width:240px;
    max-width:380px;
}

.job-search__icon{
    position:absolute;
    left:16px;
    width:18px;
    height:18px;
    flex:0 0 18px;
    color:var(--muted);
    pointer-events:none;
}

.job-search__input{
    width:100%;
    padding:13px 16px 13px 44px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    font-family:inherit;
    font-size:.95rem;
    color:var(--text);
    transition:border-color .2s ease, box-shadow .2s ease;
}

.job-search__input::placeholder{
    color:#9aa2b8;
}

.job-search__input:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(52,63,192,.12);
}

/*====================================================
    JOB LIST
====================================================*/

.jobs-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:900px;
    margin:0 auto;
}

.jobs-empty{
    text-align:center;
    padding:40px 24px;
    border:1px dashed var(--border);
    border-radius:16px;
    background:#fff;
    color:var(--muted);
    font-size:1rem;
}

.job-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:24px 28px;
    border-radius:16px;
    border:1px solid var(--border);
    background:#fff;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.job-card:hover{
    transform:translateY(-4px);
    border-color:var(--blue);
    box-shadow:var(--shadow);
}

.job-info h3{
    margin:0 0 8px;
    font-size:1.25rem;
    font-family:var(--font-head);
    color:var(--text);
}

.job-info p{
    color:var(--muted);
    font-size:.92rem;
    margin:0;
}

.job-btn{
    flex-shrink:0;
    padding:13px 28px;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:background .2s ease, transform .2s ease;
}

.job-btn:hover{
    background:var(--blue-dk);
    transform:translateY(-2px);
}

/*====================================================
    RESPONSIVE
====================================================*/

@media(max-width:1000px){

.join-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.career-buttons{
    flex-direction:column;
}

.join-grid{
    grid-template-columns:1fr;
}

.job-card{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
}

.job-btn{
    width:100%;
    text-align:center;
}

.jobs-head{
    align-items:stretch;
}

.job-search{
    max-width:none;
    width:100%;
}

}

@media(max-width:520px){

.join-card,
.job-card{
    padding:20px;
}

.job-info h3{
    font-size:1.1rem;
}

}

/*====================================================
    JOB DETAILS MODAL
====================================================*/

.job-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    transition:opacity .25s ease, visibility .25s ease;
}

.job-modal.open{
    visibility:visible;
    opacity:1;
}

.job-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(20,24,54,.55);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}

.job-modal__panel{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:600px;
    max-height:75vh;
    overflow:hidden;      /* head + foot stay put; the body scrolls */
    background:#fff;
    border-radius:22px;
    box-shadow:0 30px 70px rgba(20,24,54,.35);
    transform:translateY(24px) scale(.98);
    transition:transform .3s ease;
}

.job-modal.open .job-modal__panel{
    transform:translateY(0) scale(1);
}

/* One view at a time: header and footer sized to content, body takes the rest. */
.job-modal__view{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
}

.job-modal__view[hidden]{
    display:none;
}

.job-modal__close{
    position:absolute;
    z-index:3;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:none;
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    font-size:1.05rem;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}

.job-modal__close:hover{
    background:var(--red);
    color:#fff;
}

.job-modal__head{
    position:relative;
    z-index:2;            /* keeps the share menu above the scrolling body */
    flex:0 0 auto;
    padding:16px 26px 12px;
    border-bottom:1px solid var(--border);
    background:
        radial-gradient(circle at top left,rgba(52,63,192,.08),transparent 55%),
        #fff;
    border-radius:22px 22px 0 0;
}

.job-modal__badge{
    display:inline-block;
    margin-bottom:6px;
    padding:3px 11px;
    border-radius:999px;
    background:var(--blue-soft);
    color:var(--blue);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.job-modal__head h3{
    margin:0 0 6px;
    font-family:var(--font-head);
    font-size:1.45rem;
    line-height:1.25;
    color:var(--text);
    padding-right:38px;
}

.job-modal__headrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px 16px;
}

.job-modal__meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
}

.job-modal__meta li{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font-size:.9rem;
}

.job-modal__meta i{
    color:var(--blue);
}

/*==========================
    SHARE THIS JOB
    (sits in the modal header, next to the role meta)
==========================*/

.job-share{
    position:relative;
    flex:0 0 auto;
}

.job-share__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:6px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--text);
    font-family:inherit;
    font-size:.84rem;
    font-weight:600;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.job-share__btn:hover,
.job-share__btn[aria-expanded="true"]{
    border-color:var(--blue);
    background:var(--blue-soft);
    color:var(--blue);
}

.job-share__btn i{
    color:var(--blue);
}

.job-share__menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    z-index:5;
    min-width:190px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow-lg);
}

.job-share__item{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
    padding:10px 12px;
    border:none;
    border-radius:10px;
    background:none;
    color:var(--text);
    font-family:inherit;
    font-size:.92rem;
    font-weight:500;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}

.job-share__item:hover{
    background:var(--surface);
    color:var(--blue);
}

.job-share__item i{
    width:18px;
    color:var(--blue);
    font-size:1rem;
    text-align:center;
}

.job-share__item.is-copied,
.job-share__item.is-copied i{
    color:var(--success);
}

.job-modal__body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px 26px 20px;
}

.job-modal__summary{
    margin:0 0 16px;
    color:var(--muted);
    line-height:1.6;
}

.job-modal__body h4{
    margin:0 0 8px;
    font-family:var(--font-head);
    font-size:1.05rem;
    color:var(--text);
}

.job-modal__list{
    list-style:none;
    margin:0 0 18px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.job-modal__list:last-child{
    margin-bottom:0;
}

.job-modal__list li{
    position:relative;
    padding-left:24px;
    color:var(--muted);
    line-height:1.5;
    font-size:.94rem;
}

.job-modal__list li::before{
    content:"\f00c";              /* font-awesome check */
    font-family:"FontAwesome";
    position:absolute;
    left:0;
    top:1px;
    color:var(--blue);
    font-size:.85rem;
}

.job-modal__foot{
    flex:0 0 auto;
    padding:14px 26px 18px;
    border-top:1px solid var(--border);
    background:#fff;
}

.job-modal__foot .btn-primary{
    width:100%;
    cursor:pointer;
    border:none;
}

/*==========================
    APPLICATION FORM
==========================*/

.job-modal__back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    padding:0;
    border:none;
    background:none;
    color:var(--blue);
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:gap .2s ease;
}

.job-modal__back:hover{
    gap:12px;
}

.jaf-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.jaf-group{
    margin-bottom:16px;
}

.jaf-group label{
    display:block;
    margin-bottom:7px;
    font-size:.85rem;
    font-weight:600;
    color:var(--text);
}

.jaf-group label span{
    color:var(--red);
}

.jaf-group input,
.jaf-group textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    font-family:inherit;
    font-size:.94rem;
    color:var(--text);
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.jaf-group textarea{
    resize:vertical;
    min-height:96px;
}

.jaf-group input::placeholder,
.jaf-group textarea::placeholder{
    color:#9aa2b8;
}

.jaf-group input:focus,
.jaf-group textarea:focus{
    outline:none;
    background:#fff;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(52,63,192,.12);
}

.jaf-group input[type="file"]{
    padding:9px 14px;
    cursor:pointer;
}

.jaf-group input[type="file"]::file-selector-button{
    margin-right:12px;
    padding:8px 14px;
    border:none;
    border-radius:8px;
    background:var(--blue-soft);
    color:var(--blue);
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}

.jaf-group input[type="file"]:hover::file-selector-button{
    background:var(--blue);
    color:#fff;
}

/* Inline validation errors */
.jaf-group input.is-invalid,
.jaf-group textarea.is-invalid{
    border-color:var(--red);
}

.jaf-group input.is-invalid:focus,
.jaf-group textarea.is-invalid:focus{
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(180,56,58,.12);
}

.jaf-error{
    margin:6px 0 0;
    font-size:.8rem;
    color:var(--red);
}

.jaf-form-error{
    margin:0 0 14px;
    padding:10px 14px;
    border-radius:8px;
    background:rgba(180,56,58,.08);
    color:var(--red);
    font-size:.85rem;
}

/*==========================
    SUCCESS VIEW
==========================*/

.job-modal__success{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:36px 26px 30px;
    text-align:center;
}

.job-modal__success i{
    font-size:3.4rem;
    color:var(--success);
    margin-bottom:18px;
}

.job-modal__success h3{
    margin:0 0 10px;
    font-family:var(--font-head);
    font-size:1.5rem;
    color:var(--text);
}

.job-modal__success p{
    max-width:380px;
    margin:0 auto 26px;
    color:var(--muted);
    line-height:1.7;
}

.job-modal__success .btn-primary{
    cursor:pointer;
    border:none;
    padding-left:44px;
    padding-right:44px;
}

@media(max-width:520px){

.job-modal__panel{
    max-height:82vh;
}

.job-modal__headrow{
    align-items:flex-start;
}

.job-modal__head{
    padding:14px 18px 10px;
}

.job-modal__head h3{
    font-size:1.35rem;
}

.job-modal__body,
.job-modal__foot{
    padding-left:18px;
    padding-right:18px;
}

.jaf-row{
    grid-template-columns:1fr;
    gap:0;
}

}