/* ===== MARKDOWN TABLE STYLES ===== */

/* Scrollable wrapper behavior: make table itself block-scrollable on mobile
   without touching display on the highlight tables (syntax highlighting) */
.post-content-wrapper table,
.post-single-content table,
.main table:not(.highlight table) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9em;
}

/* Header row */
.post-content-wrapper table thead th,
.post-single-content table thead th,
.main table:not(.highlight table) thead th {
  background: var(--bg-3);
  color: var(--accent);
  font-weight: 600;
  padding: 0.6rem 1rem;
  border: 1px solid var(--bg-3);
  white-space: nowrap;
  text-align: left;
}

/* Body cells */
.post-content-wrapper table tbody td,
.post-single-content table tbody td,
.main table:not(.highlight table) tbody td {
  padding: 0.5rem 1rem;
  border: 1px solid var(--bg-3);
  vertical-align: top;
}

/* Zebra stripes */
.post-content-wrapper table tbody tr:nth-child(even),
.post-single-content table tbody tr:nth-child(even),
.main table:not(.highlight table) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}

/* Row hover */
.post-content-wrapper table tbody tr:hover,
.post-single-content table tbody tr:hover,
.main table:not(.highlight table) tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}