/* ============================================================
   BILLITON — Careers / Join Us page styles
   ============================================================ */

/* Hero accent */
.careers-hero { background: linear-gradient(160deg, var(--navy) 0%, #1a3a5c 50%, #0f2d1f 100%); }

/* Stats bar */
.careers-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; margin:48px 0; }
.careers-stat { text-align:center; }
.careers-stat .cs-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--green); }
.careers-stat .cs-lbl { font-size:.88rem; color:var(--muted); margin-top:4px; }

/* Filter bar */
.dept-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.dept-filter { padding:8px 20px; border-radius:999px; border:1.5px solid var(--line); font-size:.88rem;
  font-weight:600; cursor:pointer; background:#fff; color:var(--navy); transition:.2s; font-family:var(--font-body); }
.dept-filter:hover, .dept-filter.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* Job accordion */
.jobs-list { display:flex; flex-direction:column; gap:16px; }
.job-card {
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .25s, border-color .25s;
}
.job-card:hover { box-shadow:var(--shadow); border-color:#c8d8f0; }
.job-card.open { border-color:var(--green); box-shadow:0 8px 32px rgba(33,160,90,.12); }

.job-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 28px; cursor:pointer; user-select:none;
}
.job-header-left { flex:1; min-width:0; }
.job-title { font-family:var(--font-display); font-size:1.18rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.job-meta { display:flex; gap:12px; flex-wrap:wrap; }
.job-tag {
  display:inline-flex; align-items:center; gap:5px; padding:3px 12px;
  border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.04em;
}
.jt-dept { background:rgba(91,141,217,.12); color:#2a5ea0; }
.jt-loc  { background:rgba(33,160,90,.1); color:#18753f; }
.jt-type { background:rgba(240,180,41,.15); color:#8a6000; }
.jt-open { background:rgba(27,42,74,.08); color:var(--navy); }

.job-chevron {
  width:34px; height:34px; border-radius:50%; background:var(--bg-soft);
  display:grid; place-items:center; flex-shrink:0; transition:transform .3s, background .2s;
}
.job-card.open .job-chevron { transform:rotate(180deg); background:var(--green); color:#fff; }
.job-chevron svg { stroke:currentColor; transition:stroke .2s; }
.job-card.open .job-chevron svg { stroke:#fff; }

.job-body { display:none; padding:0 28px 28px; }
.job-card.open .job-body { display:block; }

.job-body-grid { display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }

.job-detail-section { margin-bottom:20px; }
.job-detail-section h4 { font-family:var(--font-display); font-size:.92rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); margin-bottom:10px; }
.job-detail-section p, .job-detail-section ul { color:#2c3a55; font-size:.96rem; line-height:1.75; }
.job-detail-section ul { padding-left:20px; }
.job-detail-section li { margin-bottom:6px; }

.job-info-card {
  background:var(--bg-soft); border-radius:12px; padding:22px 20px; border:1px solid var(--line);
}
.job-info-row { display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:.9rem; }
.job-info-row:last-child { border:0; }
.job-info-row span:first-child { color:var(--muted); }
.job-info-row span:last-child { font-weight:600; color:var(--navy); text-align:right; }

/* Apply form */
.apply-form-wrap {
  margin-top:28px; padding-top:28px; border-top:1.5px dashed var(--line);
}
.apply-form-wrap h3 { font-family:var(--font-display); font-size:1.2rem; color:var(--navy); margin-bottom:20px; }
.apply-form-wrap .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.apply-form-wrap .form-group { margin-bottom:14px; }
.apply-form-wrap label { font-size:.85rem; font-weight:600; color:var(--navy); display:block; margin-bottom:6px; }
.apply-form-wrap input, .apply-form-wrap textarea, .apply-form-wrap select {
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:9px;
  font-family:var(--font-body); font-size:.92rem; background:#fff;
}
.apply-form-wrap input:focus, .apply-form-wrap textarea:focus { outline:none; border-color:var(--green); }
.apply-success { background:#e8f8ef; border:1px solid #b3e6c8; color:#18753f;
  padding:14px 18px; border-radius:10px; font-weight:500; margin-bottom:16px; }

/* Share buttons */
.share-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.share-bar span { font-size:.85rem; font-weight:600; color:var(--muted); }
.share-btn {
  display:inline-flex; align-items:center; gap:7px; padding:7px 16px;
  border-radius:999px; font-size:.8rem; font-weight:600; border:1.5px solid var(--line);
  cursor:pointer; background:#fff; color:var(--navy); transition:.15s; font-family:var(--font-body);
  text-decoration:none;
}
.share-btn:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.share-btn.wa { border-color:#25D366; color:#25D366; }
.share-btn.wa:hover { background:#25D366; color:#fff; }
.share-btn.li { border-color:#0077B5; color:#0077B5; }
.share-btn.li:hover { background:#0077B5; color:#fff; }
.share-btn.fb { border-color:#1877F2; color:#1877F2; }
.share-btn.fb:hover { background:#1877F2; color:#fff; }
.share-btn.tw { border-color:#000; color:#000; }
.share-btn.tw:hover { background:#000; color:#fff; }

/* No jobs */
.no-jobs { text-align:center; padding:60px 20px; color:var(--muted); }
.no-jobs h3 { color:var(--navy); margin-bottom:10px; }

/* Home careers teaser */
.careers-teaser {
  background:linear-gradient(135deg, #0f2d1f 0%, var(--navy) 60%);
  border-radius:20px; padding:52px 48px;
  display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center;
}
.careers-teaser h2 { color:#fff; margin-bottom:10px; }
.careers-teaser p { color:rgba(255,255,255,.82); max-width:520px; }
.careers-teaser .btn-white { background:#fff; color:var(--navy); font-weight:700; }
.careers-teaser .btn-white:hover { background:#f0f4fa; }

@media (max-width:860px) {
  .job-body-grid { grid-template-columns:1fr; }
  .careers-teaser { grid-template-columns:1fr; padding:36px 24px; }
  .apply-form-wrap .form-row { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .job-header { padding:18px 18px; }
  .job-body { padding:0 18px 22px; }
}