/*
 * pages.css — components for the two hand-built employer/verification templates
 * (page-for-employers.php, page-how-verification-works.php).
 *
 * WHY A SECOND SHEET. style.css is the site-wide design system and is enqueued on
 * every request. These four components are used by exactly two pages, so they are
 * loaded by those two pages — enqueued from inside each template, before
 * get_header(), with a filemtime() version. functions.php is untouched by design:
 * another lane owns it.
 *
 * WHAT IS AND IS NOT HERE. Nothing here re-declares a colour, a radius, a shadow,
 * a duration or a font — every value below resolves through the semantic tokens
 * style.css already publishes (--brand, --line, --muted, --accent-text, --radius,
 * --dur-color, --font-display, --font-mono …). A component that needed a new
 * primitive would belong in style.css, not in a per-page sheet; if one of these
 * ever earns a third caller, move it there rather than importing this file.
 *
 * Existing components are reused rather than reimplemented: .card, .grid, .g-2,
 * .g-3, .btn, .btn-row, .kicker, .cta-band, .chip, .check, .stat, .sector-index,
 * .page-head and .prose all come from style.css unchanged.
 *
 * Mobile-first. Every rule below is the small-screen rule; the one @media block
 * widens the stepper at 761px, the same 760px breakpoint the rest of the theme
 * uses. Nothing here animates layout, so there is no shift to avoid — the two
 * transitions are colour and a chevron rotation, both dropped under
 * prefers-reduced-motion at the foot of this file.
 */

/* ============================ STEPPER ============================
   The "Brief → Shortlist → Place" sequence and the verification flow. These were
   three equal .card boxes and a run of <h2>s respectively: both state a SEQUENCE
   and neither showed one. A numbered node on a hairline rail does, and it costs
   no JavaScript and no image.

   Vertical by default — a rail that reads top-to-bottom is the honest shape on a
   phone, and it is also the right shape for the verification flow at any width
   (those steps carry lists and disclosures, which a 1/3-width column mangles).
   .is-row opts a short three-step sequence into a horizontal rail on wide
   screens; without it the stepper stays vertical everywhere. */
.vf-stepper{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0}
.vf-stepper>li{position:relative;padding:0 0 30px 56px}
.vf-stepper>li:last-child{padding-bottom:0}
.vf-step-n{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1}
/* The rail is drawn on the item, not between items, so it can never outlive the
   last step — :not(:last-child) is the whole guard. */
.vf-stepper>li:not(:last-child)::before{content:"";position:absolute;left:18px;top:42px;bottom:6px;
  width:2px;background:var(--line);border-radius:2px}
.vf-stepper h3{font-size:1.12rem;margin:.4rem 0 .3rem}
.vf-stepper>li>p{color:var(--muted);font-size:.95rem;margin:0;max-width:62ch}
/* A stepper column is a measure, not a container: the ruled lists and disclosures
   inside a step are held to the same reading width as its prose, so a 1,180px
   viewport does not stretch a five-row list to 1,000px of hairline. */
.vf-stepper .vf-reglist,.vf-stepper .vf-disclose,.vf-stepper .vf-callout{max-width:68ch}
.vf-step-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:38px}
.vf-step-head h3{margin:0}

@media (min-width:761px){
  .vf-stepper.is-row{grid-template-columns:repeat(3,1fr);column-gap:26px}
  .vf-stepper.is-row>li{padding:54px 0 0}
  .vf-stepper.is-row>li:not(:last-child)::before{left:44px;right:-26px;top:18px;bottom:auto;
    width:auto;height:2px}
}

/* ============================ DISCLOSURE ============================
   Native <details>/<summary>: open/close with zero JavaScript, keyboard-operable
   for free, and — the reason it is native rather than scripted — every panel is
   in the DOM and findable by in-page search and by a crawler whether or not it is
   open. Reuses .trust's hairline-ruled ledger texture rather than adding a third
   surface treatment. */
.vf-disclose{margin:24px 0 0;border-top:1px solid var(--line)}
.vf-disclose details{border-bottom:1px solid var(--line)}
.vf-disclose summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 4px;font-family:var(--font-display);font-weight:700;font-size:1.04rem;color:var(--ink);
  transition:color var(--dur-color) var(--ease-fast)}
.vf-disclose summary::-webkit-details-marker{display:none}
.vf-disclose summary::marker{content:""}
.vf-disclose summary:hover,.vf-disclose summary:focus-visible{color:var(--accent-text)}
.vf-disclose summary>.check{flex:0 0 auto}
.vf-disclose-caret{margin-left:auto;flex:0 0 auto;width:1rem;height:1rem;color:var(--muted);
  transition:transform var(--dur-natural) var(--ease-fast)}
.vf-disclose details[open] .vf-disclose-caret{transform:rotate(180deg)}
.vf-disclose-body{margin:0;padding:0 4px 18px 34px;color:var(--muted);font-size:.95rem;
  line-height:1.6;max-width:62ch}

/* ============================ REGISTER LIST ============================
   A named register and what it is checked against, one ruled row each. Same
   "these are DATA" reasoning as .sector-index-spec: the term is set in the
   display face, the detail in mono, so the row reads as a record rather than a
   nav link. */
.vf-reglist{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.vf-reglist li{display:flex;flex-direction:column;gap:3px;padding:13px 4px;
  border-bottom:1px solid var(--line)}
.vf-reglist b{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.vf-reglist span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--muted);line-height:1.5}

/* ============================ OFFER CARD ============================
   .card with its action pinned to the foot, so two cards of unequal copy still
   line their buttons up. */
.vf-offer{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%}
.vf-offer h3{margin:0}
.vf-offer p{color:var(--muted);font-size:.95rem;margin:0}
.vf-offer .btn{margin-top:auto}
/* Same trick for the price line on the engagement cards, so three cards of unequal
   copy still line their figures up. */
.vf-price{margin:0;margin-top:auto;padding-top:.6rem}

/* ============================ SECTOR ROW, UNLINKED ============================
   .sector-index carries its grid on the <a>, which is correct: every row on the
   homepage has a hub. Here a sector whose hub Page does not exist yet renders as a
   <div> instead, and without this it would fall back to a stacked block in the
   middle of a ruled table. Same grid, same gutters, none of the link affordances —
   no hover ground, no accent, no chevron. */
.vf-sector-row{display:grid;grid-template-columns:minmax(190px,auto) 1fr auto;align-items:center;
  gap:20px;padding:17px 14px;color:var(--ink)}
@media (max-width:720px){
  .vf-sector-row{grid-template-columns:1fr;gap:7px;padding:15px 10px}
}

/* ============================ INLINE NOTE ============================
   .prose .callout, available outside .prose — these templates build their own
   layout and never enter the prose column. */
.vf-callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);padding:18px 22px;margin:18px 0 0;color:var(--ink-soft);
  font-size:.95rem;line-height:1.6;max-width:70ch}
.vf-callout p{margin:0;color:inherit}

@media (prefers-reduced-motion:reduce){
  .vf-disclose summary,.vf-disclose-caret{transition:none}
}