/* Jethro Justice — site styles */

:root {
  --navy: #10243f;
  --navy-deep: #0a1729;
  --navy-soft: #1c3a61;
  --gold: #c8952a;
  --gold-light: #e6bb5e;
  --ink: #1a1f26;
  --ink-soft: #4a5462;
  --line: #dfe3e9;
  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --bg-tint: #eef2f7;
  --ok: #1d7a4f;
  --warn: #9a5b00;
  --warn-bg: #fdf5e6;
  --radius: 10px;
  --maxw: 720px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 980px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }

main { display: block; }

section { padding: 48px 0; }
section.alt { background: var(--bg-alt); }

/* ---------- header ---------- */

.site-header {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.brand .mark { color: var(--gold); font-family: var(--serif); font-size: 24px; line-height: 1; }
.brand .tag { display: block; font-weight: 400; font-size: 12px; color: #b9c6d6; letter-spacing: 0.06em; text-transform: uppercase; }

.site-nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.site-nav a {
  color: #dbe4ef;
  text-decoration: none;
  font-size: 15px;
  /* 44px minimum hit area, bought with padding on the anchor itself rather than gaps on
     the list, so the target grows with the link instead of beside it. Font size unchanged. */
  padding: 11px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus, .site-nav a:focus-visible { color: #fff; border-bottom-color: var(--gold); }
.site-nav a.cta {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  border-bottom: none;
}
.site-nav a.cta:hover { background: var(--gold-light); border-bottom: none; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 64px 0 56px;
}
.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.hero .lede { font-size: 20px; color: #cfdae7; margin: 0 0 28px; }
.hero .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- type ---------- */

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: 34px; margin: 0 0 16px; }
h2 { font-size: 26px; margin: 40px 0 12px; }
h3 { font-size: 20px; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--navy-soft); }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
small { font-size: 14px; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 8px;
}
.eyebrow.dark { color: var(--navy-soft); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  font-size: 17px;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid var(--gold);
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn.ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn.secondary { background: transparent; color: var(--navy-soft); border-color: var(--line); }
.btn.secondary:hover { background: var(--bg-alt); border-color: var(--navy-soft); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.small { font-size: 15px; padding: 9px 18px; }

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: block;
}
a.card:hover { border-color: var(--navy-soft); box-shadow: 0 3px 14px rgba(16,36,63,0.08); }
.card h3 { margin: 0 0 8px; font-size: 19px; color: var(--navy); }
.card p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.card .num {
  display: inline-block;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ---------- callouts ---------- */

.callout {
  background: var(--bg-tint);
  border-left: 4px solid var(--navy-soft);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-size: 16px;
}
.callout.warn { background: var(--warn-bg); border-left-color: var(--gold); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy); }

.disclaimer-box {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 32px 0 0;
}
.disclaimer-box strong { color: var(--ink); }

/* ---------- article ---------- */

.article-meta { font-size: 14px; color: var(--ink-soft); margin: 0 0 24px; }

.backlink { display: inline-block; font-size: 15px; margin-bottom: 20px; text-decoration: none; }
.backlink:hover { text-decoration: underline; }

/* ---------- utilities ---------- */

/* Off-screen until focused, then the first thing a keyboard user lands on. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus, .skip-link:focus-visible { left: 0; top: 0; }

/* The skip target is a whole region; a focus ring around all of it reads as a rendering
   bug rather than a cue. The visible result is the page scrolled to the content. */
main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- intake tool ---------- */

.tool-shell { max-width: 720px; margin: 0 auto; padding: 32px max(20px, env(safe-area-inset-right)) 64px max(20px, env(safe-area-inset-left)); }

.progress {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.progress .seg {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
}
.progress .seg.done { background: var(--gold); }
.progress .seg.current { background: var(--navy-soft); }
.progress-label { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.save-state { display: block; font-size: 13px; color: var(--ink-soft); min-height: 1.2em; margin: 0 0 24px; }

.tool-aside {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.restore-panel {
  border: 2px solid var(--navy-soft);
  border-radius: var(--radius);
  background: var(--bg-tint);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.restore-panel h2 { margin-top: 0; font-size: 21px; }
.restore-panel p { margin-bottom: 16px; }
.restore-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.step { display: none; }
.step.active { display: block; }
.step h2 { margin-top: 0; }
.step > p.intro { color: var(--ink-soft); }

.field { margin: 0 0 22px; }
.field label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }

/* Radio and checkbox groups are <fieldset>/<legend> so the question is announced with its
   options. Browsers give fieldset a groove border, block/inline padding and
   min-inline-size: min-content, and a legend inherits none of `.field label`'s styling —
   so reset all of it. min-width: 0 is load-bearing: without it the min-content floor stops
   the 220px-minmax .checkgrid from shrinking at 375px. Rendering is unchanged from the div
   this replaced; verified by measuring every group at 1280x860 and 375x812. */
fieldset.field { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
fieldset.field > legend {
  display: block;
  width: 100%;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  color: inherit;
}
/* A label's 6px bottom margin collapsed with the hint's 2px top margin; a legend's does
   not, which made the one group with a hint 2px taller. Drop the hint's top margin when it
   follows a legend so the gap stays 6px. */
fieldset.field > legend + .hint { margin-top: 0; }
.field .hint { display: block; font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.field input[type="text"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--navy-soft);
  outline-offset: 1px;
  border-color: var(--navy-soft);
}
/* The :focus rule above stays, so browsers without :focus-visible keep a focus indicator —
   the audience skews old devices and losing it entirely would be worse than showing it on a
   click. Where :focus-visible IS supported, move the ring to keyboard focus only: mouse
   clicks reset to the resting border, Tab still gets the full ring. */
@supports selector(:focus-visible) {
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--line);
  }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
    outline: 2px solid var(--navy-soft);
    outline-offset: 1px;
    border-color: var(--navy-soft);
  }
}

.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.checkgrid label,
.radiolist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 11px 13px;
  cursor: pointer;
  background: #fff;
}
.checkgrid label:hover, .radiolist label:hover { border-color: var(--navy-soft); background: var(--bg-alt); }
.checkgrid input, .radiolist input { margin: 4px 0 0; flex-shrink: 0; }
.radiolist { display: grid; gap: 8px; }

.repeat-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: start;
}
.repeat-row.three { grid-template-columns: 130px 1fr auto; }
.repeat-row input { width: 100%; font-family: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; }
.row-del {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  padding: 8px 11px;
  cursor: pointer;
}
.row-del:hover { border-color: #b33; color: #b33; }
.add-row {
  background: none;
  border: 1px dashed var(--line);
  color: var(--navy-soft);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.add-row:hover { border-color: var(--navy-soft); background: var(--bg-alt); }

.step-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.flag {
  background: var(--warn-bg);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 16px;
}
.flag strong { display: block; color: var(--warn); margin-bottom: 4px; }

/* ---------- packet ---------- */

.packet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: #fff;
}
.packet h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin: 28px 0 12px;
}
.packet h3:first-child { margin-top: 0; }
.packet .packet-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin: 0 0 12px;
}
.packet dl { margin: 0 0 12px; }
.packet dt { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.packet dd { margin: 0 0 10px; }
.packet table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 12px; }
.packet th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; }
.packet td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--bg-tint); vertical-align: top; }
.packet .empty { color: var(--ink-soft); font-style: italic; font-size: 15px; }
.needs-attorney { color: var(--warn); font-weight: 600; }

.packet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 32px; }

/* ---------- referral ---------- */

.referral-list { display: grid; gap: 14px; }
.referral {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
}
.referral h4 { margin: 0 0 4px; font-size: 17px; }
.referral p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.referral a { font-size: 15px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: #9fb0c4;
  padding: 40px 0;
  font-size: 15px;
  margin-top: 64px;
}
.site-footer a { color: #cfdae7; }
.site-footer .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
/* Same 44px floor as the header nav, same technique. */
.site-footer .footer-nav a { display: inline-block; padding: 11px 0; }
.site-footer .legal { font-size: 14px; line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; }
.site-footer .legal strong { color: #dbe4ef; }

/* ---------- print ---------- */

@media print {
  .site-header, .site-footer, .packet-actions, .step-nav, .step-bar, .progress, .progress-label, .no-print { display: none !important; }
  body { font-size: 12pt; }
  .packet { border: none; padding: 0; }
  .tool-shell { padding: 0; }
  a[href]:after { content: ""; }

  @page { margin: 0.75in; }
  .packet h3, .packet .packet-title { break-after: avoid; page-break-after: avoid; }
  .packet dl, .packet .flag, .packet tr { break-inside: avoid; page-break-inside: avoid; }
  .packet thead { display: table-header-group; }
  body { orphans: 3; widows: 3; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 30px; }
  .hero { padding: 44px 0 40px; }
  h1 { font-size: 27px; }
  h2 { font-size: 22px; }
  .repeat-row, .repeat-row.three { grid-template-columns: 1fr; }
  .site-header .wrap-wide { align-items: flex-start; }
  .site-nav { gap: 14px; }
}

/* Steps with repeaters grow without limit, so on a phone the Back/Next row scrolled out
   of reach. Pin the step bar to the top and the controls to the bottom. */
@media (max-width: 700px) {
  .tool-shell { padding-bottom: 116px; }   /* clearance for the pinned control row */

  .step-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    margin: 0 -20px 20px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .save-state { margin-bottom: 10px; }

  /* Only the visible step's controls, so the other seven are not also fixed. */
  .step.active .step-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    background: var(--bg);           /* opaque — content scrolls underneath */
    border-top: 1px solid var(--line);
    padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}