/* ============================================================
   A9 BUSINESS — site.css (V2 local build)
   Additive layer ON TOP of the canonical ../../../a9.css (copied unchanged at build).
   Only what a9.css lacks: skip link, mobile menu, generated-form styling, preview result.
   Tokens come from a9.css :root — no new colours are introduced.
   ============================================================ */

/* ---- Accessibility ---- */
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--brand);color:var(--on-brand);padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip-link:focus{left:0;text-decoration:none}
.nav-links a[aria-current="page"]:not(.btn){color:var(--ink);box-shadow:0 2px 0 var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Mobile menu (native <details>, no JS) ---- */
.nav-menu{display:none;margin-left:auto;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:.55rem .8rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu[open] summary{background:var(--surface-2);color:var(--ink)}
.nav-menu .menu-panel{position:absolute;right:0;top:calc(100% + .5rem);min-width:220px;display:grid;gap:.15rem;padding:.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.nav-menu .menu-panel a{padding:.6rem .8rem;border-radius:var(--radius-sm);color:var(--ink);font-weight:500}
.nav-menu .menu-panel a:hover{background:var(--surface-2);text-decoration:none}
@media(max-width:860px){
  .nav-menu{display:block}
  .nav-links{margin-left:.75rem}
  .nav{gap:.5rem}
}
@media(max-width:420px){.brand small{display:none}.nav-links .btn{padding:.55rem .8rem;font-size:.88rem}}

/* ---- Generated forms (Health Check / Contact) ---- */
.form.form-wide{max-width:680px;margin-top:1.6rem}
.form-part{display:grid;gap:1rem}
.form-part>h2{font-family:var(--font-mono);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-text);
  padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.form-part+.form-part{margin-top:1.2rem}
.form fieldset.q{padding:1rem 1.1rem}
.form fieldset.q legend{font-family:var(--font-display);font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);padding-inline:.3rem;max-width:100%}
.form .req{color:var(--accent);margin-left:.15rem}
.form .field .hint,.form .hint{font-size:.82rem;color:var(--ink-faint)}
.form .choice:has(input:checked){border-color:var(--brand);background:var(--surface-2)}
.form .choice input{margin-top:.3rem;accent-color:var(--brand)}
.form fieldset.consent{border-style:dashed}
.form .field select:required:invalid{color:var(--ink-faint)}
.form .field input:user-invalid,.form .field select:user-invalid,.form .field textarea:user-invalid{border-color:#B3261E}
.form-result{border:1px solid var(--brand);background:var(--surface-2);border-radius:var(--radius);padding:1rem 1.2rem;color:var(--ink)}
.form-result[hidden]{display:none}
.form-result b{color:var(--brand-text)}
.form-note{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint)}
.pending-tag{white-space:normal}

/* ---- Footer column titles: h2 (heading order), styled identically to a9.css `.site-footer h4` ----
   Footer titles were <h4> straight after <h2>/<h1> (skipped levels on every page). Same look, valid outline. */
.site-footer .footer-h{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:.8rem;font-weight:500}

/* ---- Small content helpers ---- */
.metric .v.pending{color:#E7C692}
.band .staging-note{color:var(--ink-soft)}

@media print{.site-header,.nav-menu,.skip-link{display:none}}

/* ---- Fix: nav CTA legibility ----
   a9.css `.nav-links a{color:var(--ink-soft)}` (0,1,1) out-ranks `.btn-primary{color:var(--on-brand)}` (0,1,0),
   leaving the header CTA at 1.13:1 contrast. Restore the button's own text colour, incl. hover. Verified by scripts/browser-qa.mjs. */
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--on-brand)}

/* ---- <dl class="deflist">: valid definition-list markup; neutralise UA <dl> margins (a9.css styles .deflist/.row/dt/dd) ---- */
.deflist{margin-bottom:0}
.deflist:first-child{margin-top:0}

/* ---- Accessibility: text contrast (WCAG 1.4.3, >=4.5:1 normal text) ----
   a9.css is canonical and unchanged; this layer re-derives text tokens only. Enforced by qa/independent-browser.mjs (hard check).
   LIGHT (bare :root; a9.css dark rules are more specific, so dark is unaffected):
     --ink-faint #7A8A84 -> #5A6963 (>=5.10 on white/ground/surface-2)
     --accent    #B87C22 -> #8A5A12 (>=5.22) — accent is used as text (.pain .n, .req, .staging-note b, .pending-tag) */
:root{
  --ink-faint:#5A6963;
  --accent:#8A5A12;
  --brand-text:var(--brand-deep);   /* brand-coloured text/links: forest on light */
  --brand-hover:var(--brand-deep);  /* .btn-primary:hover background */
}
/* DARK: --brand-deep (#0F6E40) is ~2.8:1 on dark surfaces -> text uses --brand (#37B96E, >=6.35). Primary-button hover fill is
   lightened (#45C07A) so dark-on-green stays >=4.5:1 on hover. --ink-faint #7E8E85 is already >=4.65 on every dark surface. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-text:var(--brand);--brand-hover:#45C07A}}
:root[data-theme="dark"]{--brand-text:var(--brand);--brand-hover:#45C07A}

a{color:var(--brand-text)}
.eyebrow,legend,.rung .go{color:var(--brand-text)}
.btn-primary:hover{background:var(--brand-hover)}