/* ============================================================
   Single Job Post — single-job.css
   Upload to: wp-content/themes/careerup/
   Enqueue via Code Snippets (see functions snippet below)
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --sjp-primary:       #0f2942;
    --sjp-primary-mid:   #1a3c5e;
    --sjp-accent:        #f97316;
    --sjp-accent-dark:   #ea6c0a;
    --sjp-green:         #10b981;
    --sjp-red:           #ef4444;
    --sjp-bg:            #f4f7fb;
    --sjp-card:          #ffffff;
    --sjp-text:          #1e2d3d;
    --sjp-muted:         #64748b;
    --sjp-border:        #e2e8f2;
    --sjp-radius:        16px;
    --sjp-radius-sm:     10px;
    --sjp-shadow:        0 2px 16px rgba(15,41,66,.07), 0 1px 4px rgba(15,41,66,.05);
    --sjp-shadow-md:     0 8px 32px rgba(15,41,66,.12), 0 2px 8px rgba(15,41,66,.07);
    --sjp-transition:    0.2s cubic-bezier(.4,0,.2,1);
    --sjp-font-display:  'Georgia', 'Times New Roman', serif;
    --sjp-font-ui:       -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── Page wrap ──────────────────────────────────────────────── */
.sjp-page {
    background: var(--sjp-bg);
}

/* ================================================================
   HERO
   ================================================================ */
.sjp-hero {
    position: relative;
    background: var(--sjp-primary);
    color: #fff;
    padding: 64px 0 56px;
    overflow: hidden;
}

/* Geometric pattern overlay */
.sjp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 40px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 40px
        );
    pointer-events: none;
}

/* Orange glow */
.sjp-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,.3) 0%, transparent 65%);
    pointer-events: none;
}

.sjp-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.sjp-hero__bg-img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .12;
}

.sjp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,41,66,.6) 0%, rgba(15,41,66,.85) 100%);
    pointer-events: none;
}

.sjp-hero__inner {
    position: relative;
    z-index: 1;
}

/* Breadcrumb chips */
.sjp-breadchip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    font-family: var(--sjp-font-ui);
    font-size: 12px;
}
.sjp-breadchip__link {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color var(--sjp-transition);
}
.sjp-breadchip__link:hover { color: #fff; }
.sjp-breadchip__sep { color: rgba(255,255,255,.3); }
.sjp-breadchip__current {
    color: rgba(255,255,255,.85);
    font-weight: 500;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Job type pill */
.sjp-hero__type-pill {
    display: inline-block;
    font-family: var(--sjp-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sjp-primary);
    background: var(--sjp-accent);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/* Title */
.sjp-hero__title {
    font-family: var(--sjp-font-display);
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 22px;
    letter-spacing: -.015em;
    max-width: 760px;
    opacity: 0;
    animation: sjpFadeUp .5s .1s ease forwards;
}

/* Meta row */
.sjp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 28px;
    opacity: 0;
    animation: sjpFadeUp .5s .2s ease forwards;
}
.sjp-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sjp-font-ui);
    font-size: 13px;
    color: rgba(255,255,255,.75);
}
.sjp-hero__meta-item--salary {
    color: #6ee7b7;
    font-weight: 600;
}
.sjp-hero__meta-item--expired {
    color: #fca5a5;
}

/* CTA */
.sjp-hero__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: sjpFadeUp .5s .3s ease forwards;
}
.sjp-expired-badge {
    font-family: var(--sjp-font-ui);
    font-size: 13px;
    color: #fca5a5;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.3);
    padding: 6px 14px;
    border-radius: 999px;
}

@keyframes sjpFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.sjp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sjp-font-ui);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--sjp-transition),
                box-shadow var(--sjp-transition),
                background var(--sjp-transition);
}
.sjp-btn:focus-visible {
    outline: 3px solid var(--sjp-accent);
    outline-offset: 2px;
}
.sjp-btn--primary {
    background: var(--sjp-accent);
    color: #fff;
    padding: 12px 28px;
    box-shadow: 0 4px 16px rgba(249,115,22,.35);
}
.sjp-btn--primary:hover {
    background: var(--sjp-accent-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(249,115,22,.45);
}
.sjp-btn--lg { padding: 14px 32px; font-size: 15px; }
.sjp-btn--block { width: 100%; }
.sjp-btn--expired {
    background: var(--sjp-border);
    color: var(--sjp-muted);
    padding: 12px 28px;
    cursor: not-allowed;
}

/* ================================================================
   BODY LAYOUT
   ================================================================ */
.sjp-body {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Two-column: article + sticky panel */
.sjp-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

/* ================================================================
   ARTICLE
   ================================================================ */
.sjp-article {
    min-width: 0; /* prevent grid blowout */
}

/* Section blocks */
.sjp-section {
    background: var(--sjp-card);
    border: 1px solid var(--sjp-border);
    border-radius: var(--sjp-radius);
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: var(--sjp-shadow);
    opacity: 0;
    animation: sjpFadeUp .45s ease forwards;
    animation-delay: 100ms;
}
.sjp-section + .sjp-section { animation-delay: 180ms; }
.sjp-section + .sjp-section + .sjp-section { animation-delay: 260ms; }
.sjp-section + .sjp-section + .sjp-section + .sjp-section { animation-delay: 320ms; }

.sjp-section__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sjp-font-ui);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sjp-primary);
    margin: 0 0 22px;
}
.sjp-section__title-bar {
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--sjp-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Prose typography */
.sjp-prose {
    font-family: var(--sjp-font-ui);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--sjp-text);
}
.sjp-prose p   { margin: 0 0 1em; }
.sjp-prose ul,
.sjp-prose ol  { padding-left: 1.5em; margin: 0 0 1em; }
.sjp-prose li  { margin-bottom: .4em; }
.sjp-prose h3,
.sjp-prose h4  { font-weight: 700; margin: 1.4em 0 .5em; color: var(--sjp-primary); }
.sjp-prose strong { color: var(--sjp-primary); }
.sjp-prose a   { color: var(--sjp-accent); text-decoration: underline; }

/* Salary card */
.sjp-salary-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #a7f3d0;
    border-radius: var(--sjp-radius-sm);
    padding: 22px 24px;
}
.sjp-salary-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #059669;
}
.sjp-salary-card__amount {
    font-family: var(--sjp-font-ui);
    font-size: 22px;
    font-weight: 800;
    color: #065f46;
    margin: 0 0 4px;
}
.sjp-salary-card__note {
    font-family: var(--sjp-font-ui);
    font-size: 13px;
    color: #6ee7b7;
    color: #059669;
    margin: 0;
}

/* Apply section CTA */
.sjp-apply-section {
    border-top: 3px solid var(--sjp-accent);
}
.sjp-apply-cta {
    margin-top: 20px;
    text-align: center;
}
.sjp-apply-cta__note {
    font-family: var(--sjp-font-ui);
    font-size: 12px;
    color: var(--sjp-muted);
    margin: 10px 0 0;
}
.sjp-apply-cta__expired {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sjp-font-ui);
    font-size: 14px;
    color: var(--sjp-red);
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 12px 20px;
    border-radius: var(--sjp-radius-sm);
}

/* Tags */
.sjp-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--sjp-border);
}
.sjp-tags__label {
    font-family: var(--sjp-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--sjp-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sjp-tags__item {
    font-family: var(--sjp-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--sjp-primary-mid);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 4px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--sjp-transition), color var(--sjp-transition);
}
.sjp-tags__item:hover {
    background: var(--sjp-primary-mid);
    color: #fff;
    border-color: var(--sjp-primary-mid);
}

/* Post nav */
.sjp-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.sjp-post-nav__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--sjp-card);
    border: 1px solid var(--sjp-border);
    border-radius: var(--sjp-radius-sm);
    padding: 16px 20px;
    text-decoration: none;
    transition: box-shadow var(--sjp-transition), transform var(--sjp-transition), border-color var(--sjp-transition);
}
.sjp-post-nav__item:hover {
    border-color: var(--sjp-accent);
    box-shadow: var(--sjp-shadow-md);
    transform: translateY(-2px);
}
.sjp-post-nav__item--next { text-align: right; }
.sjp-post-nav__dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sjp-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sjp-accent);
}
.sjp-post-nav__title {
    font-family: var(--sjp-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--sjp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author bio */
.sjp-author-bio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--sjp-card);
    border: 1px solid var(--sjp-border);
    border-radius: var(--sjp-radius);
    padding: 28px 32px;
    margin-bottom: 32px;
    box-shadow: var(--sjp-shadow);
}
.sjp-author-bio__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sjp-accent);
    flex-shrink: 0;
}
.sjp-author-bio__body { flex: 1; min-width: 0; }
.sjp-author-bio__label {
    font-family: var(--sjp-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sjp-muted);
    margin: 0 0 4px;
}
.sjp-author-bio__name {
    display: block;
    font-family: var(--sjp-font-ui);
    font-size: 17px;
    font-weight: 800;
    color: var(--sjp-primary);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color var(--sjp-transition);
}
.sjp-author-bio__name:hover { color: var(--sjp-accent); }
.sjp-author-bio__desc {
    font-family: var(--sjp-font-ui);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sjp-muted);
    margin: 0;
}

/* ================================================================
   STICKY INFO PANEL
   ================================================================ */
.sjp-info-panel {
    position: sticky;
    top: 24px;
}
.sjp-info-panel__inner {
    background: var(--sjp-card);
    border: 1px solid var(--sjp-border);
    border-radius: var(--sjp-radius);
    box-shadow: var(--sjp-shadow-md);
    overflow: hidden;
    opacity: 0;
    animation: sjpFadeUp .5s .25s ease forwards;
}
.sjp-info-panel__heading {
    font-family: var(--sjp-font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sjp-primary);
    padding: 14px 22px;
    margin: 0;
}

/* Info list */
.sjp-info-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--sjp-border);
}
.sjp-info-list__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--sjp-border);
    transition: background var(--sjp-transition);
}
.sjp-info-list__item:last-child { border-bottom: none; }
.sjp-info-list__item:hover { background: var(--sjp-bg); }
.sjp-info-list__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--sjp-radius-sm);
    background: #eff6ff;
    color: var(--sjp-primary-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.sjp-info-list__label {
    display: block;
    font-family: var(--sjp-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sjp-muted);
    margin-bottom: 2px;
}
.sjp-info-list__value {
    display: block;
    font-family: var(--sjp-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--sjp-text);
}
.sjp-info-list__value--highlight {
    color: #059669;
    font-size: 15px;
}
.sjp-info-list__value--expired {
    color: var(--sjp-red);
    text-decoration: line-through;
}

/* CTA inside panel */
.sjp-info-panel__inner .sjp-btn--primary {
    margin: 18px 22px;
    width: calc(100% - 44px);
    border-radius: var(--sjp-radius-sm);
}
.sjp-info-panel__inner .sjp-btn--expired {
    margin: 18px 22px;
    width: calc(100% - 44px);
    border-radius: var(--sjp-radius-sm);
}

/* Share */
.sjp-share {
    padding: 16px 22px 20px;
    border-top: 1px solid var(--sjp-border);
}
.sjp-share__label {
    font-family: var(--sjp-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sjp-muted);
    margin: 0 0 10px;
}
.sjp-share__btns {
    display: flex;
    gap: 8px;
}
.sjp-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sjp-radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--sjp-transition), box-shadow var(--sjp-transition);
}
.sjp-share__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.sjp-share__btn--linkedin  { background: #0077b5; color: #fff; }
.sjp-share__btn--twitter   { background: #000;    color: #fff; }
.sjp-share__btn--facebook  { background: #1877f2; color: #fff; }
.sjp-share__btn--copy      { background: var(--sjp-bg); color: var(--sjp-muted); border: 1px solid var(--sjp-border); }
.sjp-share__btn--copy.copied { background: #d1fae5; color: #059669; border-color: #a7f3d0; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
    .sjp-layout {
        grid-template-columns: 1fr 280px;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .sjp-layout {
        grid-template-columns: 1fr;
    }
    .sjp-info-panel {
        position: static;
        order: -1; /* panel appears above article on mobile */
    }
    .sjp-info-panel__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .sjp-info-panel__heading { grid-column: 1 / -1; }
    .sjp-info-list           { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
    .sjp-section { padding: 24px 22px; }
}

@media (max-width: 640px) {
    .sjp-hero { padding: 44px 0 40px; }
    .sjp-hero__title { font-size: 26px; }
    .sjp-info-panel__inner { display: block; }
    .sjp-info-list { display: block; }
    .sjp-post-nav { grid-template-columns: 1fr; }
    .sjp-author-bio { flex-direction: column; }
    .sjp-section { padding: 20px 18px; }
    .sjp-salary-card { flex-direction: column; text-align: center; }
}