/* sitescanner.nl — the instrument look. See theme/site.md for the brief. */

:root {
  --brand: #22303c;
  --brand-2: #3a4d5c;
  --accent: #f2c200;
  --paper: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #eceee9;
  --band: #e6e8e3;
  --line: #c9cdc5;
  --ink: #15191c;
  --muted: #59616a;
  --on-brand: #ffffff;
  --ring: #f2c200;
  --grad: linear-gradient(135deg, #1b2630 0%, #2c3c49 100%);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: var(--font-mono);
  --r0: 0;
  --r1: 2px;
  --r2: 3px;
  --r3: 4px;
  --shadow-1: none;
  --shadow-2: 0 1px 0 var(--line);
  --page: 1120px;
  --measure: 68ch;
  --strip: repeating-linear-gradient(-45deg, #15191c 0 8px, #f2c200 8px 16px);
}

/* The signature: a hazard strip over every section head and the hero. */
.hero-text::before,
.section-head::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin-bottom: var(--s3);
  background: var(--strip);
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--t0);
  color: var(--muted);
}

.hero[data-hero="pattern"] .eyebrow,
.hero[data-hero="gradient"] .eyebrow {
  color: var(--accent);
}

h1, h2, h3 {
  letter-spacing: -.01em;
  font-weight: 700;
}

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -.02em;
}

.brand::before {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-right: .45em;
  background: var(--accent);
  border: 2px solid var(--ink);
  vertical-align: -.05em;
}

.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: var(--r1);
}

.hero .btn:first-child,
.cta-inner .btn:first-child {
  background: var(--accent);
  color: #15191c;
  border-color: #15191c;
}

/* Contrast pinned on the home hero (repair, F9 pa11y): the plain treatment
   paints paper and ink, and the second button is ink on white on any hero. */
.hero[data-hero="plain"] {
  --hero-bg: var(--paper);
  --hero-ink: var(--ink);
  --hero-ink-soft: var(--muted);
  --hero-line: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.hero[data-hero="plain"] h1 {
  color: var(--ink);
}

.hero[data-hero="plain"] .eyebrow,
.hero[data-hero="plain"] .lede,
.hero[data-hero="plain"] .hero-meta {
  color: var(--muted);
}

.hero .btn:not(:first-child) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Cards read as inspection items: square, ruled, no float. */
.card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--r2);
  box-shadow: none;
  background: var(--surface);
}

.card .icon,
.step::before {
  font-family: var(--font-mono);
}

.steps .step {
  border-left: 3px solid var(--accent);
  padding-left: var(--s4);
}

/* Every figure in a table or a stat is monospace — measured, not decorated. */
table.data td,
table.data th,
.stat .value,
.hero-meta {
  font-family: var(--font-mono);
}

table.data {
  border-collapse: collapse;
  font-size: var(--t0);
}

table.data th,
table.data td {
  border-bottom: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  text-align: left;
  vertical-align: top;
}

table.data thead th {
  background: var(--ink);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .05em;
}

table.data tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface);
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
}

.section[data-tone="band"] {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.prose code,
.prose pre {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border-radius: var(--r0);
  padding: 0 .25em;
}

.site-foot {
  border-top: 6px solid transparent;
  border-image: var(--strip) 6;
}