/*
Theme Name: The Staffing Guide
Description: Theme for an independent job-seeker guide to staffing agencies and temp work. Not an agency.
Version: 2.0
*/

/* ──────────────────────────────────────────────────────────────────
   Two widths on purpose: prose stays ~68ch for readability, while
   index/grid pages get the full canvas. A single 720px container made
   the card grids look sparse and stranded on a wide screen.
   ────────────────────────────────────────────────────────────────── */
:root{
  --ink:#16202b; --ink2:#22303f;
  --accent:#0f6f7a; --accent2:#189aa8; --gold:#e0a63c;
  --text:#1b2530; --muted:#5d6b78; --bg:#f6f8fa; --card:#fff;
  --line:#e0e6ec;
  --shadow:0 1px 2px rgba(36,31,26,.05), 0 8px 22px -14px rgba(36,31,26,.28);
  --read:min(72ch,100%); --wide:min(1180px,100%);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#0a1119; --ink2:#131e29;
    --accent:#3fc0cf; --accent2:#74d8e3; --gold:#e9bc5e;
    --text:#e6edf3; --muted:#98a7b4; --bg:#0d141b; --card:#151e27;
    --line:#233040;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *{animation:none!important;transition:none!important}
}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:clamp(16.5px,1rem + .2vw,18.5px);line-height:1.72;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;letter-spacing:-.015em;line-height:1.24}

.wrap{width:var(--read);margin-inline:auto;padding-inline:22px}
.wrap-wide{width:var(--wide);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.75rem 1.1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* ── header ─────────────────────────────────────────────────────── */
.site-head{background:var(--ink);position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.07)}
.site-head .bar{width:var(--wide);margin-inline:auto;padding:.85rem 22px;
  display:flex;align-items:center;gap:1.2rem}
.brand{font-size:1.24rem;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent2)}
.site-head nav{margin-left:auto;display:flex;gap:1.3rem;flex-wrap:wrap;row-gap:.1rem;justify-content:flex-end;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-head nav::-webkit-scrollbar{display:none}
.site-head nav a{font-family:system-ui,sans-serif;font-size:.85rem;color:#b5aaa0;
  text-decoration:none;white-space:nowrap;display:flex;align-items:center;min-height:40px}
.site-head nav a:hover{color:#fff}
@media(max-width:760px){
  .site-head{position:static}
  .site-head .bar{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.75rem 20px}
  /* wrap instead of side-scrolling: off-screen nav items are unreachable on a phone */
  .site-head nav{margin-left:0;width:100%;gap:1.05rem;overflow-x:visible;flex-wrap:wrap;row-gap:.1rem}
  .site-head nav a{font-size:.8rem;min-height:36px}
}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{background:
   radial-gradient(90% 130% at 88% 0%, rgba(24,154,168,.20), transparent 60%),
   linear-gradient(158deg,var(--ink) 0%,var(--ink2) 100%);
  color:#fff;padding:clamp(40px,6vw,74px) 0 clamp(36px,5vw,62px)}
.hero h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);margin-bottom:14px}
.hero p{color:#cabdb1;font-size:clamp(1rem,.96rem + .3vw,1.16rem);max-width:64ch}
.hero .kicker{font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent2);margin-bottom:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:26px}
.btn{font-family:system-ui,sans-serif;font-size:.9rem;font-weight:600;text-decoration:none;
  padding:.72rem 1.25rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#e8ded4}
.btn-ghost:hover{border-color:#fff;color:#fff}

/* ── breadcrumbs ────────────────────────────────────────────────── */
.crumbs{font-family:system-ui,sans-serif;font-size:.79rem;margin-bottom:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem;opacity:.55}
.crumbs a{color:#cabdb1;text-decoration:none}
.crumbs a:hover{text-decoration:underline;color:#fff}
.crumbs [aria-current]{color:#fff;opacity:.9}

/* ── sections ───────────────────────────────────────────────────── */
main{padding:clamp(34px,4vw,56px) 0 12px}
.section{margin-bottom:clamp(40px,5vw,64px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:6px}
.section-head h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem)}
.section-head a{font-family:system-ui,sans-serif;font-size:.86rem;text-decoration:none;white-space:nowrap}
.section-head a:hover{text-decoration:underline}
.section-intro{color:var(--muted);max-width:70ch;margin-bottom:20px}

/* ── cards ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.4vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .cat-label{font-family:system-ui,sans-serif;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.card h3{font-size:1.06rem;margin-bottom:8px;color:var(--text)}
.card p{font-family:system-ui,sans-serif;font-size:.89rem;color:var(--muted);line-height:1.6;margin:0}
.card .more{font-family:system-ui,sans-serif;font-size:.82rem;color:var(--accent);
  margin-top:auto;padding-top:14px}
.card-feature{padding:26px 26px 24px}
.card-feature h3{font-size:1.24rem}
.card-feature .n{font-family:system-ui,sans-serif;font-weight:700;font-size:.72rem;
  color:var(--accent);letter-spacing:.12em;margin-bottom:10px}

/* ── prose ──────────────────────────────────────────────────────── */
article h2{font-size:clamp(1.24rem,1.1rem + .5vw,1.5rem);margin:34px 0 10px}
article h3{font-size:1.08rem;margin:24px 0 6px}
article p{margin-bottom:16px}
article p.lede{font-size:1.1rem;color:var(--text)}
article ul,article ol{margin:0 0 16px 1.25rem}
article li{margin-bottom:8px}
a.autolink{text-decoration:underline;text-decoration-thickness:1px}
.takeaway{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:17px 20px;margin:26px 0;box-shadow:var(--shadow)}
.takeaway p{margin:0;font-size:.98rem}
.faq-item{border-top:1px solid var(--line);padding-top:15px;margin-top:15px}
.faq-item h3{margin-top:0}
.faq-item p{font-size:.97rem;color:var(--muted)}

.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:17px 21px;margin:0 0 30px;font-family:system-ui,sans-serif;box-shadow:var(--shadow)}
.toc-h{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.toc ol{margin:0;padding-left:1.15rem}
.toc li{margin-bottom:6px}
.toc a{font-size:.92rem;text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ── prev/next ──────────────────────────────────────────────────── */
.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:38px;
  font-family:system-ui,sans-serif}
@media(max-width:600px){.adjacent{grid-template-columns:1fr}}
.adj{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  text-decoration:none;color:var(--text);font-weight:700;font-size:.95rem;min-height:44px}
.adj:hover{border-color:var(--accent)}
.adj span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:5px}
.adj.next{text-align:right}
@media(max-width:600px){.adj.next{text-align:left}}

/* ── lists ──────────────────────────────────────────────────────── */
.post-list{list-style:none}
.post-list li{border-bottom:1px solid var(--line);padding:17px 0}
.post-list a{font-size:1.1rem;font-weight:700;text-decoration:none;color:var(--text)}
.post-list a:hover{color:var(--accent)}
.post-list p{font-family:system-ui,sans-serif;font-size:.92rem;color:var(--muted);margin:5px 0 0}

/* ── question strip, built from the FAQs already in the posts ───── */
.qa{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.qa a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 18px;
  text-decoration:none;color:var(--text);font-size:.95rem;display:flex;gap:.6rem;
  box-shadow:var(--shadow);font-family:system-ui,sans-serif;line-height:1.5}
.qa a:hover{border-color:var(--accent)}
.qa .mark{color:var(--accent);font-weight:700;flex:none}

/* ── callout ────────────────────────────────────────────────────── */
.callout{background:linear-gradient(150deg,var(--ink),var(--ink2));color:#fff;
  border-radius:18px;padding:clamp(24px,3vw,38px)}
.callout h2{color:#fff;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin-bottom:10px}
.callout p{color:#cabdb1;max-width:62ch;margin-bottom:0}
.callout .hero-actions{margin-top:20px}

/* ── footer ─────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);margin-top:52px;padding:30px 0 46px;
  font-family:system-ui,sans-serif;font-size:.86rem;color:var(--muted)}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--accent);text-decoration:underline}
.site-foot .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  margin-bottom:22px}
.site-foot h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text);
  margin-bottom:9px}
.site-foot .cols a{display:block;padding:.28rem 0;min-height:32px}
.site-foot .fine{border-top:1px solid var(--line);padding-top:16px}

table{display:block;overflow-x:auto;max-width:100%}

/* first-person/agency voice never appears; this notice does, on every page */
.nonaffil{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:15px 18px;margin-bottom:20px;font-size:.85rem;color:var(--muted);line-height:1.6}
.nonaffil strong{color:var(--text)}