/* kitneal — WordPress overrides
   Paste into Appearance → Editor → Styles → Additional CSS, or Customiser →
   Additional CSS on older setups.

   This is route 1: the no-file-access option. It closes the visual gaps between
   the NotesLab defaults and the design system. It cannot close the gaps that need
   markup or copy changes — see audit-checklist.md, items 2, 3, 4 and 5.

   Every value here comes from the design system tokens. Do not tune them here;
   change the token and regenerate. */

/* ---------------------------------------------------------------
   1. Tokens
   NotesLab exposes its own custom properties, so these are declared
   under a kn- prefix to avoid collisions, then mapped onto elements.
   --------------------------------------------------------------- */
:root {
  color-scheme: only light !important;

  --kn-bg: #faf9f6;
  --kn-text: #1a1915;
  --kn-text-secondary: #57534e;
  --kn-text-muted: #a8a29e;
  --kn-accent: #1e3a5f;
  --kn-accent-hover: #2d5089;
  --kn-border: #e7e5e4;

  --kn-ink-1: #1e3a5f;
  --kn-ink-2: #4a6a8f;
  --kn-ink-3: #8ba3bd;
  --kn-ink-4: #cdd8e3;
  --kn-ink-track: #ece9e4;
  --kn-ink-rule: #d6d2cc;
  --kn-callout-bg: #f4f2ed;

  --kn-font-body: 'Noticia Text', Georgia, serif;
  --kn-font-heading: 'Rubik', system-ui, sans-serif;
  --kn-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --kn-measure: 680px;
  --kn-measure-briefing: 620px;
  --kn-measure-figure: 860px;
}

/* ---------------------------------------------------------------
   2. Paper and body type
   --------------------------------------------------------------- */
body,
.wp-site-blocks {
  background-color: var(--kn-bg);
  color: var(--kn-text);
  font-family: var(--kn-font-body);
  font-size: 18px;
  line-height: 1.7;
}

p { text-wrap: pretty; }

/* ---------------------------------------------------------------
   3. Headings — Rubik, sentence case, tight leading
   --------------------------------------------------------------- */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
  font-family: var(--kn-font-heading);
  color: var(--kn-text);
  text-wrap: balance;
}

h1, .wp-block-post-title {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   4. Navigation — lowercase, muted, accent on hover
   Closes gap 1 visually. The menu labels in the admin stay
   capitalised; this lowercases them in the rendered page.
   --------------------------------------------------------------- */
.wp-block-navigation a {
  font-family: var(--kn-font-heading);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  color: var(--kn-text-muted);
  text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item a {
  color: var(--kn-accent);
  text-decoration: none;
}

.wp-block-site-title a {
  font-family: var(--kn-font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  color: var(--kn-text);
  text-decoration: none;
  text-transform: none;
}

/* ---------------------------------------------------------------
   5. Links — colour only, no underline, no transition
   --------------------------------------------------------------- */
a {
  color: var(--kn-accent);
  text-decoration: none;
  transition: none;
}

a:hover { color: var(--kn-accent-hover); text-decoration: none; }

/* ---------------------------------------------------------------
   6. Meta labels and dates — uppercase, tracked, muted
   --------------------------------------------------------------- */
.wp-block-post-date,
.wp-block-post-terms {
  font-family: var(--kn-font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kn-accent);
}

.wp-block-post-terms a {
  color: var(--kn-accent);
  font-weight: 500;
}

/* Dates and headlines follow the one-grammar rule: sentence case, ink headlines */
.wp-block-post-date,
.wp-block-post-date a {
  font-family: var(--kn-font-heading);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--kn-text-muted);
  text-decoration: none;
}

.wp-block-post-title a {
  color: var(--kn-text);
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--kn-accent);
}

/* Archive titles and author names: theme uppercases these via global styles */
.wp-block-query-title,
.wp-block-post-author-name {
  text-transform: none;
  letter-spacing: normal;
}

/* ---------------------------------------------------------------
   7. Post list — rules, not cards
   A briefing carries a 2px top rule, an article a hairline. Requires
   the category class on the list item, which WordPress adds to
   single-post <body> but not to query-loop items — so this rule set
   uses the post-terms text as the only differentiator until the
   child theme adds a class. See audit-checklist.md item 4.
   --------------------------------------------------------------- */
.wp-block-post-template > li {
  border-top: 1px solid var(--kn-border);
  padding-top: 1.1rem;
  padding-bottom: 2rem;
  margin: 0;
  list-style: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.wp-block-post-template > li.category-briefings {
  border-top: 2px solid var(--kn-text);
}

.wp-block-post-excerpt {
  font-family: var(--kn-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kn-text-secondary);
}

.wp-block-post-excerpt__more-link,
.more-link {
  font-family: var(--kn-font-heading);
  font-size: 0.85rem;
  color: var(--kn-accent);
}

/* ---------------------------------------------------------------
   8. Reading measure
   Briefings sit in a tighter measure than articles. body.category-briefings
   is added by WordPress on single posts, so this works without code.
   --------------------------------------------------------------- */
.wp-block-post-content > * {
  max-width: var(--kn-measure);
  margin-left: auto;
  margin-right: auto;
}

body.category-briefings .wp-block-post-content {
  font-size: 1.06rem;
  line-height: 1.65;
}

body.category-briefings .wp-block-post-content > * {
  max-width: var(--kn-measure-briefing);
}

body.category-briefings .wp-block-post-content > p {
  margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------------
   9. No decoration
   Kills radius, shadow and the NotesLab homepage gradient.
   --------------------------------------------------------------- */
* {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wp-block-cover__gradient-background,
.has-background-gradient,
[class*="animated-gradient"] {
  background-image: none !important;
  background-color: var(--kn-bg) !important;
  animation: none !important;
}

/* Motion is not part of this brand */
*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
}

/* ---------------------------------------------------------------
   10. Blockquote, code, rules
   --------------------------------------------------------------- */
blockquote,
.wp-block-quote {
  border-left: 2px solid var(--kn-accent);
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--kn-text-secondary);
}

hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--kn-border);
  opacity: 1;
  margin: 2rem auto;
}

code, pre, .wp-block-code {
  font-family: var(--kn-font-mono);
  font-size: 0.875em;
  background-color: var(--kn-border);
  border: none;
}

/* ---------------------------------------------------------------
   11. Tables — comparison is a primary briefing form
   --------------------------------------------------------------- */
.wp-block-table table {
  border-collapse: collapse;
  font-family: var(--kn-font-heading);
  font-size: 0.8rem;
}

.wp-block-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kn-text-muted);
  border: none;
  border-bottom: 1px solid var(--kn-border);
  padding: 0 1rem 0.6rem 0;
}

.wp-block-table td {
  border: none;
  border-bottom: 1px solid var(--kn-border);
  padding: 0.7rem 1rem 0.7rem 0;
  vertical-align: baseline;
}

/* Numeric cells: add the class "kn-figure" to a cell in the block editor */
.wp-block-table td.kn-figure,
.wp-block-table th.kn-figure {
  font-family: var(--kn-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------------------------------------------------------------
   12. Figures and images
   --------------------------------------------------------------- */
figure,
.wp-block-image {
  margin: 2.5rem auto;
}

.wp-block-image img {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--kn-border);
}

figcaption,
.wp-element-caption {
  font-family: var(--kn-font-heading);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--kn-text-secondary);
  text-align: left;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--kn-border);
}

/* Breakout width — add the class "kn-breakout" to a figure or group block */
.kn-breakout {
  max-width: var(--kn-measure-figure) !important;
  width: 100%;
}

/* ---------------------------------------------------------------
   13. Infographic classes
   Used by the block patterns in patterns/. Add these classes to
   group blocks in the editor to get system-correct diagrams without
   writing HTML.
   --------------------------------------------------------------- */
.kn-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  border-top: 2px solid var(--kn-text);
  padding-top: 1.1rem;
}

.kn-stat-label {
  font-family: var(--kn-font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kn-text-muted);
  margin: 0 0 0.3rem;
}

.kn-stat-value {
  font-family: var(--kn-font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--kn-text);
  margin: 0 0 0.3rem;
}

.kn-stat-note {
  font-family: var(--kn-font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kn-text-secondary);
  margin: 0;
}

.kn-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--kn-font-heading);
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
}

.kn-bar-value {
  font-family: var(--kn-font-mono);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--kn-text-secondary);
}

.kn-bar-track {
  height: 0.5rem;
  background: var(--kn-ink-track);
  margin-bottom: 1.1rem;
}

.kn-bar-fill { height: 100%; background: var(--kn-ink-1); }
.kn-bar-fill.kn-ink-2 { background: var(--kn-ink-2); }
.kn-bar-fill.kn-ink-3 { background: var(--kn-ink-3); }
.kn-bar-fill.kn-ink-4 { background: var(--kn-ink-4); }

.kn-callout {
  background: var(--kn-callout-bg);
  border-left: 2px solid var(--kn-accent);
  padding: 1.1rem 1.3rem;
  margin: 2.5rem 0;
}

.kn-callout-label {
  font-family: var(--kn-font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kn-text);
  margin: 0 0 0.6rem;
}

.kn-callout p:last-child {
  font-family: var(--kn-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--kn-text-secondary);
  margin: 0;
}

.kn-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--kn-ink-rule);
}

.kn-matrix > div {
  padding: 1.1rem 1.2rem 1.4rem;
  min-height: 7rem;
}

.kn-matrix > div:nth-child(2),
.kn-matrix > div:nth-child(4) { border-left: 1px solid var(--kn-ink-rule); }
.kn-matrix > div:nth-child(3),
.kn-matrix > div:nth-child(4) { border-top: 1px solid var(--kn-ink-rule); }
.kn-matrix > div.kn-highlight { background: var(--kn-callout-bg); }

.kn-axis {
  font-family: var(--kn-font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kn-text-muted);
  text-align: center;
  margin: 0.6rem 0 0;
}

/* ---------------------------------------------------------------
   14. Footer — name and email only
   --------------------------------------------------------------- */
.wp-block-site-title,
footer .wp-block-paragraph {
  font-family: var(--kn-font-heading);
}

footer {
  border-top: 1px solid var(--kn-border);
  font-family: var(--kn-font-heading);
  font-size: 0.85rem;
  color: var(--kn-text-muted);
}



/* ---------------------------------------------------------------
   16. Mobile — scale type, spacing and layout for narrow viewports
   The design system specifies 16px body below 600px. This section
   extends that with heading, spacing, and layout adjustments so the
   site reads cleanly on phone screens.
   --------------------------------------------------------------- */
@media (max-width: 600px) {

  /* Body type — design system spec */
  body,
  .wp-site-blocks {
    font-size: 16px;
  }

  /* Headings — scale down to prevent multi-line wrapping at full
     width on a 390px screen. h1 drops from 2.1rem to 1.55rem
     (roughly 25px), which keeps 3-5 word titles on one or two
     lines. h2 and h3 step down proportionally. */
  h1,
  .wp-block-post-title {
    font-size: 1.55rem;
    line-height: 1.22;
    letter-spacing: -0.015em;
  }

  h2 {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  /* Site title in header — steps down with the viewport */
  .wp-block-site-title a {
    font-size: 1.25rem;
  }

  /* Header band breathes less on a phone, but still breathes */
  .kn-header-row {
    padding-top: 1.4rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
  }

  /* Reading measure — let content fill the viewport minus page
     padding, rather than capping at the desktop column width */
  .wp-block-post-content > * {
    max-width: 100%;
  }

  body.category-briefings .wp-block-post-content > * {
    max-width: 100%;
  }

  /* Briefing body type — slight drop for mobile */
  body.category-briefings .wp-block-post-content {
    font-size: 1rem;
  }

  /* Post list items — tighter vertical rhythm */
  .wp-block-post-template > li {
    padding-top: 0.9rem;
    padding-bottom: 1.5rem;
  }

  /* Excerpt — slightly smaller on mobile */
  .wp-block-post-excerpt {
    font-size: 0.9rem;
  }

  /* Figures — less vertical breathing room */
  figure,
  .wp-block-image {
    margin: 1.5rem auto;
  }

  figcaption,
  .wp-element-caption {
    font-size: 0.75rem;
  }

  /* Tables — horizontal scroll so columns are not crushed */
  .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-table table {
    font-size: 0.75rem;
  }

  /* Blockquote — less indent */
  blockquote,
  .wp-block-quote {
    padding-left: 0.9rem;
    margin-left: 0;
    margin-right: 0;
  }

  /* Infographics — stack stat rows, shrink figures */
  .kn-stat-row {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .kn-stat-value {
    font-size: 1.3rem;
  }

  /* Matrix — single column on phones */
  .kn-matrix {
    grid-template-columns: 1fr;
  }

  .kn-matrix > div {
    min-height: auto;
    padding: 0.9rem 1rem 1.1rem;
  }

  .kn-matrix > div:nth-child(2) {
    border-left: none;
    border-top: 1px solid var(--kn-ink-rule);
  }

  .kn-matrix > div:nth-child(4) {
    border-left: none;
  }

  /* Callouts — tighter padding */
  .kn-callout {
    padding: 0.9rem 1rem;
    margin: 1.5rem 0;
  }

  /* Breakout — do not exceed viewport on mobile */
  .kn-breakout {
    max-width: 100% !important;
  }

  /* Meta — slightly larger tap targets, keep legibility */
  .wp-block-post-date,
  .wp-block-post-terms {
    font-size: 0.68rem;
  }

  /* Footer — compact */
  footer {
    font-size: 0.8rem;
  }
}

/* Header row — name left, links right, one hairline */
.kn-header-row {
  align-items: baseline;
  border-bottom: 1px solid var(--kn-border);
  padding-top: 2.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Forced dark mode opt-out: light-only. Do not remove. */
html, body {
  color-scheme: only light !important;
}