/*
  Gedeelde opmaak voor lopende artikeltekst (koppen, alinea's, lijsten, tabellen)
  binnen een element met class="article-content". Gebruikt door kennisbankartikelen
  en door de eigen uitleg op de metaal-/type-pagina's.
*/

.article-content h2:first-child,
.article-content h3:first-child { margin-top: 0; }

.article-content h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
html.dark .article-content h2 { color: #FAFAFA; }

.article-content h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}
html.dark .article-content h3 { color: #FAFAFA; }

.article-content p { margin-bottom: 1rem; line-height: 1.625; }
.article-content p:last-child { margin-bottom: 0; }

.article-content ul,
.article-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.article-content li + li { margin-top: 0.5rem; }

.article-content strong {
  color: #111827;
  font-weight: 600;
}
html.dark .article-content strong { color: #FAFAFA; }

.article-content a {
  color: #0052FF;
  text-decoration: underline;
}
html.dark .article-content a { color: #60A5FA; }

.article-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  border: 1px solid #E5E7EB;
  font-variant-numeric: tabular-nums;
}
html.dark .article-content table { border-color: #27272A; }

.article-content th,
.article-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
  font-size: 0.875rem;
  white-space: nowrap;
}
html.dark .article-content th,
html.dark .article-content td { border-color: #27272A; }

.article-content thead th {
  font-weight: 700;
  color: #111827;
  background-color: #F9FAFB;
}
html.dark .article-content thead th {
  color: #FAFAFA;
  background-color: rgba(24, 24, 27, 0.5);
}

.article-content tbody tr:last-child td { border-bottom: none; }