/* ERRCSCheck design system: civic code reference.
   White paper, navy ink, one hard red rule (fire code red) used sparingly, blue links,
   Public Sans for text, IBM Plex Mono for citations and section numbers.
   Sections are numbered like a code book. Light theme only. */
:root {
  --bg: #ffffff;
  --panel: #f4f6f9;
  --card: #ffffff;
  --ink: #0d1b2e;
  --ink-2: #4a5568;
  --line: #d9dee6;
  --line-strong: #9aa5b5;
  --link: #1546a0;
  --focus: #1546a0;
  --accent: #0d1b2e;          /* primary buttons are navy */
  --accent-on: #ffffff;
  --accent-hover: #1f3354;
  --accent-ink: #b42318;      /* eyebrows and rule lines in code red */
  --rule: #c8102e;
  --ok: #1b6e3a;
  --warn: #b25e00;
  --warn-ink: #8a4800;
  --bad: #b42318;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fw-head: 800;
  --ls-head: -0.02em;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-btn: 3px;
  --maxw: 1280px;
  --fs-h1: clamp(2.1rem, 5vw, 3.4rem);
}

/* notice strip: neutral, never looks like a government seal */
.notice-strip { background: var(--panel); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); padding: .4rem 0; }

.site-header { border-bottom: 0; box-shadow: inset 0 -3px 0 var(--rule); }
.wordmark { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; color: var(--ink); font-size: 1.3rem; margin: 0; }
.wordmark__code { font-family: var(--font-mono); font-weight: 600; background: var(--ink); color: #fff; padding: .1rem .4rem; border-radius: 2px; letter-spacing: .02em; }
.wordmark__word { font-weight: 800; padding-left: .35rem; letter-spacing: -0.02em; }
.wordmark--footer { font-size: 1.1rem; margin-bottom: .75rem; }
.btn--sm { min-height: 40px; padding: .45rem .9rem; font-size: .92rem; }
.site-nav .btn { color: var(--accent-on); padding: .45rem .9rem; }

/* code-book section numbering on every split heading */
main { counter-reset: sec; }
.split:not(.split--lead) { counter-increment: sec; }
.split:not(.split--lead) .split__head h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block; font: 600 .8rem/1 var(--font-mono); color: var(--accent-ink); letter-spacing: .1em; margin-bottom: .6rem;
}
.split { border-top-color: var(--line); }
.split__head h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

.page-head { background: linear-gradient(var(--panel), var(--panel)) no-repeat 0 0 / 100% 100%; }
.page-head h1 { max-width: 22ch; }
.eyebrow { color: var(--accent-ink); }

/* home hero */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; gap: 2rem 4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); max-width: 18ch; }
.hero .lede { margin-bottom: 1.5rem; max-width: 52ch; }
.hero__panel { border: 1px solid var(--line); border-top: 4px solid var(--rule); padding: 1.25rem 1.5rem; background: var(--bg); }
.hero__def { font-size: 1.05rem; }

/* jurisdiction pages */
.page-head--j .page-head__grid { align-items: start; }
.ahj-card { border-top: 4px solid var(--ink); }
.ahj-card .btn-row { margin-top: 1rem; }
.effect { display: inline-block; font: 600 .72rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: .25rem .4rem; border: 1px solid currentColor; border-radius: 2px; white-space: nowrap; }
.effect--exempt { color: var(--ok); }
.effect--required { color: var(--bad); }
.effect--may_require { color: var(--warn-ink); }
.effect--info { color: var(--ink-2); }
.steps { counter-reset: none; }
.steps li { padding-left: .25rem; }

/* checker */
.checker fieldset { display: grid; gap: .75rem; }
.yn__opts { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.checker-result:focus { outline: none; }
.checker-result .verdict h2 { font-size: 1.35rem; margin-top: .25rem; }
.rule-list { list-style: none; padding: 0; }
.rule-list li { border-top: 1px solid var(--line); padding: .75rem 0; }
@media (min-width: 960px) { .checker-result { position: sticky; top: 1.5rem; align-self: start; } }

.form-card { border-top: 4px solid var(--ink); }
.site-footer { background: var(--panel); }
.site-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }