/* ============================================================
   PRINCE ALEX DIGITAL — CAREERS PAGE  (careers.css)
   Relies on /assets/css/pad.css for the design system.
   ============================================================ */

/* ---------- OPEN ROLES ---------- */
.roles-list{border-top:1px solid var(--line);}

/* Empty state — shown whenever there are no active openings.
   careers.js swaps it for the live job grid when roles are published. */
.roles-empty{
  margin-top:26px;padding:52px 30px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
  background:var(--surface);
}
.roles-empty-icon{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;font-size:1.5rem;color:var(--teal);margin-bottom:18px;
  background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.35);
}
html[data-theme="dark"] .roles-empty-icon{color:#5EEAD4;background:rgba(20,184,166,0.14);}
.roles-empty h3{font-size:1.25rem;margin-bottom:10px;}
.roles-empty p{max-width:54ch;margin:0 auto 24px;color:var(--muted);}
.roles-empty-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}

/* ---------- CTA BAND extras (component lives in pad.css) ---------- */
.cta-band-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
.cta-band .btn-ghost:hover{border-color:var(--teal-bright);color:#fff;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:600px){
  .roles-empty{padding:36px 20px;}
  .roles-empty p{margin-bottom:18px;}
}

/* ============================================================
   LIVE ROLES (published from admin, rendered by careers.js)
   ============================================================ */
.careers-status{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);margin:22px 0 0;}
.live-roles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:26px 0 6px;}
.job-card{
  display:flex;flex-direction:column;gap:16px;padding:30px 28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.job-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(20,184,166,0.5);}
.job-card[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
.job-card[data-reveal].is-visible{opacity:1;transform:translateY(0);}
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.job-title{font-size:1.14rem;margin:0 0 8px;}
.job-apply{flex:none;}
.job-chips{display:flex;flex-wrap:wrap;gap:8px;}
.job-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--royal);background:rgba(30,58,138,0.07);
  border:1px solid rgba(30,58,138,0.18);border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.job-chip i{font-size:0.78rem;}
html[data-theme="dark"] .job-chip{color:#93C5FD;background:rgba(96,165,250,0.12);border-color:rgba(96,165,250,0.25);}
.job-chip.chip-location{color:var(--teal);background:rgba(20,184,166,0.07);border-color:rgba(20,184,166,0.3);}
.job-chip.chip-salary{color:#B45309;background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.3);}
html[data-theme="dark"] .job-chip.chip-salary{color:#FCD34D;}
.job-chip.chip-deadline{color:#B91C1C;background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.25);}
html[data-theme="dark"] .job-chip.chip-deadline{color:#FCA5A5;}
.job-summary{color:var(--muted);font-size:0.95rem;margin:0;}
.job-block h3{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);margin:6px 0 10px;}
.job-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.job-list li{position:relative;padding-left:22px;font-size:0.93rem;color:var(--text);line-height:1.55;}
.job-list li::before{content:"";position:absolute;left:0;top:0.52em;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg, var(--teal), var(--royal));}

/* ---------- EXPANDABLE JOB DETAILS (View more) ---------- */
.job-summary.is-clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.job-details{display:grid;gap:16px;}
.job-details[hidden]{display:none;}
.job-toggle{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:4px 0;margin-top:2px;background:none;border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.09em;color:var(--royal);
  transition:color .18s ease;
}
.job-toggle:hover{color:var(--teal);}
.job-toggle-icon{display:inline-flex;font-size:0.7rem;transition:transform .25s ease;}
.job-card.is-open .job-toggle-icon{transform:rotate(180deg);}
.job-card.is-open{border-color:rgba(20,184,166,0.5);}

/* ============================================================
   APPLICATION FORM (FormSubmit AJAX → princealexdigital@gmail.com)
   ============================================================ */
.apply-card{
  max-width:860px;margin:0 auto;padding:40px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:0.84rem;font-weight:600;color:var(--text);margin-bottom:6px;}
.form-field label em{color:#DC2626;font-style:normal;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:12px 14px;font:inherit;font-size:0.95rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}
.form-field select{cursor:pointer;}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field-full{grid-column:1 / -1;}

/* CV upload — file input styled as a drop zone (transparent input covers the card) */
.cv-upload{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:30px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
  background:var(--bg);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cv-upload:hover,.cv-upload.is-dragover{border-color:var(--royal);background:rgba(37,99,235,0.04);}
.cv-upload:focus-within{border-color:var(--royal);box-shadow:0 0 0 3px rgba(37,99,235,0.15);}
.cv-upload > i{font-size:1.5rem;color:var(--royal);margin-bottom:6px;}
.cv-upload-title{font-size:0.92rem;font-weight:600;color:var(--text);margin:0;}
.cv-upload-hint{font-size:0.8rem;color:var(--muted);margin:0;}
.cv-upload.is-filled{border-style:solid;border-color:rgba(13,148,136,0.55);background:rgba(13,148,136,0.05);}
.cv-upload.is-filled > i{color:var(--teal);}
.cv-upload.is-error{border-style:solid;border-color:rgba(220,38,38,0.55);background:rgba(220,38,38,0.04);}
.cv-upload input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  opacity:0;cursor:pointer;border:none;background:transparent;
}
html[data-theme="dark"] .cv-upload:hover,html[data-theme="dark"] .cv-upload.is-dragover{background:rgba(99,102,241,0.08);}
.form-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.form-note{font-size:0.82rem;color:var(--muted);max-width:36ch;margin:0;}
.apply-alert{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:13px 16px;
  border-radius:var(--radius-md);font-size:0.9rem;font-weight:600;
}
.apply-alert.is-success{background:rgba(13,148,136,0.1);color:#0F766E;border:1px solid rgba(13,148,136,0.3);}
.apply-alert.is-error{background:rgba(220,38,38,0.08);color:#B91C1C;border:1px solid rgba(220,38,38,0.3);}
html[data-theme="dark"] .apply-alert.is-success{color:#5EEAD4;}
html[data-theme="dark"] .apply-alert.is-error{color:#FCA5A5;}
.apply-alert[hidden]{display:none;}
.form-submit{position:relative;}
.form-submit .btn-spinner{
  display:none;width:16px;height:16px;flex:none;margin-left:8px;
  border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;
  animation:submit-spin .7s linear infinite;
}
.form-submit.is-loading .btn-spinner{display:inline-block;}
@keyframes submit-spin{to{transform:rotate(360deg);}}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}
.apply-success{text-align:center;padding:26px 10px 10px;}
.apply-success-icon{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;font-size:1.9rem;color:#0F766E;margin-bottom:16px;
  background:rgba(13,148,136,0.12);border:1px solid rgba(13,148,136,0.35);
}
html[data-theme="dark"] .apply-success-icon{color:#5EEAD4;background:rgba(20,184,166,0.14);}
.apply-success h3{margin-bottom:8px;}
.apply-success p{color:var(--muted);max-width:42ch;margin:0 auto 22px;}
.apply-success[hidden]{display:none;}

/* ---------- RESPONSIVE (live roles + apply form) ---------- */
@media (max-width:880px){.live-roles-grid{grid-template-columns:1fr;}}
@media (max-width:600px){
  .live-roles-grid{grid-template-columns:1fr;gap:18px;}
  .job-card{padding:24px 20px;}
  .apply-card{padding:26px 20px;}
  .apply-grid{grid-template-columns:1fr;}
  .form-footer{flex-direction:column;align-items:stretch;}
  .form-note{max-width:none;}
}