/* ACCU Staffing job board — shared brand styles
   Brand tokens pulled from accustaffing.com */
:root{
  --accu-red:#DC4A2E;
  --accu-red-dk:#B83A22;
  --accu-red-tint:#FBE9E4;
  --accu-red-tint-bd:#F3C9BD;
  --accu-navy:#1F2C5C;
  --accu-bg:#F4F5F6;
  --accu-bd:#E4E6E9;
  --accu-muted:#6B7280;
  --accu-text:#374151;
  --accu-pill-bg:#EEF0F5;
  --radius:12px;
  --radius-sm:8px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--accu-bg);
  color:var(--accu-navy);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.ttl{ font-family:'Poppins',sans-serif; color:var(--accu-navy); margin:0; }
a{ color:inherit; }

.wrap{ max-width:1080px; margin:0 auto; padding:28px 20px 56px; }

/* ---------- Page header ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.eyebrow{ font-family:'Poppins',sans-serif; font-size:13px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--accu-red); }
.page-head h1{ font-size:32px; font-weight:600; margin-top:2px; }
.page-head .sub{ font-size:15px; color:var(--accu-muted); margin-top:5px; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--accu-bd); border-radius:var(--radius); padding:20px 22px; }

/* ---------- Tags ---------- */
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:4px 11px; border-radius:6px; font-weight:500; white-space:nowrap; }
.t-cat{ background:var(--accu-red-tint); color:var(--accu-red-dk); }
.t-loc{ background:var(--accu-pill-bg); color:var(--accu-navy); }
.t-type{ background:var(--accu-pill-bg); color:#41507A; }
.t-new{ background:var(--accu-red); color:#fff; }

/* ---------- Buttons ---------- */
.btn-red{ background:var(--accu-red); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 22px; height:42px;
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; transition:background .15s; }
.btn-red:hover{ background:var(--accu-red-dk); }
.btn-out{ background:#fff; color:var(--accu-navy); border:1px solid var(--accu-bd); border-radius:var(--radius-sm); padding:0 16px; height:42px;
  font-family:'Inter',sans-serif; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; transition:border-color .15s; }
.btn-out:hover{ border-color:var(--accu-navy); }

/* ---------- Filter bar (board) ---------- */
.filters{ margin-bottom:18px; }
.filter-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:14px; }
.field-label{ font-size:12px; color:var(--accu-muted); display:block; margin-bottom:5px; }
.field{ width:100%; height:42px; border:1px solid var(--accu-bd); border-radius:var(--radius-sm); padding:0 12px;
  font-family:inherit; font-size:14px; color:var(--accu-navy); background:#fff; }
.field:focus{ outline:none; border-color:var(--accu-navy); }
.search-wrap{ position:relative; }
.search-wrap .ti{ position:absolute; left:11px; top:12px; color:var(--accu-muted); font-size:18px; }
.search-wrap .field{ padding-left:34px; }
select.field{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; }

/* ---------- View toggle ---------- */
.view-toggle{ display:flex; gap:6px; align-items:center; }
.toggle-btn{ height:34px; width:38px; border:1px solid var(--accu-bd); background:#fff; border-radius:var(--radius-sm);
  color:var(--accu-muted); cursor:pointer; font-size:17px; display:inline-flex; align-items:center; justify-content:center; }
.toggle-btn.on{ background:var(--accu-navy); color:#fff; border-color:var(--accu-navy); }

/* ---------- Results meta ---------- */
.results-bar{ display:flex; justify-content:space-between; align-items:center; margin:0 2px 14px; }
.results-bar .count{ font-size:14px; font-weight:500; }
.results-bar .sortnote{ font-size:13px; color:var(--accu-muted); }

/* ---------- Job list / grid ---------- */
.jobs.list{ display:flex; flex-direction:column; gap:10px; }
.jobs.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.job{ border-left:4px solid var(--accu-red); display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap;
  border-radius:var(--radius); text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .15s, transform .05s; }
.job:hover{ box-shadow:0 2px 14px rgba(31,44,92,.08); }
.jobs.grid .job{ flex-direction:column; align-items:stretch; }
.jobs.grid .job .job-actions{ width:100%; }
.job-title{ font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:var(--accu-navy); }
.job-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.job-meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:11px; font-size:13px; color:var(--accu-muted); }
.job-meta .pay{ color:var(--accu-navy); font-weight:500; }
.job-meta .jid{ color:var(--accu-navy); font-weight:500; }
.job-actions{ display:flex; gap:8px; align-items:center; }

/* ---------- States ---------- */
.state{ text-align:center; color:var(--accu-muted); padding:48px 20px; font-size:15px; }
.state .ti{ font-size:34px; display:block; margin-bottom:10px; color:var(--accu-bd); }
.skeleton{ background:#fff; border:1px solid var(--accu-bd); border-radius:var(--radius); height:96px; position:relative; overflow:hidden; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(31,44,92,.05),transparent); animation:sweep 1.2s infinite; }
@keyframes sweep{ 100%{ transform:translateX(100%); } }
.skeleton + .skeleton{ margin-top:10px; }

/* ---------- Detail page ---------- */
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--accu-muted); font-size:14px; text-decoration:none; margin-bottom:16px; }
.back-link:hover{ color:var(--accu-navy); }
.detail-head{ border-left:5px solid var(--accu-red); margin-bottom:16px; }
.detail-head .top{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.detail-head h1{ font-size:28px; font-weight:600; margin:0 0 12px; }
.detail-grid{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:16px; align-items:start; }
.sec{ margin-bottom:16px; }
.sec h2{ font-size:18px; font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.sec h2 .ti{ color:var(--accu-red); font-size:20px; }

/* Free-form description from Avionté rendered here.
   Avionté sends its own (often serif) inline formatting — we neutralize that so
   the description reads in the site font, with comfortable spacing and clean bullets. */
.jobdesc{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:var(--accu-text); }
.jobdesc *{ font-family:inherit !important; }
.jobdesc p{ margin:0 0 14px; }
.jobdesc h1,.jobdesc h2,.jobdesc h3{
  font-family:'Poppins',sans-serif !important; font-size:15px; font-weight:600;
  color:var(--accu-navy); margin:24px 0 11px; padding-bottom:7px; border-bottom:1px solid var(--accu-bd); }
.jobdesc ul{ list-style:none; margin:0 0 16px; padding-left:2px; }
.jobdesc ul li{ position:relative; padding-left:22px; margin-bottom:9px; }
.jobdesc ul li::before{ content:""; position:absolute; left:4px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accu-red); }
.jobdesc ol{ margin:0 0 16px; padding-left:22px; }
.jobdesc ol li{ margin-bottom:9px; }
.jobdesc strong,.jobdesc b{ font-weight:600; color:var(--accu-navy); }
.jobdesc a{ color:var(--accu-red-dk); }
.jobdesc img{ max-width:100%; height:auto; }

/* Local branch photo shown at the bottom of a job description */
.branch-card{ display:flex; gap:18px; align-items:center; margin-top:24px; padding-top:22px; border-top:1px solid var(--accu-bd); }
.branch-photo{ width:210px; height:136px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.branch-eyebrow{ font-family:'Poppins',sans-serif; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accu-red); margin-bottom:4px; }
.branch-name{ font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:var(--accu-navy); margin-bottom:8px; }
.branch-link{ font-size:14px; font-weight:500; color:var(--accu-red-dk); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.branch-link:hover{ text-decoration:underline; }
@media (max-width:520px){
  .branch-card{ flex-direction:column; align-items:stretch; }
  .branch-photo{ width:100%; height:190px; }
}

.summary .row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--accu-bd); font-size:13px; }
.summary .row:last-of-type{ border-bottom:none; }
.summary .row .k{ color:var(--accu-muted); }
.summary .row .v{ color:var(--accu-navy); font-weight:500; text-align:right; }
.contact-card{ background:var(--accu-navy); border-color:var(--accu-navy); color:#fff; }
.contact-card h3{ color:#fff; font-size:15px; font-weight:600; }
.contact-card .line{ font-size:13px; color:#fff; display:flex; align-items:center; gap:8px; margin:8px 0; }
.contact-card .line .ti{ color:var(--accu-red); }
.cta-banner{ text-align:center; background:var(--accu-red-tint); border-color:var(--accu-red-tint-bd); margin-top:16px; }
.cta-banner h3{ font-size:18px; font-weight:600; color:var(--accu-red-dk); margin-bottom:6px; }
.cta-banner p{ font-size:14px; color:#8A3320; margin:0 0 14px; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .filter-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr; }
  .page-head h1{ font-size:26px; }
  .job-actions{ width:100%; }
  .job-actions .btn-red,.job-actions .btn-out{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  .skeleton::after{ animation:none; }
  .job{ transition:none; }
}