/* ==========================================================================
   NDAYA CHAUFFEURS — Careers page additions
   Loaded only on /careers/, on top of the main stylesheet. Reuses existing
   design tokens (--gold, --black-card, --radius, etc.) from style.css.
   ========================================================================== */

.job-list{display:grid;gap:20px;margin-top:32px}

.job-tier-heading{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--gold);
  margin:36px 0 4px;
}

.job-card{
  background:var(--black-card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:30px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  transition:all .3s var(--ease);
}
.job-card:hover{border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.job-card-title{font-family:var(--font-display);font-size:1.3rem;color:var(--white);margin-bottom:10px}
.job-meta{display:flex;flex-wrap:wrap;gap:10px}
.job-summary{color:#C9C7C0;font-size:.92rem;margin-top:12px;max-width:640px}
.job-card-actions{flex-shrink:0}

.job-details-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  background:none;
  border:none;
  padding:0;
  color:var(--gold);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  text-transform:uppercase;
}
.job-details-toggle:hover{color:var(--white)}
.job-details-toggle .chev{transition:transform .2s var(--ease);font-size:.7rem}
.job-details-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.job-details-panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#C9C7C0;
  font-size:.9rem;
  line-height:1.7;
  max-width:640px;
}

.empty-state{
  background:var(--black-card);
  border:1px dashed var(--gold-dim);
  border-radius:var(--radius);
  padding:48px 32px;
  text-align:center;
}
.empty-state h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:10px;color:var(--white)}
.empty-state p{color:#C9C7C0;max-width:480px;margin:0 auto}

.general-app-card{
  background:rgba(201,168,76,.06);
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:28px 32px;
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.general-app-card p{color:#C9C7C0;font-size:.92rem;max-width:520px}

.upload-field{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:10px;
  padding:18px;
  background:rgba(255,255,255,.02);
  font-size:.85rem;
  color:#B9B7AF;
}
.upload-field input[type="file"]{
  width:100%;
  color:#C9C7C0;
  font-size:.86rem;
}
.upload-hint{font-size:.76rem;color:#8E8C85;margin-top:6px}

/* Fix: the position <select>'s near-transparent background isn't dark enough
   for Chrome/Edge/Firefox to auto-detect a dark theme for the native
   dropdown popup, so it renders with a white list. color-scheme:dark alone
   is unreliable on mobile browsers (some render the popup background light
   but the text white, making options invisible), so set explicit colors on
   both the select and its options as a more consistent cross-browser fix. */
.field select{color-scheme:dark;background-color:#0A0A0A;color:#FFFFFF;}
.field select option{background-color:#0A0A0A;color:#FFFFFF;}

@media (max-width:640px){
  .job-card,.general-app-card{flex-direction:column;align-items:flex-start}
  .job-card-actions{width:100%}
  .job-card-actions .btn{width:100%}
}