/* =============================================================================
   HTV — Job card
   File: assets/css/job-card.css
   Session 143 · 2026-10-13
   =============================================================================
   Styles for includes/job-card.php, the one card used on /jobs (jobs.php)
   and the home page (index.php). Self-contained: it does not depend on
   jobs.css, so the home page can load it alone.

   Order of importance, so something "pops out" (session 141):
     pay + grade (strongest) → appointment / clearance badges → duty stations
     and category (quiet) → closing date and apply.
   Palette: navy #1B2A4A, blue #2C5F8A, red #C8102E, gold #C9A227,
  go-green #1E7B3C (apply / action buttons; hover #17602F).
   Contrast: body #1a1a1a, muted #4a4a4a on white (never lighter).
============================================================================= */

/* ── Base pieces the card uses (were in jobs.css) ───────────────────────── */
.job-card .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.job-card { overflow: hidden; transition: box-shadow 0.2s; }
.job-card-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
.job-card-title a { text-decoration: none; transition: color 0.15s ease; }
.job-featured-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 1px 7px;
    border: 1px solid #F0D060;
    border-radius: 4px;
    background: #FEF9E7;
    color: #6A5000;
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.job-card-urgent-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 3px;
    background: #C8102E;
    color: #fff;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}
.job-card-header-right { flex-shrink: 0; }
.job-card .save-job-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: #6b7480;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.job-card .save-job-btn:hover { color: #C8102E; }
.job-card .save-job-btn.saved { color: #C9A227; }
.job-card .btn-apply {
    background: #1E7B3C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.job-card .btn-apply:hover,
.job-card .btn-apply:focus-visible { background: #17602F; color: #fff; }
.job-card .btn-apply:focus-visible { outline: 2px solid #1B2A4A; outline-offset: 2px; }

.job-card {
    background: #fff;
    border: 1px solid #D4DDE8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(27, 42, 74, 0.08);
}
.job-card:hover { box-shadow: 0 4px 16px rgba(27, 42, 74, 0.16); }
.job-card-featured {
    border: 1px solid #E6C766;
    border-left: 3px solid #C9A227;
}

.jc-body {
    padding: 1.05rem 1.25rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.jc-body .job-card-urgent-badge { align-self: flex-start; margin-bottom: 0; }

.jc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem;
}
.jc-head-main { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.jc-head .job-card-title { margin: 0; font-size: 1.2rem; }
.jc-head .job-card-title a { color: #1B2A4A; }
.jc-head .job-card-title a:hover { color: #C8102E; }

.jc-org {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    font-size: 0.92rem;
    color: #4a4a4a;
}
.jc-logo {
    width: 28px; height: 28px;
    object-fit: contain;
    border-radius: 5px;
    background: #fff;
}
.jc-office { font-weight: 700; color: #2C5F8A; text-decoration: none; }
a.jc-office:hover { text-decoration: underline; }
.jc-dept a { color: #4a4a4a; text-decoration: none; }
.jc-dept a:hover { color: #1B2A4A; text-decoration: underline; }
.jc-vf {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 4px;
    background: #FFF8E1;
    border: 1px solid #E6C766;
    color: #6A5000;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Pay and grade — the line the eye lands on */
.jc-pay {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
}
.jc-salary { font-size: 1.22rem; font-weight: 700; color: #1B2A4A; line-height: 1.25; }
.jc-salary .salary-converted { color: #4a4a4a; }
.jc-grade {
    padding: 0.12rem 0.6rem;
    border: 1.5px solid #1B2A4A;
    border-radius: 4px;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1B2A4A;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Badges */
.jc-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.jc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 4px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
}
.jc-badge--appt      { background: #2C5F8A; color: #fff; }
.jc-badge--clearance { background: #1B2A4A; color: #fff; }
.jc-badge--sponsor   { background: #E9F5EC; color: #1F6B2D; border: 1px solid #8FC9AA; }

/* Quiet details */
.jc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.1rem;
    font-size: 0.88rem;
    color: #4a4a4a;
}
.jc-loc { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.jc-loc svg, .jc-flag { flex-shrink: 0; }
.jc-flag { display: inline-flex; }
.jc-more { font-weight: 600; color: #1A4D8A; white-space: nowrap; }
.jc-more:hover { color: #1B2A4A; }

/* Footer — dates and the action */
.jc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding: 0.65rem 1.25rem;
    border-top: 1px solid #E5E7EB;
    background: #F7F9FC;
    border-radius: 0 0 10px 10px;
}
.jc-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.86rem;
}
.jc-close { font-weight: 600; color: #1a1a1a; }
.jc-close--soon,
.jc-close--today {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 700;
}
.jc-close--soon  { background: #FFF4D6; border: 1px solid #F3C95A; color: #6D4C00; }
.jc-close--today { background: #FDECEC; border: 1px solid #F0A3A3; color: #8A1F1F; }
.jc-posted { color: #4a4a4a; }

.jc-foot .btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
}

@media (max-width: 600px) {
    .jc-body { padding: 0.9rem 0.95rem 0.8rem; }
    .jc-foot { padding: 0.65rem 0.95rem; }
    .jc-foot .btn-apply { width: 100%; }
    .jc-salary { font-size: 1.1rem; }
}