/* Public council website.
   Restrained and civic. Legibility over decoration.
   WCAG 2.2 AA: focus never removed, 4.5:1 body text, 3:1 non-text contrast,
   24px minimum target size, no colour-only meaning, no motion. */

:root {
  --accent: #1d4d3f;
  --ink: #15191b;          /* on white: 16.5:1 */
  --ink-2: #4c5559;        /* on white: 7.4:1 */
  --line: #d5d9db;
  --line-2: #b4babd;
  --tint: #f4f6f5;
  --bg: #fff;
  --amber: #8a5a00;
  --red: #a3231c;
  --green: #14503c;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: #0f3329; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
  background: #fdf6d8; color: #15191b;
}

.skip { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: .75rem 1.25rem; z-index: 50; text-decoration: none; font-weight: 600; }
.skip:focus { left: 0; top: 0; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 4px solid var(--accent); }
.masthead-in { display: flex; align-items: center; padding: 1.375rem 1.5rem; }
.crest { display: flex; align-items: center; gap: .875rem; text-decoration: none; color: var(--ink); }
.crest:hover { color: var(--accent); }
.crest-mark { color: var(--accent); display: block; flex: none; }
.crest-text { display: flex; flex-direction: column; line-height: 1.25; }
.crest-text strong { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.crest-text span { font-size: .8125rem; color: var(--ink-2); letter-spacing: .02em; }

.nav { background: var(--accent); }
.nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; color: #fff; text-decoration: none; font-size: .9375rem; font-weight: 500;
  padding: .8125rem 1.125rem; border-bottom: 3px solid transparent;
}
.nav a:hover { background: rgba(0, 0, 0, .18); color: #fff; text-decoration: underline; }
.nav a[aria-current="page"] { border-bottom-color: #fff; font-weight: 650; background: rgba(0, 0, 0, .12); }
.nav a:focus-visible { background: #fdf6d8; color: #15191b; outline-offset: -3px; }
.nav li:first-child a { padding-left: 0; }
@media (max-width: 40rem) { .nav li:first-child a { padding-left: 1.125rem; } }

/* ---------- content ---------- */
main { padding: 2.75rem 1.5rem 4rem; }
h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.875rem, 4.5vw, 2.625rem);
  line-height: 1.14; letter-spacing: -.018em; margin: 0 0 1.125rem; text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.25;
  margin: 2.75rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
h3 { font-size: 1.125rem; font-weight: 650; margin: 2rem 0 .75rem; }
p { margin: 0 0 1.125rem; max-width: 44rem; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: 42rem; margin-bottom: 1.75rem; }
.small { font-size: .875rem; color: var(--ink-2); }
ul, ol { max-width: 44rem; }
li { margin-bottom: .375rem; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 3rem; }

/* ---------- panels ---------- */
.panel { background: var(--tint); border-left: 4px solid var(--accent); padding: 1.5rem 1.75rem; margin: 0 0 2.5rem; }
.panel h2 { margin: 0 0 .75rem; border: 0; padding: 0; font-size: 1.25rem; }
.panel-lead { font-size: 1.0625rem; margin-bottom: 1rem; }
.panel p:last-child { margin-bottom: 0; }

.alert {
  background: #fdeceb; border-left: 4px solid var(--red); padding: 1rem 1.25rem;
  margin: 0 0 2rem; max-width: 44rem; font-size: .9375rem;
}

.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: .6875rem 1.375rem; border: 1px solid var(--accent); border-radius: 3px;
  font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #0f3329; color: #fff; }

/* ---------- link lists ---------- */
.linklist { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.linklist li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .625rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.linklist a { font-weight: 500; padding: .125rem 0; }
.linklist .meta { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-size: .9375rem; }
caption { text-align: left; font-size: .875rem; color: var(--ink-2); padding-bottom: .625rem; }
th, td { text-align: left; padding: .6875rem .875rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--tint); border-bottom: 2px solid var(--line-2); font-weight: 650; font-size: .875rem; white-space: nowrap; }
tbody th { font-weight: 600; }
tfoot th, tfoot td { border-top: 2px solid var(--line-2); border-bottom: 0; font-weight: 650; background: var(--tint); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.none { color: var(--ink-2); font-style: italic; }
@media (max-width: 44rem) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.deflist { margin: 0 0 2rem; }
.deflist dt { font-weight: 650; font-size: .875rem; color: var(--ink-2); margin-top: 1.125rem; }
.deflist dd { margin: .25rem 0 0; font-size: 1.0625rem; }

/* ---------- compliance report ---------- */
.score {
  display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center;
  padding: 1.75rem; border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--tint); margin: 0 0 2.5rem;
}
.score-good { border-left: 6px solid var(--green); }
.score-mid { border-left: 6px solid var(--amber); }
.score-bad { border-left: 6px solid var(--red); }
.score-num { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 7rem; }
.score-num strong { font-family: var(--serif); font-size: 3.25rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.score-num span { font-size: .75rem; color: var(--ink-2); text-align: center; margin-top: .25rem; }
.score-verdict { flex: 1; min-width: 15rem; }
.score-verdict h2 { margin: 0 0 .5rem; border: 0; padding: 0; font-size: 1.3125rem; }
.score-verdict p { margin: 0 0 .5rem; }

.chks { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }
.chk { display: flex; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.chk-badge {
  flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .875rem; font-weight: 700;
  color: #fff; margin-top: .125rem;
}
.chk-pass .chk-badge { background: var(--green); }
.chk-warn .chk-badge { background: var(--amber); }
.chk-fail .chk-badge { background: var(--red); }
.chk-body { flex: 1; }
.chk-body h3 { margin: 0 0 .375rem; font-size: 1rem; display: flex; flex-wrap: wrap; gap: .625rem; align-items: baseline; }
/* Status is stated in words, not just colour. WCAG 1.4.1 */
.chk-word { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chk-pass .chk-word { color: var(--green); }
.chk-warn .chk-word { color: var(--amber); }
.chk-fail .chk-word { color: var(--red); }
.chk-body p { margin: 0 0 .375rem; font-size: .9375rem; }
.chk-fix { color: var(--accent); }
.chk-cite { font-size: .75rem !important; color: var(--ink-2); font-family: ui-monospace, Menlo, monospace; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--tint); padding: 2.25rem 0 2.75rem; margin-top: 3rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.foot-links a { font-size: .9375rem; font-weight: 500; }
.foot-note { font-size: .8125rem; color: var(--ink-2); max-width: 46rem; margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  .nav, .skip, .foot-links { display: none; }
  body { font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}