/* Magazine-style serif layout for MS Utredning knowledge base */

/* ── Foundations ────────────────────────────────────────────── */
html {
  color: #2b2b2b;
  background-color: #faf8f5;
}

body {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 42em;
  padding: 3em 2em 4em;
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Optima", "Segoe UI", "Candara", "Calibri", sans-serif;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

h1 {
  font-size: 2.2em;
  letter-spacing: -0.02em;
  border-bottom: 3px solid #b08d57;
  padding-bottom: 0.3em;
  margin-top: 0;
}

h2 {
  font-size: 1.6em;
  color: #2c3e50;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.2em;
}

h3 {
  font-size: 1.25em;
  color: #34495e;
}

h4 {
  font-size: 1.1em;
  font-style: italic;
  color: #555;
}

h5, h6 {
  font-size: 1em;
  font-style: italic;
  color: #666;
}

h6 {
  font-weight: normal;
}

p {
  margin: 1em 0;
  text-align: left;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
  color: #8b5e3c;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 94, 60, 0.3);
  transition: color 0.15s, border-color 0.15s;
}

a:hover {
  color: #5a3d28;
  border-bottom-color: #5a3d28;
}

a:visited {
  color: #6b5b73;
  border-bottom-color: rgba(107, 91, 115, 0.3);
}

/* ── Lists ─────────────────────────────────────────────────── */
ol, ul {
  padding-left: 1.5em;
  margin-top: 0.8em;
}

li {
  margin-bottom: 0.35em;
}

li > ol, li > ul {
  margin-top: 0.3em;
}

/* ── Blockquotes (used for conflicting-evidence callouts) ── */
blockquote {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border-left: 4px solid #b08d57;
  background: rgba(176, 141, 87, 0.06);
  color: #444;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

blockquote strong {
  color: #8b5e3c;
  font-style: normal;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Tables ────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: max-content;
  max-width: 100vw;
  /* Center the table horizontally. For tables narrower than the body
     (42em) this is a no-op; for wide tables whose content exceeds the
     body column this lets them extend symmetrically both left and right
     of the body, centered relative to the viewport, rather than only
     spilling to the right. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 1.5em 0;
  font-size: 0.92em;
  line-height: 1.5;
}

thead {
  background: #f0ece4;
  border-bottom: 2px solid #b08d57;
}

th {
  font-family: "Optima", "Segoe UI", "Candara", sans-serif;
  font-weight: 600;
  text-align: left;
  padding: 0.7em 0.8em;
  color: #2c3e50;
}

td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid #e8e4dc;
  vertical-align: top;
}

tbody tr:hover {
  background: rgba(176, 141, 87, 0.04);
}

/* ── Code (inline & block) ─────────────────────────────────── */
code {
  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  font-size: 0.88em;
  background: #f0ece4;
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

pre {
  background: #f0ece4;
  padding: 1em 1.2em;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.5;
  border: 1px solid #e0dbd2;
}

pre code {
  background: none;
  padding: 0;
}

/* ── Horizontal rules ──────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2.5em 0;
}

/* ── Images ────────────────────────────────────────────────── */
img {
  max-width: 100%;
  border-radius: 4px;
}

svg {
  height: auto;
  max-width: 100%;
}

/* ── Strong / emphasis ─────────────────────────────────────── */
strong {
  color: #1a1a2e;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 700px) {
  body {
    font-size: 16px;
    padding: 1.5em 1em 2em;
  }
  h1 {
    font-size: 1.7em;
  }
  h2 {
    font-size: 1.35em;
  }
  table {
    font-size: 0.85em;
  }
  th, td {
    padding: 0.4em 0.5em;
  }
}

/* ── Dark mode (auto) ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html {
    color: #d4d0ca;
    background-color: #1a1a1e;
  }
  body {
    -webkit-font-smoothing: auto;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #e0dcd6;
  }
  h1 {
    border-bottom-color: #8b7340;
  }
  h2 {
    color: #c8c0b4;
    border-bottom-color: #444;
  }
  h3 {
    color: #b8b0a4;
  }
  h4 {
    color: #999;
  }
  h5, h6 {
    color: #888;
  }
  strong {
    color: #e8e4de;
  }
  a {
    color: #c49a6c;
    border-bottom-color: rgba(196, 154, 108, 0.3);
  }
  a:hover {
    color: #dbb88a;
    border-bottom-color: #dbb88a;
  }
  a:visited {
    color: #a898b0;
    border-bottom-color: rgba(168, 152, 176, 0.3);
  }
  blockquote {
    border-left-color: #8b7340;
    background: rgba(139, 115, 64, 0.08);
    color: #b0a898;
  }
  blockquote strong {
    color: #c49a6c;
  }
  thead {
    background: #2a2824;
    border-bottom-color: #8b7340;
  }
  th {
    color: #c8c0b4;
  }
  td {
    border-bottom-color: #333;
  }
  tbody tr:hover {
    background: rgba(139, 115, 64, 0.06);
  }
  code {
    background: #2a2824;
  }
  pre {
    background: #2a2824;
    border-color: #3a3630;
  }
  hr {
    border-top-color: #444;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  html {
    background-color: white;
  }
  body {
    background-color: transparent;
    color: black;
    font-size: 11pt;
    max-width: none;
    padding: 0;
  }
  h1 {
    border-bottom-color: #999;
  }
  a {
    color: inherit;
    border-bottom: none;
  }
  blockquote {
    border-left-color: #999;
    background: none;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3, h4 {
    page-break-after: avoid;
  }
}