/*
CHANGE LOG
File: static/css/recruiting-steps.css
Purpose: The four-step reading bar on the recruiting sales pages (templates/sections/_recruiting_steps.html).
How it works: one row of four links; the current page is filled; on phones the steps wrap two by two.
Version History:
  2026-11-07 v1.0 - Created.
*/
.rs-steps{ max-width:1160px; margin:12px auto 8px; padding:0 16px; }
.rs-steps ol{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; padding:0; }
.rs-steps a{ display:block; height:100%; padding:.5rem .7rem; border:1px solid #D9E3EA; border-radius:8px; background:#fff;
  color:var(--color-navy-deep,#14213d); font-weight:600; text-decoration:none; line-height:1.3; }
.rs-steps a:hover{ border-color:#3F6657; }
.rs-steps a:focus-visible{ outline:3px solid #163457; outline-offset:2px; }
.rs-num{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-mute,#4a5872); }
.rs-current a{ background:var(--color-green,#3F6657); border-color:var(--color-green,#3F6657); color:#fff; }
.rs-current .rs-num{ color:#e6efe9; }
@media (max-width:700px){ .rs-steps ol{ grid-template-columns:repeat(2,1fr); } }